CSS

 

Es un lenguaje de diseño gráfico para definir y crear la presentación de un documento estructurado escrito en un lenguaje de marcado.2​ Es muy usado para establecer el diseño visual de los documentos web, e interfaces de usuario escritas en HTML o XHTML; el lenguaje puede ser aplicado a cualquier documento XML, incluyendo XHTML, SVG, XUL, RSS, etcétera. Junto con HTML y JavaScript, CSS es una tecnología usada por muchos sitios web para crear páginas visualmente atractivas, interfaces de usuario para aplicaciones web y GUIs para muchas aplicaciones móviles (como Firefox OS).

 CSS está diseñado principalmente para marcar la separación del contenido del documento y la forma de presentación de este, características tales como las capas o layouts, los colores y las fuentes.4​ Esta separación busca mejorar la accesibilidad del documento, proveer más flexibilidad y control en la especificación de características presentacionales, permitir que varios documentos HTML compartan un mismo estilo usando una sola hoja de estilos separada en un archivo .css, y reducir la complejidad y la repetición de código en la estructura del documento.

 

 

 

La separación del formato y el contenido hace posible presentar el mismo documento marcado en diferentes estilos para diferentes métodos de renderizado, como en pantalla, en impresión, en voz (mediante un navegador de voz o un lector de pantalla), y dispositivos táctiles basados en el sistema Braille. También se puede mostrar una página web de manera diferente dependiendo del tamaño de la pantalla o tipo de dispositivo. Los lectores pueden especificar una hoja de estilos diferente, como una hoja de estilos CSS guardado en su computadora, para sobrescribir la hoja de estilos del diseñador.

La especificación CSS describe un esquema prioritario para determinar qué reglas de estilo se aplican si más de una regla coincide para un elemento en particular. Estas reglas son aplicadas con un sistema llamado de cascada, de modo que las prioridades son calculadas y asignadas a las reglas, así que los resultados son predecibles.

La especificación CSS es mantenida por el World Wide Web Consortium (W3C). El MIME type text/css está registrado para su uso por CSS descrito en el RFC 2318.5​ El W3C proporciona una herramienta de validación de CSS gratuita para los documentos CSS.

 

Sintaxis

CSS tiene una sintaxis simple y usa un conjunto de palabras clave en inglés para especificar los nombres de varias propiedades de estilo. Una hoja de estilos consiste en una serie de reglas. Cada regla, o conjunto de reglas consisten en uno o más selectores, y un bloque de declaración.

 

 

 

 

 

 

 

Historia

Muchos otros lenguajes de hojas de estilos fueron propuestos al mismo tiempo, y las discusiones en las listas de correo públicas dentro del W3C dieron lugar a la primera Recomendación CSS por el W3C 11​ en 1996. Las hojas de estilo han existido de una forma u otra desde los comienzos del Standard Generalized Markup Language en la década de los 80, y CSS fue desarrollado para proveer hojas de estilos para la web. 13​ Un requerimiento para un lenguaje de hoja de estilos web era que las hojas de estilo vinieran en diferentes estilos en la web. Por lo tanto, los lenguajes de hojas de estilos existentes como DSSSL y FOSI no fueron adecuados.

 CSS, por otro lado, permite al documento ser influido por múltiples hojas de estilo por medio de los estilos en «cascada». A medida que HTML fue creciendo, llegó a abarcar una amplia variedad de capacidades de diseño para satisfacer las demandas de los diseñadores web. Esta evolución dio al diseñador mayor control sobre la apariencia del sitio, con el costo de un HTML más complejo. El navegador/editor creado por Tim Berners-Lee tenía hojas de estilos que fueron introducidas dentro del programa.

Las hojas de estilos, por lo tanto, no eran enlazadas a los documentos en la web. 15​ Robert Cailliau, también del CERN, quería separar la estructura de la presentación, de modo que diferentes hojas de estilo podrían describir diferentes presentaciones para impresión, pantallas y editores. Mejorar las capacidades de la presentación en la web fue un tema de interés para muchos en las comunidades web, y 9 diferentes lenguajes de hojas de estilos fueron propuestos en la lista de correo www-style. La 'H' se eliminó del nombre porque estas hojas de estilo pueden ser aplicadas a otros lenguajes de marcado además de HTML.

