Jhey ๐Ÿ”จ๐Ÿปโœจ Profile picture
Jul 18 โ€ข 6 tweets โ€ข 3 min read
Future CSS Tip! ๐Ÿ”ฎ

Use :has() to power <form> micro-interactions and theme ๐Ÿ˜Ž No JavaScript. Animations powered by <input> state ๐Ÿš€

.group:has(:invalid) {
animation: shake 0.5s;
}

form:has(.email:valid):has(.password:valid) .submit {
--color: green;
}

Demo link below ๐Ÿ‘‡
Here's that @CodePen link! โœจ

๐Ÿ”Ž :has is landing in Chrome 105 and is already in Safari as of version 15.4 ๐Ÿ™Œ

Have you tried CSS :has() yet? What could you use it for?

๐Ÿ‘‰ codepen.io/jh3y/pen/yLKMOโ€ฆ via @CodePen
p.s As pointed out you could also do a much simpler

form:valid [type="submit"] { ... }

But, I've been wanting to find examples where I can show chaining :has() ๐Ÿ”—

If you have any cool scenarios for it, I'd love to hear them!
How do the letters twirl?

Each letter is a span inside the label with an inline custom property used for animation delay โœจ

<label>
<span style="--index: 1">E</span>
...
</label>

Then use :has ๐Ÿš€

.group:has(:valid) span {
animation: twirl 1s calc(var(--index) * 0.1s);
}
Did a little revisit to show how you could show and hide error messages with only CSS too โœจ

CSS :has is real exciting ๐Ÿ˜ Can't wait for this one to land in all the browsers ๐Ÿคž

How can you keep the <label> accessible whilst splitting the letters? ๐Ÿค”

Hide the letters from the "Accessibility Tree" and create a new visually hidden <span> that contains the label text ๐Ÿ˜Ž

We can use CSS to hide it but without using "display: none" so it's picked up! <label for="email"...

โ€ข โ€ข โ€ข

Missing some Tweet in this thread? You can try to force a refresh
ใ€€

Keep Current with Jhey ๐Ÿ”จ๐Ÿปโœจ

Jhey ๐Ÿ”จ๐Ÿปโœจ Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!

PDF

Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

More from @jh3yy

Sep 13
Future CSS Tip! ๐Ÿ”ฎ

Use animation-timeline to create scroll-linked animations ๐Ÿคฏ

li { view-timeline-name:in; }
img { animation-name:reveal; animation-timeline:in; }

Animation is bound to the li position in the viewport โœจ

Check these image reveals ๐Ÿ˜Ž

Demo link/info below! ๐Ÿ‘‡
Here's that @CodePen link! ๐Ÿš€

And this should work in your browser today ๐Ÿ™Œ That's because it's using a polyfill that's currently under development as scroll linked animations are experimented with ๐Ÿ˜Ž

codepen.io/jh3y/pen/RwyGBโ€ฆ
How can you change the timing?

Currently with "animation-time-range" (โš ๏ธ The naming here is due to change ) which takes different values like "enter 0% 150%". That would mean starting animation upon entry into the viewport. And finishing once the element is 150% of the way in.
Read 6 tweets
Sep 10
This one was born out of the number of skeleton loaders I saw whilst in the US ๐Ÿ˜… (My cell reception was "weak")

Amazed how many of them were quite jarring though ๐Ÿ‘€

Using this one as a stepping stone to get back on the video editing wagon. Also made captions for this one ๐Ÿ™Œ
Sometimes you get in a rut and you just need to "Make a thing!" to get yourself going again.

It's been like that with these. I'm still trying to find that "Sweet process". But, the more of them I make, the better I get at it. And that's the same with anything.
People often associate me with making lots of cool @CodePen demos. But, that didn't just happen. I'm just really consistent at making things that pop into my head.

I just checked, I've made 1609 CodePen demos...

My CodePen PRO account pays for itself ๐Ÿ˜…
Read 4 tweets
Aug 26
Future CSS Tip ๐Ÿ”ฎ

The Anchoring API lets you anchor an element to another without JS โš“๏ธ

Don't need to be siblings/nested + you can define positions when things get clipped ๐Ÿคฏ

