Questions tagged [css-layer]
The css-layer tag has no usage guidance.
css-layer
14
questions
0
votes
1
answer
123
views
Css variables of Primevue styles are not defined in module federation layout app
I try to use feature of customization of the primevue theme and change the prefix for css variables of Primevue style. After checking the changes in layout MF app I unfortunately see that all this ...
0
votes
1
answer
38
views
CSS rule not applied if inside @layer because of purge?
I notice sometimes random classes not working inside @layer base or @layer components but working if I'm putting it outside of everything.
For example I spent hours trying to understand why this style ...
- 27
0
votes
0
answers
20
views
Extract @layer styles from css / scss and output to file
is it somehow possible using vite and sass to extract styles of a specific CSS @layer from a stylesheet and output those styles into a separate file?
The idea is to add an layer critical and output ...
- 4,676
1
vote
0
answers
51
views
Is there a way to have layered CSS styles have a higher priority than unlayered styles?
CSS layers are awesome, except one (in my opinion) unintuitive behavior: they have a lower priority than unlayered styles:
/* site style */
div {
color: red;
}
/* user style */
@layer myflavor {
...
- 1,343
1
vote
1
answer
477
views
How to use SASS layer scoped variables defined in another layer definition block
Given we have a main css layer. Inside this layer, we use a scss variable. When variable is defined in the same layer block, everything works perfectly. But when we try to define the variables in ...
- 9,512
3
votes
1
answer
293
views
How do I check if CSS @layer is supported in CSS and Javascript?
So I know that @support and CSS.supports can be used to check if certain features is available but I cannot in anyway make it works to detect if CSS @layer is available or not. I am 100% sure my ...
- 19.8k
3
votes
1
answer
641
views
Using the CSS @layer rule in my Angular project
I want to use the CSS @layer rule in my Angular project.
The priority order of @layers depends on their declaration order (the last one declared takes precedence). However, Angular automatically ...
- 31
-1
votes
2
answers
115
views
How do I layer an image underneath specific text instead of a background?
Sorry if the initial title has some poor wording, but what I am asking is how to add an image underneath of text in CSS/HTML. Please note I am referring to a specific location on the screen, rather ...
5
votes
0
answers
537
views
Performance of CSS @import with layers vs. link
Assuming there are no internal embeds within the CSS files, is there any performance drawback using CSS layers and @import vs. <link> in the following server-side-rendered scenario:
Using <...
- 5,924
1
vote
1
answer
349
views
Bootstrap5 - Overwriting framework style with css @layer
This is my HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=...
- 1,965
2
votes
1
answer
617
views
CSS Cascade Layer - Importing Bootstrap - Undefined Mixin
Having a play around with cascade layers for a new project and I seem to be getting an 'Undefined mixin' error when providing bootstrap with its own layer like so:
// Layers order
@layer bootstrap, ...
1
vote
0
answers
152
views
Is there an alternative to @import url("bootstrap_cdn") layer(framework);?
I recently learned about importing whole css files into @layer. I want to import bootstrap css for my future projects into framework layer, so that I can easily override bootstrap style with my ...
- 7,453
1
vote
3
answers
678
views
Background color overridden even after reversing the order of CSS layers
I want to use the new CSS cascade layers feature supported by latest versions of Chrome, Firefox, Safari, and Edge (see the support table).
I'm importing a stylesheet from highlight.js.
It has a class ...
- 22.4k
1
vote
0
answers
318
views
How do I use @layer in CSS in VSCode?
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.
@layer utilities {
.padding-sm {
padding: ....
- 29