A rather geeky/technical weblog, est. 2001, by Bramus
::spelling-error and ::grammar-error pseudo-elements
Part of the CSS Pseudo-Elements Level 4 Specification are ways to style spelling and grammar errors. By default spelling errors — words you have mistyped — get a red dotted underline, thanks to the ::spelling-error pseudo-class selector you can tweak that. Grammar errors — such as a missing capital letter at the beginning of a …
::target-text pseudo-element
One of my favorite features that shipped with Chrome 80 — apart from Optional Chaining — is the ability to link to text-fragments. By default Chrome will highlight those in yellow: 💡 To easily create text-fragment links there’s this Chromium Plugin you can use. ~ As tweeted before, coming to Chromium 89 is the ability …
“Higher Level Custom Properties” are Custom Properties that control multiple other CSS Properties. Although still a proposal it’s worth having a look already as they’re really exciting.
aspect-ratio
In “CSS Box Sizing Module Level 4” a new aspect-ratio CSS property is defined. Let’s take a look on how to use it …
Just announced on the Chromium mailing list is an “Intent to Prototype” Container Queries. Let’s take a look at the proposed syntax …
leading-trim – The Future of Digital Typesetting
Ethan Wang, who works at Microsoft: In a standard text box, there’s almost always extra space above and below the actual text. Because of this, when you use a text box to measure and implement spacing, it ends up larger than you intended. The bigger the line height, the bigger the problem. You can see …
Continue reading “CSS leading-trim – The Future of Digital Typesetting”
The CSS Color Module Level 4 spec introduces a new way to define colors in CSS: Space-Separated Functional Color Notations. Start using them today!
# Individual Transform Properties New in Firefox 72 is the ability to individually define CSS Transform Properties. You can now separately define scale, rotate, and translate CSS properties, instead of having to chuff them all into one single transform property. The translate, rotate, and scale properties allow authors to specify simple transforms independently, in a …
:is() selector will simplify things
One of the selectors in CSS Level 4 is :is(). It is the successor to :any() and :matches() (which are supplanted by :is()): The :is() CSS pseudo-class function takes a selector list as its argument, and selects any element that can be selected by one of the selectors in that list. This is useful for …
Continue reading “How the CSS :is() selector will simplify things”
Early March the first Editor’s Draft for the CSS Nesting Module was published. The draft outlines a future mechanism by which we’ll be able to nest CSS selectors natively (e.g. in pure CSS, without the use of any preprocessors) This module describes support for nesting a style rule within another style rule, allowing the inner …