#csswish — Public Fediverse posts

#cssWish `padding` and `box-decoration-break` support on `::selection`.

Generally, a way to control the `::selection` background area.

Because with a lot of fonts, this is outrageously tall & especially narrow. Especially if you want to use a cursive font, the letters spill right out of the `::selection`.

If the `::selection` background is so tall that it overlaps the previous line at a not low at all `line-height` just so it catches all ascenders and descenders, can't it be wide enough too?

#cssWish `padding` and `box-decoration-break` support on `::selection`.

Generally, a way to control the `::selection` background area.

Because with a lot of fonts, this is outrageously tall & especially narrow. Especially if you want to use a cursive font, the letters spill right out of the `::selection`.

If the `::selection` background is so tall that it overlaps the previous line at a not low at all `line-height` just so it catches all ascenders and descenders, can't it be wide enough too?

#cssWish to be able to do:

[type='radio|checkbox'] {}

instead of:

[type='radio'], [type='checkbox'] {}

#CSS #code #coding #frontend #web #dev #cssSelector #webDevelopment #webDev

#cssWish to be able to do:

[type='radio|checkbox'] {}

instead of:

[type='radio'], [type='checkbox'] {}

#CSS #code #coding #frontend #web #dev #cssSelector #webDevelopment #webDev

#cssWish That we could have a zero count for the number of columns in `repeat()`.

That repeat count is often computed. Let's say I want double the width for selected column k out of n columns:

```
repeat(var(--k), var(--w))
calc(2*var(--w)
repeat(calc(var(--n) - var(--k) - 1), var(--w))
```

#CSS #code #coding #cssGrid #frontend #web #dev #webDev #webDevelopment #cssLayout

#cssWish That we could have a zero count for the number of columns in `repeat()`.

That repeat count is often computed. Let's say I want double the width for selected column k out of n columns:

```
repeat(var(--k), var(--w))
calc(2*var(--w)
repeat(calc(var(--n) - var(--k) - 1), var(--w))
```

#CSS #code #coding #cssGrid #frontend #web #dev #webDev #webDevelopment #cssLayout

#cssWish Length multiplication/ division.

Got a right triangle where a cathetus is 50vw, hypotenuse is R (unknown), other cathetus is R - 2em

R² = (50vw)² + (R - 2em)²
R² = 2500vw² + R² - 4em·R + 4em²
R = (2500vw² + 4em²)/4em

Can kinda go around it making 1em be 3vw, but... 😞

For anyone wondering what this is even for: computing the radius of the radial gradient that creates a bottom arch for a page header.

#CSS #Maths #cssMaths #code #web #dev #webDevelopment #webDev #frontend #coding

#cssWish Length multiplication/ division.

Got a right triangle where a cathetus is 50vw, hypotenuse is R (unknown), other cathetus is R - 2em

R² = (50vw)² + (R - 2em)²
R² = 2500vw² + R² - 4em·R + 4em²
R = (2500vw² + 4em²)/4em

Can kinda go around it making 1em be 3vw, but... 😞

For anyone wondering what this is even for: computing the radius of the radial gradient that creates a bottom arch for a page header.

#CSS #Maths #cssMaths #code #web #dev #webDevelopment #webDev #frontend #coding

#cssWish just like we have min/ max width/ height to have min/ max aspect-ratio. Imagine one of the dimensions set by a % value and the other one by content/ parent, but within certain aspect-ratio limits.

#cssWish just like we have min/ max width/ height to have min/ max aspect-ratio. Imagine one of the dimensions set by a % value and the other one by content/ parent, but within certain aspect-ratio limits.

Ideal #CSS for an img with spaced out border with gradient from img src palette 👇

But 💔😭
☠️ `src()` isn't supported anywhere
☠️ `attr()` only works as a `content` value now
☠️ `filter()` is Safari-only... where `blur()` now produces image edge semitransparency (recent change)

On `src()` https://www.w3.org/TR/css-values/#funcdef-src

On `attr()` https://github.com/web-platform-tests/interop/issues/521

On `filter` https://iamvdo.me/en/blog/advanced-css-filters#filter

