Si alguna vez has utilizado Modernizr sabrás que esta biblioteca de JavaScript te permite determinar qué características soporta un navegador y cuáles no, tanto mediante código como mediante CSS (gracias a unas clases que añade a tu página por código).
La verdad es que Modernizr está muy bien, pero añade complejidad a las páginas y puede afectar al rendimiento ya que debe procesarse antes de poder aplicar las correcciones apropiadas. ¿No sería estupendo que pudiésemos hacer este tipo de comprobaciones directamente con reglas CSS?
Al igual que CSS3 nos trajo las media queries para poder hacer consultas sobre el medio en el que se visualiza una página, introdujo también las “CSS feature queries” que se consiguen mediante el uso de la palabra clave @supports en las reglas CSS.
Del mismo modo que las media queries usan regiones de tipo @media para agrupar reglas que sólo actuarán bajo ciertas condiciones, @supports hace lo mismo pero si se cumplen condiciones sobre el soporte de ciertas características.
Por ejemplo, esta es una media query que se aplica cuando el usuario está visualizando la página por pantalla y con un ancho de la página menor de 1350px:
@media screen and (max-width:1350px) {
/* Las reglas que se necesiten */
}
Pues con @supports la cosa es parecida, por ejemplo, podemos escribir:
@supports ( box-shadow: 2px 2px 2px black ) {
.textoFlotante {
color: white;
box-shadow: 2px 2px 2px black;
}
}
En este caso lo que se está comprobando es si el navegador actual soporta la propiedad box-shadow (para crear sombras) con unos determinados valores. Y en caso afirmativo aplica las reglas que incluyamos dentro de las llaves. En este caso, como el color de la clase textoFlotante lo hemos establecido en blanco, si no se soportase el sombreado el resultado sería que el texto no se vería. Con la sombra eso ya no ocurre y por eso es importante asegurarse de que está soportado.
Como vemos es necesario especificar no solo el nombre de la propiedad sino también sus valores. El motivo es que hay muchas propiedades que están soportadas pero quizá no lo esté el valor que le asignamos. Por ejemplo esto pasa en el caso de los colores y valores con transparencias, o en el caso de la propiedad display y los diversos valores introducidos en CSS3.
Siempre es necesario especificar el nombre de la propiedad a verificar y su valor. No llega solo con el nombre de la propiedad.
Al igual que en las media queries es posible combinar condiciones con operadores booleanos, como and y or de modo que podamos expresar condiciones más complejas.
Por ejemplo, dado que la sombra está soportada por algunos navegadores pero debemos utilizar su versión específica, con un prefijo, podemos comprobar todas las posibilidades con una expresión como esta:
@supports ( box-shadow: 2px 2px 2px black ) or
( -moz-box-shadow: 2px 2px 2px black ) or
( -webkit-box-shadow: 2px 2px 2px black ) {
.textoFlotante {
color: white;
-moz-box-shadow: 2px 2px 2px black;
-webkit-box-shadow: 2px 2px 2px black;
box-shadow: 2px 2px 2px black; }
}
Como vemos comprobamos con un “or” si se soporta alguna de las variantes de la sobra en CSS, aplicándose la regla (o reglas, podría ser más de una) incluidas entre las llaves en caso afirmativo.
Tenemos también un operador not que nos permite negar las condiciones como sea necesario, combinándose con or y and y pudiendo usar paréntesis anidados para condiciones complejas:
@supports not (background-size: 70% auto;) {
/* Lo que sea para adaptarnos a esta ausencia de soporte */
}
Así podemos hacerlo a la inversa: si algo no está soportado, actuar en consecuencia.
Desde JavaScript
Además de poder usar la cláusula @supports directamente en nuestras reglas CSS, es posible también preguntar al navegador mediante código por el soporte de ciertas propiedades CSS y sus valores, gracias a la implementación de esta funcionalidad en JavaScript.
Para ello podemos usar el método supports de la clase especial CSS en JavaScript, así:
if ( CSS.supports('background-size', '70% auto')) {
alert("El tamaño de fondo está soportado en este navegador");
}
Soporte de navegadores
Todo esto es estupendo, pero el mayor problema es el de siempre: no está soportado por todos los navegadores. Es una especie de paradoja pero, claro, hasta que se inventó no lo podían soportar los navegadores, lógicamente ;-)
El soporte de esta característica en el momento de escribir esto (finales de mayo de 2014) es:
- Chrome: Sí, desde la versión 31.
- Firefox: Sí, desde la versión 28.
- Internet Explorer: No.
- Safari: No.
- Opera: Sí, desde la versión 21.
- Safari para iOS: No.
- Android: No.
- Internet Explorer Móvil: No.
Es decir, en la práctica lo soportan únicamente Chrome y Firefox (Opera usa el mismo motor de renderizado que Chrome, Blink). Lo bueno es que no existen prefijos específicos de navegador: todos usan @support. En cualquier caso no te agobies: aun sin estar soportadas pueden sernos útiles. Lee más abajo.
En lo que respecta a la parte de JavaScript, si intentas usar el código anterior en IE o Safari obtendrás un error porque el objeto CSS no está definido. Por ello es mejor definir una función como esta:
function soportaSupports() {
return (typeof(CSS) == "undefined") ? false : true;
}
Para comprobar si se soporta “supports” (valga la redundancia). Así, puedes escribir código estilo este:
if (soportaSupports())
{
if ( CSS.supports('background-size', '70% auto')) {
alert("El tamaño de fondo está soportado en este navegador");
}
else {
alert("El tamaño de fondo NO está soportado en este navegador");
}
}
else
{
alert("Este navegador NO soporta @supports para feature queries");
}
OJO: no llega con poner soportaSupports() como primera condición del condicional y un &&. El motivo es que a lo mejor no se soporta supports, pero sí se soporta la propiedad CSS que queremos comprobar. Son dos cosas diferentes, por eso hay que hacer el triple condicional de arriba.
Esto es más lioso pero funciona siempre.
En resumen
Aunque hay que tener cuidado porque el soporte no es todavía universal, si estamos enfocados en un desarrollo para Chrome y/o Firefox, usar esta característica nos puede ayudar bastante.
Si el navegador no lo soporta hará caso omiso de las reglas que hay dentro de la feature query, así que es como si no las hubiésemos escrito, lo cual puede ser interesante en cualquier caso para poder mostrar una versión más avanzada en navegadores modernos, dejando fuera aunque la soportaran a IE, Safari y lo snavegadores móviles, pero bueno, c’est la vie, y si la versión “mínima” es lo suficientemente atractiva y funcional puede que no importe.
¡Espero que te sea útil!
💪🏻 ¿Este post te ha ayudado?, ¿has aprendido algo nuevo?
Pues NO te pido que me invites a un café... Te pido algo más fácil y mucho mejor
