Le CSS Nesting amélioré avec `CSSNestedDeclarations`

• L’interface CSSNestedDeclarations a été ajoutée à la spécification du CSS Nesting, ce qui résout les problèmes liés à l’imbrication
• D’autres améliorations ont également été apportées, notamment le fait que les déclarations placées après une règle de style ne sont plus remontées vers le haut
• Disponible à partir de Chrome 130, Firefox Nightly 132 et Safari Technology Preview 204

Problèmes du CSS Nesting avant l’introduction de CSSNestedDeclarations

• Les déclarations imbriquées pouvaient se comporter différemment de ce qui était attendu

.foo {  
  width: fit-content;  
  @media screen {  
    background-color: red;  
  }  
  background-color: green;  
}  

• Dans les versions antérieures à Chrome 130, background-color était appliqué en red et non en green
• Après le parsing, la règle réellement appliquée était transformée comme suit

.foo {  
  width: fit-content;  
  background-color: green;  
  @media screen {  
    & {  
      background-color: red;  
    }  
  }  
}  

• background-color: green; était remonté avec les autres déclarations, et le CSSMediaRule imbriqué était enveloppé dans un CSSStyleRule supplémentaire utilisant le sélecteur &
• Cela venait du fait que le moteur CSS ne pouvait pas distinguer les propriétés placées au début d’une règle de style de celles placées entre d’autres règles

Solution : introduction de l’interface CSSNestedDeclarations

• Pour résoudre ce problème, le groupe de travail CSS a introduit une règle de déclarations imbriquées (nested declarations rule)
• À partir de Chrome 130, les déclarations imbriquées consécutives sont automatiquement enveloppées dans une instance de CSSNestedDeclarations
• Cela permet de conserver la déclaration background-color: green après la déclaration background-color: red
• CSSNestedDeclarations correspond aux mêmes éléments et pseudo-éléments que la règle de style parente, avec le même comportement de spécificité

Impact pour les développeurs

• À partir de Chrome 130, le CSS Nesting est nettement amélioré
• En revanche, si vous mélangez déclarations et règles imbriquées, il peut être nécessaire de modifier votre code

/* Ne fonctionne pas dans Chrome 130 */  
#mypopover:popover-open {  
  @starting-style {  
    opacity: 0;  
    scale: 0.5;   
  }  
  opacity: 1;  
  scale: 1;  
}  

• Dans ce code, la déclaration @starting-style est écrasée par les déclarations incluses dans CSSNestedDeclarations, ce qui supprime l’animation d’entrée
• Il faut le modifier ainsi

/* Fonctionne dans Chrome 130 */  
#mypopover:popover-open {  
  opacity: 1;  
  scale: 1;  
  @starting-style {  
    opacity: 0;  
    scale: 0.5;  
  }  
}  

• Lors de l’utilisation du CSS Nesting, placer les déclarations imbriquées au-dessus des règles imbriquées fonctionne correctement dans la plupart des versions de navigateurs

Détection de la prise en charge de CSSNestedDeclarations

if (!("CSSNestedDeclarations" in self && "style" in CSSNestedDeclarations.prototype)) {  
  // CSSNestedDeclarations n’est pas pris en charge  
}  

Avis de GN⁺

• Le CSS Nesting est une fonctionnalité utile qui améliore la lisibilité et la maintenabilité du code. Il existait cependant des problèmes dus au mélange entre règles imbriquées et déclarations, et il est heureux que l’introduction de CSSNestedDeclarations les résolve.
• Avant l’arrivée de CSSNestedDeclarations, la position des déclarations imbriquées pouvait changer ou être écrasée de manière inattendue. C’était une source potentielle de confusion pour les développeurs.
• D’autres solutions avaient été envisagées, comme l’utilisation de la règle @nest ou l’enveloppement des déclarations imbriquées dans un CSSStyleRule, mais elles n’ont pas été retenues, notamment en raison d’une dégradation de l’expérience développeur. L’introduction de la règle de déclarations imbriquées semble être la solution la plus appropriée.
• Cela dit, CSSNestedDeclarations n’est encore pris en charge que par certains navigateurs. Pour assurer le cross-browser, il semble plus sûr de toujours placer les déclarations imbriquées au-dessus des règles imbriquées.
• Des préprocesseurs CSS comme PostCSS ou Sass proposent également des fonctionnalités similaires à CSSNestedDeclarations. Si vous utilisez un préprocesseur, cela peut valoir la peine d’en tirer parti.