Krypton Solid

El problema de los elementos de formulario CSS – Smashing Magazine

El problema de los elementos de formulario CSS – Smashing Magazine

Antes de 1998, el año de nacimiento de CSS Nivel 2, los elementos de formulario ya estaban ampliamente implementados en todos los navegadores principales. La especificación CSS 2 no abordó el problema de cómo se deben presentar los elementos del formulario a los usuarios.

Antes de 1998, el año de nacimiento de CSS Nivel 2, los elementos de formulario ya estaban ampliamente implementados en todos los navegadores principales. La especificación CSS 2 no abordó el problema de cómo se deben presentar los elementos del formulario a los usuarios. Debido a que estos elementos forman parte de la interfaz de usuario de cada documento web, los autores de la especificación prefirieron dejar el diseño visual de dichos elementos en la hoja de estilo predeterminada de los navegadores web.

A lo largo de los años, esta falta de detalle en la especificación CSS ha obligado a los desarrolladores web a producir una cantidad significativa de pruebas y ejemplos cuyo objetivo principal es reducir los elementos del formulario a un denominador visual común para obtener una representación de elementos como el de varios navegadores. como input, select, fieldset, legend y textarea. En este artículo, cubriremos algunos de los patrones CSS utilizados por los desarrolladores web para dominar el diseño visual de los elementos del formulario.

Otras lecturas en SmashingMag:

Pruebas de Roger Johansson

En 2004 y más tarde en 2007, Roger Johansson creó un conjunto de pruebas completo para elementos de formulario y CSS. Estas pruebas seminales, que se pueden encontrar en su artículo “Controles de forma de estilo con CSS, revisados, ”Conducen a la frustrante conclusión que Johansson resume con las siguientes palabras:

“Entonces, ¿qué muestra este experimento? Como ya dije, muestra que usar CSS para diseñar controles de formulario para que se vean exactamente iguales en todos los navegadores y plataformas es imposible. También muestra que la mayoría de los navegadores ignoran muchas propiedades CSS cuando se aplican a controles de formulario «.

A pesar de la verdad subyacente de estas conclusiones, los desarrolladores web continuaron probando ampliamente los estilos CSS en elementos de formulario para encontrar el Santo Grial, o al menos un compromiso razonable entre, la representación predeterminada del navegador y los estilos del autor.

El modelo predeterminado

La especificación CSS 2.1 establece en su propuesta hoja de estilo predeterminada para HTML4 que forman elementos como textarea, input y select son elementos de bloque en línea:

textarea, input, select {
   display: inline-block;
}

Por el contrario, el form y fieldset los elementos son elementos a nivel de bloque:

fieldset, form {
   display: block;
}

El modelo predeterminado propuesto por la especificación CSS se detiene aquí. Todos los demás aspectos visuales de los elementos del formulario. confiar en la hoja de estilo predeterminada del navegador. Sin embargo, las reglas anteriores indican lo siguiente:

  • Los elementos de bloque en línea se pueden diseñar utilizando un contexto de formato en línea. Esto implica el uso de propiedades CSS como line-height y vertical-align para controlar la altura de la caja y su alineación vertical. También se pueden aplicar relleno y márgenes para definir el espacio exterior e interior del cuadro afectado. Además, los elementos de bloque en línea aceptan anchos y alturas porque comparten el modelo de formato de bloque.
  • Los elementos de nivel de bloque se pueden diseñar utilizando el conocido contexto de formato de bloque. Sin embargo, surgen problemas con el fieldset y legend elementos porque legend se basa completamente en los estilos predeterminados proporcionados por los navegadores web.

¿Cómo gestionan los desarrolladores web estos problemas?

Definición de dimensiones

Los desarrolladores web pronto se dieron cuenta de que los navegadores web manejan los elementos de bloques en línea de manera extraña cuando se trata de definir dimensiones. Definir una altura a menudo conduce a resultados inesperados:

input, select {
   width: 120px;
   height: 32px;
}

Los desarrolladores intentaron solucionar este problema convirtiendo estos elementos en elementos a nivel de bloque:

input, select {
   width: 120px; block;
}

Los resultados siguen siendo pobres, excepto por textarea elemento. Un patrón común para resolver este problema es evitar la height propiedad y en su lugar utilizar la font-size y padding propiedades.

Los navegadores no utilizan la misma familia de fuentes y tamaño en estos elementos, por lo que lo primero que debe hacer es normalizarlos:

input, select {
   width: 120px;
   font: 1em Arial, sans-serif;
}

Para ver un ejemplo, consulte la página «CSS: Definición de dimensiones de elementos de formulario”En jsFiddle.

Una vez que la fuente en uso está normalizada, puede agregar relleno para dar algo de espacio interior al cuadro del elemento:

input, select {
   width: 120px;
   font: 1em Arial, sans-serif;
   padding: 3px 6px;
}

La input elementos y textarea también muestran un borde que afecta su modelo de caja:

input[type="text"],
input[type="password"],
textarea {
   border: 1px solid #ccc;
}

La input elementos de los tipos button y submit tener un relleno adicional establecido por los navegadores web. Entonces, una práctica común es normalizarlos:

input[type="button"],
input[type="submit"] {
   padding: 2px;
}

El problema con este enfoque es que Los navegadores web también aplican propiedades específicas del proveedor. a estos elementos, por lo que nuestro relleno no siempre puede normalizar esta propiedad. Por ejemplo, en un navegador basado en Webkit, es posible que tenga esto:

