API CSS Layout y su alcance
Cree algoritmos de diseño personalizados con la API CSS Layout y comprenda el alcance y las limitaciones de Houdini.
API CSS Layout y su alcance es una lección gratuita de CSS Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de CSS Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de CSS Academy incluye 4 lecciones en total.
Descripción general de CSS Houdini
CSS Houdini es un conjunto de API de bajo nivel que expone partes del motor de renderizado de CSS a JavaScript. Incluye: Typed OM, Properties & Values API, Paint API, Layout API y Animation Worklet. En conjunto, permiten crear extensiones personalizadas de CSS.
¿Qué es CSS Layout API?
CSS Layout API permite a los desarrolladores definir algoritmos de diseño personalizados en JavaScript que pueden usarse como valores de la propiedad CSS display. Puede crear diseños tan potentes como Grid o Flexbox.
Estructura de Layout Worklet
Un Layout Worklet implementa los métodos intrinsicSizes() y layout() y se registra con registerLayout():
<div class="masonry-container">
<div class="item" style="height: 60px;">1</div>
<div class="item" style="height: 100px;">2</div>
<div class="item" style="height: 40px;">3</div>
<div class="item" style="height: 80px;">4</div>
<div class="item" style="height: 120px;">5</div>
<div class="item" style="height: 50px;">6</div>
</div>
Uso de un diseño personalizado
Haga referencia al diseño registrado en CSS:
<div class="masonry-container">
<div class="item" style="height: 60px;">1</div>
<div class="item" style="height: 100px;">2</div>
<div class="item" style="height: 40px;">3</div>
<div class="item" style="height: 80px;">4</div>
<div class="item" style="height: 120px;">5</div>
<div class="item" style="height: 50px;">6</div>
</div>
Estado de Layout API
CSS Layout API tiene una compatibilidad limitada con los navegadores y es principalmente experimental (en Chrome está detrás de indicadores). Hoy es más una API de investigación y de futuro que una herramienta para producción. Es posible que los navegadores implementen de forma nativa el diseño de tipo Masonry.
Regla at @scope
@scope es una función más reciente de CSS (parte de la especificación CSS Scoping) que limita el alcance de las reglas CSS a un subárbol específico del DOM sin tener que añadir clases por todas partes.
Sintaxis de @scope
Defina una raíz de ámbito y, opcionalmente, un límite de ámbito:
<div class="card">
<p class="title">Scoped Title</p>
<p>Body text inside the card.</p>
</div>
@scope con límite
El límite de ámbito impide que las reglas coincidan dentro de componentes anidados:
<div class="article">
<p>Article paragraph styled with 1.7 line-height by the scoped rule.</p>
<div class="advertisement">
<p>Ad paragraph is outside the scope limit, so it keeps the default line-height.</p>
</div>
</div>
Pseudoclase :scope
Dentro de @scope, :scope hace referencia al elemento raíz del ámbito:
<div class="card is-hovered">
<p>Hover state applied statically for preview</p>
</div>
Compatibilidad de @scope con los navegadores
@scope es compatible con Chrome 118+ y Safari 17.4+. La compatibilidad con Firefox está en desarrollo. Úselo con @supports para implementarlo de forma segura.
La visión más amplia de Houdini
El objetivo de CSS Houdini es hacer extensible la plataforma web, lo que permite a los desarrolladores añadir funciones al propio CSS en lugar de esperar a que los proveedores de navegadores las implementen. Las API disponibles actualmente (Typed OM, @property y Paint) son las partes de esta visión más preparadas para producción.
Comprobación rápida
¿Qué consigue @scope (.card) en CSS?
Repaso
CSS Houdini es un conjunto de API que expone el motor de renderizado. Layout API permite crear algoritmos de visualización personalizados, pero es principalmente experimental. @scope limita el alcance de las reglas CSS a subárboles específicos del DOM, lo que evita la filtración de estilos sin necesidad de seguir estrictamente la nomenclatura BEM. Las funciones de Houdini más preparadas para producción son Typed OM, @property y Paint API.
Preguntas frecuentes
¿La lección «API CSS Layout y su alcance» es gratis?
Sí — el texto completo de «API CSS Layout y su alcance» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de CSS Academy, actualiza a CoddyKit PRO. El curso de CSS Academy incluye 4 lecciones en total.
¿Qué aprenderé en «API CSS Layout y su alcance»?
Cree algoritmos de diseño personalizados con la API CSS Layout y comprenda el alcance y las limitaciones de Houdini. Practicas CSS Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar CSS Academy?
No se requiere experiencia previa. CSS Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.
¿Cuánto tiempo toma la lección «API CSS Layout y su alcance»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de CSS Academy?
Sí. Cada lección de CSS Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- El modelo de objetos tipado de CSS (OM)
- API de propiedades y valores CSS (@property)
- API CSS Paint: worklets
- API CSS Layout y su alcance