A rather geeky/technical weblog, est. 2001, by Bramus
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.
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 …
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”
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”
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 …
@bramus/specificity
Introducing `@bramus/specificity`, a JavaScript package to calculate the specificity of a given CSS Selector
Interop 2022 is the successor to Compat 2021, an joint effort by browser vendors to work on browser compatibility. Interop 2022 is a public effort and benchmark around which browser vendors can collaborate to improve interoperability in areas believed to be important to web developers. It is composed of two parts: 15 focus areas on …
Here’s Ahmad Shadeed‘s post on Cascade Layers In this article, we’ll explore how cascade layers work, and how they will help us write CSS with more confidence, along with use-cases and examples. Hello, CSS Cascade Layers →
Kevin Powell takes a look at Cascade Layers: If you’re new to Cascade Layers and are looking for more resources, here’s a few useful ones: The Future of CSS: Cascade Layers (CSS @layer), by yours truly Getting Started With CSS Cascade Layers, by Stephanie Eckles CSS Cascade Layers in 5 Minutes, by Una Kravets Cascade Layers: …
The past few months, I’ve seen a lot of posts on Color Spaces and Colors in CSS float by. Here’s a small roundup.