[Webkit-unassigned] [Bug 277549] New: Add <image-1D> stripes() function to border-color and outline-color properties

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=277549

            Bug ID: 277549
           Summary: Add <image-1D> stripes() function to border-color and
                    outline-color properties
           Product: WebKit
           Version: WebKit Nightly Build
          Hardware: All
                OS: All
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: CSS
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: josh.tumath at outlook.com
                CC: koivisto at iki.fi

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

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20240802/6db6944e/attachment.htm>