Add <image-1D> stripes() function to border-color and outline-color properties

• Component: CSS
• Status: NEW ---

[Josh Tumath]

The css-images-4 spec specifies a new type called <image-1D> which defines the new stripes() function. The new type can be used on the outline-color and border-color properties. It allows borders and outlines to be made up of multiple sets of colours. The author has control over the thickness of each stripe.

The stripes() function is particularly important for creating accessible focus ring designs. By using multiple colours like black and white, the author can ensure that their focus ring will be visible against any background.

For example:

  outline-color: stripes(red 1fr, green 2fr, blue 2px);

The thickness value can be omitted, implying a value of 1fr:

  outline-color: stripes(black, white);

Specifications:

https://drafts.csswg.org/css-images-4/#typedef-image-1d
https://drafts.csswg.org/css-borders-4/#border-color
https://drafts.csswg.org/css-ui-4/#outline-color

[Radar WebKit Bug Importer]

<rdar://problem/133536559>