For people who think it's useless because we can simply define max/min-width are missing the point.

It's not only about that specific case, but also about any combination that involves other values as well.

#CSS #HTML

💡 CSS Tip!

Have you ever tried to use "auto" within clamp()? Unfortunately, it doesn't work, but it's now possible using the new calc-size()!

https://css-tip.com/clamp-auto/

The same applies to all the sizing values (min-content, max-content, fit-content, etc.)

#CSS #HTML

@u0421793 it's the default/initial value of the width (and height) property. It's like defining nothing for the width so it will depend on your other CSS.

If you get "strange" results it's more likely something else not related to auto (flexbox algo, CSS grid configuration, alignment, etc)

💡 CSS Tip!

Have you ever tried to use "auto" within clamp()? Unfortunately, it doesn't work, but it's now possible using the new calc-size()!

https://css-tip.com/clamp-auto/

The same applies to all the sizing values (min-content, max-content, fit-content, etc.)

#CSS #HTML

@css So the code is not the same as yours. GSAP has an invalid `aria-label` (as cited earlier).

That said, I have been cautioning against letter-by-letter splitting for years:
• 2012: https://xcancel.com/aardrian/status/184979227232309248
• 2020: https://xcancel.com/aardrian/status/1220115927011938309
• 2022: https://xcancel.com/aardrian/status/1494400740286246917

Probably more, but I cannot search Masto.

Interestingly, while NVDA/Firefox reads the `aria-label`, JAWS/Chrome and Narrator/Edge see no content at all. VO/Safari will let me navigate a few letters.

Wow that’s broken.

@aardrian it's from the demo in their website (also available here: https://codepen.io/GreenSock/pen/xxmaNYj)

A CSS-only elastic hover effect, because why not?

https://css-tip.com/elastic-hover/

A chrome-only experiment using shape(), sibling-index(), linear(), etc.

#CSS #HTML

@aardrian Based on your article, I suppose I should not trust stuff like this: https://gsap.com/docs/v3/Plugins/SplitText/#screen-reader-accessibility ?

They claim "everything is ok" but their code is the same as the one I shared so they will logically suffer from the same issues (they also do char-by-char splitting as well)

@florianboegner I cannot test with Safari so I don't know. If it works there, then good.

A direction-aware and more realistic version.

Demo: https://codepen.io/t_afif/full/xbOzxyp via :codepen: @codepen

#CSS #HTML

@kizu kind of doable: https://codepen.io/t_afif/pen/xbOzxyp/955a11790fe0de9c7428c98b9fc1f0ad but I need to clean the code a little.

@kizu maybe not. Looks like we always need many "elements" to catch different hover but I will see If I can avoid adding more elements to my existing markup.

@kizu yes, good idea. Will try another implementation 😉

A CSS-only elastic hover effect, because why not?

https://css-tip.com/elastic-hover/

A chrome-only experiment using shape(), sibling-index(), linear(), etc.

#CSS #HTML

@kizu because CSS has rules now? 😅

I really like how modern CSS allows us to define complex stuff.

You might think the code of that pyramid is huge, but it's one property controlling everything (grid-column-start)

Container queries, if, sibling-index, maths, etc ... and they said CSS is not a programming language. 🤷‍♂️

#CSS #HTML

People are debating the masonry layout, and I'm creating strange layouts.

A Pyramidal Grid of Hexagon Shapes! 👀

https://css-tip.com/pyramidal-grid/

A fully responsive implementation powered by modern CSS (corner-shape, sibling-index(), math functions, etc.) and no media queries.

#CSS #HTML

@kizu The only part I skipped 😅

I was sure it will be another "safari being safari" thing that I don't want to know about ..

@kizu what about, instead of the "probe" element, you rely on a pseudo element of the "shrinkwrap source" that will behave the same way (anchored, etc). Looks like you can reduce one element?

didn't try (will probably do later) but maybe you already did and it failed for some reasons.

What about a Pyramid of Rhombus shapes?

Demo: https://codepen.io/t_afif/full/NPrwOXG via :codepen: @codepen

#CSS #HTML