League of Extraordinary FoundryVTT DevelopersCalego

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.

Calego•775d ago

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

Giphy

Calego•775d ago

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

Unknown User•775d ago

Calego•775d ago

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

Unknown User•775d ago

Calego•775d 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•775d ago

Calego•775d ago

Unknown User•775d ago

Calego•775d 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•775d ago

Calego•775d 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•775d ago

Calego•775d 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•775d ago

Calego•775d ago

Unknown User•775d ago

Calego•775d 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•775d ago

Calego•775d 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•775d ago

Calego•775d ago

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

Unknown User•775d ago

Calego•775d 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•775d ago

League of Extraordinary FoundryVTT Developers Join

4KMembers

View on Discord

Want results from more Discord servers?

Add your server

HitDice hooks MRI just added my first merge request 😄 <https://gitlab.com/foundrynet/dnd5e/-/merge_requests/495>advantage shennanegins devmode extension brainstormhttps://github.com/mdn/webextensions-examples/tree/master/devtools-panels Saving Functions as module settings@wasp I remember you asked about saving functions as settings (which quickly turned into stringifyin new consumable typesTried adding localization strings for some new consumable types, but keep getting this ("`DND5E.Cons spell-compendium-5e alpha1 Overriding onDropItem & onSortItemYou'd override them in your sheet class.getter & setter wrapper for settingsI'm trying to use a getter & setter pair as an interface for `game.settings.get` and `game.settings.scrollable tab contentsIt is possible, and you're firmly in the css and DOM structure side of development with this line of Jr devI'm cleaning out my bookmarks and accidentally came back to this article. Potentially useful startin HTCPackage: `hero-creation-tool`System Specific CSSI'm not 100% about this, but it is worth watching out that your solution doesn't actually end up bei advancement-wip Commander register apitalking about permissions, im working on the registering api for the Commander, and I wanted to ask Azgaars Blurry MapHey all. I'm taking a look at my importer for Azgaar's Fantasy Map Generator and wondering how I can ccjmk overlaybut for what I wanted I think I *needed* to append it there so that I can overlay the whole screen cliits very very early alpha demo Monarch APIAlright, adventurous ones: I have a Beta version of Monarch with the new components API! Manifest: compacted chat cardsModules create problems to solve problems... Today's problem: "When I roll an attack, it eats the wh dragdrop shenneneginsRight now, a user can drag a spell onto their character sheet. I store that in a 'spell' array and l

Gaming

Programming

layers