#cssWish #css #filter #cssFilter #code #coding #frontend #webDev #webDevelopment

Ideal #CSS for an img with spaced out border with gradient from img src palette 👇

But 💔😭
☠️ `src()` isn't supported anywhere
☠️ `attr()` only works as a `content` value now
☠️ `filter()` is Safari-only... where `blur()` now produces image edge semitransparency (recent change)

On `src()` https://www.w3.org/TR/css-values/#funcdef-src

On `attr()` https://github.com/web-platform-tests/interop/issues/521

On `filter` https://iamvdo.me/en/blog/advanced-css-filters#filter

#cssWish #css #filter #cssFilter #code #coding #frontend #webDev #webDevelopment

Wish we had a way to select elements with attribute values that are to be found on a list.

That is, do:
[name='foo'|'bar'|'pow'] {
&, & + [for] { /*styles*/ }
}

Instead of what we need to do now:
[name='foo'], [name='bar'], [name='pow'] {
&, & + [for] { /*styles*/ }
}

#CSS #cssWish #code #coding #frontend #webDev #webDevelopment

Wish we had a way to select elements with attribute values that are to be found on a list.

That is, do:
[name='foo'|'bar'|'pow'] {
&, & + [for] { /*styles*/ }
}

Instead of what we need to do now:
[name='foo'], [name='bar'], [name='pow'] {
&, & + [for] { /*styles*/ }
}

#CSS #cssWish #code #coding #frontend #webDev #webDevelopment

#SVG comes with so many cool features, but bringing that power to #CSS is so broken unless you don't need responsivity.

clip-path: path() is an example https://css-tricks.com/unfortunately-clip-path-path-is-still-a-no-go/

Another is when toying with lighting - x,y spotlight position can't use % values, just unitless numbers.

#coding #frontend #svgWish #cssWish #svgFilter #cssFilter #clipping #lighting #svgLighting #svgPath #webDev #webDevelopment #codingFrustrations

#SVG comes with so many cool features, but bringing that power to #CSS is so broken unless you don't need responsivity.

clip-path: path() is an example https://css-tricks.com/unfortunately-clip-path-path-is-still-a-no-go/

Another is when toying with lighting - x,y spotlight position can't use % values, just unitless numbers.

#coding #frontend #svgWish #cssWish #svgFilter #cssFilter #clipping #lighting #svgLighting #svgPath #webDev #webDevelopment #codingFrustrations

#cssWish to be able to specify an interpolation function in gradients. This could be so useful when it comes to creating gradient stripes.

There was some discussion about something like this at one point https://github.com/w3c/csswg-drafts/issues/1332 but... ¯\_(ツ)_/¯

#css #coding #frontend #webDev #webDevelopment

#cssWish to be able to specify an interpolation function in gradients. This could be so useful when it comes to creating gradient stripes.

There was some discussion about something like this at one point https://github.com/w3c/csswg-drafts/issues/1332 but... ¯\_(ツ)_/¯

#css #coding #frontend #webDev #webDevelopment

#cssWish to be able to use accentColor as a value, the same way I can currentColor 🥺

#css #coding #frontend #webDev #webDevelopment

#cssWish to be able to use accentColor as a value, the same way I can currentColor 🥺

#css #coding #frontend #webDev #webDevelopment

Just got reminded of yet another #cssWish: being able to have a `%` value for the x offset of `text-shadow`. You know, for visual text duplication without markup/ pseudo-element duplication. Vertically it's a lot easier, just make the line-height a unitless variable, poof, done!

#CSS #coding #frontend #webDev #webDevelopment

Just got reminded of yet another #cssWish: being able to have a `%` value for the x offset of `text-shadow`. You know, for visual text duplication without markup/ pseudo-element duplication. Vertically it's a lot easier, just make the line-height a unitless variable, poof, done!

#CSS #coding #frontend #webDev #webDevelopment

#CSSwish Proper RegEx for CSS attribute selectors.

#CSS #coding #frontend #webDev #webDevelopment

#CSSwish Proper RegEx for CSS attribute selectors.

#CSS #coding #frontend #webDev #webDevelopment