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.
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.
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.
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.
![Captura de pantalla del editor gradient.style con un gradiente intenso de rosa a azul.](https://web.dev/static/blog/baseline2023/image/gradient-style.png?authuser=2&hl=es-419)
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);
}
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.
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.
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.
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.
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.
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í.
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
yselectRange
- Enum de agrupación
- Nuevas opciones de redondeo y precisión
- Prioridad de redondeo
- Interpretar cadenas como decimales
- Modos de redondeo
- Firmar negativo
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.
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.
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:
- Hojas de estilo construibles
- Selectores nth-child complejos en CSS
- Sintaxis del rango para consultas de medios
- Importar mapas
- Varios valores para la visualización de CSS
- @estilo contador
- La propiedad de CSS
counter-set
- La función de aceleración
linear()
- Sistema de archivos privados de origen (OPFS)
- Nesting de CSS, incluido el cambio que agrega análisis relajados.
- Selector de seudoclase
:dir()
de CSS - Unidad de longitud de CSS
cap
- Enmascaramiento de CSS
- Compatibilidad con consultas de medios para elementos
<source>
de video HTML - El elemento HTML
<search>
- Carga diferida de elementos
<iframe>
(de destino) el 19 de diciembre en Firefox 121) - Las unidades de altura de línea de CSS
lh
yrlh
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.