Share
El fin de semana pasado descargué la placa de Skeleton de Dave Gamache para jugar; Buena diversión limpia y receptiva. Cuando se llegó al diseño del formulario, se me recordó un problema que puede afectar a las entradas en diseños flexibles: anchos de mal comportamiento. Si alguna vez has tenido el mismo problema, o nunca lo has notado, sigue leyendo ...
Digamos que tenemos un diseño con un elemento contenedor, que tiene un ancho flexible (estira tu navegador y estirarás el contenedor). Dentro de nuestro contenedor tenemos una variedad de elementos (encabezados, párrafos, reglas horizontales, divs) y también tenemos una forma simple que reproduce algunos bits de forma típica..
Todos los contenidos crecen y se reducen dependiendo del ancho del contenedor. Los elementos de nivel de bloque (como divs) coinciden exactamente con el ancho. Ellos llenan automáticamente el 100% del ancho del contenedor, e independientemente de cualquier relleno o bordes que se mantengan dentro de los límites de sus padres.
Entradas de formulario no.
Para que llenen el ancho del contenedor tenemos que aplicar un ancho: 100%;. Sin embargo, una vez que haya hecho eso, agregar relleno, bordes o márgenes hará que nuestras entradas estallen debido a las restricciones del contenedor. Gorrón.
Bueno en realidad no. El modelo de caja CSS determina la forma en que se comportan las dimensiones de los elementos, y desde que se introdujeron los estándares web, hemos llegado a aceptar ese relleno, márgenes y bordes. añadir a las dimensiones de un elemento.
Así que podría decirse que nuestra división en este caso es la que se comporta inesperadamente, pero eso es solo porque no hemos definido su ancho.
Parece estar manejando las cosas como solía hacerlo Internet Explorer. El enfoque del modo de caprichos significó que usted definió el ancho y la altura de un elemento, y se tendría en cuenta cualquier relleno o bordes dentro esas dimensiones. Si especificara que un div tiene 600px de ancho, incluso si agrega 10px de relleno, todavía tendría 600px de ancho. Usted sabría categóricamente cuán grandes eran sus elementos.
Mientras tengamos conocimiento de cómo se comportaban nuestros elementos, podríamos permitir las diferencias y especificar las dimensiones fijas en consecuencia. Pero en esta era de diseños fluidos, no necesariamente sabemos cuán amplios son los elementos que contienen. Seguramente hay una manera de lograr que nuestras entradas y áreas de texto se comporten de la misma manera que todo lo demás. Afortunadamente hay Y vamos a construir una demo rápida para ilustrarlo..
Como fue el texto de Skeleton lo que me recordó este problema, vamos a buscarlo para construir una demo rápidamente..
Nota: Cualquier estilo dentro de la plantilla Skeleton tiene el propósito de diseño y estética básica, lo que agrego a su css no es una crítica!
Descomprima los archivos y verá algo como esto:
El primer cambio que haré es index.html. En la última columna cambiaremos el contenido por un formulario:
y luego agregaremos un par de líneas a stylesheets / layout.css:
.columna fondo: # f7f7f7; input [type = 'text'], select, textarea width: 100%;
Todo lo que hemos hecho es darle a las columnas un fondo gris (para que podamos ver dónde se encuentran los límites) y hacer que nuestros elementos de formulario sean 100% anchos. Echa un vistazo al resultado hasta ahora. El problema del mal comportamiento de las entradas se ilustra claramente, así que ahora a la solución ...
Podemos hacer que nuestros elementos de formulario se comporten de acuerdo con el antiguo modelo de cuadro de modo de peculiaridades con una línea de css ...
input [type = 'text'], textarea box-sizing: border-box; -mano-caja de tamaño: cuadro de borde; -webkit-box-dimensionamiento: cuadro de borde;
Muy bien, seis líneas, pero la importante es tamaño de caja: caja de borde;, Junto con su vendedor prefijo hermanos. Hemos aplicado esta regla a nuestras entradas de texto y áreas de texto, indicando al navegador que represente sus dimensiones con relleno y bordes. dentro. ¡Echa un vistazo a la demo resultante, perfecto! Cambia el tamaño del navegador y verás que los elementos del formulario se ven bien al igual que sus amigos a nivel de bloque..
En cuanto a la compatibilidad con el navegador, también está cubierto. Irónicamente, IE7 no reconoce la propiedad de tamaño de caja, pero es el único navegador con el que tendrá problemas.
Accentsconagua