A rather geeky/technical weblog, est. 2001, by Bramus
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”
@scroll-timeline
Continue reading “A “Pure CSS” Remaining Reading Time Indicator with @scroll-timeline“
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”
: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”
@scroll-timeline (Part 3)
🚨 UPDATE: The Scroll-Linked Animations Specification and its proposed syntax have undergone a major rewrite. This post details an older version of the syntax and has not been updated to reflect these changes. Do note that the concept of a Scroll-Linked Animation still stands, it’s only the syntax that has changed since writing this. Please …
Continue reading “The Future of CSS: Scroll-Linked Animations with @scroll-timeline (Part 3)“
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. …
There are some changes being proposed regarding viewport units, finally solving that “100vh in Safari on iOS” issue …
Max Böck: With container queries now on the horizon – will we need media queries at all? Is there a future where we build responsive interfaces completely without them? As Max details we will still need both, but will see a shift from some Media Queries to Container Queries. Good read; I found myself nodding …
Continue reading “Media Queries in Times of Container Queries”