En agosto de 1996 Netscape Communication Corporation presentó una alternativa de lenguaje de hoja de estilos llamada JavaScript Style Sheets . 20​ A finales de 1996, CSS estaba listo para ser oficial, y la recomendación CSS 1 fue publicada en diciembre. El desarrollo de HTML, CSS, y DOM había sido realizado en un solo grupo, el HTML Editorial Review Board . El grupo de trabajo de CSS comenzó corrigiendo errores que no habían sido revisados en el CSS 1, resultando en la creación de CSS 2, el 4 de noviembre de 1997.

Fue publicado como una recomendación el 12 de mayo de 1998. En 2005 el grupo de trabajo de CSS decidió mejorar los requerimientos de los estándares de forma más estricta.

 

Niveles

CSS se ha creado en varios niveles y perfiles. Cada nivel de CSS se construye sobre el anterior, generalmente añadiendo funciones al nivel previo.

Los perfiles son, generalmente, parte de uno o varios niveles de CSS definidos para un dispositivo o interfaz particular. Actualmente, pueden usarse perfiles para dispositivos móviles, impresoras o televisiones.

 CSS1

La primera especificación oficial de CSS, recomendada por la W3C fue CSS1, publicada en diciembre de 1995,​ y abandonada en abril de 2008.

Algunas de las funcionalidades que ofrece son:

Propiedades de las fuentes, como tipo, tamaño, énfasis...

Color de texto, fondos, bordes u otros elementos.

Atributos del texto, como espaciado entre palabras, letras, líneas, etcétera.

Alineación de textos, imágenes, tablas u otros.

Propiedades de caja, como margen, borde, relleno o espaciado.

Propiedades de identificación y presentación de listas.

CSS2

La especificación CSS2 fue desarrollada por la W3C y publicada como recomendación en mayo de 1998, y abandonada en abril de 2008.

Como ampliación de CSS1, se ofrecieron, entre otras:

Las funcionalidades propias de las capas (<div>) como de posicionamiento relativo/absoluto/fijo, niveles (z-index), etcétera.

El concepto de "media types".

Soporte para las hojas de estilo auditivas.

 

 

 

CSS3

A diferencia de CSS2, que fue una única especificación que definía varias funcionalidades, CSS3 está dividida en varios documentos separados, llamados "módulos".

Cada módulo añade nuevas funcionalidades a las definidas en CSS2, de manera que se preservan las anteriores para mantener la compatibilidad.

Los trabajos en el CSS3, comenzaron a la vez que se publicó la recomendación oficial de CSS2, y los primeros borradores de CSS3 fueron liberados en junio de 1999.

Debido a la modularización del CSS3, diferentes módulos pueden encontrarse en diferentes estados de su desarrollo, de forma que a fechas de noviembre de 2011, hay alrededor de cincuenta módulos publicados,​ tres de ellos se convirtieron en recomendaciones oficiales de la W3C en 2011: "Selectores", "Espacios de nombres" y "Color".

Algunos módulos, como "Fondos y colores", "Consultas de medios" o "Diseños multicolumna" están en fase de "candidatos", y considerados como razonablemente estables, a finales de 2011, y sus implementaciones en los diferentes navegadores son señaladas con los prefijos del motor del mismo.

CSS4

No existe una especificación integrada de CSS4, ya que la especificación ha sido dividida en diversos módulos separados que manejan niveles de forma independiente.

Módulos que edificaban sobre cosas del CSS Nivel 2 iniciaron en Nivel 3. Algunas de ellas han alcanzado el Nivel 4 o incluso están acercándose al Nivel 5. Otros módulos que definen funcionalidad completamente nueva, como Flexbox, han sido designados como Nivel 1 y algunos de ellos se aproximan al nivel 2.

