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 para que admita pantallas de amplia gama:

1. Degradación correcta: Usa los nuevos espacios de color y deja que el navegador y sistema operativo determinan qué color mostrar según las capacidades de visualización.

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

Si un navegador no entiende el color display-p3:

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

Si un navegador entiende el color display-p3:

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

Cada uno tiene ventajas y desventajas. Aquí hay una lista rápida de profesionales desventajas:

Degradación correcta

• Ventajas
  • La ruta más sencilla.
  • El gamut del navegador se asigna o se restringe a sRGB si no es una pantalla de amplio gamut. por lo tanto, la responsabilidad recae en el navegador.
• Desventajas
  • El navegador puede ampliar o seleccionar 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 se especifica el color dos veces, lo que permite que la capa y recurrir al color anterior que sí entiende.

Mejora progresiva

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

Cómo comprobar la compatibilidad con la gama y el espacio de color

El navegador permite comprobar la compatibilidad con capacidades de amplia gama y color la sintaxis de CSS y JavaScript. La gama exacta de colores que tiene el usuario no está disponible, se proporciona una respuesta generalizada para que la privacidad del usuario se mantenga. Sin embargo, la compatibilidad exacta con el espacio de color está disponible, ya que no está específicas de las capacidades del hardware del usuario, como es la gama.

Consultas sobre la compatibilidad con la gama de colores

Los siguientes ejemplos de código comprueban el rango de colores del usuario visitante en su pantalla.

Verificar del CSS

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

Navegadores compatibles

• (98)
• (98)
• 100
• 13.1

Origen

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

Se puede solicitar asistencia aproximada o mayor al color-gamut consulta de medios:

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 */
}

Existen dos consultas de medios adicionales para verificar la compatibilidad:

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

Verificar desde JavaScript

Para JavaScript, el window.matchMedia() una consulta de medios para evaluarla.

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 que lo visita y su selección. de espacios de color para trabajar.

Verificar del CSS

Se puede consultar la compatibilidad con el espacio de color individual mediante un 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 */
}

Verificar desde JavaScript

Para JavaScript, el CSS.supports() función y se puede pasar un par de propiedad y valor para ver si el navegador.

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 el hardware y las verificaciones de análisis

Mientras esperas a que cada navegador implemente estas nuevas funciones de color, hay una Se recomienda comprobar la capacidad del hardware y la capacidad de análisis del color. A menudo, esto es lo que uso cuando mejoro progresivamente los colores 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 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. Permitir a los autores interactúan con los valores del canal como 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 sRGB y pantallas p3. Aclarar en qué gama está el color seleccionado.

Esto ayuda a los autores a diferenciar visualmente los colores HD de los que no son HD. En especial, es útil cuando se trabaja con la función color() y el nuevo espacios de color porque son capaces de producir colores que no sean HD o HD. Si para comprobar en qué gama está tu color, abre el selector de color para ver.

Convertir colores

Herramientas para desarrolladores pudo convertir colores entre formatos compatibles, como hsl, HWB, rgb y hexadecimal durante muchos años. shift + click en una muestra de color cuadrada en el Panel de estilos para realizar esta conversión. Las nuevas herramientas de color no solo rotan gracias a las conversiones, se abre un diálogo en el que los autores pueden ver y de conversión que desean.

Cuando generes una conversión, es importante saber si esta se recortó para ajustarse al espacio. Las Herramientas para desarrolladores ahora tienen un ícono de advertencia en el color convertido que te avisa. a este recorte.

Descubre más funciones de depuración de CSS en las Herramientas para desarrolladores.

Próximos pasos

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

Leer más recursos de color en la guía.