Release time comes around so quickly! This month we have quite a few CSS updates, along with the new
This blog post provides merely a set of highlights; for all the details, check out the following:
A couple of CSS features have moved from behind a preference and are now available by default:
accent-color CSS property sets the color of an element’s accent. Accents appear in elements such as a checkbox or radio input. It’s default value is
auto which represents a UA-chosen color, which should match the accent color of the platform. You can also specify a color value. Read more about the accent-color property here.
size-adjust descriptor for
@font-face takes a percentage value which acts as a multiplier for glyph outlines and metrics. Another tool in the CSS box for controlling fonts, it can help to harmonize the designs of various fonts when rendered at the same font size. Check out some examples on the size-adjust descriptor page on MDN.
Along with both of those, the
break-inside property now has support for values
font-size-adjust property accepts two values and if that wasn’t enough
system-ui as a generic font family name for the
font-family property is now supported.
font-size-adjust property on MDN
Object.hasOwn() static method. This returns
true if the specified property is a direct property of the object (even if that property’s value is
false is returned if the specified property is inherited or not declared. Unlike the
in operator, this method does not check for the specified property in the object’s prototype chain.
Object.hasOwn() is recommended over
Object.hasOwnProperty() as it works for objects created using
Object.create(null) and with objects that have overridden the inherited
Read more about Object.hasOwn() on MDN
About Ruth John
Ruth John works as a Technical Writer at Mozilla. A recent addition to the MDN team, she's a big fan of web technologies, and not only enjoys writing about them, but building demos with them as well.