A responsive card template with a mobile first and no js setup The card is one of the most used components. The card list html ... more

A mobile first accordion component without javascript The accordion is a nice way to present summarized content in a space saving format. Again, this can not be must read content. The details/summary is used as a switcher and label, and in this setup it does contain the content. That is placed in a div with the class="inner" This way the content can be animated smooth and cross browser and not jumpy like with the allow-discrete. By using the details/summary we get the build in accessibility and the hidden-until-found functionality. If the same name is used for all details in the accordion the items auto close when opening a new one. The open property can be used to show the content on pageload. ... more

A mobile first tabbed component without javascript Tabbed content is a fine solution to present relevant, but not must read, information in a dense format. The details/summary is used as tab switcher and label, however it does not contain the content. That is placed in a div after the details/summary. This way the content can be animated smooth and cross browser and not jumpy like with the allow-discrete ... more

How to create a mobile first header template the modern way Modern would be using grid and flex-box. Also not using javascript to move parts around, just plain css. Adding the same content twice to hide or show it on certain screen sizes is considered old-fashioned. The header setup What elements do we in general use in the header: the ubiquitous usp’s logo mobile menu icon (on mobile and/or tablet) search bar user menu main menu So, let’s set up the parts in html. ... more

Overview of css features with limited availability ... more

Anchor positioning had me wondered for a while, however after reading some articles about it I think this is a great addition to modern css. Especially in use with some other new css/html additions like the popover api. And now support for Anchor positioning has landed in Safari 26 use in production is near (FireFox has it under a flag). I really like the absolute relative positioning and the baked in fallback on smaller screens. ... more

Overview of 2026 baseline css features ... more

This is a plea for the power of the cascade — the C in CSS. Too many times I’ve read rants against it, and most of the time it comes down to a lack of understanding. The cascade is actually enormously helpful when it comes to styling, as long as you know what you are doing. There is no other frontend technique that lets you change the look and feel of an entire document with so little effort. The way the cascade works is very consistent and very logical, and now that @layer has been added to the mix, it is even easier to influence. ... more

Overview of 2025 baseline css features ... more

Overview of 2024 baseline css features ... more