Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS

Detección de características CSS: ¿Modernizr o "Feature Queries"?

by
Difficulty:IntermediateLength:MediumLanguages:

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

En este tutorial, voy a repasar dos enfoques para detectar si un navegador admite ciertas características CSS o no. El primero utiliza Modernizr, una popular biblioteca JavaScript y el segundo usa consultas de características o "feature queries", una solución CSS prometedora.

Así que, ¡empecemos!

Detectar características con Modernizr

Como hemos mencionado antes, Modernizr es una ligera biblioteca JavaScript que detecta las características HTML5 y CSS3 en tu navegador. Siempre que la página se cargue, se ejecutará en segundo plano y realizará omprobaciones de características. A continuación, almacena los resultados como propiedades de un objeto JavaScript y como clases del elemento html. Más sobre eso más adelante.

Para instalar y utilizar Modernizr, puedes visitar su sitio y descargar la versión preferida.

Nota: en el momento en el que escribimos este artículo, 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 lanzarla en las próximas semanas. Puedes encontrar una breve descripción general de esta nueva versión aquí. Además, puedes conseguir la versión beta de la misma visitando este enlace.

Una vez descargado, coloca el archivo JavaScript en tu proyecto e inclúyelo en el <head> de tu página html. Por último, pero no menos importante, para habilitar la funcionalidad de Modernizr debes añadir la clase no-js al elemento html.

En las dos secciones siguientes, cubriré los fundamentos de Modernizr. Para conceptos más avanzados, asegúrate de leer la documentación.

Detección de CSS

Como mencionamos antes, Modernizr añade varias clases al elemento html. Los nombres de clase dependen de la compatibilidad del explorador. Si el explorador no reconoce algunas de las características CSS que se comprueban, Modernizr añade el prefijo no- antes de los nombres de clase que integra. Por ejemplo, imagina que estamos comprobando los efectos de reflejo, el elemento html en Chrome 40 tiene este aspecto:

Mientras que en Firefox 35:

Observa también la clase js. Cuando Modernizr es ejecutado, suponiendo que JavaScript esté habilitado en nuestro navegador, reemplaza la antigua clase no-js por la nueva.

En base a los resultados recibidos de las pruebas de Modernizr, podemos personalizar nuestras hojas de estilo.

Ejemplos

Para empezar, aquí está el código HTML básico que usaremos en el resto del tutorial:

Utilizando las clases que nos da Modernizr modificamos los estilos del elemento h2 de la siguiente manera:

Los navegadores basados en Webkit que admiten reflejos mostrarán el elemento h2 de la siguiente manera:

Mientras que el resto de ellos (al menos los que admiten la propiedad text-shadow) aplicarán un efecto diferente, basado en un efecto de texto 3D de Mark Otto:

Este es el ejemplo en Codepen:

Detección JavaScript

La segunda forma de consultar los resultados derivados de las pruebas de Modernizr es a través de JavaScript. Como ya se ha mencionado, Modernizr crea un objeto con los nombres de propiedad de las entidades que están configuradas para ser comprobadas. La mayoría de las veces, sus valores devuelven true o false.

La siguiente captura de pantalla muestra cómo Firefox 35 muestra el objeto Modernizr (pestaña Consola):

Como podemos ver la propiedad Modernzir.cssreflections devuelve un valor false. Eso sucede porque Chrome, Safari y Opera son los únicos navegadores que admiten reflejos (al menos mientras escribimos este artículo).

Así es como podríamos reproducir el ejemplo anterior con JavaScript, añadiendo manualmente las clases de reflection y no-reflection a nuestras clases <h2 id="reflection">:

A continuación, el estilo con el CSS relevante:

Y la nueva demostración en Codepen:

Detección de características mediante feature queries

Sin duda, Modernizr es una valiosa herramienta en el arsenal de cualquier desarrollador frontend. Pero, ¿no sería mejor si pudiéramos replicar las comprobaciones de Modernizr con CSS puro? Afortunadamente, podemos hacerlo mediante feature queries. Se trata de reglas condicionales que nos permiten aplicar diferentes estilos dependiendo de la compatibilidad con el navegador. Funcionan igual que las consultas de medios o media queries. Y sí, además de la edición CSS también están llegando a JavaScript.

¿Listo para echar un vistazo?

Detección de CSS

Para definir feature queries en nuestro CSS tenemos que usar las reglas @supports y @supports not. Su sintaxis tiene este aspecto:

La condición incluye property: value pairs (pares de valores) de entidades que queremos comprobar. Los navegadores que admiten las características aplican las reglas de destino, que especificamos dentro de la regla @supports. De lo contrario, se ejecutan los estilos dentro de la regla @supports not.

Utilizando los operadores lógicos AND y/o OR podemos crear comprobaciones complejas. Sin embargo, ten en cuenta que estos operadores deben estar separados por paréntesis.

Veamos dos ejemplos. Como ya sabemos, ¡nuestro HTML es muy simple! Se trata únicamente de un elemento h2.

En este primer ejemplo, usamos la propiedad background-color para especificar el color de fondo del elemento body. Para hacer las cosas más interesantes, también creamos una variable CSS. La compatibilidad con navegadores se divide en las siguientes categorías:

  1. Navegadores que admiten feature queries y variables CSS (actualmente solo Firefox 31+).
  2. Los navegadores que admiten feature queries, pero no admiten variables CSS.
  3. Los navegadores que no admiten feature queries ni variables CSS.

Dependiendo de estas circunstancias, el elemento body mostrará un color de fondo (background-color) diferente.

Aquí está el código CSS basado en las anteriores suposiciones:

Por ejemplo en Safari, que pertenece a la tercera categoría nuestro elemento se vería así:

A continuación, Chrome, que puede interpretar la feature querie, pero no admite 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:

Otro ejemplo

En este caso, ampliaremos la condición de la comprobación para que contenga una segunda regla. Más concretamente, ahora nos dirigimos a navegadores que admiten no sólo reflejos, sino también efectos de trazo de texto.

Aquí está el código para ese comportamiento:

Por ejemplo, los navegadores (en el momento en el que escribimos, solo Chrome 28+) que admiten feature queries, y reflejos y efectos de trazo de texto mostrarán el elemento h2 de la siguiente manera:

A continuación se muestra el ejemplo incrustado en Codepen:

Detección JavaScript

Las feature queries también pueden definirse a través de JavaScript. Para ello, tenemos que utilizar el método CSS.supports. Estos son sus posibles parámetros:

El resultado de este método es un valor booleano, Boolean, que indica si el navegador admite las propiedades o no. Por último, debemos envolver los parámetros en comillas simples o dobles.

Utilizando la edición JavaScript de feature queries, nuestro último ejemplo puede reproducirse de la siguiente manera:

La demostración correspondiente:

Soporte del navegador

En términos generales, la compatibilidad del navegador con feature queries es buena. En el momento de escribir Firefox (22+), Chrome (28+) y Opera (12.1+) soportan esta funcionalidad CSS. Con suerte, las próximas versiones de IE entenderán las reglas de condición (¡ya están trabajando en ello!) también.


Polyfills

Si deseas utilizar feature queries en tus proyectos, pero eres un poco escéptico con respecto a los navegadores que las entienden, a continuación encontrarás algunos útiles polyfills:

Conclusión

En este tutorial, he repasado dos útiles métodos que puedes usar para ofrecer experiencias confiables entre navegadores. Aprovechar Modernizr y/o feature queries te ayudará a comprender los beneficios de diseñar en base a características y no en base al navegador. Modernizr es la solución estable actual, pero las feature queries están llegando, por tanto, ¡la elección es tuya!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.