Breaking

Post Top Ad

Your Ad Spot

miércoles, 13 de noviembre de 2019

La regla-at @supports css

La regla-at @supports nos permite detectar si el navegador del usuario soporta o no las nuevas funcionalidades de CSS.

¿Como funciona?

En el siguiente ejemplo el CSS aplica las reglas entre llaves ( { } ) solo si el navegador soporta display: flex. De lo contrario las ignora por completo.
/* si el navegador soporta display: flex */
@supports (display: flex) {
/* entonces aplica estas reglas: */
      .elemento {
          display: flex;
          /* y las demás reglas */
      }
  }

Algunas palabras clave

¡OJO! Es importante dejar un espacio en blanco delante y detrás de las palabras clave.
La palabra clave not
En el siguiente ejemplo el CSS aplica las reglas entre llaves ( { } ) solo si el navegador NO soporta display: flex.
/* si el navegador NO soporta display: flex */
@supports not (display: flex) {
/* entonces aplica estas reglas: */
      .elemento {
          display: table;
          /* y las demás reglas */
      }
  }
Podemos verificar múltiples características utilizando las palabras clave and y/o or
La palabra clave or
En el siguiente ejemplo el CSS aplica las reglas entre llaves ( { } ) si el navegador cumple al menos una de las condiciones entre paréntesis, o sea si el navegador soporta display: -webkit-flex o display: -moz-flex o display: flex.
@supports (display: -webkit-flex) or
          (display: -moz-flex) or
          (display: flex) {
                  .elemento {
                      display: -webkit-flex;
                      display: -moz-flex;
                      display: flex;
                      /*aquí van las reglas */
      }
  }
La palabra clave and
En el siguiente ejemplo el CSS aplica las reglas entre llaves ( { } ) solo si el navegador soporta tanto la propiedad column-count como la propiedad break-before.
@supports (column-count : 3) and (break-before: right) {
        /*aquí van las reglas */
  }
Utilizando varias palabras clave
Podemos concatenar múltiples condiciones utilizando varias palabras clave. La sintaxis utilizada en este caso se parece mucho con la de otros lenguajes de programación.
@supports not (...) and ((...) or (...)) { /* ... */ }
@supports (...) or (...) (not (...)) { /* ... */ }

El soporte en los navegadores

El soporte en los navegadores para la regla-at @supportsstar es muy bueno.

No hay comentarios.:

Publicar un comentario

Post Top Ad

Your Ad Spot

Páginas