Go to main content

Textpattern CMS support forum

You are not logged in. Register | Login | Help

#1 2022-04-15 06:35:03

phiw13
Plugin Author
From: Japan
Registered: 2004-02-27
Posts: 2,760
Website

Windows11: outline auto rendering ?

How does a Chromium based browser (and Firefox) render outline: auto on Windows 11?

In the following test file, you should see a rectangle with a red border and a ~2px thick solid outline, hopefully in a color that matches what the OS uses. If everything goes well the outline is offset from the border by 2px (but Chromium apparently ignores that for the auto value).

dev.l-c-n.com/_temp/outline-auto.html

On my Mac, various recent OS, Safari renders the standard focus-ring (5px blueish with blur , as expected) Firefox renders as described (blueish OS colour) and Chromium renders a 2px solid black outline.

TIA.


Where is that emoji for a solar powered submarine when you need it ?

Offline

#2 2022-04-15 20:30:48

michaelkpate
Moderator
From: Avon Park, FL
Registered: 2004-02-24
Posts: 1,378
Website GitHub Mastodon

Re: Windows11: outline auto rendering ?

Chrome

Firefox

They definitely rendered differently.

Offline

#3 2022-04-15 23:42:37

phiw13
Plugin Author
From: Japan
Registered: 2004-02-27
Posts: 2,760
Website

Re: Windows11: outline auto rendering ?

Thank you Michael. That matches quite closely the rendering on macOS. And yeah, Chromium browsers do not apply the outline-offset when the auto value for outline is used. There is a tad of ambiguity in the spec…

For my you case anyway that rendering is OK. I would use it mostly inside a forced-colors:active media query—for those users who set their OS theme to some ‘forced colour’ theme (formerly known a Windows High Contrast). The auto value will make sure to show a focussing ring that matches what the OS-theme expects.


Where is that emoji for a solar powered submarine when you need it ?

Offline

Board footer

Powered by FluxBB