NerdCulture

0 posts0 participants0 posts today

Ana Tudor 🐯<a href="https://mastodon.social/tags/cssWish" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssWish</a> 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)) ```<a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#code</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#coding</a> <a href="https://mastodon.social/tags/cssGrid" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssGrid</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#frontend</a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#web</a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#dev</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDevelopment</a> <a href="https://mastodon.social/tags/cssLayout" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssLayout</a>

Ana Tudor 🐯<a href="https://mastodon.social/tags/cssWish" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssWish</a> Length multiplication/ division.Got a right triangle where a cathetus is 50vw, hypotenuse is R (unknown), other cathetus is R - 2emR² = (50vw)² + (R - 2em)² R² = 2500vw² + R² - 4em·R + 4em² R = (2500vw² + 4em²)/4emCan 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.<a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://mastodon.social/tags/Maths" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Maths</a> <a href="https://mastodon.social/tags/cssMaths" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssMaths</a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#code</a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#web</a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#dev</a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDevelopment</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#frontend</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#coding</a>

Ana Tudor 🐯<a href="https://mastodon.social/tags/cssWish" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssWish</a> 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.

Ana Tudor 🐯Ideal <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> 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()` <a href="https://www.w3.org/TR/css-values/#funcdef-src" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://www.w3.org/TR/css-values/#funcdef-src</a>On `attr()` <a href="https://github.com/web-platform-tests/interop/issues/521" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://github.com/web-platform-tests/interop/issues/521</a>On `filter` <a href="https://iamvdo.me/en/blog/advanced-css-filters#filter" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://iamvdo.me/en/blog/advanced-css-filters#filter</a><a href="https://mastodon.social/tags/cssWish" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssWish</a> <a href="https://mastodon.social/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#css</a> <a href="https://mastodon.social/tags/filter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#filter</a> <a href="https://mastodon.social/tags/cssFilter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssFilter</a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#code</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#coding</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#frontend</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDevelopment</a>

Ana Tudor 🐯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*/ } }<a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://mastodon.social/tags/cssWish" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssWish</a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#code</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#coding</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#frontend</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDevelopment</a>

Ana Tudor 🐯<a href="https://mastodon.social/tags/SVG" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#SVG</a> comes with so many cool features, but bringing that power to <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> is so broken unless you don't need responsivity.clip-path: path() is an example <a href="https://css-tricks.com/unfortunately-clip-path-path-is-still-a-no-go/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://css-tricks.com/unfortunately-clip-path-path-is-still-a-no-go/</a>Another is when toying with lighting - x,y spotlight position can't use % values, just unitless numbers.<a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#coding</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#frontend</a> <a href="https://mastodon.social/tags/svgWish" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#svgWish</a> <a href="https://mastodon.social/tags/cssWish" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssWish</a> <a href="https://mastodon.social/tags/svgFilter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#svgFilter</a> <a href="https://mastodon.social/tags/cssFilter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssFilter</a> <a href="https://mastodon.social/tags/clipping" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#clipping</a> <a href="https://mastodon.social/tags/lighting" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#lighting</a> <a href="https://mastodon.social/tags/svgLighting" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#svgLighting</a> <a href="https://mastodon.social/tags/svgPath" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#svgPath</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDevelopment</a> <a href="https://mastodon.social/tags/codingFrustrations" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#codingFrustrations</a>

Ana Tudor 🐯<a href="https://mastodon.social/tags/cssWish" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssWish</a> 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 <a href="https://github.com/w3c/csswg-drafts/issues/1332" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://github.com/w3c/csswg-drafts/issues/1332</a> but... ¯\_(ツ)_/¯<a href="https://mastodon.social/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#css</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#coding</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#frontend</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDevelopment</a>

Ana Tudor 🐯<a href="https://mastodon.social/tags/cssWish" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssWish</a> to be able to use accentColor as a value, the same way I can currentColor 🥺<a href="https://mastodon.social/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#css</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#coding</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#frontend</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDevelopment</a>

Ana Tudor 🐯Just got reminded of yet another <a href="https://mastodon.social/tags/cssWish" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssWish</a>: 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!<a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#coding</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#frontend</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDevelopment</a>

Ana Tudor 🐯<a href="https://mastodon.social/tags/CSSwish" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSSwish</a> Proper RegEx for CSS attribute selectors.<a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#coding</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#frontend</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDevelopment</a>

Recent searches

Search options

Administered by:

Server stats:

#csswish