Exploring how browser engines store Specificity and what, if any, its limits are.
Tag Archives: specificity
What’s new in @bramus/specificity v2
Back in February I created @bramus/specificity, an NPM package to calculate the Specificity of CSS Selectors. As that version was more of a thought experiment/POC, there was a lot of room for improvement. Yesterday, after 11 betas, version 2.0.0 of @bramus/specificity was released. Let’s take a look … Quick Example To give you an idea …
Calculate the Specificity of a CSS Selector with @bramus/specificity
Introducing `@bramus/specificity`, a JavaScript package to calculate the specificity of a given CSS Selector
Comparing CSS Specificity Values
In CSS, Specificity is expressed as a triad/triple (A,B,C). An example value would be (1,1,2). To compare specificity — i.e. to see which value has a higher specificity — you need to compare each component of the triple until you find a difference: function compareSpecificity(x, y) { // x and y being arrays such as …
CSS Specificity Calculator
On the Polypane website you can find an interactive Specificity Calculator. Paste in any selector from CSS Selectors Level 4 — yes, that includes those special cases :is(), :where(), :not(), etc. — and out comes the Specificity. CSS Specificity Calculator →
The Future of CSS: Cascade Layers (CSS @layer)
@layer) aim to ease this task.
Using the Specificity of :where() as a CSS Reset
As mentioned in Three important things you should know about CSS :is(), the specificity of :where() will always be 0: :where() works the same way like :is() does, but will always have a specificity of 0. You can cleverly wrap this around other selectors to undo their specificity. Think of :where(:not(…)) for example. Over at …
Continue reading “Using the Specificity of :where() as a CSS Reset”
Three important things you should know about CSS :is()
Continue reading “Three important things you should know about CSS :is()“
“On the origin of cascades“, a talk by @hdv on how CSS came to be
Hidde recently gave a talk at CSS Café on the origins of CSS: It’s been 25 years since the first people proposed a language to style the web. Since the late nineties, CSS lived through years of platform evolution. The cascade, specificity and the enormous choice in values and units set the language up for …
Continue reading ““On the origin of cascades“, a talk by @hdv on how CSS came to be”
The CSS Cascade – Or, How browsers resolve competing CSS styles
Amelia Wattenberger is at it again with this nice interactive page on the CSS Cascade Every time we write a CSS declaration (or rule), it will enter the CSS Cascade, which will determine whether or not it will end up as the final style. The further down the cascade a declaration falls, the less likely …
Continue reading “The CSS Cascade – Or, How browsers resolve competing CSS styles”