[csswg-drafts] [css-ui-4] Extend the `outline` shorthand value to include offset (#10381)

jossmac has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-ui-4] Extend the `outline` shorthand value to include offset ==
Proposal to extend the [outline](https://www.w3.org/TR/css-ui-4/#outline) shorthand value to optionally include an `outline-offset` value.

The desire for this change is to simplify/improve CSS variable declarations as complete design tokens. The [font](https://www.w3.org/TR/css-fonts-4/#propdef-font) shorthand property is terrific for this purpose. Borrowing from that API, a slash delimiter (`/`) would offer the opportunity to declare an optional offset value e.g.

```css
/* current */
:focus  {
  outline: 3px solid black;
  outline-offset: 2px;
}

/* proposed */
:focus  {
  outline: 3px solid black / 2px;
}
```

Abbreviated syntax:

```css
outline = 
  <'outline-color'> ||
  <'outline-style'> ||
  <'outline-width'>
  [ / <'outline-offset'> ]
```

Related:

- #8788 
- #10343 

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/10381 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Friday, 31 May 2024 04:56:50 UTC