You know something good’s landed when two out of the three great Web/CSS resources — here Smashing Magazine and web.dev (*) — write about the same topic: the size-adjust descriptor for @font-face. To improve font rendering, a great technique is font swapping. The problem however, is that sometimes when the web font loads, it shifts …
Tag Archives: css
Prevent Layout Shifts between Web Fonts and Fallback Fonts with the
Image Cut-Out Effects using CSS or SVG
Ahmad Shadeed shows us how to do image cut-out effects, using either CSS or SVG. Handy to — for example — show a group of avatars. See the Pen Seen Avatars – SVG Mask by Ahmad Shadeed (@shadeed) on CodePen. Looking at the CSS variant: I was familiar with -webkit-mask-image and that you could combine …
Prevent unwanted Layout Shifts caused by Scrollbars with the scrollbar-gutter CSS property
A side-effect when showing scrollbars on the web is that the layout of the content might change depending on the type of scrollbar. The `scrollbar-gutter` CSS property aims to give us developers more control over that.
Dev Roulette Live — Conversations with Frontend Developers
I don’t know exactly how she does it, but apart from all the work on her side projects, newsletter, family, etc. Stephanie Eckles also hosts a show named “Dev Roulette Live” Dev Roulette is a conversation between Stephanie Eckles and up to two mystery guests about topics that are particularly important to front-end developers including: …
Continue reading “Dev Roulette Live — Conversations with Frontend Developers”
Detecting media query support in CSS and JavaScript
Kilian Valkhof recently needed to check if prefers-reduced-data was supported by the browser or not For this, I couldn’t use just @media (prefers-reduced-data: no-preference) because that would be false if either there was no support (since the browser wouldn’t understand the media query) or if it was supported but the user wanted to preserve data. …
Continue reading “Detecting media query support in CSS and JavaScript”
A “Pure CSS” Remaining Reading Time Indicator with @scroll-timeline
Using @scroll-timeline from the Scroll-Linked Animations Specification, Fabrizio Calderan has created a very nice demo which shows the remaining reading time. As you scroll down, the time counts down to 0. 📽 Using a browser with no support for Scroll-Linked Animations? Here’s a recording you can watch: There’s a few tricks Fabrizio uses there to …
Continue reading “A “Pure CSS” Remaining Reading Time Indicator with @scroll-timeline“
Natural Shadows in CSS with inlined SVG filters
Dissecting a React Component built by Jamie Kyle, Stefan Judis provides us with an easy to use CSS class that adds a “Natural Shadow” to any element. He does this by inlining the SVG <filter> in a CSS filter. 💁♂️ You can think of this “Natural Shadow” like a “Ambient Lighting” (Ambilight) option on a …
Continue reading “Natural Shadows in CSS with inlined SVG filters”
Using the Specificity of :where() as a CSS Reset
As mentioned in Three important things you should know about CSS :is(), the specificity of :where() will always be 0: :where() works the same way like :is() does, but will always have a specificity of 0. You can cleverly wrap this around other selectors to undo their specificity. Think of :where(:not(…)) for example. Over at …
Continue reading “Using the Specificity of :where() as a CSS Reset”
Practical Use Cases for Scroll-Linked Animations with CSS Scroll-Timeline
As a follow-up to my two 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 →
Custom Scrollbars In CSS
Ahmad Shadeed shows us how to stylize scrollbars in CSS. See the Pen Custom Scrollbar – 2 by Ahmad Shadeed (@shadeed) on CodePen. While I’m no big fan of doing so in general, I can see some specific situations where it might come in handy, such as styling the scrollbars of overflowing tab button bars. …