CCalego3/15/2022
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.
CCalego3/15/2022
https://caniuse.com/?search=layers not super sure how to declare a layer in the DOM
UUUnknown User3/15/2022
2 Messages Not Public
Sign In & Join Server To View
CCalego3/15/2022
the mdn table is outdated, there's more support now
UUUnknown User3/15/2022
2 Messages Not Public
Sign In & Join Server To View
CCalego3/15/2022
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
UUUnknown User3/15/2022
5 Messages Not Public
Sign In & Join Server To View
CCalego3/15/2022
No description
UUUnknown User3/15/2022
2 Messages Not Public
Sign In & Join Server To View
CCalego3/15/2022
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?
UUUnknown User3/15/2022
11 Messages Not Public
Sign In & Join Server To View
CCalego3/15/2022
imports are already a thing though just without the layer bit this is also already a thing, that's the normal cascade
UUUnknown User3/15/2022
Message Not Public
Sign In & Join Server To View
CCalego3/15/2022
oh i didn't think that was a partial import, thought it put the whole file in as that layer you declare
UUUnknown User3/15/2022
2 Messages Not Public
Sign In & Join Server To View
CCalego3/15/2022
No description
UUUnknown User3/15/2022
Message Not Public
Sign In & Join Server To View
CCalego3/15/2022
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.
UUUnknown User3/15/2022
Message Not Public
Sign In & Join Server To View
CCalego3/15/2022
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
UUUnknown User3/15/2022
2 Messages Not Public
Sign In & Join Server To View
CCalego3/15/2022
That would necessitate that you could say "alright this <main> element uses Layer dark", but that doesn't look possible
UUUnknown User3/15/2022
9 Messages Not Public
Sign In & Join Server To View
CCalego3/15/2022
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).
UUUnknown User3/15/2022
3 Messages Not Public
Sign In & Join Server To View

Looking for more? Join the community!

Want results from more Discord servers?
Add your server
Recommended Posts
HitDice hooks MRI just added my first merge request 😄 <https://gitlab.com/foundrynet/dnd5e/-/merge_requests/495>advantage shennaneginsdevmode extension brainstormhttps://github.com/mdn/webextensions-examples/tree/master/devtools-panelsSaving Functions as module settings@wasp I remember you asked about saving functions as settings (which quickly turned into stringifyinnew consumable typesTried adding localization strings for some new consumable types, but keep getting this ("`DND5E.Consspell-compendium-5e alpha1Overriding 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 ofJr devI'm cleaning out my bookmarks and accidentally came back to this article. Potentially useful startinHTCPackage: `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 beiadvancement-wipCommander 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 canccjmk overlaybut for what I wanted I think I *needed* to append it there so that I can overlay the whole screencliits very very early alpha demoMonarch 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 whdragdrop shenneneginsRight now, a user can drag a spell onto their character sheet. I store that in a 'spell' array and l