There's frost on the roof of my office shed this morning, and I've got my Halloween decorations up. There's nothing spooky about this edition of CSS Layout News, however! If you want to follow me elsewhere, I'm also collecting links over on Semble, in a CSS Layout collection.

Rachel Andrew

Things I've been reading

Randomly Place an Element Along Edge of Another Element

Chris Coyier shows you how to use CSS random() to move an item to random positions around another element. The random() function isn't Baseline yet, but you can try out the examples using Safari, or Chrome with the Experimental Web Platform Features enabled.

Using maths to balance your heading styles

This is a nice article from Craig Abbott which provides a way to balance your headings to ensure that different levels demonstrate a visual difference. This avoids using colour alone to differentiate between heading levels, which disadvantages people who are colour blind.

Stop Treating CSS Container Queries Like Traditional Media Queries

Victor Ayomipo shows how container queries differ from media queries, and explains when you should use each type of query. With container queries now Baseline Widely available, you should feel happy to benefit from their power to create reusable components.

CSS does your tooltip positioning now

Matt Smith has written a short tutorial which nicely demonstrates anchor positioning, and how it solves a problem that used to require a lot of JavaScript and careful engineering to keep tooltips visible.

12 CSS features you can use today with no build step

From Flavio Copes, another article on the subject of things we used to have to use JavaScript for. Includes container queries, subgrid, scroll-driven animations, and more.

Bringing Microsoft Internet Explorer’s proprietary “Interpage Transitions” back to Modern Browsers using the View Transition API

Bramus has provided a way to add chaos to your website navigations with page transitions styled after the IE "Interpage Transitions".

Just landed in browsers

Chrome 154 includes responsively-sized iframes. This feature, currently only available in Chrome, lets iframes resize themselves based on the intrinsic size of the embedding document. This prevents the situation where you have to measure the size of the content then update the iframe size.

Firefox 157 adds support for the at-rule() function in @supports , this means you can test if the browser supports a given at-rule. Chrome already has support and it's in Safari Technology Preview, hopefully we'll see it become Baseline soon.