How CSS works: Parsing and painting CSS in the critical rendering path

Insightful post by the folks over at LogRocket on the rendering pipeline: If your site takes forever to load, chances are your users aren’t gonna wait for it to finish, even if there’s valuable content to be found there. Some studies have shown that up to 50% of users leave a page after 3 seconds […]

Side-channel attacking browsers through CSS3 features

Ruslan Habalov and Dario Weißer found a way to read contents from an iframe, using CSS3: Accessing the DOM of an iframe that includes a cross-origin resource is forbidden by default. However, the content of the iframe was displayed in the same context as the rest of the site so we wanted to verify if […]

Demystifying the future of CSS with sparkles of JS

At the recent JSConf.be conference here in Belgium, Ibe Vanmeenen gave a very nice talk introducing Houdini. CSS as a language is at the brink of a great revolution. Once such a closed and magical language, it will open up to you and your creativity in all it's glory. CSS will become an easy to […]

Unicode Patterns with <css-doodle />

<css-doodle /> is a web component for drawing patterns with CSS. The component will generate a grid of divs by the rules (plain CSS) inside it. You can easily manipulate those cells using CSS to come up with a graphic pattern or an animated graph. The limit is the limit of CSS itself. Combine <css-doodle […]

Pure CSS Francine – An 18th-Century Oil Painting Recreated with HTML and CSS

Handcrafted recreation of an 18th-century oil painting using just HTML and CSS. Here’s an analysis of it using the Chrome DevTools, as recorded by Paul Irish: Chrome only though: Because of the artistic nature of this project I have not concerned myself with cross-browser-compatibility, so the live preview will most likely look laughable in anything […]

Scroll to the future – CSS and JavaScript features that make navigating around a single page smooth, beautiful and less resource-hungry.

Very in-depth article on Evil Martians’ team blog on scrolling: We have scrolled to the bottom of modern web specifications to take you on a whirlwind tour of latest CSS and JavaScript features that make navigating around a single page smooth, beautiful and less resource-hungry. Subjects tackled are styling of scrollbars, position: sticky, IntersectionObserver, Smooth […]

How CSS’s display: contents; works

You might know that display: contents; does what it states it does: it only shows an element’s contents, just as if you were to remove the opening and closing tag. But what about the element’s attributes? What about the bound JavaScript events? What about … ? Ire Aderinokun digs deeper. How display: contents; works →