Baseline estará disponible en caniuse.com. En esta publicación, obtén información sobre la integración y descubre algunas de las funciones que se convirtieron en parte de Baseline en 2023.
Con la nueva definición de Baseline, el ciclo de vida de un componente tiene dos etapas: cuando está disponible recientemente y cuando está ampliamente disponible después de 30 meses. Una función se vuelve parte de Baseline recientemente 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)
La referencia llega a Can I Use
Como siguiente paso para aclarar la disponibilidad de las funciones, Baseline está comenzando a llegar a ¿Puedo usar? Cuando visite algunas páginas de Can I Use, verá una insignia que le indicará si la función está disponible en Baseline ampliamente.
Las funciones que estén disponibles recientemente en Baseline también mostrarán una insignia, junto con el año en que pasaron a estar disponibles. Todo lo que se volvió interoperable en el conjunto principal de navegadores este año forma parte de Baseline 2023.
En el resto de esta publicación, conocerás las funciones que alcanzaron este hito durante 2023. Todas estas funciones son de Baseline 2023, recientemente disponibles.
Dimensione las consultas de contenedor y las unidades de consulta de contenedor
Las consultas de contenedor de tamaño te permiten consultar el tamaño de un elemento, de manera similar a las consultas de medios. Facilitan mucho la creación de componentes reutilizables, ya que te permiten crear componentes que reaccionan al tamaño del área en la que se ubican.
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 de color y funciones
CSS ahora admite espacios de color que te permiten acceder a colores fuera de la gama sRGB. Esto significa que puedes admitir pantallas HD (alta definición) usando colores de gamas de HD.
Nuevos modelos de color
Ahora, en Baseline, las funciones de color lch(), lab(), oklch() y oklab() otorgan acceso a los modelos de color LCH, Lab, OKLCH y OKLab.
La función color-mix()
Además, se agregaron nuevas funciones de color a Baseline. La función color-mix() permite combinar un color con otro, en cualquiera de los espacios de color.
En el siguiente CSS, el 25% del azul se mezcla con blanco, en el espacio de color srgb.
.example {
background-color: color-mix(in srgb, blue 25%, white);
}
Obtén más información sobre color-mix().
La función color()
La función color() se puede usar para cualquier espacio de color que especifique colores con los canales R, G y B. color() toma primero un parámetro de espacio de color, luego una serie de valores de canal para RGB y, opcionalmente, algunos alfa. Puedes usar cualquiera de las siguientes opciones: srgb, srgb-linear, display-p3, a98-rgb, prophoto-rgb, rec2020, 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 brinda muchos más ejemplos de las nuevas funciones y espacios de color, junto con información sobre cuál usar y cuándo hacerlo.
Transmisiones de compresión
La API de Compression Streams es una API de JavaScript para comprimir y descomprimir flujos de datos. Las apps que usan esta compresión integrada ya no necesitan incluir una biblioteca de compresión.
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 de lienzo estaban vinculadas al elemento <canvas>, lo que significaba que dependía directamente del DOM. OffscreenCanvas separa el DOM de la API de Canvas moviendo el lienzo fuera de la pantalla.
Gracias a esta separación, la renderización de OffscreenCanvas se separa por completo del 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 utilizar para mover el trabajo de renderización a un trabajador web, aunque no haya un DOM disponible, lo que libera el subproceso principal y hace que la aplicación sea más responsiva.
Obtén más información en OffscreenCanvas: acelera tus operaciones de lienzo con un trabajador web.
Precarga 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. El navegador obtendrá el módulo, lo analizará y lo compilará, y pondrá los resultados en el mapa del módulo listos para ejecutarse.
Obtén más información en Precargar módulos.
Funciones trigonométricas en CSS
En 2023, las funciones trigonométricas de la especificación de valores y unidades de CSS de nivel 4
pasaron a ser interoperables. Esto significa que las funciones sin(), cos(), tan(), asin(), acos(), atan() y atan2() forman parte de Baseline 2023.
Obtén información para 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, le quitas el movimiento o la interacción. El atributo inert hace que el navegador ignore el elemento:
- El evento
clickno 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.
Agrega este atributo a los elementos que estén fuera de pantalla o que estén ocultos de alguna otra manera. Para obtener más información, 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 te permite usar los segmentos definidos en una cuadrícula superior, en cuadrículas anidadas. Esto significa que puedes alinear los elementos en cuadrículas anidadas separadas entre sí.
En la subcuadrícula de CSS, encontrarás algunos ejemplos y vínculos a muchas otras publicaciones y ejemplos en los que se destacan casos de uso de la subcuadrícula.
Formato de número V3
Intl.NumberFormat V3 es un conjunto de funciones nuevas para Intl.NumberFormat que forma parte de Baseline durante 2023. Las funciones adicionales son las siguientes:
- Tres funciones nuevas para darles formato a los rangos de números:
formatRange,formatRangeToPartsyselectRange - Enum de agrupación
- Nuevas opciones de redondeo y precisión
- Prioridad de redondeo
- Interpreta cadenas como decimales
- Modos de redondeo
- Señalar mensaje negativo
La propuesta para NumberFormat V3 detalla cada una de estas funciones nuevas.
API de pantalla completa
La API de pantalla completa te permite colocar un elemento como un <video> en el modo de 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 permite solicitarlo.
Obtén más información en esta Guía para la API de pantalla completa en MDN.
Selector :has() de CSS
Solo queremos 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, lo que te permite seleccionar un elemento según lo que esté dentro de él. Por ejemplo, puedes aplicar diferentes CSS en función de si hay o no una imagen dentro de un elemento.
Obtén más información en :has(): el selector de familia.
Más funciones que se unieron a Baseline este año
Entre otras funciones que se incorporaron a Baseline este año, se encuentran las siguientes:
- Hojas de estilo para construir
- Selectores nth-child complejos en CSS
- La sintaxis del rango para las consultas de medios
- Importar mapas
- Varios valores para la visualización de CSS
- @estilo-contador
- La propiedad
counter-setde CSS - La función de aceleración
linear() - Sistema de archivos privados de origen (OPFS)
- Anidación de CSS, incluido el cambio que agrega un análisis flexible.
- Selector de seudoclase
:dir()de CSS - Unidad de longitud
capde CSS - Enmascaramiento de CSS
- Compatibilidad con consultas de medios para elementos
<source>de video HTML - El elemento HTML
<search> - Carga diferida de elementos
<iframe>(que llegan a Firefox 121 el 19 de diciembre) - Las unidades de altura de línea de CSS
lhyrlh
Muchas de estas funciones alcanzaron la interoperabilidad mediante el trabajo colaborativo en Interoperabilidad 2023. Es emocionante ver cómo las funciones se pueden llevar a través de ese proceso y llegar a Baseline como recientemente disponibles, lo que inicia el tiempo para que estén disponibles de forma general. Esto crea un camino más claro para tomar decisiones sobre cuándo adoptar funciones en tus propios proyectos.