Prevent unwanted Layout Shifts caused by Scrollbars with the scrollbar-gutter CSS property
Author Archives: Bramus!
Prevent unwanted Layout Shifts caused by Scrollbars with the
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”
“Inline Parameters” extension for VSCode
Inspired by JetBrains’ “Inline Parameter Name Hints” feature, Liam Hammett created an extension for VSCode with the same functionality: This feature can give you additional context when reading your code, making it easier to understand what different function parameters refer to by showing the parameter’s name inline. No longer do you have to be confused …
Glitter Text with SVG
A “Pure CSS” Remaining Reading Time Indicator with @scroll-timeline
Continue reading “A “Pure CSS” Remaining Reading Time Indicator with @scroll-timeline“
Koreless — White Picket Fence
Taken from the album Agor by Koreless is “White Picket Fence”. I really dig the album, and this track (whose music video was directed by FKA twigs). Prepare yourself for an uplifting vibe after about 50 seconds …
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”
JavaScript: Hostnames as self-executing fetches
In a conversation between Mathias Bynens and Ingvar Stepanyan, an idea popped up: what if a hostname — such as www.bram.us — would be valid JavaScript? Using a JavaScript Proxy, that’s perfect possible. My favourite is hostnames being valid (and working!) JavaScript. — Ingvar Stepanyan (@RReverser) June 12, 2019 Building further upon that is proxy-www, …
Continue reading “JavaScript: Hostnames as self-executing fetches”
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”