Share
En este tutorial, repasaré dos enfoques para detectar si un navegador admite ciertas funciones CSS o no. La primera aprovecha las ventajas de Modernizr, una popular biblioteca de JavaScript y la segunda, una solución CSS prometedora..
Entonces, empecemos!
Como se mencionó anteriormente, Modernizr es una biblioteca de JavaScript liviana que detecta las funciones HTML5 y CSS3 en su navegador. Mientras su página se cargue, se ejecuta entre bastidores y realiza pruebas de características. Luego, almacena los resultados como propiedades de un objeto JavaScript y como clases de html elemento. Más sobre eso más tarde.
Para instalar y utilizar Modernizr, puede visitar su sitio y descargar la versión preferida..
Nota: en el momento de escribir esto, la versión actual de Modernizr es 2.8.3, aunque la versión 3 está casi lista. De hecho, el equipo detrás de la biblioteca espera lanzarlo en las próximas semanas. Una breve descripción de esta nueva versión se puede encontrar aquí. Además, puede obtener la versión beta de la misma visitando este enlace.
Una vez descargado, coloque el archivo JavaScript en su proyecto e inclúyalo en el de su página html. Por último, pero no menos importante, para habilitar la funcionalidad de Modernizr, debe agregar el no-js clase a la html elemento.
En las siguientes dos secciones, cubriré los fundamentos de Modernizr. Para conceptos más avanzados asegúrate de leer la documentación..
Como se mencionó anteriormente, Modernizr agrega una serie de clases a la html elemento. Los nombres de clase dependen del soporte del navegador. Si el navegador no reconoce algunas de las pruebas de características, Modernizr agrega la no- prefijo antes de sus nombres de clase incorporados. Por ejemplo, suponiendo que estamos probando los efectos de reflexión, la html El elemento en Chrome 40 tiene este aspecto:
Mientras que en Firefox 35:
Note también el js clase. Cuando se ejecuta Modernizr, asumiendo que JavaScript está habilitado en nuestro navegador, reemplaza el antiguo no-js clase con la nueva.
Sobre la base de los resultados recibidos de las pruebas de Modernizr, podemos personalizar nuestras hojas de estilo.
Para comenzar, aquí está el código HTML básico que usaremos para el resto del tutorial:
Reflexiones CSS
Usando las clases que nos da Modernizr, modificamos los estilos del h2 elemento de la siguiente manera:
h2 color: # c0ccdb; tamaño de letra: 3em; .cssreflections h2 -webkit-box-reflect: debajo de -.45em -webkit-gradient (lineal, izquierda superior, izquierda inferior, desde (transparente), color-stop (0%, transparente), hasta (rgba (255, 255, 255, 0,75))); .no-cssreflections h2 text-shadow: 0 1px 0 # 136ed1, 0 2px 0 # 126ac9, 0 3px 0 # 1160b6, 0 4px 0 # 105cad, 0 5px 0 # 0f56a2, 0 6px 1px rgba (0,0, 0, .1), 0 0 5px rgba (0,0,0, .1), 0 1px 3px rgba (0,0,0, .3), 0 3px 5px rgba (0,0,0, .2) , 0 5px 10px rgba (0,0,0, .25), 0 10px 10px rgba (0,0,0, .2), 0 20px 20px rgba (0,0,0, .15);
Los navegadores basados en webkit que admiten reflexiones mostrarán el h2 elemento de la siguiente manera:
Mientras que el resto de ellos (al menos los que apoyan la sombra de texto propiedad) aplicará un efecto diferente, basado en un efecto de texto 3D por Mark Otto:
Aquí está el ejemplo en Codepen:
La segunda forma de verificar los resultados derivados de las pruebas de Modernizr es a través de JavaScript. Como ya se mencionó, Modernizr crea un objeto con los nombres de propiedades de las funciones que están configuradas para probar. La mayoría de las veces, sus valores vuelven a ser cierto o falso.
La siguiente captura de pantalla muestra cómo Firefox 35 muestra el objeto Modernizr (pestaña Consola):
Como podemos ver el Modernzir.cssreflections propiedad devuelve un falso valor. Eso sucede porque Chrome, Safari y Opera son los únicos navegadores que admiten reflexiones (en el momento de escribir).
Aquí es cómo podemos reproducir el ejemplo anterior con JavaScript, agregando el reflexión y sin reflejo clases a nuestro a mano:
Accentsconagua
var element = document.getElementById ('reflection'); if (Modernizr.cssreflections) element.className = 'reflection'; else element.className = 'no-reflection'; Luego estilizando con el CSS relevante:
.reflexión / * aplicar la propiedad de reflexión * / .no-reflection / * aplicar la propiedad text-shadow * /
Y la nueva demo en Codepen:
Sin lugar a dudas, Modernizr es una herramienta valiosa en el arsenal de cualquier desarrollador de frontend. ¿Pero no sería mejor si pudiéramos replicar las pruebas de Modernizr con CSS puro? Afortunadamente, podemos hacerlo mediante consultas de características. Estas son reglas condicionales que nos permiten aplicar diferentes estilos según el soporte del navegador. Funcionan igual que las consultas de los medios. Y sí, además de la edición CSS también vienen a JavaScript..
Listo para echar un vistazo?
Para definir consultas de características en nuestro CSS tenemos que usar el @supports y @supports no reglas. Su sintaxis se ve así:
@supports (condición de prueba) / * aplicar reglas * / @supports no (condición de prueba) / * aplicar reglas * /
La condición incluye valor de propiedad Parejas de características que queremos probar. Los navegadores que admiten las funciones aplican las reglas de destino, que especificamos en el @supports regla. De lo contrario, los estilos dentro del @supports no la regla se ejecuta.
Utilizando la Y y / o O Operadores lógicos podemos crear pruebas complejas. Sin embargo, tenga en cuenta que estos operadores deben estar separados por paréntesis..
Veamos dos ejemplos. Como ya sabemos, nuestro HTML es muy simple! Es solo un h2 elemento.
En este primer ejemplo, usamos el color de fondo propiedad para especificar el color de fondo de la cuerpo elemento. Para hacer las cosas más interesantes, también creamos una variable CSS. El soporte del navegador se divide en las siguientes categorías:
Dependiendo de estas circunstancias, la cuerpo elemento mostrará un diferente color de fondo.
Aquí está el código CSS basado en las suposiciones anteriores:
cuerpo --bg-color: # 98FB98; color de fondo: caqui; @supports (background-color: var (- bg-color)) body background-color: var (- bg-color); @supports not (background-color: var (- bg-color)) body background-color: tomato;
Por ejemplo, en Safari, que pertenece a la tercera categoría, nuestro elemento se vería así:
Luego Chrome, que puede interpretar la consulta de características, pero no admite las variables CSS, pertenece a la segunda categoría:
Por último Firefox, que se encuentra en la primera categoría:
Y el ejemplo incrustado en Codepen:
En este caso expandiremos la condición de prueba para que contenga una segundo regla. Más específicamente, ahora nos dirigimos a los navegadores que no solo admiten reflejos sino también efectos de trazo de texto.
Aquí está el código para ese comportamiento:
@supports ((/ * condición de reflexiones * /) y (-webkit-text-stroke: 1px tomato)) h2 / * aplica la propiedad de reflexión * / -webkit-text-stroke: 1px tomato; @soporta no ((/ * condición de reflexiones * /) y (/ * condición de trazo * /)) h2 / * aplica la propiedad de sombra de texto * /
Por ejemplo, los navegadores (en el momento de escribir esto solo en Chrome 28+) que admiten consultas de características, reflexiones y efectos de trazo de texto mostrarán h2 elemento de la siguiente manera:
A continuación se muestra el ejemplo incrustado en Codepen:
Las consultas de características también se pueden definir a través de JavaScript. Para ello, tenemos que utilizar el CSS.supports método. Aquí están sus posibles parámetros:
CSS.supports (propertyName, propertyValue) CSS.supports (condición de prueba)
El resultado de este método es un Booleano valor que indica si el navegador es compatible con las funciones o no. Finalmente, deberíamos envolver los parámetros en comillas simples o dobles..
Usando la edición de JavaScript de las consultas de características, nuestro último ejemplo se puede reproducir de la siguiente manera:
var resultado = CSS.supports ('(/ * reflexiones condición * /) y (/ * condición de trazo * /)'); var element = document.getElementById ('reflection'); if (result) element.className = 'reflection'; else element.className = 'no-reflection'; La demo correspondiente:
En términos generales, el soporte del navegador de consultas de características es bueno. Al momento de escribir Firefox (22+), Chrome (28+) y Opera (12.1+) todos soportan esta funcionalidad CSS. Con suerte, las próximas versiones de IE también entenderán las reglas de condición (¡están trabajando en ello!).
Si desea utilizar consultas de funciones en sus proyectos, pero es un poco escéptico con respecto a los navegadores que los entienden, a continuación encontrará algunos polyfills útiles:
En este tutorial, analicé dos métodos útiles que puede utilizar para brindar experiencias confiables en todos los navegadores. Aprovechar las consultas de Modernizr y / o características le ayudará a comprender los beneficios de diseñar para caracteristicas y no para navegadores. Modernizr es la solución estable actual, pero las consultas de características están llegando, por lo que la elección es suya.!
