Cómo migrar a color HD CSS

Este documento forma parte de la guía de colores de CSS de alta definición.

Adam Argyle

Existen dos estrategias principales para actualizar el color de tu proyecto web y admitir pantallas de gama amplia:

1. Degradación elegante: Usa los nuevos espacios de color y permite que el navegador y el sistema operativo determinen qué color mostrar en función de las capacidades de la pantalla.

2. Mejora progresiva: Usa @supports y @media para evaluar las capacidades del navegador del usuario y, si se cumplen las condiciones, proporciona colores de gama amplia.

Si un navegador no comprende el color display-p3, haz lo siguiente:

color: red;
color: color(display-p3 1 0 0);

Si un navegador comprende el color display-p3, haz lo siguiente:

color: red;
color: color(display-p3 1 0 0);

Cada uno tiene ventajas y desventajas. Esta es una lista rápida de las ventajas y desventajas:

Degradación correcta

• Ventajas
  • La ruta más sencilla.
  • El gamut del navegador se asigna o se ajusta a sRGB si no es una pantalla de gama amplia, por lo que la responsabilidad recae en el navegador.
• Desventajas
  • Es posible que el navegador limite o asigne la gama de colores a un color que no te guste.
  • Es posible que el navegador no comprenda la solicitud de color y falle por completo. Sin embargo, esto se puede mitigar si especificas el color dos veces y permites que la cascada recurra al color anterior que sí comprende.

Mejora progresiva

• Ventajas
  • Más control con la fidelidad de color administrada
  • Una estrategia aditiva que no afecta los colores actuales.
• Desventajas
  • Debes administrar dos sintaxis de colores por separado.
  • Debes administrar dos gamas de colores separadas.

Comprueba la compatibilidad con la gama y el espacio de color

El navegador permite comprobar la compatibilidad con las capacidades de amplia gama y la sintaxis de color de CSS y JavaScript. No se pone a disposición la gama exacta de colores que tiene el usuario, sino que se proporciona una respuesta generalizada para mantener la privacidad del usuario. Sin embargo, la compatibilidad exacta con el espacio de color está disponible, ya que no es específica de las capacidades del hardware del usuario, como lo es la gama.

Consultas de compatibilidad con la gama de colores

En los siguientes ejemplos de código, se verifica el rango de colores del usuario visitante en su pantalla.

Cómo verificar desde CSS

La consulta de asistencia menos específica es la consulta de medios dynamic-range:

Navegadores compatibles

• 98
• 98
• 100
• 13.1

Origen

@media (dynamic-range: high) {
  /* safe to use HD colors */
}

Se puede consultar la compatibilidad aproximada o superior con la consulta de medios color-gamut:

Navegadores compatibles

• 58
• 79
• 110
• 10

Origen

@media (color-gamut: srgb) {
  /* safe to use srgb colors */
}

@media (color-gamut: p3) {
  /* safe to use p3 colors */
}

@media (color-gamut: rec2020) {
  /* safe to use rec2020 colors */
}

Hay dos consultas de contenido multimedia adicionales para verificar la compatibilidad:

1. @media (color)
2. @media (color-index)

Cómo verificar desde JavaScript

En el caso de JavaScript, se puede llamar a la función window.matchMedia() y pasarle una consulta de contenido multimedia para su evaluación.

Navegadores compatibles

• 9
• 12
• 6
• 5.1

Origen

const hasHighDynamicRange = window
.matchMedia('(dynamic-range: high)')
.matches;

console.log(hasHighDynamicRange); // true || false

const hasP3Color = window
.matchMedia('(color-gamut: p3)')
.matches;

console.log(hasP3Color); // true || false

El patrón anterior se puede copiar para el resto de las consultas de medios.

Consultas de compatibilidad con el espacio de color

En los siguientes ejemplos de código, se verifica el navegador del usuario visitante y su selección de espacios de color para trabajar.

Cómo verificar desde CSS

La compatibilidad con espacios de color individuales se puede consultar con una consulta @supports:

Navegadores compatibles

• 28
• 12
• 22
• 9

Origen

@supports (background: rgb(0 0 0)) {
  /* rgb color space supported */
}


@supports (background: color(display-p3 0 0 0)) {
  /* display-p3 color space supported */
}


@supports (background: oklch(0 0 0)) {
  /* oklch color space supported */
}

Cómo verificar desde JavaScript

En el caso de JavaScript, se puede llamar a la función CSS.supports() y se puede pasar un par de propiedad y valor para ver si el navegador lo comprende.

CSS.supports('background: rgb(0 0 0)')
CSS.supports('background: color(display-p3 0 0 0)')
CSS.supports('background: oklch(0 0 0)')

Cómo combinar las verificaciones de hardware y análisis

Mientras esperas a que cada navegador implemente estas nuevas funciones de color, es una buena idea verificar la capacidad de hardware y la capacidad de análisis de colores. Esto es lo que suelo usar cuando mejoro los colores de forma progresiva a alta definición:

:root {
  --neon-red: rgb(100% 0 0);
  --neon-blue: rgb(0 0 100%);
}

/* is the display HD? */
@media (dynamic-range: high) {

  /* does this browser understand display-p3? */
  @supports (color: color(display-p3 0 0 0)) {

    /* safe to use display-p3 colors */
    --neon-red: color(display-p3 1 0 0);
    --neon-blue: color(display-p3 0 0 1);
  }
}

Cómo depurar el color con las Herramientas para desarrolladores de Chrome

Las Herramientas para desarrolladores de Chrome están actualizadas y están equipadas con nuevas herramientas para ayudar a los desarrolladores a crear, convertir y depurar el color HD.

Se actualizó el selector de color

El selector de color ahora admite todos los nuevos espacios de color. Permite que los autores interactúen con los valores del canal de la misma manera que lo harían.

Límites de gamut

También se agregó una línea de límite de la gama, que traza una línea entre los gamuts de sRGB y display-p3. Se aclara en qué gama se encuentra el color seleccionado.

Esto ayuda a los autores a diferenciar visualmente los colores HD de los que no son HD. Es especialmente útil cuando se trabaja con la función color() y los nuevos espacios de color, ya que pueden producir colores no HD y HD. Si quieres verificar en qué gama se encuentra tu color, abre el selector de color y compruébalo.

Cómo convertir colores

DevTools puede convertir colores entre formatos admitidos, como hsl, hwb, rgb y hexadecimal, desde hace muchos años. shift + click en una muestra de color cuadrada en el panel Estilos para realizar esta conversión Las nuevas herramientas de color no solo alternan entre las conversiones, sino que generan un diálogo en el que los autores pueden ver y elegir la conversión que deseen.

Cuando se realiza la conversión, es importante saber si se recortó para que se ajuste al espacio. DevTools ahora tiene un ícono de advertencia en el color convertido que te alerta sobre este recorte.

Descubre más funciones de depuración de CSS en DevTools.

Próximos pasos

Más vitalidad, manipulaciones e interpolaciones coherentes y, en general, ofrecen una experiencia más colorida a tus usuarios.

Obtén más información sobre los recursos de color en la guía.