Thanks to Variable Units, authors can define Custom Properties and use them as units in their CSS
Post Serie Archives:
The Future of CSS: Scroll-Linked Animations with @scroll-timeline (Part 4)
Just before I left on holiday, the 2nd article I wrote for CSS-Tricks got published. In it, I take a look at the JavaScript side of the Scroll-Linked Animations specification. With WAAPI + ScrollTimeline, a typical “progressbar as you scroll” can be coded like this: const myScrollTimeline = new ScrollTimeline({ source: document.scrollingElement, orientation: 'block', scrollOffsets: …
Continue reading “The Future of CSS: Scroll-Linked Animations with @scroll-timeline (Part 4)“
Media Queries Level 4: Media Query Range Contexts (Media Query Ranges)
A media feature like width can take its value from a range. When used, we prefix these with min- or max- to express “minimum condition” or “maximum condition” constraints. @media (min-width: 300px) and (max-width: 750px) { … } In CSS Media Queries Level 4 these type of Media Features can now be written as a …
Continue reading “Media Queries Level 4: Media Query Range Contexts (Media Query Ranges)“
The Future of CSS: Cascade Layers (CSS @layer)
When authoring CSS we have to carefully think about how we write and structure our code. Cascade Layers (CSS
@layer) aim to ease this task. The Future of CSS: Scroll-Linked Animations with @scroll-timeline (Part 3)
As a follow-up to my two earlier posts on Scroll-Linked Animations with CSS Scroll-Timeline (part 1 and part 2), I wrote an article for CSS-Tricks covering some practical use-cases (with code). Today the article got published 🙂 Practical Use Cases for Scroll-Linked Animations in CSS with Scroll Timelines →
The Large, Small, and Dynamic Viewports
There are some changes being proposed regarding viewport units, finally solving that “100vh in Safari on iOS” issue …
Create a color theme with CSS Relative Color Syntax, CSS color-mix(), and CSS color-contrast()
Fabio Giolito explores three new CSS color features that landed in Safari Technology Preview: Relative color syntax, e.g. .bg-primary-100 { background-color: hsl(from var(–theme-primary) h s 90%); } .bg-primary-200 { background-color: hsl(from var(–theme-primary) h s 80%); } .bg-primary-300 { background-color: hsl(from var(–theme-primary) h s 70%); } … CSS color-contrast, e.g. .text-contrast-primary { color: color-contrast(var(–theme-primary) vs white, …
The Future of CSS: Scroll-Linked Animations with @scroll-timeline (Part 2)
Let’s take a look at how we can create Scroll-Linked Animations that use Element-based Offsets using @scroll-timeline from the “Scroll-linked Animations“ CSS Specification.
The Future of CSS: Scroll-Linked Animations with @scroll-timeline (Part 1)
The “Scroll-linked Animations Specification” is an upcoming addition to CSS that defines a way for creating animations that are linked to a scroll offset of a scroll container. Let’s take a look at how it works and what results we can achieve with it.
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 …