Modelo de referencia de 2023

Rachel Andrew

Baseline llegará a caniuse.com. En esta publicación, aprenderás sobre la integración y descubrirás algunas de las funciones Modelo de referencia en 2023.

Con la nueva definición de Baseline, Hay dos etapas en el ciclo de vida de un atributo: cuando está disponible por primera vez y luego, cuando estén disponibles por completo después de 30 meses. Un atributo se vuelve parte de Baseline recién disponible cuando se vuelve interoperable en los siguientes navegadores:

  • Safari (iOS y macOS)
  • Firefox (computadoras de escritorio y Android)
  • Chrome (computadoras de escritorio y Android)
  • Edge (computadoras de escritorio)

El modelo de referencia llega a Can I use

Como paso siguiente para aclarar la disponibilidad de las funciones, Baseline comienza a que llegarán a Can I Use. Cuando visites algunas páginas de Can I Use, verás una insignia que indica si la función está disponible en Baseline.

Captura de pantalla de Can I Use con la insignia de amplia disponibilidad sobre el diseño de cuadrícula de CSS.

Las funciones que se encuentren disponibles recientemente en Baseline también mostrarán una insignia, junto con el año en que comenzaron a estar disponibles. Todo lo que se volvió interoperable en el navegador principal que se configuró este año es parte de Baseline 2023.

Captura de pantalla de ¿Puedo usar (Can I Use) con la insignia nueva disponible en Consultas de contenedores?

En el resto de esta publicación, conoce las funciones que alcanzaron este hito. durante el 2023. Todas estas funciones son Baseline 2023, disponible recientemente.

Ajusta el tamaño de las consultas de contenedores y las unidades de consultas de contenedores

Tamaño de las consultas de contenedores te permiten consultar el tamaño de un elemento de la misma manera que las consultas de medios te permiten consultar el tamaño del viewport. Hacen que crear componentes reutilizables sea mucho más fácil, ya que permite crear componentes que reaccionen al tamaño del área en los que se colocan.

Navegadores compatibles

  • Chrome: 105
  • Edge: 105.
  • Firefox: 110.
  • Safari: 16.

Origen

El diseño de la siguiente tarjeta cambia según el ancho del componente. Obtén más información en Las consultas de contenedores llegan a navegadores estables.

Nuevos espacios y funciones de color

CSS ahora admite espacios de color que te permiten acceder a colores fuera del gamut sRGB. Esto significa que puedes admitir pantallas HD (alta definición) con colores de HD. de seguridad.

Nuevos modelos de color

Ahora, en Baseline, las funciones de color lch(), lab(), oklch() y oklab() otorgar acceso a los modelos de color LCH, Lab, OKLCH y OKLab.

Navegadores compatibles

  • Chrome: 111
  • Edge: 111
  • Firefox: 113
  • Safari: 15.

Origen

Captura de pantalla del editor gradient.style con un gradiente intenso de rosa a azul.
Prueba los nuevos espacios de color con gradient.style.

La función color-mix()

Además, se incorporaron nuevas funciones de color en Baseline. El color-mix() permite la mezcla de un color con otro, en cualquiera de los espacios de color. En el siguiente CSS, el 25% del azul se mezcla con el blanco en el espacio de color sRGB.

.example {
  background-color: color-mix(in srgb, blue 25%, white);
}

Navegadores compatibles

  • Chrome: 111
  • Edge: 111
  • Firefox: 113
  • Safari: 15.

Origen

Obtén más información sobre color-mix().

La función color()

La color() se puede utilizar para cualquier espacio de color que especifique colores con R, G y B canales. color() toma primero un parámetro de espacio de color y, luego, una serie de valores de canal para RGB y, opcionalmente, algo de alfa. Puedes usar cualquiera de las siguientes opciones: srgb, srgb-linear, display-p3, a98-rgb, prophoto-rgb, rec2020 y xyz xyz-d50 y xyz-d65. Por ejemplo:

.valid-css-color-function-colors {
  --srgb: color(srgb 1 1 1);
  --srgb-linear: color(srgb-linear 100% 100% 100% / 50%);
  --display-p3: color(display-p3 1 1 1);
  --rec2020: color(rec2020 0 0 0);
  --a98-rgb: color(a98-rgb 1 1 1 / 25%);
  --prophoto: color(prophoto-rgb 0% 0% 0%);
  --xyz: color(xyz 1 1 1);
}

La guía de colores de alta definición de CSS te ofrece muchos más ejemplos de los nuevos espacios de color y funciones, junto con información sobre cuál usar y cuándo.

Transmisiones de compresión

La API de Compression Streams es una API de JavaScript para comprimir y descomprimir flujos de datos. Aplicaciones cuando se usa esta compresión integrada, ya no es necesario incluir una biblioteca de compresión.

Navegadores compatibles

  • Chrome: 80
  • Borde: 80.
  • Firefox: 113
  • Safari: 16.4.

Origen

Obtén más información en Las transmisiones de compresión ahora son compatibles con todos los navegadores.

Lienzo fuera de pantalla

Antes de OffscreenCanvas, las capacidades de dibujo en lienzo estaban vinculadas a <canvas>. lo que significaba que dependía directamente del DOM. Se desacopla OffscreenCanvas. el DOM de la API de Canvas moviendo el lienzo fuera de la pantalla.

