277549 2024-08-02 06:17:32 -0700 Add <image-1D> stripes() function to border-color and outline-color properties 2024-12-30 18:59:38 -0800 1 1 1 Unclassified WebKit CSS WebKit Nightly Build All All NEW https://drafts.csswg.org/css-images-4/#typedef-image-1d InRadar P2 Normal --- 1 josh.tumath webkit-unassigned dev heycam josh.tumath koivisto pomerantsevp sabouhallawa simon.fraser tsmd57 webkit-bug-importer oldest_to_newest 2050293 0 josh.tumath 2024-08-02 06:17:32 -0700 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 2051649 1 webkit-bug-importer 2024-08-09 06:18:12 -0700 <rdar://problem/133536559>