Chrome to Align Focus Ring Behavior With Safari and Firefox

Chromium-based browsers currently show a focus ring around styled buttons when they are clicked or tapped. Safari and Firefox only show that indicator when the button receives focus via the keyboard, not via pointer input. That distinction has driven developers to libraries like what-input or CSS such as :focus-visible to suppress rings for mouse and touch interactions.

That workaround will soon be unnecessary. The Chromium user agent stylesheet has switched from :focus to :focus-visible for buttons, so clicks and taps will no longer trigger the ring. The change is expected in Chrome 90.

The “Donut Scope” Pattern With Enhanced :not()

The upgraded CSS :not() pseudo-class supports complex selectors, opening patterns like A:not(B *) to match A elements that are not descendants of B. Expanding that gives you a “donut scope”: article p:not(blockquote *) selects all paragraphs inside an article except those inside block quotes, because the inner :not() exclusion applies to descendants.

Global Privacy Control Gains Publisher Support

Global Privacy Control (GPC) is a signal sent via an HTTP Sec-GPC: 1 header to indicate the user opts out of data sharing or sales. The New York Times has become the first major publisher to honor the signal, stopping the sharing of personal data with third parties when it detects GPC under privacy laws like GDPR or CCPA.

Other publishers, including The Washington Post and Automattic (WordPress.com), have stated they will start honoring GPC within the coming quarter.

Media Queries in em for Consistent Scaling

Users can raise the default font size in their browser settings, but sites that fix font sizes in pixels do not respond. Using font-relative units like em and rem for typography is one step, but media queries still written in px can break the layout. For example, CSS-Tricks falls back from two columns to one on narrow viewports to keep line lengths readable; if the user’s font preference is 24px, the text scales up but the breakpoints stay put, leaving very short lines at certain widths.

Matching media queries to the same relative units — min-width: 80em instead of 1280px — keeps both text and layout scaling together. A PostCSS plugin can automate the conversion of min-width, max-width, min-height, and max-height from px to em.

Toward :user-invalid for Safer Form Validation Styling

The widely supported :invalid pseudo-class has two known issues: fields re-evaluate validity on every keystroke, and a required field becomes :invalid immediately on page load. Designers often combine :invalid with :not(:focus) and :not(:placeholder-shown) to avoid styling fields while the user is still typing.

The CSS Selectors spec defines :user-invalid, which matches an input only after substantial user interaction. Firefox already supports the equivalent via the prefixed :-moz-ui-invalid and intends to ship the standard name. Chromium and WebKit bugs exist, but no implementation signals have come from those vendors yet.