Hoja de estilo (desarrollo web) - Style sheet (web development)

Una hoja de estilo web es una forma de separación de presentación y contenido para diseño web en la que el marcado (es decir, HTML o XHTML ) de una página web contiene el contenido semántico y la estructura de la página, pero no define su diseño visual (estilo). En cambio, el estilo se define en un archivo de hoja de estilo externo utilizando un lenguaje de hoja de estilo como CSS o XSLT . Este enfoque de diseño se identifica como una "separación" porque reemplaza en gran medida la metodología anterior en la que el marcado de una página definía tanto el estilo como la estructura.

La filosofía que subyace a esta metodología es un caso específico de separación de preocupaciones .

Beneficios

La separación de estilo y contenido tiene ventajas, pero solo se ha vuelto práctica después de las mejoras en las implementaciones de CSS de los navegadores web populares .

Velocidad

En general, la experiencia de los usuarios de un sitio que utiliza hojas de estilo será generalmente más rápida que la de los sitios que no utilizan la tecnología. "En general", ya que la primera página probablemente se cargará más lentamente, porque la hoja de estilo Y el contenido deberán transferirse. Las páginas siguientes se cargarán más rápido porque no será necesario descargar información de estilo; el archivo CSS ya estará en la memoria caché del navegador.

Mantenibilidad

Mantener todos los estilos de presentación en un archivo puede reducir el tiempo de mantenimiento y reduce la posibilidad de error, mejorando así la consistencia de la presentación. Por ejemplo, el color de fuente asociado con un tipo de elemento de texto puede especificarse, y por lo tanto modificarse fácilmente, en todo un sitio web simplemente cambiando una cadena corta de caracteres en un solo archivo. El enfoque alternativo, el uso de estilos incrustados en cada página individual, requeriría una edición engorrosa, lenta y propensa a errores de cada archivo.

Accesibilidad

Los sitios que usan CSS con XHTML o HTML son más fáciles de modificar para que parezcan similares en diferentes navegadores (Chrome, Internet Explorer , Mozilla Firefox , Opera , Safari , etc.).

Los sitios que usan CSS "se degradan con gracia " en los navegadores que no pueden mostrar contenido gráfico, como Lynx , o aquellos que son tan antiguos que no pueden usar CSS. Los navegadores ignoran CSS que no comprenden, como las declaraciones de CSS 3. Esto permite que una amplia variedad de agentes de usuario puedan acceder al contenido de un sitio incluso si no pueden representar la hoja de estilo o no están diseñados con la capacidad gráfica en mente. Por ejemplo, un navegador que utilice una pantalla braille actualizable para la salida podría ignorar por completo la información de diseño y el usuario aún tendría acceso a todo el contenido de la página.

Personalización

Si la información de diseño de una página se almacena externamente, un usuario puede decidir deshabilitar la información de diseño por completo, dejando el contenido desnudo del sitio todavía en una forma legible. Los autores del sitio también pueden ofrecer varias hojas de estilo, que se pueden utilizar para cambiar completamente la apariencia del sitio sin alterar su contenido.

La mayoría de los navegadores web modernos también permiten al usuario definir su propia hoja de estilo, que puede incluir reglas que anulan las reglas de diseño del autor. Esto permite a los usuarios, por ejemplo, poner en negrita todos los hipervínculos en cada página que visitan.

Consistencia

Debido a que el archivo semántico contiene solo los significados que un autor intenta transmitir, el estilo de los diversos elementos del contenido del documento es muy consistente. Por ejemplo, los títulos, el texto enfatizado, las listas y las expresiones matemáticas reciben propiedades de estilo aplicadas de manera consistente desde la hoja de estilo externa. Los autores no necesitan preocuparse por las propiedades del estilo en el momento de la composición. Estos detalles de presentación se pueden diferir hasta el momento de la presentación.

Portabilidad

El aplazamiento de los detalles de la presentación hasta el momento de la presentación significa que un documento se puede reutilizar fácilmente para un medio de presentación completamente diferente con simplemente la aplicación de una nueva hoja de estilo ya preparada para el nuevo medio y consistente con el vocabulario elemental o estructural del documento semántico. Un documento cuidadosamente creado para una página web se puede imprimir fácilmente en un volumen encuadernado completo con encabezados y pies de página, números de página y una tabla de contenido generada simplemente aplicando una nueva hoja de estilo.

Desventajas prácticas hoy

Actualmente, las especificaciones (por ejemplo, XHTML, XSL, CSS) y las herramientas de software que implementan estas especificaciones solo están alcanzando las primeras etapas de madurez. Por lo tanto, hay algunos problemas prácticos que enfrentan los autores que buscan adoptar este método de separar contenido y estilo.

Adopción limitada sin las herramientas de análisis y generación

Si bien las especificaciones de estilo son bastante maduras y aún están madurando, las herramientas de software han tardado en adaptarse. La mayoría de las principales herramientas de desarrollo web todavía adoptan un modelo mixto de presentación y contenido. Por lo tanto, los autores y diseñadores que buscan herramientas basadas en GUI para su trabajo tienen dificultades para seguir el método de la web semántica. Además de las herramientas GUI, los repositorios compartidos para hojas de estilo generalizadas probablemente ayudarían a la adopción de estos métodos.

Ver también

• Separación de intereses

Referencias

enlaces externos

• CSS Zen Garden : un sitio que desafía a los diseñadores a crear nuevos diseños de página sin tocar la fuente XHTML. Incluye docenas de diseños. La fuente CSS se puede ver para cada diseño.