League of Extraordinary FoundryVTT Developers•3y ago

layers

TIL about CSS Layers. https://developer.mozilla.org/en-US/docs/Web/CSS/@layer

@layer utilities {
  /* creates a named layer called utilities. */
  .foo {
    padding: 5em;
  }
}

@layer utilities {
  /* creates a named layer called utilities. */
  .foo {
    padding: 5em;
  }
}

@layer - CSS: Cascading Style Sheets | MDN

The @layer CSS at-rule declares a cascade layer. Rules within a cascade layer cascade together, giving more control over the cascade to web developers.

25 Replies

CalegoOP•3y ago

https://giphy.com/gifs/shrek-gif-layer-onion-KeDMt24sgiEuI

Giphy

CalegoOP•3y ago

https://caniuse.com/?search=layers not super sure how to declare a layer in the DOM

Unknown User•3y ago

Message Not Public

CalegoOP•3y ago

the mdn table is outdated, there's more support now

Unknown User•3y ago

Message Not Public

CalegoOP•3y ago

I definitely don't understand these, how does an element know which layer to use? is this just for the specificity? Like I thought this was "this part of the app uses the 'dark' layer" but it looks like it's only here to help you with specificity

Unknown User•3y ago

Message Not Public

CalegoOP•3y ago

Unknown User•3y ago

Message Not Public

CalegoOP•3y ago

So the less specific p is applied after (thus taking precedence) the .box p because .box p is inside a layer. this feels... like it's only going to make this shit more confusing?

Unknown User•3y ago

Message Not Public

CalegoOP•3y ago

imports are already a thing though just without the layer bit this is also already a thing, that's the normal cascade

Unknown User•3y ago

Message Not Public

CalegoOP•3y ago

oh i didn't think that was a partial import, thought it put the whole file in as that layer you declare

Unknown User•3y ago

Message Not Public

CalegoOP•3y ago

Unknown User•3y ago

Message Not Public

CalegoOP•3y ago

https://www.bram.us/2021/09/15/the-future-of-css-cascade-layers-css-at-layer/

Bramus!

Bram.us

The Future of CSS: Cascade Layers (CSS @layer)

When authoring CSS we have to carefully think about how we write and structure our code. Cascade Layers (CSS @layer) aim to ease this task.

Unknown User•3y ago

Message Not Public

CalegoOP•3y ago

that' swhat I thought initially, but it doesn't look like you can declare a layer as a specific DOM element, so you're back to normal CSS nesting for these. Except it seems like if you also declare a layer, the order of precedence doesn't follow specificity anymore. i.e. the layer order supersedes specificity I'm still not sure I'm getting it. You might be closer than I am. But this really doesn't look like it's going to be intutive to work with

Unknown User•3y ago

Message Not Public

CalegoOP•3y ago

That would necessitate that you could say "alright this <main> element uses Layer dark", but that doesn't look possible

Unknown User•3y ago

Message Not Public

CalegoOP•3y ago

It's not isolating stylesheets to different elements, which would be stupid useful in a lot of cases. It's like customizing the specificity cascade, which is ... not immediately useful to me (as someone who understands the cascade and uses a preprocessor for nesting).

Unknown User•3y ago

Message Not Public

Gaming

Programming

layers