Resumen

  • El primer borrador público de Cascade Level 6, de diciembre de 2021, propuso @scope para limitar reglas y valorar la cercanía de una raíz; entonces sumaba la especificidad de esa raíz a las reglas internas.
  • Los textos de 2023 y 2024 separaron la frontera del peso: el selector de raíz deja de aumentar la especificidad interna y la proximidad cumple una función propia en la cascada.

Para proteger el botón coral, una hoja de estilo podría enumerar todos sus antepasados. La dirección sería exacta hasta que el componente cambiara de lugar. Otra solución habitual en herramientas de componentes consiste en poner un atributo de ámbito a cada descendiente y repetirlo en los selectores. El resultado se parece a una fiesta en la que hasta las sillas necesitan acreditación. El navegador ya conoce el árbol de elementos; parecía razonable pedirle que reconociera el límite de una habitación sin obligar a cada objeto a exhibir una chapa.

El primer borrador público del W3C, del 21 de diciembre de 2021, mostró precisamente el ejemplo de atributos data-scope repartidos por los elementos. @scope ofrecía una raíz, un límite inferior opcional y reglas corrientes dentro de un bloque. El texto también estudiaba la proximidad: al competir dos reglas acotadas, podían importar los pasos que separan el elemento de cada raíz. En vez de escribir esa distancia en el selector, el navegador la contaría en el árbol.

Había una sorpresa en la valla inicial. El selector que designaba la raíz sumaba su especificidad a las reglas del interior. Si el recinto empezaba en #hero, una regla sencilla para img se llevaba también el peso del identificador. La puerta repartía rango entre todos los muebles. El grupo de trabajo seguía deliberando cuánto debía pesar la cercanía frente a otros criterios. Por eso la historia de @scope exige leer las cuentas de cada edición, no proyectar sobre 2021 la regla que conocemos de los textos posteriores.

En el borrador del 21 de marzo de 2023 la raíz dejó de prestar su peso. El documento compara @scope (#hero) { img { ... } } y :where(#hero) img { ... }; ambas expresiones tienen especificidad (0,0,1). #hero marca dónde empieza el ámbito. img aporta el punto del selector interno. Una frontera precisa ya no infla por sí sola cada declaración. El botón coral gana una oportunidad normal de ser decidido por quien conoce la tarjeta pequeña.

El autor también puede escribir to (...) para que el ámbito exterior termine antes de un sector anidado. La brocha azul llega hasta la puerta y se detiene. Si dos ámbitos se solapan y sus reglas alcanzan el mismo elemento, la cercanía de la raíz participa en el desempate en el lugar que le corresponde dentro de la cascada. Se trata de pasos en el árbol, no de centímetros en la pantalla. La regla cercana conserva su contexto sin recibir una llave maestra que abra por encima de toda capa, importancia o especificidad.

El texto del 6 de septiembre de 2024 afinó los límites: el elemento que coincide con el borde inferior queda fuera del ámbito, y la proximidad se mide una sola vez entre la raíz y el elemento sujeto de la regla. El historial de cambios registra el abandono de la opción de proximidad fuerte y de la antigua suma de especificidad de la raíz. También evita una confusión: los nombres definidos por @keyframes, @font-face o @layer siguen siendo globales aunque esas reglas estén escritas dentro de @scope. El ámbito acota reglas de estilo; no funda una república independiente de nombres CSS.

La cronología del W3C fija las publicaciones de 2021, 2023 y 2024; la nota del grupo de trabajo CSS de 2024 señala @scope como la novedad de este nivel. El avance principal no fue colocar una valla. Fue decidir qué autoridad tenía esa valla, quitarle la que sobraba y dejar a la tarjeta interior la decisión sobre su propio botón. Una señal en la puerta resulta suficiente; las sillas pueden vivir sin acreditación.