.anchor{anchor-name:--a;}
.boat{position-fallback:--backup;}

Check this video and demo link below! ๐Ÿ‘‡
Here's that @CodePen link! ๐Ÿš€

You'll need @chromecanary with the "Experimental Web Platform Features" flag set โ›ณ๏ธ

This is super early stages โš ๏ธ

But if you play, try resizing the container and see how the boat moves when it gets clipped ๐Ÿ”ฅ

codepen.io/jh3y/pen/WNzBXโ€ฆ
And here's where the spec for this API is at currently! ๐Ÿ‘‡

tabatkins.github.io/specs/css-anchโ€ฆ
Read 4 tweets
Aug 26
To think, this UI pattern will be possible without any JavaScript using the Pop-Up API and CSS Anchoring ๐Ÿคฏ

<button popuptoggletarget="products">Products</button>
<div popup id="products">
<a autofocus>HTML</a>
</div>

"autofocus" enables keyboard nav ๐Ÿ”ฅ

Demo link below ๐Ÿ˜Ž
Here's the @CodePen link! ๐Ÿš€

This is currently only in @chromecanary behind the "Experimental Web Platform Features" flag โ›ณ๏ธ

I'm also "mocking" the anchoring here with a smidge of JavaScript ๐Ÿค

Actual CSS-only anchoring is on the way though! ๐Ÿ‘‡

codepen.io/jh3y/pen/YzabBโ€ฆ
That's right, we're getting the ability to tether one element to another with CSS alone ๐Ÿคฏ Wild!

I have started playing with this but the implementation isn't quite there to play with "top layer" things like [popup] yet ๐Ÿ˜

But, check out the spec here!

tabatkins.github.io/specs/css-anchโ€ฆ
Read 5 tweets
Aug 24
CSS Tip! ๐Ÿš€

You can select the previous siblings of an element with :has() to create cool hover effects like this OS dock๐Ÿ”ฅ No JS ๐Ÿ˜Ž

:root{--lerp-1:0.525;}
a:has(+a:hover){
--lerp:var(--lerp-1);
translate: 0 calc(var(--lerp) * -75%);
}

Demo link and explanation below! ๐Ÿ‘‡
First, here's that @CodePen link! ๐Ÿš€

You'll need to be in Safari, Chrome BETA, or you can use Chrome/Firefox with flags enabled โ›ณ๏ธ

Try not only :hovering the items, but also tabbing through them too โœจ

codepen.io/jh3y/pen/mdxggโ€ฆ
How do we get the nice easing curve on :hover? ๐Ÿง

The trick is creating a set of custom properties based on an easing curve ๐Ÿค“

For, example the easing curve custom properties for this demo are ๐Ÿ‘‡ :root { 	--lerp-0: 1;   --l...
Read 10 tweets
Aug 23
CSS Tip! ๐Ÿ“ข

You could use CSS :has() to make a CSS-only dark mode toggle with a checkbox ๐Ÿง

:root:has(:checked) {--dark:1;}

If you can, use a button and [aria-pressed] ๐Ÿ™
(Toggle via JS โœจ)

:root:has([aria-pressed=true]) {--dark:1;}

It powers this demo ๐Ÿ˜Ž Link below! ๐Ÿ‘‡
Here's that @CodePen link! ๐Ÿš€

codepen.io/jh3y/pen/poLBvโ€ฆ
Why not use

:root:has(:checked) { --dark: 1; }

Because you can, doesn't mean you should โœ‹

Form controls are often better used in forms. Check this resource on creating toggle ๐Ÿ‘

Had no idea a screen reader would announce it as a "Toggle button" ๐Ÿ”ฅ

inclusive-components.design/toggle-button/
Read 5 tweets

Did Thread Reader help you today?

Support us! We are indie developers!


This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Don't want to be a Premium member but still want to support us?

Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal

Or Donate anonymously using crypto!

Ethereum

0xfe58350B80634f60Fa6Dc149a72b4DFbc17D341E copy

Bitcoin

3ATGMxNzCUFzxpMCHL5sWSt4DVtS8UqXpi copy

Thank you for your support!

Follow Us on Twitter!

:(