El CSS Working Group a veces publica "snapshots", que son una colección de módulos enteros y partes de otros borradores que son considerados suficientemente estables para ser implementados por desarrolladores de navegadores web. Hasta el momento, cinco de aquellos documentos de "mejores prácticas actuales" han sido publicados como Notas, en 2007, 2010, 2015, 2017, y 2018.

Dado que estas especificaciones son entendidas para desarrolladores, ha habido una creciente demanda por documentos de referencia similares pero dirigidos a autores, lo cual presentaría el estado de las implementaciones interoperables mientras se documenta por sitios web como "Can I Use..." y los MDN Web Docs. Un grupo llamado el W3C Community Group ha sido establecido a inicios de 2020 a fin de discutir y definir dichos recursos. El tipo actual de versionado es también sujeto a debate, lo cual significa que el documento, una vez producido, podría no llamarse "CSS4".

 

Ventajas

Por otro lado, algunas ventajas de utilizar CSS son:

Separación del contenido y la presentación

CSS facilita la publicación de contenido en múltiples formatos de presentación basado en parámetros nominales. Estos incluyen preferencias explícitas del usuario, diferentes navegadores web, el tipo de dispositivo usado para ver el contenido (una PC o un teléfono inteligente), la localización geográfica u otras variables.

Consistencia del sitio

Cuando CSS es usado efectivamente, en términos de herencia y "cascading", una hoja de estilos global puede ser usado para aplicar estilos a todo un sitio. Si más adelante estos estilos deben ser cambiados, los cambios pueden ser hechos solo con cambiar las reglas en la hoja de estilos global. Antes de CSS, esto era mucho más difícil, caro y más tardado.

Ancho de banda

Una hoja de estilos interna o externa, especifica el estilo para un conjunto de elementos HTML seleccionados por clase, tipo, o herencia. Esto es más eficiente que repetir información para cada ocurrencia del elemento. Una hoja de estilos externa usualmente es guardada en la caché del navegador, y puede ser usada en múltiples páginas sin ser cargada de nuevo, reduciendo la transferencia de datos a través de la red.

Accesibilidad

Sin CSS, los diseñadores web típicamente diseñaban sus páginas con elementos como tablas que dificultaban la accesibilidad para otros usuarios, y que iban en perjuicio de ciertos usos de los documentos, por parte de navegadores orientados a personas con algunas limitaciones sensoriales.

 

 

 

Limitaciones

 

Algunas de las limitaciones conocidas de las capacidades actuales de CSS son:

Los selectores no pueden ascender

CSS actualmente no ofrece una manera de seleccionar al padre de un elemento que satisfaga algún criterio.³³​ Los selectores CSS Nivel 4, que aún están en calidad de Working Draft, ha propuesto un selector, pero solo como parte de otro selector.³⁴​ un esquema de selectors más avanzado (como XPath) podría habilitar hojas de estilo más sofisticadas. Las mayores razones del CSS Working Group para rechazar propuestas para los selectores ascendentes son relacionadas al rendimiento del navegador y las fallas en aumento del renderizado.³⁵​

Las pseudoclases dinámicas no se pueden controlar

Las pseudoclases dinámicas (como :hover) no se pueden controlar o deshabilitar desde el navegador, lo que las hace susceptibles de abuso por parte de los diseñadores de banners o ventanas emergentes.³⁶​

No se pueden nombrar estilos CSS

No existe manera alguna de nombrar a un estilo CSS, lo cual podría permitir scripts del lado del cliente para referirse a la regla aun si el selector cambia.

No se pueden incluir estilos de una regla dentro de otra

Los estilos CSS en ocasiones deben ser duplicados en varias reglas para alcanzar el efecto deseado, causando mantenimiento adicional y requiriendo más pruebas. Algunas características de CSS fueron propuestas para solventar esto, pero (en febrero de 2016) no se ha implementado nada aún.³⁷​

No se puede seleccionar texto específico sin alterar el marcado

Además del pseudo-elemento :first-letter, no se puede seleccionar un rango específico de texto sin utilizar etiquetas como <span>.