MDN doc updates: CSS selectors & media queries, WebGPU & WebTransport APIs, Progressive web apps

A new feature has been added to two CSS pseudo-classes to provide you with more options! It's the new of <selector> syntax, which can be used with the :nth-child() and :nth-last-child() pseudo-classes.

Until now, while using these pseudo-classes, you could select sibling elements based on their position in the group, such as by specifying even, odd, or by specifying the notation An+B. The of <selector> syntax lets you further narrow down the selection of elements and then target elements based on their even, odd, or An+B position. Support for this syntax is currently available in Firefox and Safari. Here's a sneak peak into how you can use this new syntax:

/* using An+B notation in a 10-item list */
li:nth-child(-n + 3) {
  /* styles to apply to the first three list items */
}

/* using An+B notation with `of <selector>` in a 10-item list */
/* assuming 2nd and 5th list items have the class `important` */
li:nth-child(-n + 3 of .important) {
  /* styles to apply to the 2nd and 5th list items */
}

Dave Letorey has documented this new syntax for the :nth-child() and :nth-last-child() pseudo-classes and also added some cool examples to demo how to use of <selector> with :nth-child() and :nth-last-child(), how it differs from selector :nth-child(), and how to use it with striped tables.

For the <image> value that can be specified with the content property, there's now wider support among browsers to also specify an image-set() and <gradient>.

Check out the new examples that Dave has added to show replacement of an element's content with an <image> data type using url(), <gradient>, and image-set().

In Firefox, the :lang() pseudo-class can now use string-matching semantics (including * wildcards) for matching language codes rather than prefix-matching semantics. Additionally, comma-separated lists of languages are now supported for matching multiple languages. Isn't this great:

/* Matches nl and de */
:lang("nl", "de") {
  color: green;
}

Brian Smith has updated the :lang() page with all the new parameter details, and he's also added some interesting examples.

The experimental new CSS media feature prefers-reduced-transparency lets you detect if a user has enabled the setting on their device to minimize the amount of transparent or translucent layer effects. This feature is currently only available in Firefox. Thanks to CanadaHonk for adding this new reference page for us.

Here's a quick look at what this feature looks like:

@media (prefers-reduced-transparency) {
  .translucent {
    opacity: 0.8;
  }
}

Dipika Bhattacharya updated the scripting media feature to reflect that it is now fully supported in Firefox. However, being supported in only one browser, the feature still remains pretty much experimental. You can use this media query to style your CSS based on whether scripting, such as JavaScript, is available on the current document, only during initial page load, or not available at all.

Similarly, support for another media feature, inverted-colors, has been added to Firefox; however, this one is available behind a flag (layout.css.inverted-colors.enabled). You can use the inverted-colors media query to detect if your user agent or operating system has inverted all colors.

The syntax for the ray() function, which can be specified as a value for the offset-path property, has been updated in the specification. <ray-size> is now optional, and the default value of <ray-size> is closest-side.

ray() = ray( <angle> && <ray-size>? && contain? )
<ray-size> = closest-side | closest-corner | farthest-side | farthest-corner | sides

Dipika has added a new reference page for the ray() function to document all the parameter details. Check out the examples to see how you can use this function value in offset-path to animate an element along the ray path. Support for the ray() function is still behind flags on various browsers. The new syntax is also not yet adopted in all browsers.

Great news! Firefox also now supports static (import) and dynamic (import()) loading of ECMAScript modules in dedicated and shared workers. In addition, Firefox has added support for static import in service workers and worklets – this support is currently available only in Firefox. You can't use dynamic import in service workers and worklets because it is prohibited by the specification.

Hamish Willee has made sure to update the impacted docs.

Thanks to Chris Mills, documentation for the WebGPU API is now available on MDN. This API provides support for performing computation and graphics rendering by using the Graphics Processing Unit (GPU) of a device. Learn about the different interfaces, including those for representing pipelines and for handling errors and queries.

This is still an experimental technology, so check browser compatibility before using it.

The WebTransport API specification has recently undergone updates. Hamish has updated all the relevant docs so you can learn about these features. There are new constructor options – allowPooling, requireUnreliable, and congestionControl. There's also a few new properties – reliability, draining, and congestionControl. These are currently available only in Firefox.

The interfaces provided by the Compression Streams API are used to compress and decompress data using the gzip and deflate formats. Firefox also supports this API now.

Brian has added a description for the compression methods – gzip, deflate, deflate-raw – used in the CompressionStream and DecompressionStream objects.

Firefox finally added support for a bunch of WebRTC methods, properties, and dictionaries: RTCRtpSender.getCapabilities(), RTCRtpReceiver.getCapabilities(), RTCRtpSender.setStreams(), RTCSctpTransport, RTCPeerConnection.sctp, RTCPeerConnection.connectionState, RTCPeerConnectionStats, and RTCAudioSourceStats. These docs have been spruced up by Hamish.

The WebRTC Statistics API has evolved significantly in recent years. The documentation and compatibility information were significantly out of date. As part of the above work, Hamish and Vinyl Da.i'gyu-Kazotetsu have also updated the browser compatibility information for all statistics-related interfaces and dictionaries. This is part of an ongoing work to document the dictionaries that reflect browser compatibility for web features. If you're curious, you can keep track of their progress in the RTCStatsReport statistics types table.

A lot of exciting work is happening in different corners of MDN. You can already see parts of these projects live on the site.

There is a lot of great work happening to revamp the Progressive web apps documentation on MDN.

While the project is still ongoing, a lot of ground has been covered to create new how-tos, installation and best practices guides, and reference pages. Kudos to Estelle Weyl, Patrick Brosset, and Will Bamberg for reviving these docs. You can look forward to having access to the complete doc set very soon.

Estelle has been churning fascinating "in action" examples on the module landing pages in the CSS area of MDN. Check some of them out and you'd be delighted too - Animations in action, Colors in action, and Filter effects in action.

The addition of these examples is part of a bigger project to revamp the CSS module landing pages. The idea is for the landing pages to help connect all the dots when looking at a set of properties defined in a CSS module. This project is still in progress and should wrap up in the coming months.

I hope these updates were useful and provided you an insight into what's happening on the web and what's keeping the MDN staff, our partners, and contributors busy. Keep an eye out for more such updates in the coming weeks (psst CSS nesting).

Let us know you have any feedback or questions about this post. Feel free to join the discussion in the MDN Web Docs Discord server or leave a comment on MDN's GitHub discussion.