¡Qué es! Importante n.º 11: escenas de vóxeles 3D, enfoque volador, sintaxis CSS y más

Si las escenas de vóxeles 3D (a las que puedes diseñar), las animaciones de enfoque volador o la nueva sintaxis CSS te suenan como lo tuyo, entonces este problema es ¡Qué es importante! Definitivamente para ti.

También incluye Polypane, animaciones de desplazamiento y las últimas actualizaciones de la plataforma web para Chrome 148 y Safari 26.5.

Heerich.js para escenas de vóxeles 3D

inspirado por Escultura de Erwin Heerich, david ain Creado Heerich.jsun pequeño motor para crear escenas de vóxeles en 3D. Se representan como SVG y, debido a que podemos usar variables CSS en SVG, la escena básicamente se puede diseñar usando CSS.

fragmentos de poliestireno

Lanzamiento de Polypane, ampliamente considerado como el mejor navegador para desarrollo web almacenamiento de clips. Entonces, si desea hacer clic en un componente y copiar HTML básico sin todas las “tonterías infladas”, entonces Eliminador de residuos con un solo clic Justo lo que quieres. Gran nombre por cierto.

Animación de enfoque a través de la transición de vista.

Chris Coyle nos muestra Cómo animar el enfoque a través de transiciones de vista. También comparó las “acciones innecesarias” con las condiciones de WebAIM. prefers-reduced-motion Creo que este es el enfoque correcto, ya que me resulta difícil seguir el enfoque incluso cuando es visible.

De cualquier manera, es una maravillosa exploración de la tecnología. Además, más abajo en los comentarios, Kilian Valkhof (en realidad, el fundador de Polypane) comparte su perspectiva. Solo tecnología de enfoque flotante CSS (O, como lo llama Chris, “enfoque volador”).

este of <selector> sintaxis

Paweu Grzybek mencionó pensar of <selector> La sintaxis en realidad está bastante bien soportada ahora (línea de base), pero para ser honesto, ni siquiera he oído hablar de ella.

Sé que CSS :nth-child(n of selector) existe, pero no sé qué tan bien soportado está ahora. Otra cosa que no sabía era que podía usar el anidamiento CSS como se muestra en el siguiente ejemplo. El CSS moderno es increíble ❣️developer.mozilla.org/en-US/docs/W… #css

(imagen o incrustar)

– Paweu Grzybek (@pawelgrzybek.com) 17:51 · 5 de mayo de 2026

El selector a continuación significa: “De todos los hermanos, seleccione el segundo .intropero sólo si es un <div>“. es un poco como div:nth-of-type(2)Aparte de Eso Sólo se pueden seleccionar elementos del mismo tipo, mientras que of <selector> Funciona con cualquier selector.

div:nth-child(2 of .intro) {
  /* ... */
}

Mientras & equivalente a selector de padres (entonces, .intro), el segundo ejemplo significa “de todos los hermanos y hermanas, elige el segundo .intro dentro .intro. Y porque antes no había nada :nth-child(), .intro Esta vez puede ser cualquier cosa.

.intro {
  :nth-child(2 of &) {
    /* ... */
  }
}

Están sucediendo muchas cosas en CSS hoy en día, por lo que lo encuentro muy útil cuando cosas que me he perdido regresan así. Curiosamente, mientras escribo esto veo Sam Preeti escribió un artículo sobre of <selector> sintaxis Hace más de una semana (*Agregar a la lista de lectura*).

Comprender la sintaxis del alcance

La sintaxis de rango es una sintaxis nueva y más legible con operadores de comparación (>, <, >=y <=) se utiliza para consultas de medios y consultas de contenedores. Ahmad Shadeed lo explica de forma experta Cómo funciona la sintaxis del alcancepero preste mucha atención a la compatibilidad del navegador. Los navegadores web todavía pasan consultas de contenedor y la sintaxis de alcance para estas consultas debe pasarse de forma independiente. Por ejemplo, las consultas estilo contenedor llegarán a Firefox 151 la próxima semana, pero la sintaxis de rango para las consultas estilo contenedor vendrá con una bandera.

Esto es algo que es fácil pasar por alto (no me pregunten cómo lo sé).

Las animaciones basadas en desplazamiento pueden ser un poco difíciles (especialmente aquellas con view() horario), pero el experto de Josh Como Animación basada en desplazamiento Hazlos más fáciles de entender. Viene con pergamino –motivado La animación es un trabajo en progreso, y te recomiendo que primero domines la animación basada en desplazamiento si aún no lo has hecho. De nuevo, no me preguntes cómo lo sé (*llorando en CSS*).

Nueva actualización de la plataforma web

inspirado por este lindo comentariosolo queremos agradecer a nuestros autores por todo el increíble trabajo que realizan, así como a muchos otros educadores de quienes sin duda hemos aprendido y nos hemos inspirado. ¡Sigan así, tramposos de CSS!

No soy un experto en CSS, pero mi favorito es un educador profesional de CSS. ¡Sus habilidades de diseño, su capacidad para aprovechar al máximo las plataformas web y su entusiasmo general por crear páginas web no tienen comparación con otros tipos de desarrolladores!

——George Rodier (@georgerodier.com) 30 de abril de 2026 15:42

¡Hasta la próxima!