¡Qué es! Importante #8: Favicons claros/oscuros, @mixins, cuadros de visualización de objetos, etc.
Breve y conciso, pero muy conciso, este número cubre íconos claros/oscuros, @mixindeformación por interpolación del anclaje, object-view-boxnuevas funciones de red y más.
Iconos SVG que respetan los esquemas de color
Me gusta mucho el logo colorido con aproximadamente un 50% de brillo, se ve muy bien con la luz. y Fondo oscuro, pero no todos los logotipos pueden hacerlo. Paweu Grzybek nos muestra Cómo implementar íconos SVG que respeten los esquemas de colorque nos permite mostrar favicons de forma condicional, pero este comportamiento no es consistente en diferentes navegadores web. Es una lectura interesante y parece haber un movimiento para que funcione.
Una vez que esto sucede, este es un Cambio CSS del tema del huevo esqueuomórfico Lo descubrí la semana pasada. Sinceramente, el momento perfecto.
Mecánica orgánica fenomenal del interruptor de palanca de huevo (HTML + CSS + JS). Capas de sombras de cuadros complejos y manipulación del radio del borde. A través de una profunda retroalimentación táctil. Código fuente: freefrontend.com/code/skeuomo…
— Interfaz gratuita (@freefrontend.bsky.social) 26 de marzo de 2026 11:42
Ayuda CSS WG Forma @mixin
parece @mixin Dando un paso adelante. Lea Verou nos mostró un fragmento de código y nos preguntó qué pensábamos al respecto..
🚨 ¿Quieres mixins en CSS? ¡Ayuda a CSS WG diciéndonos qué crees que es natural! Vea el código en la captura de pantalla. Para cada div, div > h2, div + p, ¿qué ancho de resultado le parecería menos sorprendente? Votar: ┣ Github: github.com/LeaVerou/blo… ┗ Mastodon: front-end.social/@leaverou/11…
— Dra. Lea Verou (@lea.verou.me) 26 de marzo de 2026 23:29
Tutorial de deformación por interpolación de puntos de anclaje
Chris Coyle nos muestra Cómo crear una biblioteca de imágenes usando ventanas emergentes y algo llamado AIM (Deformación por interpolación del punto de anclaje). Acabo de enterarme de esto ahora pero Adam Argyle habla sobre AIM Vuelve en enero. Esta no es una característica nueva de CSS, sino la idea de animar algo desde su posición inicial hasta su posición anclada. No te pierdas este.
Además, ¿te acuerdas? Demostración de Temani ¿Qué compartí hace unas semanas? Bueno, el front-end master ha sido lanzado. enseñanza ¡también!
recordar object-view-box? Yo tampoco
CSS object-view-box Permite escalar, recortar o enmarcar elementos de forma similar a SVG viewBox Funciona, pero no se ha mencionado desde que Chrome lo implementó en agosto de 2022. Para ser honesto, no lo recuerdo en absoluto, lo cual es una pena porque suena útil. Victor Ponamariov explica en una publicación de Bluesky cómo object-view-box trabajar. Esperemos que Safari y Firefox lo implementen pronto.
¿No sería bueno implementar el recorte de imágenes nativo en CSS? Existe: el cuadro de vista de objetos.
– Víctor (@vpon.me) 24 de marzo de 2026 16:15
corner-shape Se utiliza para elementos cotidianos de la interfaz de usuario.
Ya dije mucho CSS corner-shapeproporcionado por nosotros y la comunidad de desarrollo web en general, aunque actualmente solo es compatible con Chrome. Esta es una característica realmente divertida que ofrece muchas maneras de convertir la caja en formas interesantes, pero Brecht de Ruyter corner-shape artículo Prestar más atención a cómo usamos corner-shape Adecuado para elementos/componentes de interfaz de usuario diarios.
maestro de diseño
El curso de Ahmed Shadid— maestro de diseño — Enseñarle cómo planificar y crear diseños CSS utilizando técnicas modernas. Además, también puede aprender a utilizar la versión de prueba de la extensión del navegador de desarrollo web para dominar el esqueleto de la creación de un sitio web. poliestirenoproporcionado gratuitamente con el curso.
Nuevas características de la plataforma web
Nuevas funciones lanzadas para Firefox y Safari (lamentablemente no hay puntos de referencia):
Además, Bramus dice que Chrome 148 contará en consulta de característica de reglamientras que Chrome 148 y Firefox 150 permitirán background-image apoyo light-dark(). De todos modos, hay un nuevo sitio web llamado observación base Realice un seguimiento del estado básico de todas estas funciones CSS.
¡adiós!
