Las hojas de estilo en cascada ( CSS ) son un lenguaje de hojas de estilo que se utiliza para especificar la presentación y el estilo de un documento escrito en un lenguaje de marcado como HTML o XML (incluidos dialectos XML como SVG , MathML o XHTML ). [1] CSS es una tecnología fundamental de la World Wide Web , junto con HTML y JavaScript . [2]
CSS está diseñado para permitir la separación de contenido y presentación , incluido el diseño , los colores y las fuentes . [3] Esta separación puede mejorar la accesibilidad del contenido ; [ se necesitan más explicaciones ] proporcionan más flexibilidad y control en la especificación de las características de presentación; permitir que varias páginas web compartan formato especificando el CSS relevante en un archivo .css separado, lo que reduce la complejidad y la repetición en el contenido estructural; y habilite el almacenamiento en caché del archivo .css para mejorar la velocidad de carga de la página entre las páginas que comparten el archivo y su formato.
La separación de formato y contenido también hace posible presentar la misma página de marcado en diferentes estilos para diferentes métodos de representación, como en pantalla, impresa, por voz (a través de un navegador basado en voz o un lector de pantalla ) y en formato Braille. dispositivos táctiles. CSS también tiene reglas para formatos alternativos si se accede al contenido desde un dispositivo móvil . [4]
El nombre cascada proviene del esquema de prioridad especificado para determinar qué declaración se aplica si más de una declaración de una propiedad coincide con un elemento en particular. Este esquema de prioridades en cascada es predecible.
Las especificaciones CSS son mantenidas por el World Wide Web Consortium (W3C). El tipo de medio de Internet ( tipo MIME ) text/cssestá registrado para su uso con CSS en RFC 2318 (marzo de 1998). El W3C opera un servicio gratuito de validación de CSS para documentos CSS. [5]
Además de HTML, otros lenguajes de marcado admiten el uso de CSS, incluidos XHTML , XML simple , SVG y XUL . CSS también se utiliza en el kit de herramientas del widget GTK .
CSS tiene una sintaxis simple y utiliza varias palabras clave en inglés para especificar los nombres de varias propiedades de estilo.
Una hoja de estilo consta de una lista de reglas . Cada regla o conjunto de reglas consta de uno o más selectores y un bloque de declaración .
En CSS, los selectores declaran a qué parte del marcado se aplica un estilo haciendo coincidir etiquetas y atributos en el marcado mismo.
Los selectores pueden aplicar a lo siguiente:
#id.classname , por ejemplo (la frase "clase CSS", aunque a veces se usa, es un nombre inapropiado, ya que las clases de elementos, especificadas con el atributo de clase HTML , son una característica de marcado que es distinto del subsistema CSS de los navegadores y los estándares relacionados W3C/WHATWG funcionan con estilos de documentos; consulte RDF y microformatos para conocer los orígenes del sistema de "clases" del modelo de contenido web)Las clases y los ID distinguen entre mayúsculas y minúsculas, comienzan con letras y pueden incluir caracteres alfanuméricos, guiones y guiones bajos. Una clase puede aplicarse a cualquier número de instancias de cualquier elemento. Un ID solo se puede aplicar a un único elemento.
Las pseudoclases se utilizan en los selectores de CSS para permitir el formato basado en información que no está contenida en el árbol del documento.
Un ejemplo de pseudoclase ampliamente utilizada es , que identifica el contenido sólo cuando el usuario "señala" el elemento visible, normalmente manteniendo el cursor del ratón sobre él. Se agrega a un selector como en o . :hovera:hover#elementid:hover
Una pseudoclase clasifica elementos del documento, como o , mientras que un pseudoelemento realiza una selección que puede consistir en elementos parciales, como o . [6] Tenga en cuenta la distinción entre la notación de dos puntos utilizada para pseudoelementos y la notación de dos puntos utilizada para pseudoclases.:link:visited::first-line::first-letter
Se pueden unir múltiples selectores simples usando combinadores para especificar elementos por ubicación, tipo de elemento, identificación, clase o cualquier combinación de los mismos. [7] El orden de los selectores es importante. Por ejemplo, se aplica a todos los elementos de la clase myClass que están dentro de elementos div, mientras que se aplica a todos los elementos div que están dentro de elementos de la clase myClass. Esto no debe confundirse con identificadores concatenados como los que se aplican a los elementos div de la clase myClass.div .myClass {color: red;}.myClass div {color: red;}div.myClass {color: red;}
La siguiente tabla proporciona un resumen de la sintaxis del selector que indica el uso y la versión de CSS que lo introdujo. [8]
Un bloque de declaración consta de un par de llaves ( {}) que encierran una lista de declaraciones separadas por punto y coma . [9]
Cada declaración consta de una propiedad , dos puntos ( :) y un valor . Los espacios en blanco opcionales pueden estar alrededor del bloque de declaración, las declaraciones, los dos puntos y el punto y coma para facilitar la lectura. [10]
Las propiedades se especifican en el estándar CSS. Cada propiedad tiene un conjunto de valores posibles. Algunas propiedades pueden afectar a cualquier tipo de elemento y otras se aplican sólo a grupos particulares de elementos. [11] [12]
Los valores pueden ser palabras clave, como "centro" o "heredar", o valores numéricos, como 200px(200 píxeles), 50vw(50 por ciento del ancho de la ventana gráfica) o 80% (80 por ciento del ancho del elemento principal).
Los valores de color se pueden especificar con palabras clave (p. ej., " red"), valores hexadecimales (p. ej. , también abreviados como ), valores RGB en una escala de 0 a 255 (p. ej. ), valores RGBA que especifican tanto el color como la transparencia alfa (p. ej. ), o HSL o valores HSLA (p. ej. , ). [13]#FF0000#F00rgb(255, 0, 0)rgba(255, 0, 0, 0.8)hsl(000, 100%, 50%)hsla(000, 100%, 50%, 80%)
Los valores numéricos distintos de cero que representan medidas lineales deben incluir una unidad de longitud, que es un código alfabético o una abreviatura, como en 200pxo 50vw; o un signo de porcentaje, como en 80%. Algunas unidades – cm( centímetro ); in( pulgada ); mm( milímetro ); pc( pica ); y pt( punto ) – son absolutos , lo que significa que la dimensión representada no depende de la estructura de la página; otros – em( em ); ex( ex ) y px( píxel ) [ aclaración necesaria ] – son relativos , lo que significa que factores como el tamaño de fuente de un elemento principal pueden afectar la medida renderizada. Estas ocho unidades eran una característica de CSS 1 [14] y se mantuvieron en todas las revisiones posteriores. El Módulo de Unidades y Valores CSS Nivel 3 propuesto, si se adopta como Recomendación del W3C, proporcionará siete unidades de longitud adicionales: ch; Q; rem; vh; vmax; vmin; y vw. [15]
Antes de CSS, casi todos los atributos de presentación de los documentos HTML estaban contenidos en el formato HTML. Todos los colores de fuente, estilos de fondo, alineaciones de elementos, bordes y tamaños debían describirse explícitamente, a menudo repetidamente, dentro del HTML. CSS permite a los autores mover gran parte de esa información a otro archivo, la hoja de estilos, lo que da como resultado un HTML considerablemente más simple. Y además, a medida que más y más dispositivos pueden acceder a páginas web responsivas, comienzan a aparecer diferentes tamaños y diseños de pantalla. Personalizar un sitio web para cada tamaño de dispositivo es costoso y cada vez más difícil. La naturaleza modular de CSS significa que los estilos se pueden reutilizar en diferentes partes de un sitio o incluso entre sitios, promoviendo la coherencia y la eficiencia.
Por ejemplo, los títulos ( h1elementos), subtítulos ( h2), subsubtítulos ( h3), etc., se definen estructuralmente utilizando HTML. En la impresión y en la pantalla, la elección de la fuente , el tamaño , el color y el énfasis de estos elementos es de presentación .
Antes de CSS, los autores de documentos que querían asignar tales características tipográficash2 a, por ejemplo, todos los encabezados tenían que repetir el marcado de presentación HTML para cada aparición de ese tipo de encabezado. Esto hizo que los documentos fueran más complejos, más grandes, más propensos a errores y difíciles de mantener. CSS permite la separación de la presentación de la estructura. CSS puede definir el color, la fuente, la alineación del texto, el tamaño, los bordes, el espaciado, el diseño y muchas otras características tipográficas, y puede hacerlo de forma independiente para las vistas impresas y en pantalla. CSS también define estilos no visuales, como la velocidad de lectura y el énfasis para los lectores de texto auditivos. El W3C ahora ha desaprobado el uso de todo el marcado HTML de presentación. [dieciséis]
Por ejemplo, en HTML anterior a CSS, un elemento de encabezado definido con texto rojo se escribiría como:
< h1 >< font color = "red" > Capítulo 1. </ font </ h1 >Usando CSS, el mismo elemento se puede codificar usando propiedades de estilo en lugar de atributos de presentación HTML:
< h1 estilo = "color: rojo;" > Capítulo 1. </h1> _Es posible que las ventajas de esto no queden claras de inmediato, pero el poder de CSS se vuelve más evidente cuando las propiedades de estilo se colocan en un elemento de estilo interno o, mejor aún, en un archivo CSS externo. Por ejemplo, supongamos que el documento contiene el elemento de estilo:
<estilo> h1 { color : rojo ; _ _ } </estilo> _ _ Todos h1los elementos del documento se volverán rojos automáticamente sin necesidad de ningún código explícito. Si más tarde el autor quisiera que h1los elementos fueran azules, podría hacerlo cambiando el elemento de estilo a:
<estilo> h1 { color : azul ; _ _ } </estilo> _ _ en lugar de revisar laboriosamente el documento y cambiar el color de cada h1elemento individual.
Los estilos también se pueden colocar en un archivo CSS externo, como se describe a continuación, y cargar usando una sintaxis similar a:
< enlace href = "ruta/al/archivo.css" rel = "hoja de estilo" tipo = "texto/css" >Esto desacopla aún más el estilo del documento HTML y permite cambiar el estilo de varios documentos simplemente editando un archivo CSS externo compartido.
CSS, u hojas de estilo en cascada, ofrece una forma flexible de diseñar contenido web, con estilos que se originan en los valores predeterminados del navegador, las preferencias del usuario o los diseñadores web. Estos estilos se pueden aplicar en línea, dentro de un documento HTML o mediante archivos .css externos para una mayor coherencia. Esto no solo simplifica el desarrollo web al promover la reutilización y el mantenimiento, sino que también mejora el rendimiento del sitio porque los estilos se pueden descargar en archivos .css dedicados que los navegadores pueden almacenar en caché. Además, incluso si los estilos no se pueden cargar o están deshabilitados, esta separación mantiene la accesibilidad y legibilidad del contenido, asegurando que el sitio sea utilizable para todos los usuarios, incluidos aquellos con discapacidades. Su enfoque multifacético, que incluye consideraciones sobre la especificidad del selector, el orden de las reglas y los tipos de medios, garantiza que los sitios web sean visualmente coherentes y adaptables a diferentes dispositivos y necesidades del usuario, logrando un equilibrio entre la intención del diseño y la accesibilidad del usuario.
Se pueden importar varias hojas de estilo. Se pueden aplicar diferentes estilos según el dispositivo de salida que se utilice; por ejemplo, la versión en pantalla puede ser bastante diferente de la versión impresa, por lo que los autores pueden adaptar la presentación adecuadamente a cada medio.
La hoja de estilo con mayor prioridad controla la visualización del contenido. Las declaraciones que no se establecen en la fuente de mayor prioridad se pasan a una fuente de menor prioridad, como el estilo del agente de usuario. El proceso se llama cascada .
Uno de los objetivos de CSS es permitir a los usuarios un mayor control sobre la presentación . Alguien a quien le resulte difícil leer los títulos en cursiva roja puede aplicar una hoja de estilo diferente. Dependiendo del navegador y del sitio web, un usuario puede elegir entre varias hojas de estilo proporcionadas por los diseñadores, o puede eliminar todos los estilos agregados y ver el sitio usando el estilo predeterminado del navegador, o puede anular solo el estilo del encabezado en cursiva roja sin alterar otros. atributos. Se han creado extensiones de navegador como Stylish y Stylus para facilitar la gestión de dichas hojas de estilo de usuario. En el caso de proyectos grandes, se puede utilizar la cascada para determinar qué estilo tiene mayor prioridad cuando los desarrolladores integran estilos de terceros que tienen prioridades conflictivas, y para resolver aún más esos conflictos. Además, la conexión en cascada puede ayudar a crear diseños temáticos, lo que ayuda a los diseñadores a ajustar aspectos de un diseño sin comprometer el diseño general.
La especificidad se refiere a los pesos relativos de varias reglas. [17] Determina qué estilos se aplican a un elemento cuando se podría aplicar más de una regla. Según la especificación, un selector simple (por ejemplo, H1) tiene una especificidad de 1, los selectores de clase tienen una especificidad de 1,0 y los selectores de ID tienen una especificidad de 1,0,0. Debido a que los valores de especificidad no se transfieren como en el sistema decimal, se utilizan comas para separar los "dígitos" [18] (una regla CSS que tenga 11 elementos y 11 clases tendría una especificidad de 11,11, no 121).
Así los selectores de la siguiente regla dan como resultado la especificidad indicada:
Considere este fragmento de HTML:
<!DOCTYPE html> < html > < head > < meta charset = "utf-8" > < estilo > # xyz { color : azul ; } </ estilo > </ cabeza > < cuerpo > < p id = "xyz" estilo = "color: verde;" > Para demostrar especificidad </ p > < </ body > </ html > En el ejemplo anterior, la declaración en el styleatributo anula la del <style>elemento porque tiene una mayor especificidad y, por lo tanto, el párrafo aparece en verde:
Para demostrar especificidad
La herencia es una característica clave en CSS; depende de la relación ancestro-descendiente para operar. La herencia es el mecanismo por el cual las propiedades se aplican no sólo a un elemento específico sino también a sus descendientes. [17] La herencia se basa en el árbol del documento, que es la jerarquía de elementos XHTML en una página basada en el anidamiento. Los elementos descendientes pueden heredar valores de propiedades CSS de cualquier elemento ancestro que los incluya. En general, los elementos descendientes heredan propiedades relacionadas con el texto, pero sus propiedades relacionadas con el cuadro no se heredan. Las propiedades que se pueden heredar son color, fuente, espaciado entre letras, alto de línea, estilo de lista, alineación de texto, sangría de texto, transformación de texto, visibilidad, espacios en blanco y espaciado entre palabras. Las propiedades que no se pueden heredar son fondo, borde, visualización, flotante y claro, altura y ancho, margen, altura y ancho mínimo y máximo, contorno, desbordamiento, relleno, posición, decoración de texto, alineación vertical y índice z.
La herencia se puede utilizar para evitar declarar ciertas propiedades una y otra vez en una hoja de estilo, lo que permite un CSS más corto.
No es lo mismo la herencia en CSS que la herencia en los lenguajes de programación basados en clases , donde es posible definir la clase B como "como la clase A, pero con modificaciones". [19] Con CSS, es posible diseñar un elemento con "clase A, pero con modificaciones". Sin embargo, no es posible definir una clase B de CSS como esa, que luego podría usarse para diseñar múltiples elementos sin tener que repetir las modificaciones.
Dada la siguiente hoja de estilo:
pag { color : rosa ; } Supongamos que hay un elemento ap con un elemento de énfasis (<em>) dentro:
< p > Esto es para < em > ilustrar </ em > herencia </ p >Si no se asigna ningún color al elemento em, la palabra resaltada "ilustrar" hereda el color del elemento principal, p. La hoja de estilo p tiene el color rosa, por lo tanto, el elemento em también es rosa:
Esto es para ilustrar la herencia.
Se ignora el espacio en blanco entre las propiedades y los selectores. Este fragmento de código:
cuerpo { desbordamiento : oculto ; fondo : #000000 ; imagen de fondo : URL ( imágenes/bg.gif ); repetición de fondo : sin repetición ; posición de fondo : arriba izquierda ;} es funcionalmente equivalente a este:
cuerpo { desbordamiento : oculto ; color de fondo : #000000 ; imagen de fondo : URL ( imágenes/bg.gif ); repetición de fondo : sin repetición ; posición de fondo : arriba a la izquierda ; } Una forma común de formatear CSS para facilitar la lectura es sangrar cada propiedad y darle su propia línea. Además de formatear CSS para facilitar la lectura, se pueden usar propiedades abreviadas para escribir el código más rápido, lo que también se procesa más rápidamente cuando se procesa: [20]
cuerpo { desbordamiento : oculto ; fondo : #000 URL ( images/bg.gif ) arriba a la izquierda sin repetición ; } A veces, varios valores de propiedad tienen sangría en su propia línea:
@ font-face { font-family : 'Comic Sans' ; tamaño de fuente : 20px ; src : url ( 'primer.ejemplo.com' ), url ( 'segundo.ejemplo.com' ), url ( 'tercer.ejemplo.com' ), url ( 'cuarto.ejemplo.com' ); } CSS 2.1 define tres esquemas de posicionamiento:
Hay cinco valores posibles de la positionpropiedad. Si un elemento se coloca de otra manera que no sea static, entonces las propiedades adicionales top, bottom, lefty rightse utilizan para especificar desplazamientos y posiciones. El elemento que tiene una posición estática no se ve afectado por las propiedades , topo . bottomleftright
El valor predeterminado coloca el artículo en el flujo normal .
El artículo se coloca en el flujo normal y luego se desplaza o se desplaza desde esa posición. Los elementos del flujo posterior se disponen como si no se hubieran movido.
Especifica el posicionamiento absoluto . El elemento se posiciona en relación con su ancestro no estático más cercano.
El elemento se coloca absolutamente en una posición fija en la pantalla incluso mientras se desplaza el resto del documento [21]
La floatpropiedad puede tener uno de tres valores. Los elementos absolutamente posicionados o fijos no pueden flotar. Otros elementos normalmente fluyen alrededor de elementos flotantes, a menos que su propiedad se lo impida clear.
clear:leftclear:rightclear:both
CSS fue propuesto por primera vez por Håkon Wium Lie el 10 de octubre de 1994. [23] En ese momento, Lie estaba trabajando con Tim Berners-Lee en el CERN . [24] Se propusieron varios otros lenguajes de hojas de estilo para la web casi al mismo tiempo, y las discusiones en listas de correo públicas y dentro del Consorcio World Wide Web dieron como resultado la primera Recomendación CSS del W3C (CSS1) [25] que se publicó en 1996. En particular , una propuesta de Bert Bos fue influyente; se convirtió en coautor de CSS1 y se le considera cocreador de CSS. [26]
Las hojas de estilo han existido de una forma u otra desde los inicios del Lenguaje de marcado generalizado estándar ( SGML ) en la década de 1980, y CSS se desarrolló para proporcionar hojas de estilo para la web. [27] Un requisito para un lenguaje de hojas de estilo web era que las hojas de estilo provinieran de diferentes fuentes en la web. Por lo tanto, los lenguajes de hojas de estilo existentes como DSSSL y FOSI no eran adecuados. CSS, por otro lado, permite que el estilo de un documento se vea influenciado por múltiples hojas de estilo a través de estilos "en cascada". [27]
A medida que HTML creció, llegó a abarcar una variedad más amplia de capacidades estilísticas para satisfacer las demandas de los desarrolladores web . Esta evolución le dio al diseñador más control sobre la apariencia del sitio, a costa de un HTML más complejo. Las variaciones en las implementaciones de los navegadores web , como ViolaWWW y WorldWideWeb , [28] dificultaban la apariencia consistente del sitio y los usuarios tenían menos control sobre cómo se mostraba el contenido web. El navegador/editor desarrollado por Tim Berners-Lee tenía hojas de estilo codificadas en el programa. Por lo tanto, las hojas de estilo no se pueden vincular a documentos en la web. [24] Robert Cailliau , también del CERN, quería separar la estructura de la presentación para que diferentes hojas de estilo pudieran describir diferentes presentaciones para impresión, presentaciones en pantalla y editores. [28]
Mejorar las capacidades de presentación web fue un tema de interés para muchos en la comunidad web y se propusieron nueve lenguajes de hojas de estilo diferentes en la lista de correo de estilo www. [27] De estas nueve propuestas, dos fueron especialmente influyentes en lo que se convirtió en CSS: las hojas de estilo HTML en cascada [23] y la propuesta de hoja de estilo basada en secuencias (SSP). [26] [29] Dos navegadores sirvieron como bancos de pruebas para las propuestas iniciales; Lie trabajó con Yves Lafon para implementar CSS en el navegador Arena de Dave Raggett . [30] [31] [32] Bert Bos implementó su propia propuesta SSP en el navegador Argo . [26] A partir de entonces, Lie y Bos trabajaron juntos para desarrollar el estándar CSS (la 'H' se eliminó del nombre porque estas hojas de estilo también podían aplicarse a otros lenguajes de marcado además de HTML). [24]
La propuesta de Lie fue presentada en la conferencia "Mosaic and the Web" (más tarde llamada WWW2) en Chicago, Illinois en 1994, y nuevamente con Bert Bos en 1995. [24] Por esta época ya se estaba estableciendo el W3C y se interesó en el desarrollo de CSS. Con ese fin organizó un taller presidido por Steven Pemberton . Esto dio como resultado que el W3C agregara trabajo sobre CSS a los entregables del consejo de revisión editorial de HTML (ERB). Lie y Bos fueron el personal técnico principal en este aspecto del proyecto, y también participaron miembros adicionales, incluido Thomas Reardon de Microsoft. En agosto de 1996, Netscape Communication Corporation presentó un lenguaje de hojas de estilo alternativo llamado JavaScript Style Sheets (JSSS). [24] La especificación nunca se completó y está en desuso. [33] A finales de 1996, CSS estaba listo para convertirse en oficial y en diciembre se publicó la Recomendación CSS nivel 1.
El desarrollo de HTML, CSS y DOM se había llevado a cabo en un grupo, el Comité de Revisión Editorial de HTML (ERB). A principios de 1997, el ERB se dividió en tres grupos de trabajo: el Grupo de Trabajo HTML , presidido por Dan Connolly del W3C; Grupo de trabajo DOM, presidido por Lauren Wood de SoftQuad ; y el Grupo de Trabajo CSS , presidido por Chris Lilley del W3C.
El Grupo de Trabajo de CSS comenzó a abordar cuestiones que no se habían abordado con el nivel 1 de CSS, lo que resultó en la creación del nivel 2 de CSS el 4 de noviembre de 1997. Se publicó como Recomendación del W3C el 12 de mayo de 1998. El nivel 3 de CSS, que fue Comenzó en 1998 y todavía está en desarrollo en 2014 [actualizar].
En 2005, los grupos de trabajo de CSS decidieron hacer cumplir los requisitos de las normas de manera más estricta. Esto significó que los estándares ya publicados como CSS 2.1, Selectores CSS 3 y Texto CSS 3 fueron retirados del nivel de Recomendación candidata al nivel de Borrador de trabajo.
La especificación CSS 1 se completó en 1996. Ese año se lanzó Internet Explorer 3 [24] de Microsoft, con cierto soporte limitado para CSS. IE 4 y Netscape 4.x agregaron más soporte, pero generalmente estaba incompleto y tenía muchos errores que impedían que CSS se adoptara de manera útil. Pasaron más de tres años antes de que cualquier navegador web lograra una implementación casi completa de la especificación. Internet Explorer 5.0 para Macintosh , lanzado en marzo de 2000, fue el primer navegador en tener soporte completo (más del 99 por ciento) de CSS 1, [34] superando a Opera , que había sido el líder desde la introducción del soporte CSS quince meses antes. Poco después le siguieron otros navegadores, y muchos de ellos implementaron además partes de CSS 2.
Sin embargo, incluso cuando los navegadores web posteriores de la "versión 5" comenzaron a ofrecer una implementación bastante completa de CSS, todavía eran incorrectos en ciertas áreas. Estaban plagados de inconsistencias, errores y otras peculiaridades . Microsoft Internet Explorer 5. x para Windows , a diferencia del muy diferente IE para Macintosh , tenía una implementación defectuosa del modelo de caja CSS , en comparación con los estándares CSS. Tales inconsistencias y variaciones en el soporte de funciones dificultaron que los diseñadores lograran una apariencia consistente en todos los navegadores y plataformas sin el uso de soluciones alternativas denominadas hacks y filtros CSS . Los errores del modelo de caja de Windows de IE eran tan graves que, cuando se lanzó Internet Explorer 6 , Microsoft introdujo un modo de interpretación de CSS compatible con versiones anteriores (" modo peculiar ") junto con un "modo estándar" alternativo corregido. Otros navegadores que no son de Microsoft también ofrecen capacidades de cambio de modo. Por lo tanto, se hizo necesario que los autores de archivos HTML se aseguraran de que contuvieran un marcador especial distintivo "CSS previsto para cumplir con los estándares" para mostrar que los autores pretendían que el CSS se interpretara correctamente, de conformidad con los estándares, en lugar de estar destinado al formato actual. Navegador IE5/Windows obsoleto hace mucho tiempo . Sin este marcador, los navegadores web con la capacidad de cambiar el "modo peculiar" dimensionarán los objetos en las páginas web como lo haría IE 5 en Windows, en lugar de seguir los estándares CSS.
Los problemas con la adopción irregular de CSS y las erratas en la especificación original llevaron al W3C a revisar los estándares CSS 2 a CSS 2.1, que se acercó más a una instantánea funcional del soporte actual de CSS en los navegadores HTML. Se eliminaron algunas propiedades de CSS 2 que ningún navegador implementó con éxito y, en algunos casos, se cambiaron los comportamientos definidos para alinear el estándar con las implementaciones existentes predominantes. CSS 2.1 se convirtió en Candidato a Recomendación el 25 de febrero de 2004, pero CSS 2.1 volvió al estado de Borrador de Trabajo el 13 de junio de 2005, [35] y sólo volvió al estado de Candidato a Recomendación el 19 de julio de 2007. [36]
Además de estos problemas, la .cssextensión fue utilizada por un producto de software utilizado para convertir archivos de PowerPoint en archivos de presentación compacta de diapositivas, [37]
por lo que algunos servidores web sirvieron todos .css[38] como tipo MIME application/x-pointplus[39] en lugar de text/css.
Los proveedores de navegadores individuales introdujeron ocasionalmente nuevos parámetros antes de la estandarización y universalización. Para evitar interferir con implementaciones futuras, los proveedores antepusieron nombres únicos a los parámetros, como -moz-Mozilla Firefox , -webkit-llamado así por el motor de navegación de Apple Safari , Opera Browser y Microsoft Internet Explorer y las primeras versiones de Microsoft Edge que usan EdgeHTML.-o--ms-
Ocasionalmente, los parámetros con prefijos de proveedor como -moz-radial-gradienty -webkit-linear-gradienttienen una sintaxis ligeramente diferente en comparación con sus contrapartes sin prefijo de proveedor. [40]
Las propiedades prefijadas quedan obsoletas en el momento de la estandarización. Hay programas disponibles para agregar automáticamente prefijos para navegadores más antiguos y para señalar versiones estandarizadas de parámetros con prefijos. Dado que los prefijos están limitados a un pequeño subconjunto de navegadores, eliminar el prefijo permite que otros navegadores vean la funcionalidad. Una excepción son ciertas -webkit-propiedades con prefijos obsoletas, que son tan comunes y persistentes en la web que otras familias de navegadores han decidido admitirlas por motivos de compatibilidad. [41]
CSS tiene varios niveles y perfiles. Cada nivel de CSS se basa en el último, por lo general agrega nuevas funciones y normalmente se denomina [42] como CSS 1, CSS 2, CSS 3 y CSS 4. Los perfiles suelen ser un subconjunto de uno o más niveles de CSS creados para un dispositivo en particular. o interfaz de usuario. Actualmente existen perfiles para dispositivos móviles, impresoras y televisores. Los perfiles no deben confundirse con los tipos de medios, que se agregaron en CSS 2.
La primera especificación CSS que se convirtió en una recomendación oficial del W3C es CSS nivel 1, publicada el 17 de diciembre de 1996. Håkon Wium Lie y Bert Bos son acreditados como los desarrolladores originales. [43] [44] Entre sus capacidades se encuentran el soporte para
El W3C ya no mantiene la Recomendación CSS 1. [45]
La especificación CSS nivel 2 fue desarrollada por el W3C y publicada como recomendación en mayo de 1998. CSS 2, un superconjunto de CSS 1, incluye una serie de capacidades nuevas como posicionamiento absoluto, relativo y fijo de elementos e índice z , el concepto de tipos de medios, soporte para hojas de estilo auditivo (que luego fueron reemplazadas por los módulos de voz CSS 3) [46] y texto bidireccional, y nuevas propiedades de fuente como sombras.
El W3C ya no mantiene la recomendación CSS 2. [47]
CSS nivel 2 revisión 1, a menudo denominado "CSS 2.1", corrige errores en CSS 2, elimina características poco compatibles o que no son completamente interoperables y agrega extensiones de navegador ya implementadas a la especificación. Para cumplir con el proceso del W3C para estandarizar especificaciones técnicas, CSS 2.1 oscilaba entre el estado de borrador de trabajo y el estado de recomendación candidata durante muchos años. CSS 2.1 se convirtió por primera vez en candidata a recomendación el 25 de febrero de 2004, pero volvió a ser un borrador de trabajo el 13 de junio de 2005 para su posterior revisión. Regresó a la Recomendación candidata el 19 de julio de 2007 y luego se actualizó dos veces en 2009. Sin embargo, debido a que se realizaron cambios y aclaraciones, volvió nuevamente al Borrador de trabajo de la última convocatoria el 7 de diciembre de 2010.
CSS 2.1 pasó a Recomendación propuesta el 12 de abril de 2011. [48] Después de ser revisado por el Comité Asesor del W3C, finalmente se publicó como Recomendación del W3C el 7 de junio de 2011. [49]
CSS 2.1 se planeó como la primera y última revisión del nivel 2, pero el trabajo de baja prioridad en CSS 2.2 comenzó en 2015.
A diferencia de CSS 2, que es una gran especificación única que define varias características, CSS 3 se divide en varios documentos separados llamados "módulos". Cada módulo agrega nuevas capacidades o amplía las funciones definidas en CSS 2, preservando la compatibilidad con versiones anteriores. El trabajo en CSS nivel 3 comenzó aproximadamente en el momento de la publicación de la recomendación original de CSS 2. Los primeros borradores de CSS 3 se publicaron en junio de 1999. [50]
Debido a la modularización, diferentes módulos tienen diferentes estabilidades y estados. [51]
Algunos módulos tienen estado de Recomendación de Candidato ( CR ) y se consideran moderadamente estables. En la etapa CR , se recomienda que las implementaciones eliminen los prefijos de proveedores. [52]
No existe una especificación CSS4 única e integrada, [54] porque la especificación se ha dividido en muchos módulos separados que se nivelan de forma independiente.
Los módulos que se basan en elementos del Nivel 2 de CSS comenzaron en el Nivel 3. Algunos de ellos ya alcanzaron el Nivel 4 o ya se están acercando al Nivel 5. Otros módulos que definen una funcionalidad completamente nueva, como Flexbox , [55] han sido designados como Nivel 1. y algunos de ellos se están acercando al Nivel 2.
El Grupo de Trabajo CSS a veces publica "Instantáneas", una colección de módulos completos y partes de otros borradores que se consideran lo suficientemente estables como para ser implementados por los desarrolladores de navegadores. Hasta ahora, se han publicado cinco documentos de "mejores prácticas actuales" como Notas, en 2007, [56] 2010, [57] 2015, [58] 2017, [59] y 2018. [60]
Dado que estas instantáneas de especificaciones están destinadas principalmente a desarrolladores, ha habido una demanda creciente de un documento de referencia con una versión similar dirigido a los autores, que presentaría el estado de las implementaciones interoperables tal como lo documentan mientras tanto sitios como Can I Use... [61] y los documentos web de MDN. [62] A principios de 2020 se creó un grupo comunitario del W3C para discutir y definir dicho recurso. [63] El tipo real de control de versiones también está sujeto a debate, lo que significa que el documento, una vez producido, podría no llamarse "CSS4".
Cada navegador web utiliza un motor de diseño para representar páginas web y la compatibilidad con la funcionalidad CSS no es consistente entre ellos. Debido a que los navegadores no analizan CSS a la perfección, se han desarrollado múltiples técnicas de codificación para dirigirse a navegadores específicos con soluciones alternativas (comúnmente conocidas como hacks de CSS o filtros CSS). La adopción de nuevas funciones en CSS puede verse obstaculizada por la falta de soporte en los principales navegadores. Por ejemplo, Internet Explorer tardó en agregar soporte para muchas funciones de CSS 3, lo que ralentizó la adopción de esas funciones y dañó la reputación del navegador entre los desarrolladores. filterAdemás, en algunas versiones se utilizó una sintaxis propietaria para la propiedad sin prefijo del proveedor . [64] Para garantizar una experiencia consistente para sus usuarios, los desarrolladores web a menudo prueban sus sitios en múltiples sistemas operativos, navegadores y versiones de navegador, lo que aumenta el tiempo y la complejidad del desarrollo. Se han creado herramientas como BrowserStack para reducir la complejidad del mantenimiento de estos entornos.
Además de estas herramientas de prueba, muchos sitios mantienen listas de compatibilidad de navegadores con propiedades CSS específicas, incluidos CanIUse y MDN Web Docs . Además, CSS 3 define consultas de funciones, que proporcionan una @supportsdirectiva que permitirá a los desarrolladores dirigirse a navegadores que admitan determinadas funciones directamente dentro de su CSS. [65] CSS que no es compatible con navegadores más antiguos a veces también se puede parchear usando JavaScript polyfills , que son piezas de código JavaScript diseñadas para hacer que los navegadores se comporten de manera consistente. Estas soluciones alternativas (y la necesidad de admitir funciones alternativas) pueden agregar complejidad a los proyectos de desarrollo y, en consecuencia, las empresas con frecuencia definen una lista de versiones de navegador que admitirán y no.
A medida que los sitios web adoptan estándares de código más nuevos que son incompatibles con navegadores más antiguos, estos navegadores pueden verse privados del acceso a muchos de los recursos de la web (a veces intencionalmente). [66] Muchos de los sitios más populares en Internet no sólo están visualmente degradados en navegadores más antiguos debido a la mala compatibilidad con CSS, sino que no funcionan en absoluto, en gran parte debido a la evolución de JavaScript y otras tecnologías web.
Algunas limitaciones señaladas de las capacidades actuales de CSS incluyen:
Las reglas de alcance para propiedades como el índice z buscan el elemento principal más cercano con un atributo de posición: absoluta o posición: relativa. Este extraño acoplamiento tiene efectos no deseados. Por ejemplo, es imposible evitar declarar un nuevo alcance cuando uno se ve obligado a ajustar la posición de un elemento, lo que impide utilizar el alcance deseado de un elemento principal.
CSS implementa pseudoclases que permiten cierto grado de retroalimentación del usuario mediante la aplicación condicional de estilos alternativos. Una pseudoclase de CSS, " ", es dinámica (equivalente a JavaScript "onmouseover") y tiene potencial para uso indebido (p. ej., implementación de ventanas emergentes de proximidad del cursor), [67] pero CSS no tiene la capacidad de que un cliente lo deshabilite (no propiedad similar a "deshabilitar") o limitar sus efectos (sin valores similares a "no cambiar" para cada propiedad).:hover
No hay forma de nombrar una regla CSS, lo que permitiría (por ejemplo) que los scripts del lado del cliente hagan referencia a la regla incluso si cambia su selector.
Los estilos CSS a menudo deben duplicarse en varias reglas para lograr el efecto deseado, lo que genera un mantenimiento adicional y requiere pruebas más exhaustivas. Se propusieron algunas funciones CSS nuevas para resolver este problema, pero luego se abandonaron. [68] [69] En cambio, los autores pueden obtener esta capacidad utilizando lenguajes de hojas de estilo más sofisticados que se compilan en CSS, como Sass , Less o Stylus .
Además del pseudoelemento, no se pueden apuntar a rangos específicos de texto sin necesidad de utilizar elementos de marcador de posición.:first-letter
CSS facilita la publicación de contenido en múltiples formatos de presentación basados en parámetros nominales. Los parámetros nominales incluyen preferencias explícitas del usuario, diferentes navegadores web, el tipo de dispositivo que se utiliza para ver el contenido (una computadora de escritorio o un dispositivo móvil), la ubicación geográfica del usuario y muchas otras variables.
Cuando CSS se usa de manera efectiva, en términos de herencia y "cascada", se puede usar una hoja de estilo global para afectar y diseñar elementos en todo el sitio. Si surge la situación en la que se debe cambiar o ajustar el estilo de los elementos, estos cambios se pueden realizar editando las reglas en la hoja de estilo global. Antes de CSS, este tipo de mantenimiento era más difícil, costoso y requería más tiempo.
Una hoja de estilo, interna o externa, especifica el estilo una vez para un rango de elementos HTML seleccionados por classtipo o relación con otros. Esto es mucho más eficiente que repetir la información de estilo en línea para cada aparición del elemento. Una hoja de estilo externa generalmente se almacena en la memoria caché del navegador y, por lo tanto, se puede usar en varias páginas sin tener que volver a cargarla, lo que reduce aún más la transferencia de datos a través de una red.
Con un simple cambio de una línea, se puede utilizar una hoja de estilo diferente para la misma página. Esto tiene ventajas de accesibilidad, además de brindar la capacidad de adaptar una página o sitio a diferentes dispositivos de destino. Además, los dispositivos que no pueden comprender el estilo aún muestran el contenido.
Sin CSS, los diseñadores web normalmente deben diseñar sus páginas con técnicas como tablas HTML que dificultan la accesibilidad para usuarios con problemas de visión (consulte Diseño web sin tablas#Accesibilidad ).
Los marcos CSS son bibliotecas preparadas previamente que están destinadas a permitir un estilo más sencillo y compatible con los estándares de las páginas web utilizando el lenguaje Cascading Style Sheets. Los marcos CSS incluyen Blueprint , Bootstrap , Foundation y Materialise. Al igual que las bibliotecas de lenguajes de programación y scripting, los marcos CSS generalmente se incorporan como hojas .css externas a las que se hace referencia en HTML . Proporcionan una serie de opciones listas para usar para diseñar y diseñar la página web. Aunque muchos de estos marcos se han publicado, algunos autores los utilizan principalmente para la creación rápida de prototipos o para aprender, y prefieren "crear" CSS que sea apropiado para cada sitio publicado sin los gastos generales de diseño, mantenimiento y descarga que implica tener muchas funciones no utilizadas. en el estilo del sitio. [70]<head>
A medida que aumenta el tamaño de los recursos CSS utilizados en un proyecto, un equipo de desarrollo a menudo necesita decidir una metodología de diseño común para mantenerlos organizados. Los objetivos son la facilidad de desarrollo, la facilidad de colaboración durante el desarrollo y el rendimiento de las hojas de estilo implementadas en el navegador. Las metodologías populares incluyen OOCSS (CSS orientado a objetos), ACSS (CSS atómico), CSS (hoja de estilo en cascada orgánica), SMACSS (arquitectura modular y escalable para CSS) y BEM (bloque, elemento, modificador). [72]
JavaScript es parte de la tríada de tecnologías que todo desarrollador web debe aprender: HTML para especificar el contenido de las páginas web, CSS para especificar la presentación de las páginas web y JavaScript para especificar el comportamiento de las páginas web.
Definiciones de Wikcionario
Medios de los comunes
Libros de texto de Wikilibros
Recursos de Wikiversidad
Datos de Wikidata
Discusiones de Meta-Wiki
Documentación de MediaWiki