Around the Frontend World, vol. 15

CSS Wrapped 2023

2023 was a great year for CSS. This article from Chrome does a fantastic job summarizing the CSS features that enriched CSS this year. One worth mentioning is Media Query Scripting, which detects whether JavaScript is being used. Thanks to that, you'll no longer need JavaScript to remove the no-js class from the HTML. Which CSS feature caught your eye this year?

Horizontal separators between select options

Chrome 119+ and Safari 17+ let you add an <hr> between options to visually separate items. Alternatively, you can wrap the options in an <optgroup>, though there you need to provide a label. Without a label, you just get an empty line, which also separates the items, but the result isn't as nice. Cross-browser support is still weak for now.

Text-wrap: pretty

Chrome 117 introduced a new CSS property, text-wrap: pretty, which prevents orphan words from wrapping onto a new line. According to the official demo, it also prevents a preposition-plus-word pair (two words) from being orphaned. As for Czech text, unfortunately the wrapping doesn't work there. That said, wrapping a number-and-word pair, like "15 let" ("15 years"), does work correctly in Czech too. The property still has weak support for now, so maybe in the future we'll get this text-prettifying treatment in Czech as well. 🙂

Browserstack accessibility tool

If you know and use Browserstack for testing websites and apps across different devices and browsers, you'll definitely appreciate the new feature for accessibility testing.

You simply download the extension for accessibility testing and then open it in DevTools. The testing itself is then split into three parts: Workflow scanner (real-time testing without needing to repeatedly re-scan the page in different states), Assisted test (easy identification of accessibility issues for more advanced user interactions, like keyboard navigation), and Screen reader launcher (testing websites directly with a real screen reader across different platforms, such as Mac, Windows, and Android).

At Superkoders, we spend a lot of time on the topic of accessibility. If you'd like to know more, follow me on LinkedIn, where I try to regularly post interesting things from exactly this field.

Support for the :has selector in the standard version of Firefox

And to wrap up, an update on one of the features from the last installment, LFS14. Firefox has supported it since version 121 — the :has selector, which at the time of writing the last installment still only worked in the Nightly build.

In closing

Now you're up to speed on everything that happened in the frontend world in the last month of 2023. Don't forget to follow us so you don't miss a thing in 2024 either!