@layer - CSS | MDN
developer.mozilla.org
The @layer CSS at-rule is used to declare a cascade layer and can also be used to define the order of precedence in case of multiple cascade layers.
  • falseWhite@programming.dev
    3·
    14 days ago

    Haven’t found a use case for it yet.

    If you’ve used it, please give me some examples of how you used it to solve a styling problem that otherwise would have been difficult or messy with other css rules.

    • bytepursuits@programming.devOP
      2·
      1 day ago

      I think it really helps if you dont like !important:

      @layer base, toggles;
@layer toggles {
    .wprm-print-hide-recipe-nutrition .wprm-recipe-nutrition-label-section {
        display: none;
    }
}

      instead of

      .wprm-print-hide-recipe-nutrition .wprm-recipe-nutrition-label-section {
    display: none !important;
}

      I guess I answered my own question - I think its a neat feature and ill use it.

    • Vincent@feddit.nl
      4·
      13 days ago

      It’s been a while, so I’m not sure about the details, but I had some elements on our website that I wanted to show when our extension was installed, and hide if not. I think I used layers, and then had the extension move the layer priority order. Was a clean way to fence off the extension-specific code.