Conditional border-radius and three future CSS features

Stefan Judis has reworked Ahmad Shadeed‘s Conditional border-radius, using these three (future) CSS additions: Media query ranges Container Queries CSS @when + @else Unlike the original code, the result definitely is a very nice and readable piece of code that doesn’t feel hacky at all — I like where CSS is headed 😊 Conditional border-radius …

ESNext: Import Assertions (JSON Modules, CSS Modules, …)

Did you know you can import JSON and CSS files just like you import JavaScript Modules? Thanks to Import Assertions, it’s as easy as this: Building upon "Import Assertions" we recently saw JSON Modules land in V8/Chromium 91: “`import json from './foo.json' assert { type: 'json' };“` In Chromium 93 the same thing for CSS …

W3C TPAC 2021: CSS WG Updates

At (the ongoing) TPAC 2021 — the W3C Annual Conference — the CSS Working Group provided two video updates that summarize some of the ongoing work they’ve been doing. Perfect way to get up to speed in less than 10 minutes Improving CSS Architecture with Cascade Layers, Container Queries, Scope In this video Miriam Suzanne …

Generative design with CSS Houdini

Recording of George Francis giving his talk “Generative design with CSS Houdini” at the most recent edition of London CSS Learn how the mystical powers of CSS Houdini can be harnessed to create ever-unique, generative user interfaces — think random patterns, shapes, animations, and more! Related: Random Paint Effects with Houdini

A Guide To CSS Debugging

Over at Smashing Magazine, Stephanie Eckles has published an extensive piece on CSS Debugging. In my experience, CSS layout issues often fall out of one of the following categories: Overflow of content from its parent resulting in extra or unexpected scrollbars and content being pushed out of the regular viewport area. Inheriting browser inconsistencies leading …

Conditional Border Radius In CSS

Ahmad Shadeed recently spotted this declaration in Facebook’s CSS: .card { border-radius: max(0px, min(8px, calc((100vw – 4px – 100%) * 9999))); } It’s a really interesting piece of code, which acts as a toggle to only show rounded corners in case the element does not entirely span the viewport width. We don’t want rounded corners …

CodeSwing — Interactive Coding Playground (like CodePen, JSFiddle, etc.) Extension for Visual Studio Code

The Visual Studio Code extension named “CodeSwing” just blew my socks off. CodeSwing is an interactive coding playground for VS Code, that allows you to build/explore/learn rich web applications (“swings”). It’s like having the magic of a traditional web playground (e.g. CodePen, JSFiddle), but in Visual Studio Code! Using the Command Palette you can create …

CSS initial doesn’t do what you think it does

Another great video by Kevin Powell on one of those things in CSS that many may have heard of, but most likely don’t understand entirely (I know I didn’t for a very long time 😅). We often think initial sets something back to how it started, but it actually does a lot more than that. …