:is()
and :where()
pseudo-classes, which allow you to present a list of selectors to the browser. The browser will then apply the rule to any element that matches one of those selectors. This can be useful for reducing repetition when writing a selector that matches a large number of different elements. For example::is()
is not particularly a new thing—it has been supported for a while in various browsers. Sometimes this has been with a prefix and the name any (e.g. :-moz-any
). Other browsers have used the name :matches()
. :is()
is the final standard name that the CSSWG agreed on.:is()
and :where()
basically do the same thing, but what is the difference? Well, :is()
counts towards the specificity of the overall selector, taking the specificity of its most specific argument. However, :where()
has a specificity value of 0 — it was introduced to provide a solution to the problems found with :is() affecting specificity.:is()
, but then later on want to override those styles using a simple selector? You won’t be able to because class selectors have a higher specificity. This is a situation in which :where()
can help. See our :where()
example for a good illustration.:read-only
and :read-write
. As their name suggests, they style elements based on whether their content is editable or not:-moz-
prefix for a long time now.)<p>
element with or without contenteditable
set:dotAll
flag, Unicode property escapes, and named capture groups.p{…}
and {…}
. They can be used to match any decimal number in Unicode, for example. Here’s a unicode-aware version of d
that matches any Unicode decimal number instead of just the ASCII numbers 0-9.Intl.ListFormat
API, the JavaScript engine can now format lists for you:NumberFormat
constructor documentation for the new options available.ParentNode.replaceChildren()
, which replaces the existing children of a Node
with a specified new set of children. This is typically represented as a NodeList
, such as that returned by Document.querySelectorAll()
.replaceChildren()
with no arguments. It also is a nice way to shift nodes from one element to another. For example, in this case, we use two buttons to transfer selected options from one <select>
box to another:ParentNode.replaceChildren()
.BigInt
from JavaScript.proxy.onRequest
, a filter that limits based on tab id or window id is now correctly applied. This is useful for add-ons that want to provide proxy functionality in just one window.saveAs
option, the recently used directory is now remembered. While this data is not available to developers, it is very convenient to users.