focus-rings-improvements.md

A way to address clipping

Problem: The inner element will have its outline clipped by the outer element

outer {
  display: inline;
  overflow: hidden;
}

inner:focus {
  display: inline;
  outline: 2px solid blue;
  outline-offset: 2px;
}

Solution: Unknown

outline-offset configure sides

This allows you to match the shape of an element more closely

element:focus {
  outline-offset: <all>;
  outline-offset: <top/bottom> <right/left>;
  outline-offset: <top> <right/left> <bottom>;
  outline-offset: <top> <right> <bottom> <left>;
}

outline-radius

This allows you to match the shape of an element more closely

element:focus {
  outline-radius: <same as border-radius>;
}

:has() (already in selectors v4 spec)

Style an ancestor element based on a specific child element having focus (imagine a message box that contains an input and several buttons)

child:focus {
  outline: none;
}
ancestor:has(child:focus) {
  outline: 2px solid blue;
}

color-contrast() (already in colors v5 spec)

Select the best outline color based on the current background color.

element:focus {
  outline: 2px solid color-contrast(...);	
}

currentBackgroundColor (proposed for colors spec)

Select the best outline color based on the current background color.

element:focus {
  outline: 2px solid color-contrast(currentBackgroundColor blue, yellow);
}