Hispanopedia WikiUn truco CSS es una técnica de codificación que se utiliza para ocultar o mostrar código CSS según el navegador , la versión o sus capacidades. Los navegadores interpretan el comportamiento de CSS de forma diferente y ofrecen distintos niveles de compatibilidad con los estándares del W3C . A veces, se utilizan trucos CSS para lograr una apariencia de diseño consistente en varios navegadores que no tienen una representación compatible. La mayoría de estos trucos 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 comunes.
Tipos de hackeos
CSS no válido o que no cumple con los requisitos
Debido a peculiaridades en la interpretación de CSS por parte de varios navegadores, la mayoría de los trucos de CSS implican escribir reglas CSS no válidas que solo son interpretadas por navegadores específicos, o depender de errores en navegadores específicos. Un ejemplo de esto es anteponer un guion bajo a las reglas (como en _width) para apuntar a Internet Explorer 6; otros navegadores ignorarán la línea, lo que permite usarla para escribir código específico para un navegador .
Trucos similares de CSS implican inducir errores de sintaxis como asteriscos, espacios en blanco faltantes y comentarios CSS alrededor de los nombres de las 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 ]
CSS no compatible
Aunque las reglas CSS más recientes cumplen con los estándares actuales, los navegadores antiguos las ignoran por considerarlas "inválidas". Al escribir reglas antiguas seguidas de reglas más recientes que anulen o modifiquen las anteriores, es posible activar solo ciertas reglas en navegadores antiguos.
Comentarios condicionales
Antes de la versión 10, Internet Explorer admitía una sintaxis de comentarios especial que permitía que ciertos bloques de HTML solo fueran leídos por versiones específicas del navegador. Estos comentarios se utilizaban principalmente para proporcionar soluciones alternativas de CSS y JavaScript a versiones anteriores del navegador. Ningún otro navegador interpretaba estos comentarios ni ofrecía una funcionalidad similar.
A continuación se muestran ejemplos de las diferentes sintaxis para estos comentarios.
<head> <title> Prueba </title> < link href = "all_browsers.css" rel = " stylesheet" type = "text/css" > <!--[if IE ] > < link href="ie_only.css " rel= " stylesheet" type="text/css"> <![endif]--> <!--[if lt IE 7]> <link href="ie_6_and_below.css" rel="stylesheet" type="text/css"> <![endif]--> <! --[if !lt IE 7]> <![IGNORAR[--> <![IGNORAR[]]> < link href = "recent.css" rel = "stylesheet" type = "text/css" > <!--<![endif]--> < link href = "not_ie.css" rel = "stylesheet" type= "text/css" > "text / css" > <!--<![endif]-- > </head>Críticos
Ocultar código mediante trucos suele provocar que las páginas se muestren incorrectamente al actualizar los navegadores. Estos trucos pueden causar un comportamiento inesperado en los navegadores más recientes, que podrían interpretarlos de forma diferente a sus predecesores. Dado que Internet Explorer 6 y 7 han caído en desuso, los trucos CSS también han disminuido. Los métodos modernos de selección de características son menos frágiles y propensos a errores.
Alternativas
Prefijos de navegador
Cada uno de los motores de renderizado de navegador más populares tiene su propio prefijo de proveedor para las propiedades experimentales. Sin embargo, debido a la proliferación de estas propiedades en el código en producción, los proveedores de navegadores han comenzado a abandonar esta práctica en favor de las banderas de características. [ 2 ]
Lista de prefijos
A continuación se muestra una lista de prefijos de varios motores de maquetación:
Ejemplo
/* Gradiente lineal CSS3 compatible con varios navegadores */ .linear -gradient {/* Navegador Gecko (Firefox) */ background-image : -moz- linear-gradient ( top , #D7D 0 % , #068 100 % );/* Opera */ background-image : -o- linear-gradient ( top , #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) */ background-image : -webkit- linear-gradient ( top , #D7D 0 % , #068 100 % );/* W3C */ background-image : linear-gradient ( to bottom , #D7D 0 % , #068 100 % );}Limitación
Los prefijos de proveedor se diseñaron para funciones en desarrollo, lo que significa que la sintaxis podría no ser definitiva. Además, añadir una regla para la implementación de una función en cada navegador no resulta práctico a la hora de dar soporte a muchos navegadores. Por consiguiente, los principales proveedores de navegadores están abandonando los prefijos de proveedor en favor de otros métodos, como las consultas de características.@supports
Eliminación de características
detección de características de JavaScript
Existen varias bibliotecas de JavaScript para detectar qué características están disponibles en un navegador en particular, de modo que se puedan escribir reglas CSS para aprovecharlas. Bibliotecas como Modernizr agregan clases al htmlelemento, lo que permite reglas CSS como ..cssgradients.header
Consultas de características
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 necesidad de utilizar una biblioteca 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 { mostrar : bloque ; }@supports ( display : flex ) { header { display : flex ; } }polyfills de scripts
Si bien la detección de características y las reglas de JavaScript pueden ayudar a identificar navegadores que requieren funcionalidades alternativas, no solucionan errores en navegadores específicos ni habilitan dichas funcionalidades avanzadas. Los polyfills , scripts que uniformizan el comportamiento en todos los navegadores, se pueden usar para agregar compatibilidad con nuevas reglas CSS (por ejemplo, consultas de medios en IE 8) y corregir errores en navegadores específicos. Dado que los polyfills agregan o corrigen funcionalidades en navegadores que no las tienen, su propósito es diferente al de las consultas de características, pero se pueden usar en combinación con ellas.@supports
Referencias
Enlaces externos
- Rarezas de los navegadores : trucos y pruebas de CSS en vivo de Jeff Clayton para filtrar los navegadores más comunes, incluyendo los únicos trucos de CSS conocidos para Safari 7 y 8.
- browserhacks.com – Múltiples métodos y pruebas de filtrado de navegadores (Hugo Giraudel, Joshua Hibbert, Tim Pietrusky, Fabrice Weinberg, Jeff Clayton)
- Filtros de prefijo Safari/Webkit (webkit) filtros de refijo]
- Filtros de prefijo de Mozilla (moz)
- Filtros de prefijo de Opera (wap) : esta página contiene todos los selectores CSS de Opera.
- Filtros CSS : una tabla bastante completa de trucos CSS que muestran y ocultan reglas en navegadores específicos.
- Filtros y cruce de opciones : filtros CSS. Los errores de análisis están marcados en rojo.
- – Selector de navegador CSS – Permite combinar estilos CSS específicos de cada navegador en una sola hoja de estilos (usando JavaScript).
- – #IEroot – Dirigido a IE con una única hoja de estilo que contiene todo el CSS (sin usar JavaScript, pero usando comentarios condicionales para asignar una etiqueta específica del navegador a una raíz de contenido arbitraria )
<div> - ¿Cómo especificar que una hoja de estilos se dirija únicamente a Internet Explorer (cualquier versión)? – debate en StackOverflow
- Aplicar el estilo ÚNICAMENTE en IE – debate en StackOverflow
- Comentarios CSS : cómo agregar comentarios en CSS
- Hojas de estilo en cascada
