Hi Simon,
@supports only checks for support of CSS properties and values, not selectors, so this approach won’t work.
This should do the job:
/* Fallback: apply focus styles to all focusable elements */
body.bricks-is-frontend :focus {
outline-style: solid;
outline-color: var(--focus-colour);
outline-width: var(--focus-width);
outline-offset: var(--focus-offset);
}
/* If :focus-visible is supported, remove fallback for mouse users */
body.bricks-is-frontend :focus:not(:focus-visible) {
outline: none;
}
Due to this report, I edited my initial reply.
Regarding the banner, it appears to have been a minification, combining, or caching issue. I disabled Litespeed CSS combining, cleared the cache, regenerated the styles, reactivated the setting, cleared the cache again, and now everything seems to be fine again. Can you confirm?