Using the at-rule() function we’ll soon be able to detect support for at-rules and their descriptors.
The Future of CSS: Detect at-rule support with @supports at-rule(@keyword)
The Future of CSS: Detect at-rule support with
Test your CSS Selector Skills with CSS Speedrun
Now that’s a fun little quiz by Vincent Will: A small fun app to test your CSS knowledge. Find the correct CSS selectors for the 10 puzzles as fast as possible. Finished my in 04:38:7. Level 8 tripped me up though: didn’t immediately see the pattern and lost more than 2 minutes on it 😅. …
Continue reading “Test your CSS Selector Skills with CSS Speedrun”
Life of a Pixel
Interesting talk from “Chromium University 2020”, digging into Chrome’s Rendering Pipeline. A tour of the internals of Chromium’s rendering architecture, tracing the steps in the pipeline from web content to display pixels. Concretizes high-level concepts with pointers to important classes and data structures in the codebase While the main concepts — such as a Main …
Synchronized Scrolling Tickers
These Scrolling Tickers by Fabrizio Calderan are quite nice. By calculating the rendered width (via JS, passed to CSS using a Custom Property) and taking that into account to calculate the animation-duration he’s able to synchronise their speeds. What I like most though is how the repetition of the ticker’s content is achieved. Where I’ve …
Exploiting IndexedDB API information leaks in Safari 15
There’s a pretty nasty exploit in Safari 15, where sites/tabs that interact with an IndexedDB database leak that name to other tabs. In Safari 15 on macOS, and in all browsers on iOS and iPadOS 15, the IndexedDB API is violating the same-origin policy. Every time a website interacts with a database, a new (empty) …
Continue reading “Exploiting IndexedDB API information leaks in Safari 15”
Parcel CSS: A new CSS parser, compiler, and minifier written in Rust (+ example project)
From Devon Govett, author of Parcel, comes Parcel CSS: Parcel CSS is a new CSS parser, compiler, and minifier written in Rust. It has significantly better performance than existing tools, while also improving minification quality. Looking at the charts, it pretty darn fast indeed. The key feature does not come from its Minification or Vendor …
Contributing to Open Source: Be a Mimic
Luke Downing made a contribution to Laravel. Before starting to write code, he took the time to look at how the repo was structured and how the code was written. By mimicking the ruling code style, his PR got accepted immediately: When Dries [one of the maintainers] reviewed my PR, he understood the code immediately. …
clay.css
Micro CSS util class for applying inflated fluffy 3D claymorphism styles to HTML elements. Fully customizable and extensible with CSS variables. SASS mixin is also included for even more styling options. I never really liked the neumorphism look, but this “claymorphism” by Adrian Bece looks nice. clay.css →clay.css Source (GitHub) →
Generative Gooey Flow Fields
I very much like this demo by Adam Kuhn: This demo is quite heave on your system. As it relies on altering the CSS d property to animate the SVGs, it’ll only work in Chromium based browsers for now.
COLRv1 Color Gradient Vector Fonts in Chromium 98
Shipping in Chromium 98 (currently in beta) is support for COLRv1 Color Gradient Vector Fonts. This is a pretty exciting addition, I must say! COLRv1 enables powerful 2D graphics glyph definitions (gradients, transforms), supports variations, and reuses existing glyph contour definitions. Previous color font formats embed bitmap files into the OpenType font containers. They do …
Continue reading “COLRv1 Color Gradient Vector Fonts in Chromium 98”