A rather geeky/technical weblog, est. 2001, by Bramus
Haha, now this sounds all too familiar: Over the last several years, the way I write CSS has transitioned from a very “semantic” approach to something much more like what is often called “functional CSS.” The author lists 5 stages: Phase 1: “Semantic” CSS Phase 2: Decoupling styles from structure Phase 3: Content-agnostic CSS components …
Continue reading “CSS Utility Classes and “Separation of Concerns””
:focus ring (and keeping it too)Update 2021-01-28: Nowadays we can use :focus-visible for this; No JavaScript needed! David Gilbertson: You click a button and see a blue border telling you that you’ve clicked on something that you know perfectly well you’ve just clicked on — because you just clicked on it. So it’s clear: the outline must go. But hold on a …
Continue reading “Removing that ugly :focus ring (and keeping it too)”
Like Flexbugs, but then for CSS Grid Layout: Inspired by Flexbugs this list aims to be a community curated list of CSS Grid Layout bugs, incomplete implementations and interop issues. Grid shipped into browsers in a highly interoperable state, however there are a few issues – let’s document any we find here. By Rachel Andrew …
Continue reading “GridBugs – A Curated List of CSS Grid Interop Issues”
In CSS, percentage-based paddings are – as per spec – calculated with respect to the width of an element. However, for flex items (e.g. items whose parent have display: flex; applied) that’s not always the case. Depending on which browser you are using the percentage-based padding of a flex item will be resolved against its …
Continue reading “Vertical margins/paddings and Flexbox, a quirky combination”
Variable Fonts are still in active development […] in this article I’ll focus on what they mean for web developers, and how you can try them out today ahead of time. Next to changes to font-weight (which will allow increments of 1), you also have fine control over a variable font its variations – see …
Continue reading “What do Variable Fonts mean for Web Developers?”
Great writeup by Benjamin De Cock on the work he and his colleagues did to creating unique landing pages that tell a story for our major products For this release, we designed Connect’s landing page to reflect its intricate, cutting-edge capabilities while keeping things light and simple on the surface. In this blog post, we’ll …
Continue reading “Behind the front-end experience of Stripe’s ”Connect””
Great usage of CSS Custom Properties in combination with calc() by Steve Gardner to cater for users who have prefers-reduced-motion set to reduce: CSS variables (custom properties) makes supporting reduced motion settings super easy. There is little excuse to not too. — Steve Gardner (@steveg3003) July 21, 2017 By setting –duration to 0 it basically …
Stephanie Liu has replicated the native Slack theming capabilities in the browser using CSS Variables CSS Custom Properties. The essence of the demo is actually quite simple: define the variables on the :root level, and use ‘m where needed. :root { –column-bg: #ae0001; –menu-bg-hover: #680001; –active-item: #D3A625; –active-item-text: #680001; –hover-item: #BE0002; –text-color: #FFFFFF; –active-presence: #00FFBA; …
Continue reading “Theming with CSS Custom Properties (CSS Variables)”
Good observation by Jeremy Keith, after having attended (the magnificent) CSS Day: Unlike a programming language that requires knowledge of loops, variables, and other concepts, CSS is pretty easy to pick up. Maybe it’s because of this that it has gained the reputation of being simple. It is simple in the sense of “not complex”, …
justify-content: space-evenly; for FlexboxA new alignment mode for Flex-containers is justify-content: space-evenly; The alignment subjects are distributed so that the spacing between any two adjacent alignment subjects, before the first alignment subject, and after the last alignment subject is the same. Currently supported in Firefox, and in Chrome Canary. Box Alignment justify-content: space-evenly; for Flex-Containers →