Slides of a talk covering the CSS Cascade, which I gave at the April 2022 Full Stack Ghent Meetup
The C in CSS (2022.04.20 @ Full Stack Ghent)
Tag Archives: css
The Future of CSS: CSS Toggles
The work on CSS Toggles has been abandoned. The contents of this article are no longer relevant. Late last week, I was very delighted to see that Chromium will start prototyping with CSS Toggles, a proposal currently only available as an Unofficial Draft, authored by Tab Atkins and Miriam Suzanne (who else?!). CSS toggles are …
Say Hello to <selectmenu>, a Fully Style-able <select> Element
Over at CSS-Tricks, Patrick Brosset dug into <selectmenu>, the customizable <select> we always wanted. The new experimental <selectmenu> control offers a lot of flexibility when it comes to styling and even extending a traditional <select>. And it does this in all the right ways, because it’s built into the browser where accessibility and viewport-aware positioning …
Continue reading “Say Hello to <selectmenu>, a Fully Style-able <select> Element”
What’s new in @bramus/specificity v2
Back in February I created @bramus/specificity, an NPM package to calculate the Specificity of CSS Selectors. As that version was more of a thought experiment/POC, there was a lot of room for improvement. Yesterday, after 11 betas, version 2.0.0 of @bramus/specificity was released. Let’s take a look … Quick Example To give you an idea …
The Hidden Fundamentals of CSS
In this CSS Café talk, Josh W. Comeau digs into several Layout Modes and a few common misunderstandings about CSS (such as Stacking Contexts) Also see the Understanding Layout Algorithms post Josh recently published.
CSS color-contrast() – Target Contrast Ratio Demo
Nice demo by Daniel Yuschick, showing how color-contrast() does its thing. Using the controls you can change the target contrast using a keyword or a custom value. Good use of Custom Properties there as well! 👨🔬 To check this demo you’ll need Safari Technology Preview 122+ with the CSS color-contrast() Experimental Feature enabled.
Corset — Cascading Binding Sheets
Matthew Philips made something odd-looking: a JavaScript framework that lets you add DOM bindings using a CSS-like syntax. Say your framework of choice generates this markup: <div class="counter"> <button type="button" class="increment">Increment</button> <button type="button" class="decrement" disabled>Decrement</button> <div class="result"> Count: <strong class="count">0</strong> </div> </div> Using Corset, you can then add behavior as follows: import sheet, { mount …
Container queries, the next step towards a truly modular CSS
At JSWORLD Conference, Maarten van Hoof presented “Container queries, the next step towards a truly modular CSS” Modular, componentized frameworks and libraries are more popular than ever, but currently screen size is the only dimensional constraint to which a web design can adapt to. In this talk, Maarten will explain what Container Queries are and …
Continue reading “Container queries, the next step towards a truly modular CSS”
Building Web Layouts For Dual-Screen And Foldable Devices
One topic that’s been sitting in my “to write about” queue for quite some time now is CSS for Dual-screen devices. Looks like I can scrap that one, as Stephanie Stimac wrote the post, which got published on Smashing Magazine Foldable devices are available to purchase, and are currently being used by consumers today, and …
Continue reading “Building Web Layouts For Dual-Screen And Foldable Devices”
Flexbox Dynamic Line Separator
Nice one by Ahmad Shadeed: a line-separator between two flex items that plays nice with either flex-directions. The line itself is dynamically injected using generated content. As it becomes part of the flexbox layout it’s contained in — something I didn’t know — you can control its flex properties. The trick is to: Stretch the …