input[type="button"], input[type="submit"],
input[type="reset"], input[type="file"]::-webkit-file-upload-button,
button {
   -webkit-box-align: center;
   text-align: center;
   cursor: default;
   color: buttontext;
   padding: 2px 6px 3px;
   border: 2px outset buttonface;
   border-image: initial;
   background-color: buttonface;
   box-sizing: border-box;
}
input[type="button"], input[type="submit"], input[type="reset"] {
   -webkit-appearance: push-button;
   white-space: pre;
}

El acolchado también se utiliza en fieldset y legend elementos pero con resultados diferentes:

  • Colocando el acolchado en fieldset a 0 restablecerá la sangría predeterminada del legend elementos en algunos navegadores (aunque no en IE).
  • Colocando el acolchado en legend a 0 tiene el efecto de hacer que este elemento se encoja.

Las casillas de selección, las casillas de verificación y los botones de opción se pueden normalizar con buenos resultados con solo unas pocas propiedades, a saber:

  • font-family,
  • font-size,
  • width (en casillas de selección),
  • padding.

La aplicación de otras propiedades a este grupo de elementos a menudo conduce a resultados inconsistentes en todos los navegadores.

Alineación

Los elementos de formulario se pueden alinear vertical u horizontalmente. Se pueden colocar en la misma línea o como un grupo de cajas en varias filas. Para alinearlos en la misma línea, puede seguir uno de estos dos enfoques:

  1. Utilice flotante,
  2. Utilice el contexto de bloque en línea predeterminado en algunos de estos elementos.

Cuando usa flotante, los elementos se convierten automáticamente en elementos a nivel de bloque. Esto significa que los elementos del formulario ahora están sujetos a la nueve reglas que gobiernan los elementos flotantes.

vertical-grid1
Los elementos de formulario se pueden alinear vertical u horizontalmente.

Con flotadores, el principal desafío es lograr una buena alineación vertical en la línea actual. En este caso, usar márgenes verticales o relleno es una práctica común:

input, select {
   width: 120px;
   float: left;
   margin-top: 0.4em;
}

Este enfoque funciona cuando no tiene que alinear cuadros con texto, como con el contenido de un label elemento. En este caso, puede utilizar posicionamiento relativo, relleno o márgenes en el elemento que contiene solo texto:

label {
   float: left;
   padding-top: 0.4em;
   width: 5em;
   margin-right: 1em;
}

Otro problema surge con los botones. En este caso, cuando tienes un botón cuyas dimensiones son mayores a las de otros elementos, puedes forzar su alineación vertical con posicionamiento relativo:

input[type="submit"] {
   float: left;
   width: 90px;
   position: relative;
   top: 0.4em;
}

Este enfoque con El posicionamiento relativo también funciona con casillas de verificación y botones de opción.. El posicionamiento relativo se puede aplicar incluso para normalizar la muesca izquierda del legend elemento dentro de un fieldset elemento, la única diferencia es que usaría el left propiedad en lugar de top.

Al utilizar el formato en línea, puede confiar en el vertical-align propiedad para alinear elementos verticalmente:

label, input[type="text"] {
   vertical-align: middle;
   margin-right: 1em;
}

Se pueden lograr buenos resultados combinando esta propiedad con la line-height propiedad. Sin embargo, esta propiedad debe establecerse en el elemento padre. Si establece esta propiedad directamente en los elementos del formulario, su altura calculada se vería afectada:

.form-row {
   line-height: 1.4;
}

El uso de una altura declarada en el elemento principal también es efectivo cuando se combina con el mismo valor para la altura de la línea:

.form-row {
   line-height: 1.8;
   height: 1.8em;
}

Con el formato en línea, también puede utilizar el text-align propiedad en el elemento padre para alinear elementos a la derecha, izquierda o centro.

El extraño caso de las entradas de archivos

El elemento de entrada del archivo, es decir, <input type=“file”/> – es un caso especial. Este tipo de elemento debe estar siempre visible y reconocible en la interfaz de usuario del navegador por razones de seguridad. Esto implica que los navegadores ignoran deliberadamente algunas reglas de estilo (como las relacionadas con la visibilidad) y tienden a aplicar los algoritmos definidos en su hoja de estilo predeterminada.

Además, la representación predeterminada varía de un navegador a otro: algunos navegadores muestran solo un botón, mientras que otros agregan un campo de texto para mostrar la ruta del archivo cargado.

Los desarrolladores web, sin embargo, pronto encontraron una manera de eludir estas limitaciones. Primero, envolvieron el elemento de entrada en un contenedor:

<form action="" method="post" enctype="multipart/form-data">
   <div class="upload">
      <input type="file" name="upload"/>
   </div>
</form>

Luego, ocultaron el elemento de entrada usando el opacity propiedad y aplicó ciertos estilos al contenedor de la entrada:

.upload {
   width: 157px;
   height: 57px;
   background: url(upload.png) no-repeat;
   overflow: hidden;
}

.upload input {
   display: block !important;
   width: 157px !important;
   height: 57px !important;
   opacity: 0 !important;
   overflow: hidden !important;
}

Observe la !important declaración. Esta es la forma preferida de anular las reglas predeterminadas del navegador.

Para ver un ejemplo, consulte la página «CSS: Estilo de entradas de tipo ‘archivo’”En jsFiddle.

Conclusión

Dominar completamente los elementos del formulario es imposible debido a la falta de detalles en la especificación CSS y debido a los estilos predeterminados aplicados por los navegadores web. Sin embargo, siguiendo algunas prácticas comunes, es posible reducir (aunque no eliminar) las diferencias y lograr buenos resultados visuales.

Deja un comentario