This week the Australian broadcaster ABC released the new branding for their News broadcast graphics and News website. Whenever a site I’m familliar gets updated, the first thing I do is inspect it with the browser dev tools to see what technology and techniques they have used. I thought I’d write down some of the intersting things I found on the website. News websites have such a broad audience and when they are using new or cutting-edge technologies, it gives you confidence that these technologies are probably fine to use in your own apps.

The front end is a Next app

When first inspecting the page in dev tools, it’s pretty clear that it’s built in React. One of the biggest giveaways is the random class names used by CSS Modules. You will find references to Next in the first div on the page, and in the <head> tag among other places.

Container Queries

Container queries are well supported across browsers but many consider them to still be cutting-edge. I found them being used in few places, including these horizotnal carousels. Using container queries allows the width of cards to be adjusted to create partially revealed ‘peek’ item, an affordance that there is more content to scroll to. And while we are on the subject of these carousels, I thought it was in intersting accessibility enhancement to use flex-direction: column-reverse on the card content. This means that the DOM order has the main content before the image and Log in button so that it will be read first, but the visual layout positions the image on top.

Scroll-snap

The above carousels also make use of a relatively new CSS property called scroll-snap. This allows the scrolling to snap to cards and gives you good swipe interaction support on mobile for free.

CSS Variable colour system

This one is very common these days, you’d be hard-pressed to find a site that doesn’t use a CSS variable system but I’ve added here none the less. It shows that they have built a proper design/component system.

Dark mode (?)

I don’t know if this is official yet, I only discovered it in the code. It doesn’t look ready yet but it looks like it might be available in the future. I found some references in the CSS to light or dark colour scheme and then found data-scheme="light" on the page body. Switching this to dark turns on dark mode, however it is incomplete:

It’s always great to see organistions which are typically seen as slow, old or behind the times use modern technologies, and it speaks a lot of the teams they have working on the site. There might be a bunch of old tech behind the scenes but it’s nice to see the front end being built on a modern stack.