Introducing `@bramus/specificity`, a JavaScript package to calculate the specificity of a given CSS Selector
Calculate the Specificity of a CSS Selector with @bramus/specificity
Tag Archives: css
Calculate the Specificity of a CSS Selector with
Interop 2022
Interop 2022 is the successor to Compat 2021, an joint effort by browser vendors to work on browser compatibility. Interop 2022 is a public effort and benchmark around which browser vendors can collaborate to improve interoperability in areas believed to be important to web developers. It is composed of two parts: 15 focus areas on …
Hello, CSS Cascade Layers
Here’s Ahmad Shadeed‘s post on Cascade Layers In this article, we’ll explore how cascade layers work, and how they will help us write CSS with more confidence, along with use-cases and examples. Hello, CSS Cascade Layers →
A look at CSS Cascade Layers
Kevin Powell takes a look at Cascade Layers: If you’re new to Cascade Layers and are looking for more resources, here’s a few useful ones: The Future of CSS: Cascade Layers (CSS @layer), by yours truly Getting Started With CSS Cascade Layers, by Stephanie Eckles CSS Cascade Layers in 5 Minutes, by Una Kravets Cascade Layers: …
Color Spaces and Colors in CSS
The past few months, I’ve seen a lot of posts on Color Spaces and Colors in CSS float by. Here’s a small roundup.
Connect to a Database from CSS
You can’t connect to a database from within CSS, Right? Or can you? Leveraging Houdini and SQL.js — which is SQLite compiled to JavaScript to serve as in-memory DB — you can. Using some Custom Properties, you can pass in queries to be executed. .query-display { background: paint(sql-css); } main { –sql-query: SELECT * FROM …
CSS: Understanding the Cascade (2022.01.27 @ CSS Café)
In this talk, we dig into how the CSS Cascade actually works. Origins, !important, Layers, Specificity, … it’s all covered.
Cascade Layers: Practical Use-Cases / Examples
Highly interesting post by Manuel Matuzovic on Cascade Layers. Manuel skips out on the technical/theoretical details — which were already been covered by me, Stephanie, Una, … — and jumps straight into the practical side of things. While I’m writing this blog post, I’m looking at a large site I’ve been working on and I’m …
Continue reading “Cascade Layers: Practical Use-Cases / Examples”
Getting Started With CSS Cascade Layers
Stephanie Eckles, writing for Smashing Magazine: Cascade layers introduce the new at-rule of @layer. The intent is to help CSS authors be more intentional about ordering the “layers” of CSS rules as a new method of cascade management. Getting Started With CSS Cascade Layers → If you’re looking for the quick version on Cascade Layers, …
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 …