¿Qué es importante n.º 7: aleatorio(), esquinas colapsadas, consultas de contenedores anclados y más?

Para este problema ¡Qué es importante!tenemos un equilibrio saludable de CSS antiguo que quizás te hayas perdido, y nuevo CSS que no querrás perderte. Esto incluye random(), random-item()usando esquinas dobladas clip-path, backdrop-filter, font-variant-numeric: tabular-numsAPI emergente, consulta de contenedor de anclaje, posicionamiento general de anclaje, DOOM en CSS, personalizable <select>, :openanimación activada por el desplazamiento, <toolbar>y de alguna manera, más.

Profundicemos un poco más.

entender random() y random-item()

Álvaro Montoro explica cómo random() y random-item() Las funciones CSS funcionan. Resulta que en realidad son bastante complejos:

width: random(--w element-shared, 1rem, 2rem);
color: random-item(--c, red, orange, yellow, darkkhaki);

Crea esquinas dobladas usando clip-path

Mi primera solución de oreja de perro involucró imágenes reales. ni uno excelente solución, pero así se hacía en los años 1990. A partir de entonces pudimos hazlo con box-shadowpero a Kitty Giraudel se le ocurrió una CSS clip-path solución Recorte una forma personalizada (pase el cursor sobre el gatito para verlo en acción):

volver a visitar backdrop-filter y font-variant-numeric: tabular-nums

Stuart Robson habla backdrop-filter. No es una propiedad CSS nueva, pero es muy útil y rara vez se habla de ella. De hecho, hasta ahora pensaba que era para ::backdrop Pseudoelemento, pero en realidad podemos usarlo para crear varios efectos de fondo para varios elementos, como este:

font-variant-numeric: tabular-nums Es otro. Esta propiedad y valor evitan que el diseño cambie cuando los números cambian dinámicamente, como relojes en tiempo real, contadores, temporizadores, tablas financieras, etc. Amit Merchant lo guía a través del proceso A través de esta demostración:

Comience a usar la API de Popover

dios tiempo abru de hecho Una inmersión profunda en la API Popoveruna característica nueva pero cotidiana de la plataforma web que simplifica la información sobre herramientas y los patrones de interfaz de usuario similares a la información sobre herramientas, pero no está exenta de matices.

Descubriendo otra peculiaridad del anclaje

solo Otra peculiaridad del posicionamiento del anclaesta vez de Chris Coyle. Estas peculiaridades se han ido acumulando desde hace un tiempo. tenemos hablar de ellos tiempo y hazlo de nuevopero el problema es que son No error. Generalmente no se comprende cómo funciona el anclaje, por lo que definitivamente vale la pena leer el artículo de Chris, al igual que los artículos que cita.

Utilice consultas de contenedores anclados para crear mensajes de cambio dinámicos

En este tutorial, demuestro Cómo crear mensajes de cambio dinámicos utilizando consultas de contenedores anclados. Además, encontré una peculiaridad con el posicionamiento del ancla, por lo que si desea consolidar su comprensión de todo esto, creo que un tutorial también sería útil.

Demostración (el efecto completo requiere Chrome 143+):

Perdición en CSS

Perdición en CSS. condenar. en CSS.

DOOM se renderiza íntegramente con CSS. Cada superficie es una superficie con una imagen de fondo.

y el trazado de recorte con la transformación 3D aplicada. Por supuesto, CSS no tiene una cámara móvil, por lo que rotamos y trasladamos la escena alrededor del usuario.

(imagen o incrustar)

-Niels Linehill (@html5test.com) 13 de marzo de 2026 20:32

Actualizaciones de Safari, actualizaciones de Chrome y clics rápidos que te perdiste

también, A partir de septiembre, el navegador Chrome se lanzará cada dos semanas.

de clic rápido Scrolls, es posible que te hayas perdido Font Awesome lanzó una campaña de Kickstarter para convertir Eleventy en Build Awesome, pero la campaña se canceló porque no se pudo enviar el correo electrónico (¡A pesar de lograr sus objetivos!) y prometió intentarlo de nuevo. puede Suscríbete para reiniciar notificaciones.

también, <toolbar> Muy pronto Según Lucas Volo. Esto es similar a <focusgroup>podemos probarlo en Chrome 146 con el indicador “Funciones de plataforma web experimental” habilitado.

Bueno, me voy a matar algunos demonios en DOOM. ¡Hasta la próxima!

PD Felicitaciones Kevin Powell para poder habilitarlo 1 millón de suscriptores de YouTube!