Funciones de diseño web actuales y futuras, como se ve en Google IO 2022, además de algunos servicios adicionales.
El 2022 será uno de los mejores años de los CSS, tanto en cuanto a funciones como nuevos lanzamientos de funciones de navegadores cooperativos, con el objetivo colaborativo de implementar 14 funciones.
Descripción general
Esta publicación es el formato de artículo de la charla que se realizó en Google IO 2022. No es y pretende ser una guía detallada sobre cada función, más bien una introducción e introducción descripción general para despertar interés, con amplitud en lugar de profundidad. Si el interés, consulta al final de una sección los vínculos a los recursos para obtener más información.
Índice
Utiliza la siguiente lista para pasar a temas de interés:
Compatibilidad del navegador
Una de las razones principales por las que muchas funciones de CSS están configuradas para lanzarse de forma cooperativa es el siguiente: la iniciativa de Interoperabilidad 2022. Antes de estudiar los esfuerzos de interoperabilidad, es importante considerar la compatibilidad iniciativas de 2021.
Compat 2021
Los objetivos para 2021, basados en los comentarios de los desarrolladores a través de encuestas, debían estabilizarse funciones actuales, mejorar el paquete de pruebas y aumentar las puntuaciones para aprobar de los navegadores para cinco funciones:
- Posicionamiento de
sticky - Tamaño de
aspect-ratio - Diseño
flex - Diseño
grid - Posicionamiento y animación de
transform
Las puntuaciones de las pruebas se elevaron a nivel general, lo que demuestra una mayor estabilidad y confiabilidad. Felicitaciones a todos los equipos.
Interoperabilidad 2022
Este año, los navegadores se reunieron para analizar las funciones y prioridades que en los que debían trabajar uniendo sus esfuerzos. Planificaban entregar las siguientes funciones web para desarrolladores:
@layer- Espacios de color y funciones
- Contención
<dialog>- Compatibilidad con formularios
- Desplazamiento
- Subcuadrícula
- Tipografía
- Unidades de viewport
- Compatibilidad web
Esta es una lista emocionante y ambiciosa que no veo la hora de que se despliegue.
Reciente para 2022
Como era de esperar, el estado de CSS 2022 se ve afectado por la interoperabilidad de 2022.
Capas en cascada
Antes del @layer, el orden descubierto de las hojas de estilo cargadas era muy importante.
ya que los estilos cargados en último lugar pueden sobrescribir los que se cargaron previamente. Esto dio lugar a
hojas de estilo para entradas meticulosamente administradas, en las que los desarrolladores necesitaban cargar menos
los estilos más importantes primero y los más importantes después. Metodologías completas
existen para ayudar a los desarrolladores a administrar esta importancia, como
ITCSS.
Con @layer, el archivo de entrada puede definir previamente las capas, y su orden, antes de
tiempo. Luego, a medida que se cargan, se cargan o definen los diseños, estos pueden colocarse en un
lo que permite preservar la importancia de la anulación del estilo, pero sin la
y gestionó meticulosamente la organización de cargas.
El video muestra cómo las capas de cascada definidas permiten una infraestructura proceso de creación y carga de estilo libre, sin dejar de mantener la cascada según sea necesario.
Las Herramientas para desarrolladores de Chrome son útiles para visualizar de qué estilos provienen los distintos estilos capas:
Recursos
- Especificación de CSS Cascade 5
- Explicación de las capas en cascada
- Capas en cascada en MDN
- Una Kravets: Cascade Capas
- Ahmad Shadeed: Hola, CSS Cascade Capas
Subcuadrícula
Antes del subgrid, una cuadrícula dentro de otra no se podía alinear con su
celdas o líneas de cuadrícula superiores. Cada diseño de cuadrícula era único. Muchos diseñadores colocan
una sola cuadrícula sobre todo su diseño y alinear constantemente los elementos dentro de ella, lo que
en CSS.
Después de subgrid, un elemento secundario de una cuadrícula puede adoptar las columnas o filas de sus elementos superiores como su
y alinearse con ellos.
En la siguiente demostración, el elemento body crea una cuadrícula clásica de tres columnas:
la columna del medio se llama main, y las columnas izquierda y derecha nombran sus
líneas
fullbleed Luego, cada elemento del cuerpo, <nav> y <main>, adopta el elemento
las líneas con nombre del cuerpo configurando grid-template-columns: subgrid.
body {
display: grid;
grid-template-columns:
[fullbleed-start]
auto [main-start] min(90%, 60ch) [main-end] auto
[fullbleed-end]
;
}
body > * {
display: grid;
grid-template-columns: subgrid;
}
Por último, los elementos secundarios de <nav> o <main> pueden alinearse o dimensionarse con el
Columnas y líneas fullbleed y main.
.main-content {
grid-column: main;
}
.fullbleed {
grid-column: fullbleed;
}
Las Herramientas para desarrolladores pueden ayudarte a ver las líneas y subcuadrículas (solo Firefox, por el momento). En la siguiente imagen, se superpusieron la cuadrícula superior y las subcuadrículas. Ahora se asemeja a cómo los diseñadores estaban pensando en el diseño.
En el panel de elementos de Herramientas para desarrolladores puedes ver qué elementos son cuadrículas y subcuadrículas, lo que es muy útil para depurar o validar el diseño.
Recursos
- Especificación de subcuadrículas
- Subcuadrícula en MDN
- Bramus: Video práctico de subcuadrícula de CSS Instructivos
Consultas de contenedores
Antes del @container, los elementos de una página web solo podían responder al tamaño de la
por todo el viewport. Esto es ideal para diseños macro, pero para diseños micro, donde
su contenedor externo no es todo el viewport, es imposible que el diseño
para hacer los ajustes necesarios.
Después de @container, los elementos pueden responder a un tamaño o estilo de contenedor superior.
La única salvedad es que los contenedores deben declararse como posibles consultas
lo que constituye un pequeño requisito para obtener un gran beneficio.
/* establish a container */
.day {
container-type: inline-size;
container-name: calendar-day;
}
Estos estilos hacen que las columnas Lun, Mar, Mié, Jue y Vie en el video siguiente puedan consultarse mediante los elementos del evento.
Este es el CSS para consultar el tamaño del contenedor calendar-day. Luego,
ajustar un diseño y los tamaños de fuente:
@container calendar-day (max-width: 200px) {
.date {
display: block;
}
.date-num {
font-size: 2.5rem;
display: block;
}
}
Este es otro ejemplo: un componente de un libro se adapta al espacio disponible en la columna a la que se lo arrastra:
Una es correcta en la evaluación de la situación como el nuevo
responsivo. Hay
son muchas decisiones de diseño emocionantes y significativas para tomar al usar
@container
Recursos
- Especificación de Container Queries
- Explicación de Container Queries
- Consultas de contenedores en MDN
- La nueva versión responsiva de web.dev
- Demostración del Calendario de Una
- Excelente colección de Container Consultas
- Cómo compilamos Designcember en web.dev
- Ahmad Shadeed: Di hola a CSS Contenedor Consultas
accent-color
Antes del accent-color, cuando querías un formulario con colores que coincidieran con la marca, debías
podrían terminar con bibliotecas complejas o soluciones de CSS difíciles de administrar.
con el tiempo. Aunque te dieron todas las opciones y espero que hayan incluido
accesibilidad, la opción de usar los componentes integrados o adoptar tus propios
se vuelve tedioso seguir eligiendo.
Después de accent-color, una línea de CSS trae un color de marca al integrado
o los componentes de la solución. Además de un tono, el navegador elige de forma inteligente
colores contrastantes para las partes auxiliares del componente y se adaptan al sistema
esquemas de colores (claro u oscuro).
/* tint everything */
:root {
accent-color: hotpink;
}
/* tint one element */
progress {
accent-color: indigo;
}
Para obtener más información acerca de accent-color, revisa mi publicación en
web.dev, donde exploro muchos más aspectos de
esta propiedad de CSS útil.
Recursos
- especificación del color de acento
- color de acento en MDN
- color de acento en web.dev
- Bramus: Ajusta el tono de los controles de la interfaz de usuario con CSS color de los elementos destacados
Nivel de color 4 y 5
Durante las últimas décadas, la Web estuvo dominada por sRGB, pero en un mundo digital de pantallas de alta definición y dispositivos móviles equipados con con pantallas OLED o QLED, sRGB no es suficiente. Además, las páginas dinámicas que se adaptan según las preferencias de los usuarios, y la administración del color ha de los diseñadores, los sistemas de diseño y los encargados de mantener el código.
Sin embargo, no en 2022. CSS tiene una serie de nuevas funciones de color y espacios: - Colores que llegan a las capacidades de color HD de las pantallas. - Espacios de color que coinciden con un intent, como la uniformidad perceptual. - Espacios de color para los gradientes que cambian drásticamente los resultados de interpolación. - Funciones de color que te ayudan a mezclar y contrastar, y a elegir el espacio que deseas. en tu trabajo.
Antes de todas estas características de color, los sistemas de diseño debían calcular previamente los resultados adecuados contrastar colores y garantizar paletas brillantes adecuadas, todo mientras preprocesadores o JavaScript se encargaron del trabajo pesado.
Después de todas estas funciones de color, el navegador y CSS pueden hacer todo el trabajo, de forma dinámica y a tiempo. En lugar de enviar muchos KB de CSS y JavaScript a los usuarios habilitar los colores de temas y visualización de datos, CSS puede hacer lo la organización y los cálculos. El CSS también está mejor preparado para verificar la compatibilidad antes del uso o manejar los resguardos con facilidad.
@media (dynamic-range: high) {
.neon-pink {
--neon-glow: color(display-p3 1 0 1);
}
}
@supports (color: lab(0% 0 0)) {
.neon-pink {
--neon-glow: lab(150% 160 0);
}
}
hwb()
HWB significa tono, blanco y negro. Se presenta como un sencilla de articular el color, ya que solo es un matiz y una cantidad de blanco o negro para aclarar u oscurecer. Artistas que mezclan colores con blanco o negro pueden notar que aprecian esta adición de sintaxis de color.
El uso de esta función de color genera colores del espacio de color sRGB, el mismo como HSL y RGB. En términos de novedad para 2022, esto no te ofrece colores nuevos, pero puede facilitar algunas tareas a los fanáticos de la sintaxis y el modelo mental.
Recursos
- Especificación de HWB
- HWB en MDN
- Stefan Judis: hwb(), una notación de colores para a los seres humanos?
Espacios de color
La forma en que se representan los colores se hace con un espacio de color. Cada espacio de color ofrece varias funciones y compensaciones para trabajar con colores. Algunos pueden empaquetar todos los colores brillantes juntos; algunos pueden alinearlos primero según su ligereza.
En 2022, CSS se diseñó para ofrecer 10 espacios de color nuevos, cada uno con características únicas ayudar a los diseñadores y desarrolladores a mostrar, elegir y mezclar colores. Anteriormente, sRGB era la única opción para trabajar con colores, pero ahora CSS desbloquea un nuevo potencial y un nuevo espacio de color predeterminado, el LCH.
color-mix()
Antes del color-mix(), los desarrolladores y diseñadores necesitaban preprocesadores como
Sass para mezclar los colores antes de que el navegador los vea.
La mayoría de las funciones de combinación de colores tampoco brindaban la opción de especificar
espacio de color para hacer la mezcla, lo que a veces da como resultado resultados confusos.
Después de color-mix(), los desarrolladores y diseñadores pueden mezclar colores en el navegador,
con todos sus demás estilos, sin ejecutar procesos de compilación ni incluir
JavaScript: Además, pueden especificar el espacio de color para la combinación
o utiliza el espacio de color de combinación predeterminado de LCH.
A menudo, se usa un color de marca como base y se crean variantes a partir de él, como
colores más claros u más oscuros para los estilos de desplazamiento del mouse. Así es como se ve eso con
color-mix()
.color-mix-example {
--brand: #0af;
--darker: color-mix(var(--brand) 25%, black);
--lighter: color-mix(var(--brand) 25%, white);
}
y si quisieras mezclar esos colores en un espacio de color diferente, como sRGB, cámbialo:
.color-mix-example {
--brand: #0af;
--darker: color-mix(in srgb, var(--brand) 25%, black);
--lighter: color-mix(in srgb, var(--brand) 25%, white);
}
A continuación, se muestra una demostración de temas con color-mix(). Intenta cambiar el color de la marca
y mira la actualización del tema:
Disfruta de combinar colores en varios espacios de color en tus hojas de estilo en 2022.
Recursos
- Especificación de color-mix()
- color-mix() en MDN
- Demostración de temas
- Otra demostración de temas
- Fabio Giolito: Crea un tema de color con estos próximos CSS funciones
color-contrast()
Antes del color-contrast(), los autores de las hojas de estilo debían conocer los colores accesibles.
con anticipación. A menudo, una paleta mostraba texto en blanco o negro en una muestra de colores,
para indicar a un usuario del sistema de colores qué color de texto se necesitaría para
contrastar bien con esa muestra.
Después de color-contrast(), los autores de la hoja de estilo pueden transferir la tarea por completo a
el navegador. No solo puedes emplear el navegador
para seleccionar automáticamente
o blanco, puedes darle una lista de los colores adecuados del sistema de diseño y
elige la primera para pasar la relación de contraste deseada.
Aquí hay una captura de pantalla de un conjunto de paleta de colores HWB demostración dónde están los colores del texto que el navegador elige automáticamente en función del color de la muestra:
Los conceptos básicos de la sintaxis se ven así, en donde se pasa gris a la función y el navegador determina si el blanco o el negro tienen el mayor contraste:
color: color-contrast(gray);
La función también se puede personalizar con una lista de colores, que utilizará elige el color con mayor contraste de la selección:
color: color-contrast(gray vs indigo, rebeccapurple, hotpink);
Por último, en caso de que sea preferible no elegir el color de contraste más alto de de la lista, se puede proporcionar una relación de contraste objetivo y el primer color que se se elige:
color: color-contrast(
var(--bg-blue-1)
vs
var(--text-lightest), var(--text-light), var(--text-subdued)
to AA /* 4.5 could also be passed */
);
Esta función puede usarse para mucho más que solo color de texto, aunque calculo que será su caso de uso principal. Piensa en lo más fácil que será entregar interfaces accesibles y legibles una vez que se eligen los colores contrastantes adecuados está integrada en el lenguaje CSS.
Recursos
Sintaxis de colores relativos
Antes de la sintaxis relativa del color, para calcular el color y hacer ajustes, el
los canales de color debían colocarse individualmente en propiedades personalizadas. Esta
también hizo que HSL fuera la función de color principal para manipular colores
porque el matiz, la saturación o la luminosidad podían ajustarse de forma
y directa con calc().
Después de la sintaxis de color relativa, se puede deconstruir cualquier color en cualquier espacio, se modifica y se devuelve como un color, todo en una línea de CSS. No hay más limitaciones a HSL, las manipulaciones se pueden realizar en cualquier espacio de color deseado, y mucho menos se deben crear propiedades personalizadas para facilitarlo.
En el siguiente ejemplo de sintaxis, se proporciona un hexadecimal base y se muestran dos colores nuevos
que se crean en relación con ella. El primer color --absolute-change crea un nuevo color.
en LCH a partir del color base, luego se procede a reemplazar la luminosidad del color base
con 75%, manteniendo el croma (c) y el matiz (h). El segundo color
--relative-change crea un color nuevo en LCH a partir del color base, pero este
tiempo reduce el croma (c) en un 20%.
.relative-color-syntax {
--color: #0af;
--absolute-change: lch(from var(--color) 75% c h);
--relative-change: lch(from var(--color) l calc(c-20%) h);
}
Es similar a mezclar colores, pero se parece más a las alteraciones que a las alteraciones. mezclar. Puedes transmitir un color desde otro, lo que te brinda acceso a los tres de canales nombrados por la función color utilizada, con la oportunidad de ajustar esos canales. En definitiva, se trata de una sintaxis muy genial y poderosa para color.
En la siguiente demostración, usé la sintaxis de color relativo para crear imágenes
variantes más oscuras de un color base y usaste color-contrast() para garantizar que el
las etiquetas tienen un contraste adecuado:
Esta función también se puede usar para generar una paleta de colores. Aquí tienes una demostración en la que paletas completas se generan a partir de un color base proporcionado. Este conjunto CSS se usa en todas las paletas; cada una simplemente proporciona un conjunto de base. Como ventaja adicional, desde que usé el LCH Gracias a este espacio de color, las paletas no son puntos muertos o calientes que se ven.
:root {
--_color-base: #339af0;
--color-0: lch(from var(--_color-base) 98% 10 h);
--color-1: lch(from var(--_color-base) 93% 20 h);
--color-2: lch(from var(--_color-base) 85% 40 h);
--color-3: lch(from var(--_color-base) 75% 46 h);
--color-4: lch(from var(--_color-base) 66% 51 h);
--color-5: lch(from var(--_color-base) 61% 52 h);
--color-6: lch(from var(--_color-base) 55% 57 h);
--color-7: lch(from var(--_color-base) 49% 58 h);
--color-8: lch(from var(--_color-base) 43% 55 h);
--color-9: lch(from var(--_color-base) 39% 52 h);
--color-10: lch(from var(--_color-base) 32% 48 h);
--color-11: lch(from var(--_color-base) 25% 45 h);
--color-12: lch(from var(--_color-base) 17% 40 h);
--color-13: lch(from var(--_color-base) 10% 30 h);
--color-14: lch(from var(--_color-base) 5% 20 h);
--color-15: lch(from var(--_color-base) 1% 5 h);
}
Esperemos que a estas alturas ya puedas ver cómo los espacios de color y las diferentes funciones de color pueden usarse para diferentes propósitos, según sus fortalezas y debilidades.
Recursos
- Sintaxis de colores relativos especificación
- Creación de paletas de colores con relativas de color sintaxis
- Cómo crear variantes de color con relativas colores sintaxis
Espacios de color de gradientes
Antes de los espacios de color con gradiente, el espacio de color predeterminado era sRGB. sRGB es generalmente es confiable, pero tiene algunas debilidades, como los muertos grises zona.
Después de aplicar gradiente de los espacios de color, indícale al navegador qué espacio de color usar para la interpolación de color. Esto les da a los desarrolladores y diseñadores la capacidad de elegir el gradiente que prefieren. El espacio de color predeterminado también cambia a LCH en vez de sRGB
La adición de sintaxis va después de la dirección del gradiente y usa la nueva sintaxis de in.
y es opcional:
background-image: linear-gradient(
to right in hsl,
black, white
);
background-image: linear-gradient(
to right in lch,
black, white
);
Este es un gradiente básico y esencial, de negro a blanco. Observa el rango de resultados en cada espacio de color. Algunos llegan al negro oscuro antes que otros, otros se atenúa a blanco demasiado tarde.
En el siguiente ejemplo, el negro pasa a azul porque es un problema conocido espacio para los gradientes. La mayoría de los espacios de color se vuelven púrpura durante el color interpolación o, como me gusta pensarlo, a medida que los colores viajan dentro de su color espacio desde el punto A hasta el punto B. Dado que el gradiente tomará una línea recta desde punto A al punto B, la forma del espacio de color cambia drásticamente las paradas que toma el camino a lo largo del camino.
Para obtener más información sobre exploraciones, ejemplos y comentarios, lee esta cuenta de Twitter conversación.
Recursos
- Interpolación del gradiente especificación
- Demostración de comparación de gradientes en espacios
- Comparación de notebooks observables gradientes
inert
Antes del inert, era una práctica recomendada guiar la atención del usuario hacia áreas de la
página o aplicación que requería atención inmediata. Esta estrategia de enfoque guiado se convirtió
conocida como captura de enfoque porque los desarrolladores los centraban en un entorno interactivo
espacio, escuchan eventos de cambio de enfoque y, si el foco dejó la imagen
espacio, luego volvió a entrar por la fuerza. Los usuarios que utilizan teclados o lectores de pantalla
volver al espacio interactivo para asegurarte de que la tarea esté completa antes
de ahora en adelante.
Después de inert, no se requiere ninguna trampa, ya que puedes inmovilizar o vigilar por completo
de la página o la aplicación. Los clics y los intentos de cambio de enfoque son simplemente
no está disponible mientras esas partes del documento están inertes. También podríamos pensar
como guardias en lugar de una trampa, donde a inert no le interesa hacer
te hospedes en algún lugar, en lugar de hacer que otros lugares no estén disponibles.
Un buen ejemplo de esto es la función alert() de JavaScript:
Observa en el video anterior cómo se podía acceder a la página con el mouse y el teclado.
hasta que se llamó a alert(). Una vez que se mostró la ventana emergente del diálogo de alerta,
de la página se bloqueó o inert. El enfoque de los usuarios se
enfoca en la alerta
y no tiene otro lugar adonde ir. Una vez que el usuario interactúa y completa el
de alerta, la página es interactiva nuevamente. inert empodera
lograr con facilidad la misma experiencia de enfoque guiado.
A continuación, se incluye una pequeña muestra de código para mostrar cómo funciona:
<body>
<div class="modal">
<h2>Modal Title</h2>
<p>...<p>
<button>Save</button>
<button>Discard</button>
</div>
<main inert>
<!-- cannot be keyboard focused or clicked -->
</main>
</body>
Un diálogo es un gran ejemplo, pero inert también es útil para cosas como el
menú lateral deslizable para la experiencia del usuario. Cuando un usuario desliza el menú lateral fuera, es
no es correcto dejar que el mouse o el teclado interactúen con la página que está detrás. hay una
un poco difícil para los usuarios. En cambio, cuando se muestre el menú lateral, haz que la página
inertes y ahora los usuarios deben cerrar o navegar dentro de ese menú lateral, y no
se pierden en otra parte de la página con un menú abierto.
Recursos
Fuentes COLRv1
Antes de las fuentes COLRv1, la web tenía fuentes OT-SVG, también es un formato abierto para fuentes con gradientes y colores y efectos integrados. Sin embargo, estos podían ser muy grandes y, si bien permitían editar el texto, no había mucho alcance para la personalización.
Después de las fuentes COLRv1, la Web tiene una huella más pequeña, escalable con vectores, reposicionable, con gradientes y Fuentes activadas en modo de fusión que aceptan parámetros para personalizar la fuente según el uso caso o para que coincida con una marca.
A continuación, verás un ejemplo de la entrada sobre emojis en el Blog para desarrolladores de Chrome. Tal vez notamos que, si aumentas el tamaño de la fuente de un emoji, su nitidez no se mantiene. Es una imagen y no arte vectorial. A menudo, cuando se usa un emoji en las aplicaciones, se reemplace por uno de mayor calidad. Con las fuentes COLRv1, los emojis son vector y atractivo:
Las fuentes de íconos pueden hacer cosas increíbles con este formato, ya que ofrecen paletas de colores dobles y mucho más. La carga de una fuente COLRv1 es como cualquier otra archivo de fuente:
@import url(https://fonts.googleapis.com/css2?family=Bungee+Spice);
La personalización de la fuente COLRv1 se realiza con @font-palette-values, una CSS especial
at-rule para agrupar y nombrar un conjunto de opciones de personalización en un paquete
referencia posterior. Observa cómo especificas un nombre personalizado, al igual que
que comienza con --:
@import url(https://fonts.googleapis.com/css2?family=Bungee+Spice);
@font-palette-values --colorized {
font-family: "Bungee Spice";
base-palette: 0;
override-colors: 0 hotpink, 1 cyan, 2 white;
}
Con --colorized como alias para las personalizaciones, el último paso es aplicar
la paleta a un elemento que usa la familia de fuentes de colores:
@import url(https://fonts.googleapis.com/css2?family=Bungee+Spice);
@font-palette-values --colorized {
font-family: "Bungee Spice";
base-palette: 0;
override-colors: 0 hotpink, 1 cyan, 2 white;
}
.spicy {
font-family: "Bungee Spice";
font-palette: --colorized;
}
Con cada vez más fuentes variables y de color disponibles, la Web la tipografía es un camino magnífico para lograr una personalización enriquecida y expresión.
Recursos
- Especificación de Colrv1 activada GitHub
- Desarrolladores de Chrome: Colrv1 Fuentes
- Explicación para desarrolladores de BlinkOn video
Unidades de viewport
Antes de las nuevas variantes de viewport, la Web ofrecía unidades físicas para ayudar en que se ajusten a las viewports. Había una para altura, ancho, tamaño mínimo (vmin) y lado más grande (vmax). Funcionaban bien en muchas cosas, pero los navegadores introdujo una complejidad.
En dispositivos móviles, al cargar una página, se muestra la barra de estado con la URL, en la que
ocupa parte del espacio de viewport. Después de unos segundos
la interactividad, la barra de estado puede alejarse para permitir un viewport más grande
para el usuario. Pero cuando esa barra se desliza, la altura del viewport tiene
y las unidades vh cambiarían y cambiarían de tamaño a medida que se modificara el tamaño de destino.
En años posteriores, la unidad vh necesitaba específicamente decidir cuál de las dos opciones.
tamaños de viewport iba a usar, porque causaba un diseño visual discordante
problemas en dispositivos móviles. Se determinó que vh siempre representaría
el viewport más grande.
.original-viewport-units {
height: 100vh;
width: 100vw;
--size: 100vmin;
--size: 100vmax;
}
Después de usar las nuevas variantes de viewport, se borran las unidades pequeñas, grandes y dinámicas
están disponibles, con la adición de comandos de
equivalentes a los físicos. La idea es
para dar a los desarrolladores y diseñadores la posibilidad de elegir qué unidad desean
usar en su situación. Tal vez está bien hacer un pequeño cambio de diseño discordante
cuando la barra de estado desaparece, por lo que dvh (altura de viewport dinámico) podría ser
se utilicen sin preocupaciones.
A continuación, se incluye una lista completa de todas las opciones nuevas de unidades del viewport disponibles con las nuevas variantes de viewport:
.new-height-viewport-units {
height: 100vh;
height: 100dvh;
height: 100svh;
height: 100lvh;
block-size: 100vb;
block-size: 100dvb;
block-size: 100svb;
block-size: 100lvb;
}
.new-width-viewport-units {
width: 100vw;
width: 100dvw;
width: 100svw;
width: 100lvw;
inline-size: 100vi;
inline-size: 100dvi;
inline-size: 100svi;
inline-size: 100lvi;
}
.new-min-viewport-units {
--size: 100vmin;
--size: 100dvmin;
--size: 100svmin;
--size: 100lvmin;
}
.new-max-viewport-units {
--size: 100vmax;
--size: 100dvmax;
--size: 100svmax;
--size: 100lvmax;
}
Se espera que estos brinden a los desarrolladores y diseñadores la flexibilidad necesaria para lograr sus diseños adaptables en el viewport.
Recursos
- Unidades relativas de la vista del puerto especificación
- Bramus: los objetos grandes, pequeños y dinámicos Viewports
:has()
Antes del :has(), el
asunto
de un selector siempre estaba al final. Por ejemplo, el
sujeto de este selector es un elemento de lista: ul > li. Los seudoselectores pueden alterar
el selector, pero no cambia el tema: ul > li:hover o ul >
li:not(.selected).
Después de :has(), un sujeto que se encuentra más arriba en el árbol de elementos puede permanecer como sujeto
mientras se proporciona una consulta sobre elementos secundarios: ul:has(> li). Es fácil de entender
cómo :has() obtuvo un nombre común de "selector superior", como sujeto del
selector es ahora el superior en este caso.
Aquí hay un ejemplo básico de sintaxis en el que la clase .parent sigue siendo el sujeto, pero
Solo se selecciona si un elemento secundario tiene la clase .child:
.parent:has(.child) {...}
Este es un ejemplo en el que un elemento <section> es el sujeto, pero el selector
solo coincide si uno de los elementos secundarios tiene :focus-visible:
section:has(*:focus-visible) {...}
El selector :has() comienza a convertirse en una utilidad fantástica una vez más práctico.
casos de uso se hacen evidentes. Por ejemplo, actualmente no es posible seleccionar
Etiquetas <a> cuando unen imágenes, lo que dificulta la enseñanza de la etiqueta de anclaje
cómo cambiar sus estilos en ese caso de uso. Es posible con :has().
aunque:
a:has(> img) {...}
Todos estos son ejemplos en los que :has() solo parece un selector superior.
Considera el caso de uso de las imágenes dentro de elementos <figure> y su ajuste
estilos en las imágenes si la figura tiene un <figcaption>. En la siguiente
ejemplo, se seleccionan las figuras con ad s y, a continuación, imágenes dentro de ellas.
adicional. Se usa :has() y no cambia el asunto, ya que estamos
La segmentación incluye imágenes, no cifras:
figure:has(figcaption) img {...}
Las combinaciones son aparentemente infinitas. Combinar :has() con quantity
las consultas y ajustar
Diseños de cuadrícula de CSS basados en la cantidad de elementos secundarios Combina :has() con
pseudoclase interactiva
estados y crea
que responden de formas nuevas y creativas.
Verificar la asistencia es más fácil con
@supports y
es
selector()
que comprueba si el navegador comprende la sintaxis antes de utilizarla:
@supports (selector(:has(works))) {
/* safe to use :has() */
}
Recursos
- Especificación :has()
- :has() en MDN
- El selector
:has()de CSS es mucho más que un elemento selector"
2022 y más allá
Después de todo esto, hay otras cosas que serán difíciles de hacer. funciones increíbles llegan en 2022. En la siguiente sección, los problemas restantes y las soluciones que se desarrollan activamente para y resolverlos. Estas soluciones son experimentales, aunque pueden ser se especifica o está disponible detrás de las marcas en los navegadores.
En el resumen de las siguientes secciones, se debe garantizar que los problemas enumerados muchas personas de muchas empresas buscan una solución, no es que estas soluciones se lanzarán en 2023.
Propiedades personalizadas con escritura flexible
Propiedades personalizadas de CSS son increíbles. Permiten almacenar todo tipo de elementos dentro de un servidor variable que luego se puede extender, calcular, compartir, etc. En son tan flexibles, que sería bueno tener algunos menos flexibles.
Considera una situación en la que un objeto box-shadow usa propiedades personalizadas para sus valores:
box-shadow: var(--x) var(--y) var(--blur) var(--spread) var(--color);
Todo esto funciona bien hasta que cualquiera de las propiedades se cambia a un valor que
CSS no acepta esos elementos, como --x: red. Si se rompe toda la sombra,
falta una de las variables anidadas o está configurada en un tipo de valor no válido.
Aquí es donde @property entra en juego: --x puede
convertirse en una propiedad personalizada con tipo especificado, ya no es flexible y flexible, pero es segura con
límites definidos:
@property --x {
syntax: '<length>';
initial-value: 0px;
inherits: false;
}
Ahora, cuando box-shadow usa var(--x) y luego se intenta --x: red,
Se ignorará red, ya que no es <length>. Esto significa que la sombra continúa
funcione, aunque se haya asignado un valor no válido a una de sus propiedades personalizadas.
En lugar de fallar, se revierte a su initial-value de 0px.
Animación
Además de la seguridad de tipos, también abre muchas puertas para la animación. El
la flexibilidad de la sintaxis CSS imposibilita realizar animaciones, como
con gradientes. @property es útil porque la propiedad de CSS escrita puede informar al
navegador acerca de la intención del desarrollador dentro de algo demasiado complejo
interpolación. En esencia, limita el alcance de la posibilidad en tanto que un
El navegador puede animar aspectos de un estilo que antes no podía.
Considera esta demostración de ejemplo, en la que se usa un gradiente radial para hacer una parte del una superposición, lo que crea un efecto destacado. JavaScript establece el valor x e y del mouse cuando se presiona la tecla Alt/opt y, luego, cambia el tamaño focal a uno más pequeño valor, como 25%, lo que crea el círculo de enfoque destacado en la posición del mouse:
.focus-effect {
--focal-size: 100%;
--mouse-x: center;
--mouse-y: center;
mask-image: radial-gradient(
circle at var(--mouse-x) var(--mouse-y),
transparent 0%,
transparent var(--focal-size),
black 0%
);
}
Sin embargo, no se pueden animar los gradientes. Son demasiado flexibles y complejos para
el navegador "solo derive" cómo quieres que se animen. Con @property,
sin embargo, se puede escribir y animar una propiedad de forma aislada; en este caso, la
navegador puedan entender fácilmente la intención.
Los videojuegos que usan este efecto de enfoque siempre animan el círculo desde un
círculo en un círculo pequeño. Aquí te mostramos cómo usar @property con nuestra demostración para que la
navegador anima la máscara de gradiente:
@property --focal-size {
syntax: '<length-percentage>';
initial-value: 100%;
inherits: false;
}
.focus-effect {
--focal-size: 100%;
--mouse-x: center;
--mouse-y: center;
mask-image: radial-gradient(
circle at var(--mouse-x) var(--mouse-y),
transparent 0%,
transparent var(--focal-size),
black 0%
);
transition: --focal-size .3s ease;
}
El navegador ahora puede animar el tamaño del gradiente porque hemos reducido de la modificación de una sola propiedad y escribiste el valor para navegador puede interpolar de forma inteligente las longitudes.
@property puede hacer mucho más, pero estas pequeñas habilitaciones pueden ser muy útiles.
Recursos
- @propiedad especificación
- @propiedad en MDN
- @propiedad en web.dev
- Demostración del enfoque de zoom
- Trucos de CSS: Cómo explorar @property y sus animaciones potencia
Fue en min-width o max-width
Antes de los rangos de consultas de medios, una consulta de medios de CSS usa min-width y max-width para
articular sobre y en condiciones. Es posible que se vea de este modo:
@media (min-width: 320px) {
…
}
Después de los rangos de consultas de medios, la misma consulta de medios podría verse de la siguiente manera:
@media (width >= 320px) {
…
}
Una consulta de medios de CSS que usa min-width y max-width puede verse de la siguiente manera:
@media (min-width: 320px) and (max-width: 1280px) {
…
}
Después de los rangos de consultas de medios, la misma consulta de medios podría verse de la siguiente manera:
@media (320px <= width <= 1280px) {
…
}
Según tu experiencia en programación, uno de ellos se verá mucho más legible. que el otro. Gracias a las especificaciones que se agregaron, los desarrolladores podrán elegir que prefieran o incluso usarlos indistintamente.
Recursos
- Sintaxis del rango de consultas de medios especificación
- Sintaxis del rango de consultas de medios activada MDN
- Sintaxis del rango de consultas de medios PostCSS complemento
No hay variables de consulta de medios
Antes del @custom-media, las consultas de medios tenían que repetirse una y otra vez.
depender de preprocesadores para generar el resultado adecuado según las variables estáticas
durante el tiempo de compilación.
Después de @custom-media, CSS permite asignar alias a las consultas de medios y hacer referencia a
del mismo modo que con una propiedad personalizada.
Nombrar las cosas es muy importante: puede alinear el propósito con la sintaxis, lo que que las cosas sean más fáciles de compartir y de usar en equipo. Estos son algunos contenidos multimedia personalizados consultas que me siguen entre proyectos:
@custom-media --OSdark (prefers-color-scheme: dark);
@custom-media --OSlight (prefers-color-scheme: light);
@custom-media --pointer (hover) and (pointer: coarse);
@custom-media --mouse (hover) and (pointer: fine);
@custom-media --xxs-and-above (width >= 240px);
@custom-media --xxs-and-below (width <= 240px);
Ahora que están definidas, puedo usar una de ellas de la siguiente manera:
@media (--OSdark) {
:root {
…
}
}
Encuentra una lista completa de contenido multimedia personalizado consultas que uso en mis archivos de CSS personalizados biblioteca de propiedades Open Props.
Recursos
- Consultas de medios personalizadas especificación
- PostCSS para consultas de medios personalizadas complemento
Anidar selectores es muy bueno
Antes del @nest, había mucha repetición en las hojas de estilo. Se convirtió en
especialmente difíciles de manejar cuando los selectores eran largos y cada uno apuntaba a pequeños
diferencias. La conveniencia de anidar es una de las razones más comunes para
adoptar un preprocesador.
Después de @nest, la repetición desaparece. Casi todas las funciones de
El anidamiento habilitado para el preprocesador estará disponible integrado en CSS.
article {
color: darkgray;
}
article > a {
color: var(--link-color);
}
/* with @nest becomes */
article {
color: darkgray;
& > a {
color: var(--link-color);
}
}
Lo más importante sobre anidar para mí, además de no repetir article en
el selector anidado, es que el contexto de diseño permanece dentro de un bloque de estilo.
En lugar de rebotar de un selector y sus estilos, a otro selector con
estilos (ejemplo 1), el lector puede permanecer dentro del contexto de un artículo y
verás que el artículo
tiene vínculos dentro de él. La intención de relación y estilo son
se agrupan juntos, por lo que article parece tener sus propios estilos.
La propiedad también podría considerarse centralización. En lugar de buscar alrededor de una hoja de estilo para los estilos relevantes, todas se pueden encontrar anidadas dentro de un contexto. Esto funciona con las relaciones entre madres y padres, pero también relaciones de elemento secundario a superior.
Considera un componente secundario que quiere ajustarse cuando está en un contexto superior, a diferencia de que el elemento superior posee el estilo y cambia un elemento secundario:
/* parent owns this, adjusting children */
section:focus-within > article {
border: 1px solid hotpink;
}
/* with @nest becomes */
/* article owns this, adjusting itself when inside a section:focus-within */
article {
@nest section:focus-within > & {
border: 1px solid hotpink;
}
}
@nest ayuda, en general, con una organización, centralización y
propiedad. Los componentes pueden agrupar y poseer sus propios estilos, en lugar de tenerlos
entre otros bloques de estilo. Puede parecer pequeño en estos ejemplos, pero
pueden tener impactos muy importantes, tanto para la comodidad como para la legibilidad.
Recursos
Es muy difícil determinar el alcance de los estilos
Antes del @scope, existían muchas estrategias
porque los estilos en CSS se transmiten en cascada,
y tienen alcance global de forma predeterminada. Estas funciones de CSS son muy convenientes
para muchas cosas, pero para sitios y aplicaciones complejos, con posiblemente muchos
los diferentes estilos de componentes, el espacio global y la naturaleza de la cascada
hacen que los estilos parezcan fugas.
Después de @scope, los estilos no solo pueden tener un alcance solo dentro de un contexto, como un
también pueden articular dónde terminan los estilos y no continúan
en cascada o heredar.
En el siguiente ejemplo, la convención de nomenclatura BEM
el alcance se puede revertir en la intención real. El selector de BEM está intentando
para definir el alcance del color de un elemento header en un contenedor .card con una denominación
de datos. Es necesario que el encabezado tenga este nombre de clase, lo que completa
el objetivo. Con @scope, no se requieren convenciones de nombres para completar
el mismo objetivo sin marcar el elemento de encabezado:
.card__header {
color: var(--text);
}
/* with @scope becomes */
@scope (.card) {
header {
color: var(--text);
}
}
Este es otro ejemplo, menos específico de componentes y más sobre el alcance global.
la naturaleza de los CSS. Los temas oscuro y claro deben coexistir en una hoja de estilo, donde
el orden es importante
para determinar el estilo ganador. Por lo general, esto significa que se aplica el tema oscuro.
los estilos vienen después del tema claro; esto establece la luz como valor predeterminado y
oscuro como estilo opcional. Evita el orden y las batallas de alcance con @scope:
@scope (.light-theme) {
a { color: purple; }
}
@scope (.dark-theme) {
a { color: plum; }
}
Para completar la historia, @scope también permite establecer dónde se encuentra
finaliza el alcance del estilo de vida. Esto no se puede hacer con ninguna convención de nombres ni preprocesador.
es especial y solo puede hacer algo con CSS integrado en el navegador. En la
En el siguiente ejemplo, los estilos img y .content se aplican exclusivamente cuando un elemento
El elemento secundario de un .media-block es hermano o elemento superior de .content:
@scope (.media-block) to (.content) {
img {
border-radius: 50%;
}
.content {
padding: 1em;
}
}
Recursos
No hay opciones de CSS para un diseño de mampostería
Antes de la mampostería de CSS con cuadrícula, JavaScript era la mejor manera de lograr la mampostería. diseño, ya que cualquiera de los métodos CSS con columnas o flexbox no sería correcto representan el orden del contenido.
Después de la mampostería de CSS con cuadrícula, no se requerirán bibliotecas de JavaScript y el el orden del contenido será correcto.
https://www.smashingmagazine.com/native-css-masonry-layout-css-grid/
La demostración anterior se logra con el siguiente CSS:
.container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: masonry;
}
Es reconfortante saber que aparece en el radar como una estrategia de diseño faltante. además, puedes probarlo hoy mismo en Firefox.
Recursos
- Diseño de mampostería especificación
- Diseño de mampostería activado MDN
- Smashing Magazine: Diseño de mampostería de CSS nativo con CSS Cuadrícula
El CSS no puede ayudar a los usuarios a reducir datos
Antes de la consulta de medios prefers-reduced-data, JavaScript y un servidor podían
cambiar su comportamiento según el "Ahorro de datos" del sistema operativo o del navegador
pero CSS no.
Después de la consulta de medios prefers-reduced-data, el CSS puede unirse a la experiencia del usuario.
mejoras y desempeñan un papel importante en el ahorro de datos.
@media (prefers-reduced-data: reduce) {
picture, video {
display: none;
}
}
El CSS anterior se usa en este desplazamiento multimedia.
componente y los ahorros
puede ser enorme. Según qué tan grande sea el viewport de visita, más ahorrarás
durante la carga de la página. El guardado continúa a medida que los usuarios interactúan con el contenido multimedia
desplazadores. Todas las imágenes tienen atributos loading="lazy" y eso
combinado con CSS que ocultan el elemento por completo, significa que una solicitud de red para el
nunca se crea esta imagen.
Para mis pruebas, en un viewport de tamaño medio, 40 solicitudes y 700 KB de recursos se cargaron inicialmente. A medida que el usuario se desplaza por la selección de contenido multimedia, se generan más solicitudes cuando se carguen los recursos. Con CSS y la consulta de medios de datos reducida, 10 solicitudes y Se cargaron 172 KB de recursos. Eso equivale a medio megabyte de ahorro ni siquiera se desplazó por el contenido multimedia, y en ese momento no se mostrarán que envían los usuarios.
Esta experiencia de datos reducida tiene más ventajas que solo los datos. de ahorros en la nube. Se pueden ver más títulos y no hay imágenes de portada que distraigan la atención de los usuarios. robar la atención. Muchos usuarios navegan en el modo Ahorro de datos porque pagan por megabyte de datos, es muy bueno ver que CSS puede ayudar aquí.
Recursos
- prefers-reduced-data especificación
- prefers-reduced-data en MDN
- prefers-reduced-data en una GUI Desafío
- Smashing Magazine: Mejora de las Métricas web esenciales, un caso de revista Smashing Estudio
Las funciones de ajuste de desplazamiento son demasiado limitadas
Antes de estas propuestas del ajuste de desplazamiento, escribir tu propio JavaScript para administrar el carrusel, el control deslizante o la galería podrían ser complejos rápidamente, con todos los observadores y la administración del estado. Además, si no tienes cuidado, las velocidades de desplazamiento naturales podrían normalizarse con una secuencia de comandos, lo que hace que la interacción del usuario posiblemente engorroso.
API nuevas
snapChanging()
En cuanto el navegador lance un elemento secundario de instantáneas, se activará este evento. Esto permite IU para reflejar la falta de un elemento secundario de ajuste y el estado de ajuste indeterminado de la desplazador, como ahora se está usando y llegará a un lugar nuevo.
document.querySelector('.snap-carousel').addEventListener('snapchanging', event => {
console.log('Snap is changing', event.snappedTargetsList);
});
snapChanged()
En cuanto el navegador se ajusta a un nuevo elemento secundario y la barra de desplazamiento queda descansada, se activa este evento. Esto permite que se actualice cualquier IU que dependa del elemento secundario ajustado y reflejan la conexión.
document.querySelector('.snap-carousel').addEventListener('snapchanged', event => {
console.log('Snap changed', event.snappedTargetsList);
});
scroll-start
El desplazamiento no siempre comienza al principio. Considera los componentes deslizables en los que deslizar hacia la izquierda o derecha activa diferentes eventos o una barra de búsqueda que en la de carga se oculta inicialmente hasta que te desplazas a la parte superior. Esta propiedad de CSS permite los desarrolladores especifican que una barra de desplazamiento debe comenzar en un punto específico.
:root { --nav-height: 100px }
.snap-scroll-y {
scroll-start-y: var(--nav-height);
}
:snap-target
Este selector CSS hará coincidir los elementos de un contenedor de ajuste de desplazamiento que se actualmente ajustado por el navegador.
.card {
--shadow-distance: 5px;
box-shadow: 0 var(--shadow-distance) 5px hsl(0 0% 0% / 25%);
transition: box-shadow 350ms ease;
}
.card:snapped {
--shadow-distance: 30px;
}
Después de estas propuestas de ajuste de desplazamiento, hacer un control deslizante, un carrusel o una galería es mucho más fácil, ya que el navegador ahora ofrece conveniencia para la tarea, lo que elimina de objetos y el código de organización de desplazamiento para favorecer el uso de APIs integradas.
Estas funciones de CSS y JS todavía están en una etapa muy temprana, pero esté atento para polyfills que pueden facilitar su adopción y prueba.
Recursos
- Borrador del Ajuste de desplazamiento 2 especificación
- Ajuste de desplazamiento 2 explicaciones
- Demostraciones de instantáneas
Cómo andar en bicicleta entre estados conocidos
Antes del toggle(), solo se podían aprovechar los estados integrados en el navegador.
para el estilo e interacción. La entrada de la casilla de verificación, por ejemplo, tiene :checked, un
estado del navegador administrado internamente para la entrada que CSS puede usar para
cambiar el elemento de forma visual.
Después de toggle(), se pueden crear estados personalizados en cualquier elemento para que CSS los cambie.
y usar para dar estilo. Permite grupos, ciclismo, activación/desactivación dirigida y mucho más.
En el siguiente ejemplo, el mismo efecto de un elemento de lista tachado en se completa, pero sin ningún elemento de casilla de verificación:
<ul class='ingredients'>
<li>1 banana
<li>1 cup blueberries
...
</ul>
Y los estilos de CSS toggle() relevantes:
li {
toggle-root: check self;
}
li:toggle(check) {
text-decoration: line-through;
}
Si estás familiarizado con las máquinas de estado, podrás notar la cantidad de crossover
es con toggle(). Esta función permitirá que los desarrolladores compilen más de su estado
en CSS, lo que con suerte da como resultado formas más claras y semánticas de orquestación
interacción y estado.
Recursos
Cómo personalizar elementos de selección
Antes del <selectmenu>, el CSS no podía personalizar <option>
con HTML enriquecido o cambian mucho en la visualización de una lista de opciones.
Esto llevó a los desarrolladores a cargar bibliotecas externas que recrearon gran parte de los
la funcionalidad de un <select>, que terminó con mucho trabajo.
Después de <selectmenu>, los desarrolladores pueden proporcionar HTML enriquecido para los elementos de opciones y
estilos tanto como sea necesario, sin dejar de cumplir con los requisitos de accesibilidad
y proporcionando HTML semántico.
En el siguiente ejemplo, tomado de la explicación de <selectmenu>
de selección, se crea un nuevo menú de selección
con algunas opciones básicas:
<selectmenu>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</selectmenu>
CSS puede orientar y diseñar las partes del elemento:
.my-select-menu::part(button) {
color: white;
background-color: red;
padding: 5px;
border-radius: 5px;
}
.my-select-menu::part(listbox) {
padding: 10px;
margin-top: 5px;
border: 1px solid red;
border-radius: 5px;
}
Puedes probar el elemento <selectmenu> en Chromium en Canary con la Web
de experimentos habilitada. Ten cuidado con la selección personalizable en 2023 y en los años posteriores
elementos del menú.
Recursos
Cómo fijar un elemento en otro
Antes de anchor(), la posición absoluta y la relativa eran estrategias de posición.
para que los desarrolladores puedan hacer que los elementos secundarios se muevan dentro de un elemento superior
.
Después de anchor(), los desarrolladores pueden posicionar elementos frente a otros, independientemente
de que sean niños o no. También permite a los desarrolladores
especificar qué perímetro
de posición y otras sutilezas para crear relaciones de posición entre
o de terceros.
La explicación incluye algunos buenos ejemplos y muestras de código, si estás interesadas en aprender más.