Gracias a esta separación, la renderización de OffscreenCanvas está desconectada por completo de el DOM, por lo que ofrece algunas mejoras de velocidad con respecto al lienzo normal, ya que no hay sincronización entre ambos. También se puede usar para mover procesar las tareas a un trabajador web aunque no haya un DOM disponible, lo que libera el subproceso principal y hacer que la aplicación sea más responsiva.

Navegadores compatibles

  • Chrome: 69.
  • Borde: 79.
  • Firefox: 105.
  • Safari: 16.4.

Origen

Obtén más información en OffscreenCanvas: acelera tus operaciones de lienzo con un trabajador web.

Carga previa del módulo

La precarga de módulos puede reducir el tiempo de descarga y procesamiento. Agrega rel="modulepreload" al elemento de vínculo que hace referencia a un módulo de JavaScript, y el navegador obtiene lo analiza y compila, y coloca los resultados en el mapa del módulo ejecutar.

Navegadores compatibles

  • Chrome: 66.
  • Borde: ≤79.
  • Firefox: 115
  • Safari: 17.

Origen

Obtén más información en Precargar módulos.

Funciones trigonométricas en CSS

En 2023, funciones trigonométricas de los valores de CSS y unidades de nivel 4 especificación se volvió interoperable. Esto significa que las funciones sin(), cos(), tan(), asin(), acos(), atan() y atan2() forman parte de Baseline 2023.

Navegadores compatibles

  • Chrome: 111
  • Edge: 111
  • Firefox: 108.
  • Safari: 15.4.

Origen

En esta demostración, se usan las funciones trigonométricas para mover elementos en una ruta circular alrededor de un punto central.

Aprende a usar estas funciones y descubre algunos casos de uso en Funciones trigonométricas en CSS.

El atributo inerte

Cuando marcas un elemento del DOM como inert, quitas el movimiento o la interacción de que la modifica. El atributo inert hace que el navegador ignore el elemento:

  • El evento click no se activa si un usuario hace clic en el elemento.
  • No se enfocará el elemento.
  • El elemento y su contenido se excluyen del árbol de accesibilidad.

Navegadores compatibles

  • Chrome: 102.
  • Edge: 102.
  • Firefox: 112.
  • Safari: 15.5

Origen

Agrega este atributo a los elementos que están ocultos o fuera de la pantalla. Para ver más consulta El atributo inert.

Subcuadrícula en el diseño de cuadrícula de CSS

El valor subgrid para grid-template-columns y grid-template-rows permite usarás los recorridos definidos en una cuadrícula superior, en cuadrículas anidadas. Esto significa que puedes alinear elementos en cuadrículas anidadas separadas entre sí.

Navegadores compatibles

  • Chrome: 117
  • Edge: 117.
  • Firefox: 71.
  • Safari: 16.

Origen

En la subcuadrícula de CSS, encontrarás algunos ejemplos y vínculos a y muchas otras publicaciones y ejemplos que destacan casos de uso de las subcuadrículas.

Formato de número V3

Intl.NumberFormat V3 es un conjunto de funciones nuevas para Intl.NumberFormat que se convirtió en parte de Baseline durante 2023. Las funciones adicionales son las siguientes:

  • Tres funciones nuevas para formatear rangos de números: formatRange, formatRangeToParts y selectRange
  • Enum de agrupación
  • Nuevas opciones de redondeo y precisión
  • Prioridad de redondeo
  • Interpretar cadenas como decimales
  • Modos de redondeo
  • Firmar negativo

Navegadores compatibles

  • Chrome: 106
  • Edge: 106.
  • Firefox: 116.
  • Safari: 15.4.

Origen

La propuesta para NumberFormat V3 detalla cada una de estas nuevas funciones.

La API de Fullscreen

La API de pantalla completa te permite colocar un elemento como <video> en pantalla completa llamando al método requestFullscreen(). También proporciona métodos para detectar si un elemento está en modo de pantalla completa y si el documento está en un estado que te permita solicitar el modo de pantalla completa.

Navegadores compatibles

  • Chrome: 71.
  • Borde: 79.
  • Firefox: 64.
  • Safari: 16.4.

Origen

Obtén más información en esta Guía para la API de pantalla completa en MDN.

El selector :has() de CSS

Solo hacer que Baseline 2023 sea el selector :has(), que llegará a Firefox 121 el 19 de diciembre. Entre otros usos, este selector actúa como un selector superior, que te permite seleccionar un elemento según los elementos que están dentro que la modifica. Por ejemplo, puede aplicar distintos tipos de CSS según una imagen dentro de un elemento.

Navegadores compatibles

  • Chrome: 105
  • Edge: 105.
  • Firefox: 121
  • Safari: 15.4.

Origen

Obtén más información en :has(): the family selector.

Más funciones que se unieron a Baseline este año

Otras funciones que se incorporaron a Baseline este año son las siguientes:

Muchas de estas funciones alcanzaron la interoperabilidad mediante el trabajo colaborativo en Interoperabilidad 2023. Es emocionante ver cómo las funciones pueden atravesar ese proceso y llegar a Baseline cuando estén disponibles para que estén disponibles de forma generalizada. Esto crea un más claro para tomar decisiones sobre cuándo adoptar funciones en tus propios proyectos.