Stratification CSS

Redéfinition de l’ordre et de la priorité dans la cascade CSS à l’aide d’une règle de couches @layer.

Exemple :

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@layer</title>

    <style>
      /* 
      @layer couche redéfinit l'ordre et la priorité dans la cascade CSS  
      Changement de l'ordre des couches. Couche plus spécifique en dernier.
      La couche plus spécifique l'emporte */

      /* @layer components, layout, base; */
      @layer components, base, layout;

      /* Par défaut la couche la plus spécifique en bas */

      @layer base {
        p {
          color: coral;
        }
      }

      @layer layout {
        p {
          color: blueviolet;
        }
      }

      @layer components {
        p {
          color: green;
        }
      }
    </style>
  </head>
  <body>
    <main>
      <p>test</p>
    </main>
  </body>
</html>

Syn: couche de cascade, règle @layer, layerize CSS

  • Étiquettes