Un hack CSS es una técnica de codificación que se utiliza para ocultar o mostrar el marcado CSS según el navegador , el número de versión o las capacidades. Los navegadores tienen diferentes interpretaciones del comportamiento CSS y diferentes niveles de compatibilidad con los estándares W3C . Los hacks CSS se utilizan a veces para lograr una apariencia de diseño consistente en varios navegadores que no tienen una representación compatible. La mayoría de estos hacks no funcionan en las versiones modernas de los navegadores, y otras técnicas, como la detección de compatibilidad de funciones, se han vuelto más frecuentes.
Debido a las peculiaridades de la interpretación de CSS por parte de varios navegadores, la mayoría de los hacks de CSS implican escribir reglas CSS no válidas que solo son interpretadas por navegadores específicos o que dependen de errores en navegadores específicos. Un ejemplo de esto es anteponer reglas con un guión bajo (como en _width) para apuntar a Internet Explorer 6; otros navegadores ignorarán la línea, lo que permitirá que se use para escribir código específico para un navegador .
Otros trucos CSS similares incluyen la inducción de errores de sintaxis como asteriscos, espacios en blanco faltantes y comentarios CSS alrededor de los nombres de propiedades. Además, en Internet Explorer 6 y 7, la !importantdeclaración se reconoce como tal con cualquier cadena después del signo de exclamación, por ejemplo !ie. [1]
Aunque las reglas CSS más nuevas son correctas según los estándares actuales, los navegadores más antiguos las ignoran por considerarlas "inválidas". Al escribir reglas antiguas seguidas de reglas más nuevas que cancelen o modifiquen las antiguas, es posible activar solo ciertas reglas en navegadores más antiguos.
Antes de la versión 10, Internet Explorer admitía una sintaxis de comentarios especial que permitía que los bloques de HTML solo los leyeran versiones específicas del navegador. Estos comentarios se utilizan principalmente para proporcionar soluciones alternativas específicas de CSS y JavaScript a versiones anteriores del navegador. Ningún otro navegador interpretaba estos comentarios ni ofrecía una funcionalidad similar.
Los siguientes son ejemplos de las diferentes sintaxis para estos comentarios.
< cabeza > < título > Prueba </ título > < enlace href = "all_browsers.css" rel = "stylesheet" tipo = "text/css" > <!--[si es IE]> < enlace href="ie_only.css" rel="stylesheet" tipo = "text/css"> <![endif]--> <!--[si es IE 7]> < enlace href="ie_6_and_below.css" rel="stylesheet" tipo = "text/css"> <![endif]--> <!--[si es IE 7]> <![IGNORAR[--> < ![IGNORAR[]]> < enlace href = "recent.css" rel = "stylesheet" tipo = "text/css" > <!--<![endif]--> < enlace href = "not_ie.css" rel = "stylesheet" tipo = "texto/css" > <!--<![endif]--> </ head >Ocultar código mediante trucos suele provocar que las páginas se muestren incorrectamente cuando se actualizan los navegadores. Estos trucos pueden provocar un comportamiento inesperado en los navegadores más nuevos, que pueden interpretarlos de forma diferente a sus predecesores. Desde que Internet Explorer 6 y 7 dejaron de usarse, los trucos CSS también han disminuido. Los métodos modernos de selección de funciones son menos frágiles y propensos a errores.
Cada uno de los motores de renderizado de navegadores más populares tiene su propio prefijo de proveedor para propiedades experimentales. Sin embargo, debido a la proliferación de estas propiedades en el código en vivo, los proveedores de navegadores han comenzado a abandonar esta práctica en favor de indicadores de características. [2]
A continuación se muestra una lista de prefijos de varios motores de diseño:
/* Gradiente lineal CSS3 multiplataforma */ . gradiente lineal { /* Navegador Gecko (Firefox) */ imagen de fondo : -moz- gradiente lineal ( superior , #D7D 0 % , #068 100 % ); /* Ópera */ imagen-de-fondo : -o- gradiente-lineal ( superior , #D7D 0 % , #068 100 % ); /* sintaxis antigua de Webkit */ background-image : -webkit- gradient ( linear , left top , left bottom , color -stop ( 0 , #D7D ), color-stop ( 1 , #068 )); /* Webkit (Safari, Chrome, iOS, Android) */ imagen de fondo : -webkit- gradiente lineal ( superior , #D7D 0 % , #068 100 % ); /* W3C */ imagen-de-fondo : gradiente-lineal ( hasta abajo , #D7D 0 % , #068 100 % ); }Los prefijos de proveedores se diseñaron para funciones que estaban en desarrollo, lo que significa que es posible que la sintaxis ni siquiera sea definitiva. Además, agregar una regla para la implementación de una función en cada navegador no es una buena opción cuando se desea brindar compatibilidad con muchos navegadores. En consecuencia, los principales proveedores de navegadores están dejando de lado los prefijos de proveedores en favor de otros métodos, como las consultas de funciones.@supports
Existen varias bibliotecas de JavaScript para detectar qué funciones están disponibles en un navegador en particular, de modo que se puedan escribir reglas CSS para adaptarlas a ellas. Las bibliotecas como Modernizr agregan clases al htmlelemento, lo que permite usar reglas CSS como ..cssgradients .header
En CSS3
se introdujo una nueva característica conocida como consultas de características , que permite la detección de funcionalidades específicas dentro del CSS (sin requerir el uso de una biblioteca de JavaScript para la detección de características ). Esta nueva directiva se puede utilizar para comprobar la compatibilidad o la falta de compatibilidad con una característica específica, y las comprobaciones se pueden combinar con and, or, y not. Obviamente, las reglas solo funcionarán en navegadores que admitan .@supports@supports
encabezado { display : bloque ; } @supports ( display : flex ) { encabezado { display : flex ; } } Si bien la detección de características y las reglas de JavaScript pueden ayudar a identificar navegadores que requieren una funcionalidad de respaldo, no solucionarán errores en navegadores específicos ni habilitarán esa funcionalidad avanzada. Los polyfills , scripts que hacen que el comportamiento sea consistente en todos los navegadores, se pueden usar para agregar compatibilidad con nuevas reglas CSS (por ejemplo, consultas de medios en IE 8), así como para corregir errores en navegadores específicos. Dado que los polyfills agregan o corrigen funcionalidad en navegadores que no la tienen, tienen un propósito diferente al de las consultas de características, pero se pueden usar en combinación con ellas.@supports
<div>)