The Future of CSS: Scroll-Linked Animations with @scroll-timeline (Part 2)
Post Serie Archives:
The Future of CSS: Scroll-Linked Animations with
The Future of CSS: Scroll-Linked Animations with @scroll-timeline (Part 1)
Style Spelling and Grammar Errors with the ::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 …
Style the target text from text-fragment links using the ::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 …
The future of CSS: Higher Level Custom Properties to control multiple declarations
“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.
Native Aspect Ratio Boxes in CSS thanks to 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 …
Container Queries are coming to Chromium!
Just announced on the Chromium mailing list is an “Intent to Prototype” Container Queries. Let’s take a look at the proposed syntax …
CSS 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”
Colors in CSS: Hello Space-Separated Functional Color Notations
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 CSS Transform Properties
# 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 …