The CSS Working Group is continuing a debate over the best way to define nesting in CSS. And if you are someone who writes CSS, we’d like your help.
Help choose the syntax for CSS Nesting!
Post Serie Archives:
The Future of CSS: Variable Units, powered by Custom Properties
Thanks to Variable Units, authors can define Custom Properties and use them as units in their CSS
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)
@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)
The Future of CSS: Scroll-Linked Animations with @scroll-timeline (Part 1)
