CSS: Compatibilidad

CSS es un lenguaje que se encuentra en constante evolución. Con el tiempo salen nuevas funcionalidades que permiten crear diseños atractivos con facilidad. Sin embargo, los navegadores web implementan estas mejoras de forma gradual, por lo que la compatibilidad de estas novedades no está garantizada, llegando a producirse inconsistencias en la apariencia del diseño web.

Si no se garantiza la compatibilidad del diseño para la mayoría de navegadores web, los usuarios tendrán una mala experiencia de navegación; un diseño inconsistente generará confusión y frustración. En cambio, un diseño coherente mejorará la experiencia de usuario y se traducirá en una mayor audiencia.

Por tanto, podemos definir la compatibilidad como la capacidad que tiene un navegador web de interpretar y mostrar correctamente las diferentes reglas CSS. Algunos navegadores son más compatibles que otros, lo que significa que pueden interpretar una serie más amplia de reglas CSS.

La regla arroba @supports proporciona una forma de verificar si el navegador web es compatible con ciertas características del lenguaje CSS. Se aplicará un conjunto de estilos en caso de cumplirse la condición indicada.

La capacidad de realizar consultas que comprueban si ciertas características o funcionalidades de CSS están disponibles en un navegador web es conocida como «consultas de funcionalidad», en inglés: feature queries.

Un ejemplo podría ser el de preguntar si el sistema de diseño de cuadrículas CSS (grid) está disponible. Si lo está, aplicará las reglas CSS indicadas dentro de la regla arroba. Pero si no está disponible, no las aplicará.

@supports (display: grid) {
  .contenedor {
    display: grid;
    grid-template-columns: 3fr 1fr;
  }
}

En este ejemplo hemos visto que su uso es tan fácil como indicar dentro de un paréntesis una propiedad junto con un valor concreto.

Cuando tengamos dudas sobre si una determinada propiedad CSS es compatible en todos los navegadores, podemos usar la herramienta CanIUse. Gracias a esta herramienta web también podremos saber el porcentaje de usuarios que usan un navegador web en concreto. Su uso es muy conveniente.

La regla arroba @supports puede usarse junto con una serie de operadores lógicos que permiten realizar condiciones más específicas y ajustadas, ofreciendo más posibilidades a la hora de mejorar la compatibilidad de un diseño web.

Estos operadores son los siguientes:

También puede usarse las siguientes funciones:

Condicionales

La condición más básica es la que evalúa una pareja propiedad-valor. Su uso es tan fácil como introducir una propiedad CSS y un valor válido esperado. En caso de que la propiedad y el valor indicados sean compatibles con el navegador web, se aplicará las reglas CSS que contenga.

En este ejemplo, aplicamos estilos si el navegador web permite posicionar objetos en un espacio tridimensional.

@supports (transform-style: preserve-3d) {
  .contenedor {
    transform: rotate3d(1, 1, -1, 60deg);
    transform-style: preserve-3d;
  }
}

En este otro ejemplo, aplicamos estilos si el navegador web es compatible con la distribución de texto en múltiples columnas.

@supports (column-count: 3) {
  .contenedor {
    column-count: 3;
    column-rule: double;
  }
}

El operador ‘not’

Para aplicar estilos cuando no se cumple una condición se usa el operador not justo antes de la condición. Por tanto, el resultado equivale a la negación de la condición indicada. Si no se cumple, devuelve «verdadero».

Por ejemplo, vamos a crear una condición que aplique estilos en caso de que el navegador web no tenga soporte para crear cajas flexibles (flex).

@supports not (display: flex) {
  .contenedor {
    display: block;
  }
}

Este operador puede ser muy útil para crear estilos alternativos. De esta forma, podríamos crear dos reglas @supports: una para los estilos con compatibilidad, y otra para los estilos sin compatibilidad, usando el operador not.

El operador ‘and’

El operador and permite enlazar varias condiciones. Los estilos deseados se aplicarán en caso de que se cumplan dos o más condiciones. Si las dos expresiones se cumplen, la expresión entera devuelve «verdadero».

La sintaxis de este operador es muy sencilla. Las condiciones van entre paréntesis; después se coloca el operador and en el medio, separándolas. Es posible encadenar tantas condiciones como sea necesario.

En este ejemplo vamos a crear una condición que evalúe la compatibilidad de dos condiciones a la vez: que el navegador web tenga soporte de cajas flexibles (flex) y a la vez soporte la alineación de contenido.

@supports (display: flex) and (place-content: normal) {
  .contenedor {
    display: flex;
    place-content: normal;
  }
}

El operador ‘or’

El operador or es similar al anterior, pero en este caso solo requiere que se cumpla como mínimo una condición. Por tanto, si una condición de todas las que haya se cumple, la expresión entera devuelve «verdadero». También devuelve «verdadero» si se llegan a cumplir todas las condiciones.

Al igual que en el caso anterior, el operador or también se debe colocar entre dos condiciones. También permite encadenar varias condiciones.

Por ejemplo:

@supports (display: flex) or (align-items: normal) {
  .contenedor {
    display: flex;
  }
}

Múltiples operadores

Cuando se usa los operadores and y or, puede ser necesario usar el paréntesis para definir de forma clara el orden el que se aplican. Lo mismo ocurre con el operador not en combinación con varios operadores.

Por ejemplo, vamos a crear una expresión que devuelva «verdadero» cuando el navegador web sea compatible con el sistema de cajas flexibles (flex) o con el diseño en columnas, y además, al mismo tiempo no sea compatible con el método de diseño de las cuadrículas (grid). Si se cumplen las tres condiciones de acuerdo con los operadores indicados, devolverá «verdadero».

@supports ((display: flex) or (column-count: 2)) and (not (display: grid)) {
  .contenedor {
    display: flex;
  }
}

En este otro ejemplo, vamos a evaluar la condición negativa de dos casos: que el navegador web no sea compatible con el sistema flex para crear cajas flexibles y que tampoco lo sea con el sistema grid para crear diseños de rejillas.

@supports (not (display: flex)) and (not (display: grid)) {
  .contenedor {
    display: flex;
  }
}

La función ‘selector()’

Mediante la función selector() podremos comprobar si el navegador web es compatible con un selector concreto. Como parámetro se indica el selector que se quiere evaluar. Si es compatible, la expresión devuelve «verdadero».

Vamos a crear una condición para los navegadores que admitan la pseudoclase :first-child, para aplicar estilos al primer elemento hijo.

@supports (:first-child) {
  .contenedor {
    display: flex;
  }
}

La función ‘font-tech()’

La función font-tech() permite evaluar si el navegador web admite la tecnología de fuente especificada para el diseño y la representación. Como parámetro, esta función admite una serie de palabras clave referentes a esta tecnología.

Por ejemplo, color-colrv0 para soporte de glifos multicolores a través de la versión 0 de COLR, color-colrv1 para la versión 1 de COLR, color-svg para tablas multicolores, palettes para paletas de fuentes, etc.

La función ‘font-format()’

La función font-format() permite comprobar si el navegador web admite un formato de fuente especificado. En la siguiente tabla se describe los parámetros posibles de esta función, correspondientes a los formatos de fuentes.