¡Qué es! Importante #14: Decoración de espacios, aleatorio(), tamaño de campo, etc.

Sé que estás muy ocupado, así que ¿Qué es importante? #14aunque las actualizaciones del navegador son pocas y espaciadas, estaré corriendo durante algunas semanas. Desde CSS Quake hasta decoraciones CSS Gap, ¡esto no se lo puede perder!

Hyperblam: hacer música con HTML

Creado por Haydn Pickering Heberbramuna implementación basada en HTML de Web Audio API que utiliza elementos web para crear música sin JavaScript.

Vale, no del todo CSS, ¡pero sigue siendo genial!

Terremoto CSS

impulsado por CSS múltipleDiseño creado Terremoto CSSes una adaptación del juego fundamental Quake de 1996.

Muy CSS-y, el compañero perfecto CSS fatalidadtambién se envió recientemente.

Obtenga más información sobre la decoración de espacios CSS

Acompaña a Afi nos mostró Cómo diseñar la decoración de huecos. Como habrás adivinado, “brecha” se refiere a gapOcupa espacio cuando se utiliza Flexbox, diseño de cuadrícula o diseño de varias columnas. Seamos honestos, las decoraciones de huecos existen desde hace mucho tiempo, pero, como muestra Temani, podemos hacer mucho con ellas.

CSS random() experimento

Polypane demostró su CSS random() experimento. Si tiene curiosidad acerca de esta elusiva característica CSS que todavía no es compatible con ningún otro navegador que no sea Safari, Polypane ha creado un efecto bokeh, algunos pétalos que caen, una pila desordenada de Polaroids, un poema, una aurora animada y más. Este es un estudio bastante profundo que parece mostrarnos todo lo que podemos hacer. random().

como hacer <select>líquido

Manuel Matuzovic nos muestra Cómo configurar el ancho <select>s al ancho elegido <option> y field-sizing (field-sizing: contentmás específicamente), que se convirtió en la base cuando se lanzó Firefox 152 hace dos semanas.

Otra cosa a tener en cuenta es que si utilizamos size propiedades (por ejemplo, <select size="3">), lo que hace <select> Introduzca un cuadro de lista desplazable que muestre tres <option>Por defecto, field-sizing: content Cúbrelo para mostrarlo todo <option>s.

El nuevo estándar para temas CSS

Yona Kravitz explica Cómo funcionan los temas CSS modernos. Hemos estado viendo mucho de esto últimamente, pero Una habla de @property, light-dark(), contrast-color(), y @container style()los cuales también son líneas de base recientes, por lo que es una gran oportunidad para ver cómo funcionan todas estas características juntas.

Hablando de eso, Escribí un artículo sobre contrast-color() Después de la primera exploración.

Por qué no es necesario que los sitios web funcionen de la misma manera para todos

Brahms explica Por qué no es necesario que los sitios web funcionen de la misma manera para todos. Por ejemplo, diferentes plataformas tienen diferentes métodos de entrada primarios, e incluso entonces los usuarios pueden conectar su método de entrada secundario preferido, por lo que debemos abandonar la idea de hacer que los sitios web sean consistentes en todas las plataformas.

También habló de tres características muy interesantes de la plataforma web (llamadas de interés, desplazamiento excesivo y API de imagen en imagen de documentos) que tienen que variar según la plataforma.

Marina Aísa asiste al Web Engines Hackfest

Cuando todo el mundo sigue hablando del Día CSS (incluyéndome a mí), Hackfest de motores web La carrera comienza en A Coruña, Galicia. Lo que me encanta de estos eventos (además de las presentaciones, claro) es que los asistentes hablan sobre las presentaciones, las personas que conocieron, qué más hicieron mientras estuvieron en la ciudad, etc.

Esto es Marina Aísa documentó el evento de dos díascomenzando con una caminata por el bosque gallego, seguida de una discusión de dos días sobre motores web y estándares web (intercalada con algo de escalada en paredes) y terminando con una discusión sobre lo que los navegadores pueden hacer para ayudar a mejorar la accesibilidad web:

Esta semana estoy en A Coruña, Galicia, asistiendo a @webengineshackfest.org 👩‍💻 donde discutiremos el futuro de los motores y estándares web. Teniendo en cuenta el impacto potencial en el futuro desarrollo web, pensé que sería útil compartir algunas de mis notas personales del evento. ✍️👇

— Marina Aísa (@marinaisa.com) 16 de junio de 2026 14:31

Objetivo personal para el próximo año: ¡asistir a uno de estos eventos!

Nuevas características de la plataforma webs

Sí, han sido unas semanas aburridas para el navegador estable, pero se avecinan algunas cosas realmente interesantes. Por favor preste mucha atención a nuestro clic rápidoporque aquí es donde comparto primero estas actualizaciones de la plataforma web (y las actualizaciones de los navegadores de desarrollo). De hecho, el Chrome 150 se enviará hoy más tarde.

¡Nos vemos en dos semanas!