¡Qué es! Importante n.º 9: rompecabezas de ruta de clip, kit de herramientas de transformación de vista, contenedores de solo nombre y más
de este tema ¡Qué es importante! traído a ti clip-path rompecabezas, View Transformation Toolkit, contenedores de solo nombre, un resumen general de características nuevas y destacadas de la plataforma web, y más.
Crea un rompecabezas usando clip-path
Amit Singh probado Cómo crear un rompecabezas completo usando clip-path. Si bien dudo que necesites crear rompecabezas en el corto plazo, el tutorial de Amit proporciona una excelente manera de familiarizarte con esta propiedad CSS en evolución que se vuelve más popular cada día.
Por ejemplo, Chrome Canary ha enviado redondo clip-path polígono Sólo la semana pasada:
Jason y yo estamos trabajando actualmente en la implementación de la palabra clave CSS `polygon() round` en Chrome. ¡Esta es una de mis características favoritas de CSS! Gracias a @lea.verou.me por traer esto a CSS. Habilite la bandera “enable-experimental-web-platform-features” en Chrome Canary codepen.io/yisi/pen/NPR…
— yisibl.bsky.social (@yisibl.bsky.social) 9 de abril de 2026 7:25
Y hay Hable sobre implementar otros corner-shape Palabras clave Por ejemplo beveltambién.
Finalmente, ya que estamos en el tema y ya que de alguna manera me lo perdí por completo. ¿Qué es importante? #8,aquí lo tienes Karl Koch muestra cosas muy interesantes clip-path animación.
¡Edítalo!
Ver el kit de herramientas de transición
El equipo de Chrome DevRel creó un Ver kit de herramientas de transformaciónun conjunto de utilidades que facilitan el manejo de transformaciones de vistas.
Esta es mi demostración favorita en el sitio:
Chrome proporciona transiciones de vista de todos los elementos Fue apenas el mes pasado, así que ahora es el momento perfecto para sumergirse en este kit.
Cómo determinar el alcance usando un contenedor de solo nombre
Chris Coyier habla sobre el uso contenedor de solo nombre para el alcancey cómo se comparan con los nombres de categorías @scope. Personalmente prefiero @scope Porque tiende a producir HTML más limpio y Chris parece haber actualizado su posición para ser más @scope– también es consistente, pero en realidad todo se reduce a preferencias personales. ¿Qué opinas sobre esto?
Oye, ¿recuerdas las subcuadrículas?
en un momento determinado, subcuadrícula es una de las funciones CSS más esperadas, pero han pasado dos años y medio desde que se convirtió en una nueva función en Baseline y apenas ha tenido impacto en el mundo CSS. Es una pena, porque las subcuadrículas nos ayudan a dividir la cuadrícula correctamente y evitar el “viejo Michael Scofield/envoltorios anidados/fiesta de márgenes negativos”.
Pero no te preocupes, David Bushell Explicación muy simple de subcuadrículas. ¿Hay alguno que cubras?
Probablemente no necesites…¿JavaScript?
recordar Probablemente no necesites jQuery? Pavel Láptev Grandes extensiones para CSS Es una sensación similar, teniendo en cuenta que las alternativas de CSS a las bibliotecas de JavaScript (y a JavaScript en general) son más pequeñas y de mayor rendimiento.
clics perdidos
Mantenerse al día con todas estas nuevas funciones de CSS es cada vez más difícil. He probado demasiadas veces el nuevo trabajo de Keith Cirkel. ¿CSS o BS? pruebay mi mejor puntuación es sólo 18/20. Momentos tristes. Déjame saber tu puntuación en los comentarios (A menos que sea más alto que el mío…).
