Hoja de estilo (desarrollo web)

Este artículo necesita citas adicionales para su verificación . Por favor, ayude a mejorar este artículo añadiendo citas de fuentes fiables . El material sin fuentes puede ser cuestionado y eliminado. Buscar fuentes:  «Hoja de estilo» desarrollo web – noticias  · periódicos  · libros  · académico  · JSTOR ( marzo de 2014 ) ( Aprenda cómo y cuándo eliminar este mensaje )

Una hoja de estilo web es una forma de separar el contenido y la presentación para el 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 .

La separación de estilo y contenido tiene ventajas, ^{[1] [2]} pero sólo se ha vuelto práctica después de las mejoras en las implementaciones de CSS de los navegadores web más populares .

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 esta tecnología. En general, la primera página probablemente se cargará más lentamente, porque será necesario transferir la hoja de estilo y el contenido. Las páginas posteriores 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 .

Mantener todos los estilos de presentación en un solo archivo puede reducir el tiempo de mantenimiento y 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 se puede especificar (y, por lo tanto, modificar fácilmente) en todo un sitio web simplemente cambiando una cadena corta de caracteres en un solo archivo. El enfoque alternativo, utilizando estilos integrados en cada página individual, requeriría una edición engorrosa, lenta y propensa a errores de cada archivo.

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 utilizan CSS se " degradan con elegancia " en navegadores que no pueden mostrar contenido gráfico, como Lynx , o aquellos tan antiguos que no pueden usar CSS. Los navegadores ignoran el CSS que no entienden, como las declaraciones CSS 3. Esto permite que una amplia variedad de agentes de usuario puedan acceder al contenido de un sitio incluso si no pueden mostrar la hoja de estilo o no están diseñados con 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 seguiría teniendo acceso a todo el contenido de la página.

Si la información de diseño de una página se almacena externamente, un usuario puede decidir desactivarla por completo, dejando el contenido del sitio en un formato legible. Los autores de sitios también pueden ofrecer varias hojas de estilo, que se pueden utilizar para cambiar por completo la apariencia del sitio sin alterar ninguno de sus contenidos.

La mayoría de los navegadores web modernos también permiten al usuario definir su propia hoja de estilo, que puede incluir reglas que invalidan las reglas de diseño del autor. Esto permite a los usuarios, por ejemplo, poner en negrita todos los hipervínculos de todas las páginas que visitan. Se han creado extensiones de navegador como Stylish y Stylus para facilitar la gestión de dichas hojas de estilo del usuario.

Como el archivo semántico contiene únicamente los significados que el autor pretende transmitir, el estilo de los distintos elementos del contenido del documento es muy uniforme. Por ejemplo, los encabezados, el texto destacado, las listas y las expresiones matemáticas reciben propiedades de estilo aplicadas de manera uniforme desde la hoja de estilo externa. Los autores no necesitan preocuparse por las propiedades de estilo en el momento de la composición. Estos detalles de presentación se pueden posponer hasta el momento de la presentación.

El hecho de aplazar los detalles de presentación hasta el momento de la presentación significa que un documento puede reutilizarse fácilmente para un medio de presentación completamente diferente con solo aplicar una nueva hoja de estilo ya preparada para el nuevo medio y que sea coherente con el vocabulario elemental o estructural del documento semántico. Un documento cuidadosamente redactado para una página web se puede imprimir fácilmente en un volumen de tapa dura con encabezados y pies de página, números de página y una tabla de contenidos generada simplemente aplicando una nueva hoja de estilo.

Actualmente, las especificaciones (por ejemplo, XHTML, XSL, CSS) y las herramientas de software que las implementan están apenas en las primeras etapas de madurez, por lo que los autores que buscan adoptar este método de separación de contenido y estilo se enfrentan a algunos problemas prácticos.

Si bien las especificaciones de estilo son bastante maduras y aún están en proceso de maduración, las herramientas de software han tardado en adaptarse. La mayoría de las principales herramientas de desarrollo web aún adoptan un modelo mixto de presentación y contenido. Por lo tanto, a los autores y diseñadores que buscan herramientas basadas en GUI para su trabajo les resulta difícil 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.

• Separación de preocupaciones

• CSS Zen Garden: un sitio que desafía a los diseñadores a crear nuevos diseños de página sin tocar el código fuente XHTML. Incluye docenas de diseños. Se puede ver el código fuente CSS de cada diseño.