funciones CSS, alpha() funciones, carriles de cuadrícula, algo sobre <dialog> Quizás no lo sepas, CSS Wordle, etc. – esto es ¡Qué es importante! Ahora.
Funciones CSS, explicadas profesionalmente
Jane Ori explica expertamente Cómo funcionan las funciones CSS. @function voluntad tal vez es la característica CSS más grande tal vez Este año se convirtió en el punto de partida, por lo que al principio me pareció un poco intimidante. Es decir, hasta que lea el tutorial paso a paso de Jane que te ayudará a comprenderlo bastante bien.
también, Declan Kidlow escribió nuestro @function documentoes posible que desees marcarlo como favorito para consultarlo rápidamente en el futuro.
este alpha() Función
Hablando de funciones, alpha() La funcionalidad me dejó atónito. Una es porque nunca había oído hablar de ello y la otra es porque…¿Por qué? Ya podemos cambiar el canal Alfa:
/* This */
color: alpha(from var(--color) / 0.5);
/* Instead of this */
color: oklch(from var(--color) l c h / 0.5);Excelentemente, este comentario Jason Leo concluyó. Primero, esto significa que no necesitamos codificar valores de color cuando ya tenemos variables CSS. Durante años he estado evitando este problema simplemente almacenando los valores reales en variables CSS, pero cada vez tenía que envolverlos en una función de color. real monótono:
/* Just the values */
--color: 0.65 0.23 230;
/* Then use them flexibly */
color: oklch(var(--color));
color: oklch(var(--color) / 0.5);Pero es mejor que esto (en mi opinión):
/* Function and values */
--color: oklch(0.65 0.23 230);
/* Delightful */
color: var(--color);
/* Delightless */
color: oklch(from var(--color) l c h / 0.5);alpha() Ofreciendo lo mejor de ambos mundos:
/* Less delightless */
color: alpha(from var(--color) / 0.5);En segundo lugar, el formato del color es realmente irrelevante para este contexto, por lo que alpha(from var(--color) / 0.5) transmite la intención más claramente que oklch(from var(--color) l c h / 0.5) Hacer. Esto también hace que la declaración sea más breve.
Gracias, Adam Argyle traer alpha() arriba.
Una guía práctica para los carriles de la cuadrícula
Se lanza WebKit Una guía práctica para los carriles de la cuadrícula (Anteriormente conocido como CSS Masonry Layout). Si alguna vez has leído uno de nuestros Guía de consejos CSSque es similar a (sus palabras -solo digo’). Es una introducción fluida, con una variedad de demostraciones básicas y del mundo real.
Calidad de vida mejorada <dialog>
Una Kravets habla de dos Mejorar la calidad de vida <dialog> – nuevo closedby propiedades, que aún no son compatibles con Safari, y overscroll-behavior: contain. También hay contenido valioso en los comentarios, incluido sobre scrollbar-gutter: stable.
✅ Bonito pequeño botón para alejar 🙈 El diseño cambia cuando la barra de desplazamiento desaparece 🙈 No hay luces apagadas Estos problemas de experiencia del usuario se pueden resolver fácilmente con: – closeby=”any” – overscroll-behavior: contiene
——Kravitz (@una.im) 13:28 · 3 de junio de 2026
Chris Coyier también nos mostró como animar <dialog>sCreo que muchos de nosotros sabemos cómo hacerlo, pero es fácil equivocarse. Tengo que buscarlo en Google cada vez (son esos pitidos @starting-styles).
¿Qué sucederá en el CSS Day 2026?
día CSSLa Conferencia Comunitaria anual de CSS se celebró en Ámsterdam los días 11 y 12 de este mes (técnicamente dos días). Si bien no habrá transmisión en vivo este año, una grabación estará disponible a fines de junio. Hasta entonces, mira cielo azul día css así como #CSSDay Feed de cielo azul Vea lo que sucede en el escenario, lo que sucede detrás de escena e incluso algunas diapositivas de las charlas.
No, este año no hay lanzallamas, pero tampoco es que no haya DOOM (si lo sabes, lo sabes).
CSS Wordle
Qué gran semana ha sido, especialmente con todo lo que sucedió en el CSS Day, pero si aún tienes energía, te recomiendo participar en una ronda (o rondas). Sankami Fafrade CSS WordleEstaba realmente obsesionado con eso la semana pasada.
Nuevas funciones y actualizaciones de la plataforma web
¡Hasta la próxima!
