- From: Josh Tumath via GitHub <sysbot+gh@w3.org>
- Date: Mon, 13 Jun 2022 13:47:23 +0000
- To: public-css-archive@w3.org
Hello. @LeaVerou and @tabatkins, it was nice to meet you both at CSS Day in Amsterdam last week. At the BBC, we would also like to express our interest in this feature for supporting multiple colour stripes in borders and outlines. I can see that a decision was reached in 2018 on the syntax for this feature, but I thought I would add our use-case for it as well, in case it's helpful. We want to use the `outline` property to create a black and white focus ring. At the moment, we are doing that with the `box-shadow` property, like in the example below: <img width="220" alt="Screenshot 2022-06-13 at 14 34 29" src="https://user-images.githubusercontent.com/1760227/173365806-e711521b-fc1e-4a29-a044-504f113192d9.png"> However, if we were to apply our box-shadow focus ring globally to all elements, that would clash with interactive elements that use box-shadows for stylistic purposes. Also, we observe the following issues: * The shadow goes underneath adjacent content, such as in this example where the box-shadow around the link is underneath the grey text in the adjacent paragraph. The outline property wouldn't have that issue because it's always painted above content. <img width="256" alt="Screenshot 2022-06-06 at 15 28 14" src="https://user-images.githubusercontent.com/1760227/173366625-ea64de41-f34b-4725-8ced-c77c55afa345.png"> * If the focusable element is an inline box, but the content inside it is in a block box, the shadow gets rendered like in the example below. The `outline` property does not share that issue.  So in conclusion, having an `outline-color` property that supports the proposed new `stripes()` function (or any other possible syntax) would allow us to easily roll out an improved focus ring design across our website. -- GitHub Notification of comment by JoshTumath Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/1172#issuecomment-1153937468 using your GitHub account -- Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Monday, 13 June 2022 13:47:25 UTC