In this week’s news, Chrome tackles focus rings, we learn how to get “donut” scope, Global Privacy Control gets big-name adoption, it’s time to ditch pixels in media queries, and a snippet that prevents annoying form validation styling.
Chrome will stop displaying focus rings when clicking buttons
Chrome, Edge, and other Chromium-based browsers display a focus indicator (a.k.a. focus ring) when the user clicks or taps a (styled) button. For comparison, Safari and Firefox don’t display a focus indicator when a button is clicked or tapped, but do only when the button is focused via the keyboard.
Some developers find this behavior annoying and are using various workarounds to prevent the focus ring from appearing when a button is clicked or tapped. For example, the popular what-input library continuously tracks the user’s input method (mouse, keyboard or touch), allowing the page to suppress focus rings specifically for mouse clicks.
[data-whatintent="mouse"] :focus {
outline: none;
}
A more recent workaround was enabled by the addition of the CSS :focus-visible
pseudo-class to Chromium a few months ago. In the current version of Chrome, clicking or tapping a button invokes the button’s :focus
state but not its :focus-visible
state. that way, the page can use a suitable selector to suppress focus rings for clicks and taps without affecting keyboard users.
:focus:not(:focus-visible) {
outline: none;
}
Fortunately, these workarounds will soon become unnecessary. Chromium’s user agent stylesheet recently switched from :focus
to :focus-visible
, and as a result of this change, button clicks and taps no longer invoke focus rings. The new behavior will first ship in Chrome 90 next month.
:not()
selector enables “donut scope”
The enhanced CSS I recently wrote about the A:not(B *)
selector pattern that allows authors to select all A
elements that are not descendants of a B
element. This pattern can be expanded to A B:not(C *)
to create a “donut scope.”
For example, the selector article p:not(blockquote *)
matches all <p>
elements that are descendants of an <article>
element but not descendants of a <blockquote>
element. In other words, it selects all paragraphs in an article except the ones that are in a block quotation.
![](https://i0.wp.com/css-tricks.com/wp-content/uploads/2021/03/css-not-donut-scope.png?resize=1390%2C786&ssl=1)
The New York Times now honors Global Privacy Control
Announced last October, Global Privacy Control (GPC) is a new privacy signal for the web that is designed to be legally enforceable. Essentially, it’s an HTTP Sec-GPC: 1
request header that tells websites that the user does not want their personal data to be shared or sold.
![](https://i0.wp.com/css-tricks.com/wp-content/uploads/2021/03/http-sec-gpc-header.png?resize=1734%2C1160&ssl=1)
The New York Times has become the first major publisher to honor GPC. A number of other publishers, including The Washington Post and Automattic (WordPress.com), have committed to honoring it “this coming quarter.”
From NYT’s privacy page:
Does The Times support the Global Privacy Control (GPC)?
Yes. When we detect a GPC signal from a reader’s browser where GDPR, CCPA or a similar privacy law applies, we stop sharing the reader’s personal data online with other companies (except with our service providers).
em
-based media queries
The case for Some browsers allow the user to increase the default font size in the browser’s settings. Unfortunately, this user preference has no effect on websites that set their font sizes in pixels (e.g., font-size: 20px
). In part for this reason, some websites (including CSS-Tricks) instead use font-relative units, such as em
and rem
, which do respond to the user’s font size preference.
![](https://i0.wp.com/css-tricks.com/wp-content/uploads/2021/03/css-tricks-font-relative-units.png?resize=1772%2C1016&ssl=1)
Ideally, a website that uses font-relative units for font-size
should also use em
values in media queries (e.g., min-width: 80em
instead of min-width: 1280px
). Otherwise, the site’s responsive layout may not always work as expected.
For example, CSS-Tricks switches from a two-column to a one-column layout on narrow viewports to prevent the article’s lines from becoming too short. However, if the user increases the default font size in the browser to 24px
, the text on the page will become larger (as it should) but the page layout will not change, resulting in extremely short lines at certain viewport widths.
If you’d like to try out em
-based media queries on your website, there is a PostCSS plugin that automatically converts min-width
, max-width
, min-height
, and max-height
media queries from px
to em
.
:user-invalid
to browsers
A new push to bring CSS In 2017, Peter-Paul Koch published a series of three articles about native form validation on the web. Part 1 points out the problems with the widely supported CSS :invalid
pseudo-class:
- The validity of
<input>
elements is re-evaluated on every key stroke, so a form field can become:invalid
while the user is still typing the value. - If a form field is required (
<input required>
), it will become:invalid
immediately on page load.
Both of these behaviors are potentially confusing (and annoying), so websites cannot rely solely on the :invalid
selector to indicate that a value entered by the user is not valid. However, there is the option to combine :invalid
with :not(:focus)
and even :not(:placeholder-shown)
to ensure that the page’s “invalid” styles do not apply to the <input>
until the user has finished entering the value and moved focus to another element.
The CSS Selectors module defines a :user-invalid
pseudo-class that avoids the problems of :invalid
by only matching an <input>
“after the user has significantly interacted with it.”
![](https://i0.wp.com/css-tricks.com/wp-content/uploads/2021/03/css-user-invalid-example.png?resize=1785%2C910&ssl=1)
Firefox already supports this functionality via the :-moz-ui-invalid
pseudo-class (see it in action). Mozilla now intends to un-prefix this pseudo-class and ship it under the standard :user-invalid
name. There are still no signals from other browser vendors, but the Chromium and WebKit bugs for this feature have been filed.
Hey, just wanna say I’m really enjoying the weekly platform news each week.
I’m just a little mad at you for promoting the unnecessary use of the * selector.
article p:not(blockquote p)
will make a nice tidy doughnut for you.The
*
selector may look odd, but it’s there to avoid having to write the main selector twice unnecessarily.