How is this possible with CSS only?!

I’ve done reaction videos in the past where I looked at crazy codepens, and today, we’re starting a new series where I find one such codepen and see if I can understand how it was created, with a dive into the :has() pseudo-class, which is now supported in Chrome and Safari.
🔗 Links
✅ Jhey's code: codepen.io/jh3y/pen/yLKMOBm
✅ My starting code: codepen.io/kevinpowell/pen/MW...
✅ :has() browser support: caniuse.com/?search=has
⌚ Timestamps
00:00 - Introduction
00:51 - what I'm trying to copy
04:20 - Setting up my custom properties
05:01 - Using :has()
06:18 - setting up the different states
10:54 - Adding the shaking animation
12:51 - removing the animation when the input is empty
16:54 - changing the style of the button when everything is valid
19:55 - should I do more videos like this one?
#css
--
Come hang out with other dev's in my Discord Community
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨‍🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my KZbin channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[@KevinPowell]

You'll still want to use some proper validation on your forms, but for these client-side hints can make for some big improvements from a UX side of things, and it's just one of the cool things we can do with :has(), it opens up a lot of other doors as well!

[@KevinPowell]

@Cube Memes I upload and schedule things out in advance ☺️

[@gambomaster]

@@KevinPowell That's cool. The comment you are reading now was scheduled 2 weeks ago by me. 😆

[@widadtoumi4439]

Hello Kevin, can you please do a video about font families in responsive design? like when we build a website with a certain font family, should we change it to roboto when the website is open on a mobile screen ? Thank you so much 😊

[@djdx2]

I like this style Kevin, where you and the viewers are learning/experimenting at the same time. Not just you saying this that this that, you are learning as we are!

[@djdx2]

KEVIN LOVED MY COMMENT WWWOOOOOOO

[@sharkinahat]

There's always something I learn from these videos. Today I learned that has() is awsome and that a placeholder pseudo-element exists.

[@sergeyvolodin5798]

Hello , Kevin, you create an amazing and nessesary content ) I’m from Russia and I work as a frontend developer. My main problem was how to create really responsive websites without any difficulties and you and your content have helped me to increase the quality of my knowledge about responsive web design. Have a good day, dude 🙂🙂

[@kierandansey7293]

This is really helpful, thank you very much! I have been using js to manage form validation state primarily because of the form being invalid when the page first loads and having to juggle css selectors cross browser is a "pain in the css". But this approach is actually rather simple and logical, as soon as I saw the has(:placeholder-shown) selector it clicked what he was doing. Very clever!

[@VasilyPavlik]

Marvelous as usual! Thank you !

[@eugenbleck]

This was awesome Kevin!

[@zaktreister1995]

Loved this. Keep doing these!

[@zachjensz]

Another good UX addition could be cursor: not-allowed on the button when it's greyed out.

[@markboots_]

and maybe pointer-events to none. (although tabbing and enter will still work)

[@trinkel8]

And maybe disable the button?

[@mityukov]

@@trinkel8 is it possible to trigger "disabled" using css? I can only think of having two buttons and toggling each one's "display"..

[@trinkel8]

@@mityukov hmmmmm. Good point. JS is the only option I can think of for that. So, never mind. ☹️

[@jaideepshekhar4621]

Can't we just create two buttons, one disabled, and show the proper one depending on whether the form is valid? No js required.

[@theconsciousness6082]

Thanks for explaining everything so thoroughly.

[@neoqwerty]

The HAS:() pseudoclass is also supported in Firefox, but you gotta enable it as an experimental configuration! (I was looking for a good workaround to have some of my table headers change background if they used headers in their content, with a rough fallback if "has" isn't supported.)

[@JansenTeam]

That was interesting! Yes, I would like to see the css for the spinning letters, please.

[@GerritforBazeja]

Nice to validate a form this way. Nice upgrade for the form!

[@hirendarkarthikeyan6513]

Hi Kevin, you are such an inspiration to me and changed my life

[@mdshohidulislam5836]

Amazing to see how things start from scratch ..

[@mouadhnida4639]

I love seeing notifications from you

[@PrinceKumar-mf3tl]

I really appreciate it ❤️☺️. Keep continue.....

[@kolbecrypto2976]

Tnx kevin i learned a lot from you❤

[@trinkel8]

Damn. I just finished a form at work and now I want to start over. I checked out the spinning letters in CodePen and it's really quite simple.

[@CirTap]

**don't bother to regex your email fields!** whatever you enter, it's likely incomplete and breaks with intl. address formats, names, and RFC mail extensions. HTML provides the email input type for a reason, which performs a validation check against valid email address patterns. It will work better than any random regex you can find or come up.

[@ACE46]

19:17 USE "pointer-events: none;" and "pointer-events: auto;" to disable btn in invalid state and enable in valid :)

[@ap6471]

A true CSS Hero on KZbin 🥇

[@canadianavenger]

Very cool, it's amazing how far CSS has come. Might be an interesting exercise to see if you can re-create it without using the experimental `has` pseudo-class.

[@KevinPowell]

It's not experimental anymore, it's fully supported in Chrome and Safari :). Should be here soon-ish with FF as well (granted that doesn't mean we can use it in production yet, but it's getting there!) As for re-creating it without it, I guess we could use some sort of `label + input:valid` and other stuff like that to get us pretty close :)

[@canadianavenger]

@@KevinPowell Sorry, by experimental I just meant a feature that wasn't sufficiently supported out in the wild yet. But good to know it is fully adopted, and that all the other browsers should be catching up to support it "soon". Still, I think it might make for an interesting exercise. Thanks again for all the great content, I'm always learning something from your streams.

[@Xamy-]

@@canadianavenger I’ve tried and I ran into some edge cases IIRC

[@jaideepshekhar4621]

@@KevinPowell Is it supported on the Brave browser?

[@CanadianPenny]

Definitely the letter flipped thing, please. That's what I clicked on the vid for. :)

[@bayoutown]

Thanks!

[@KevinPowell]

Thank you so much (and sorry for missing this until now!)

[@tommyandersen4004]

To enable in Firefox, set: `layout.css.has-selector.enabled` in about:config to True.

[@Morrile1]

Breaking down someone else's code can help others to understand code better, so please keep it up 👍

[@bilalsalmi4136]

I'm currently learning javascript , but after watching some of your CSS-only video series , I would rethink of the purpose of using js in some cases where it could be done just with CSS . JS is decreasing speed and performance of websites , js forms as calculator compared to mental-math , it's makes us more and more stupid . kevin Powell::after : { content : 'thank you so much for just amazing content' }

[@claykrr]

js helps you understand that there is absolute no limit on for example forums so you can be flexible with css and always know what’s next

[@kinstar]

you still want to keep learning though

[@castlemoyle]

If you HAVE to "hide" the characters in a password input, then give the user the option to SHOW the chars as you type. I hate getting locked out of a site because my fat fumble fingers have screwed up "typing" on a phone. Even if you can see the chars in a password, they are encrypted when sent. And hopefully, we know enough to beware of shoulder surfers stealing stuff. (Good comment with 2 samples of unplanned alliteration. grin). Great podcast!

[@thomaskcollins]

Love this reverse-engineering breakdown approach! Thank you for this. Hope we get more videos in this format. 👍

[@nathanmiddleton1478]

Take this with a grain of salt; for performance what's the overhead difference between JS and CSS for this? I know you typically don't nerd out on these things, but it'd be an interesting thing to consider. Also, nothing wrong with more videos breaking down nifty things you see IMO!

[@markuserdmann1722]

Wonderful! We really need :has()! Maybe you can disable your submit button with pointer-events: none while the form is invalid to prevent the submit?

[@KevinPowell]

That could work, but it might leave people wondering what's wrong if they haven't filled out all the fields and don't see any errors, so you'd want to be a little careful :)

[@markboots_]

probably Kevin made this tutorial earlier. But last tuesday Chrome v105 is released which includes the :has() selector. So it should work without the flag (make sure you have updated to the latest chrome version)

[@stephenJpollei]

Yes and hopefully FireFox will have has very soon as well. I think it is behind flag at the moment.

[@CirTap]

@@stephenJpollei yep: go to about:config and enable `layout.css.has-selector.enabled`

[@donnyestee]

Imagine a change request to change to label "Email" to "Email address". And then a comment of your UX designer and PO, "it's just changing a label; it shouldn't take longer than a minute".

[@MrNickP]

When I was working through this example I implemented the animation control as .form-group:has(:invalid:not(:focus):not(:placeholder-shown)) { animation: shake 0.65s; } In this particular scenario, is there an advantage to splitting it?

[@KevinPowell]

oh, nice. As long as that works, it's nice having it together :)

[@gobideveloper111]

Please make a detailed video on container query because chrome supporting it.

[@KevinPowell]

It's on my schedule already :D

[@avertry9529]

I just updated Brave, which uses Chrome Engine, and :has is now supported. do you know what the popup warning is on Jhey's code? I cannot find it. and his code works without issue? The unsupported popup shows in this video too. So I just wonder what we are missing, seeing as you enabled canary experimental?

[@KevinPowell]

popup is a new thing that's being trialed. I've read about it, but forget the details.

[@avertry9529]

@@KevinPowell Thanks

[@MrNickP]

Is there anyway to measure performance of a CSS only solution vs a CSS/JS solution?

[@nomad100hd]

I'm curious as well!

[@KevinPowell]

There are ways, but I have no idea what they are 😅. That type of testing is beyond me, but I'll try to look into it and find out how we can do proper testing for that, as it can be pretty important.

[@dankierson]

All fine but form fields must always be checked on server side even if you have them validated at client side. I like the shake and shimmer 😁

[@KevinPowell]

100% it needs to be checked server side too! but some UX hints for the user are always nice :)

[@Xamy-]

I like to think of it as a multi layered approach

[@arjix8738]

after all, client side validation is nothing since any program can send GET and POST requests so there is no need to run the browser, aka the validation wont even run

[@CJ-ff1xq]

Your software engineers were so preoccupied with whether or not they could, they didn't stop to think if they should.

[@peteharrison3241]

Kevin, in Jhey's code there are styles like this "--word-total:1" Can you explain this, maybe I'm just missing something

[@ColossalMcBuzz]

For a browser called The New IE, I can't believe Safari has had default support for *has* for about six months now.

[@Metalmine]

A browser owned and controlled by one company vs a browser created, maintained, and updated based on an open source codebase is very different. It's like comparing the speed of change between and authoritarian government vs a democratic one. The latter might do things slower, even significantly sometimes, but It needs to as it requires multiple consensus.

[@thedacian123]

Form :valid sudo class is an experimental one,i mean very new?Thanks!

[@KevinPowell]

It's been around for a *long* time now!

[@michaelschone3406]

... and if i try to get the password i just need to interact with the css and test the animation till i get the green one? Im wrong at this pt? :peace:

[@himabimdimwim]

"if your browser is Firefox you should... Switch-" 😲

[@peteharrison3241]

how could this become part of a toolset so including a stylesheet would bring this into play with any signup/sign-in form? Maybe this it too big an ask, but having hundreds of snippets it's hard to work out how to genericyfy (spelling) these to use just about anywhere.

[@keylanoslokj1806]

What CSS libraries and frameworks are you using?

[@KevinPowell]

None 😂. I have my own system using Sass, that is sort of like a framework I guess.

[@CalebHesse01]

Out of curiosity, it seems that the CSS editor allows for SCSS syntax... why not use that for variables at least? Possibly because you're showing this to people who may want to try it and don't use SCSS maybe? I would also assume the outcome would remain the same if you did use SCSS variable syntax. P.S. I have been using vanilla CSS for years. A few months ago I decided I wanted something different. I wasn't even really thinking about wanting the "new features/syntax", more like, wanted something new to try. I will probably never go back unless I need to. I have noticed that it's so much better. The only downfall for me is that it's compiled and most people probably want ctrl+s to do all the work 🤣 Though I just leave my command line open on my 3rd monitor and just click, up-arrow enter to compile. So usually it's pretty quick after you get used to it

[@divinsmathew]

Could've added a pointer-events: none and cursor: not-allowed to simulate the button disabled state.

[@vedantkanoujia]

But with css framework these things are easily and fastly done for production, if you are free or jobless you can done it with css or html only whole day

[@mariajegan2409]

@keyframes shake { 0%, 100% { transform: translateX(0); } 20%, 40%, 60%, 80% { transform: translateX(-4%); } 10%, 30%, 50%, 70%, 90% { transform: translateX(4%); } }

[@cloudsquall88]

Does :not(:focus) mean "when losing focus" and "not having focus" at the same time?

[@Metalmine]

losing focus is an event trigger, not having focus is an object state, since these stylings are detailed for object state, when the state changes, then it gains new properties.

[@FdWebdesign]

Good Job

[@Qbe_Root]

This should be doable without :has by having the form groups be fieldsets. Fieldsets, like forms, will match :valid and :invalid if their contents do, removing the need for :has(:valid) and :has(:invalid). As for :has(:focus), :focus-within should do

[@jasperdiscovers]

i wish firefox has() support for this. it's coming tho!

[@bn5055]

I often ask myself where the Javascipt is. I always end up using Javascript instead 😉

[@31redorange08]

“JavaScipt” 😉

[@fredbluntstoned]

Since this is only for Chrome. It's not CSS, it's a feature of Chrome. So if you only have chrome users then you're ok. Otherwise you need to either: a. Wait until other browsers are supported. b. Make your own version for other browsers that behaves about the same. c. Not use this at all.

[@QwDragon]

Actually :has(:focus) is :focus-within :)

[@mervinmarias9283]

"That's the easy part"

[@szaboistvan7517]

Should've removed pointer events for the disabled submit button

[@KevinPowell]

That would work, but if the user skips a field and the button is disabled, it might be a bit confusing, it'd be nice to get a tip to ask them to fill out the missing one I think, instead of having to figure out the problem :)

[@koolmind]

Why we have to write :has(:invalid:not(:focus)) instead of :has(:invalid):not(:focus) Focus should be a pseudo-class of the input itself, isn't it? :o

[@Technoph1le]

If we write what you have said, it would be relative to form itself not it's input

[@AJman14]

^ Explanation: You want to make sure the :invalid input is :not(:focus) instead of the element that :has() the invalid input.

[@yousseferraki723]

, during the second wave..

[@leoschuler]

a good artist copy a great artist steals

[@davivify]

From what I can tell _:has_ has very low browser support - as of the end of June.

[@Metalmine]

As of this week, Chrome and Safari both support it I believe, Firefox is coming soon.

[@ruthlessadmin]

I thank gods I do not believe in every day, that I got out of web development. CSS/HTML is absolute insanity. Pure high-level coding HELL.

[@jaideepshekhar4621]

Because of loc?

[@KennethKolano]

Not really CSS only, this is CSS + HTML5.

[@MrKOHKyPEHT]

Yeah, it's cool, but it's never using at commercial :D

[@KevinPowell]

Oh, it's not ready for production yet, but that doesn't mean it never will be! Browser support will be pretty high by the end of the year for :has(), and while you might not want to use this use case, I think it does a nice job of showing what's possible with it :)

[@shiekhpalace2401]

Do you know about kaboom js

[@KevinPowell]

I never had, but just looked now! Looks really cool, but I don't do much game stuff.

[@shiekhpalace2401]

@@KevinPowell i wanted a complete tutorial of kaboom js because i want to become a game developer

[@siddiqahmed3274]

@@shiekhpalace2401 check code with harry

[@shiekhpalace2401]

@@siddiqahmed3274 but he had not uploaded full tutorial i wanted full

[@siddiqahmed3274]

@@shiekhpalace2401 kevin is not a js guy. You have to find it somewhere else

[@_lun4r_]

Your thumbnail has a typo: "JavaScipt" instead of "JavaScript"

[@user-wq9mw2xz3j]

i dont understand but then again I only have cs:go

[@ShubhamSingh-sn9cy]

I just installed tNice tutorials program and just looking at it makes my brain hurt lol

[@IbrahimKwakuDuah]

I always tell people: There's no shame in copy and paste

[@yigit2024]

respond to you all in 1 month to see how tNice tutorialngs have evolved if I rember or if soone is interested. My failure is just that - mine. But I

[@thenerd3722]

honest with myself. once you find what you really want to acNice tutorialeve in life, try your best to pursue it as soon as possible. im only rn but i

[@randomdude0nyoutube]

Shamelessly stealing this... 🤣🤣🤣🤣 The whole lot of it

[@solvedfyi]

I don't understand why your "look at some codepens" videos are so SO much more popular than your other videos. Makes me wonder what that incentivizes you to make. Not only do the views come but they should be easier to record, just scrolling through pens. But we get far less education from it.

[@ItsMeooooooo]

I stopped watching as he said: "When you use Firefox, you have to switch Browsers". The main Purpose of a webpage is to deliver Information. All of your fancy shmancy CSS stuff isn't worth to take a look at when its not compatible with all of the browsers. The route your are taking here is bring back the old times of "Optimised for Internet Explorer". Are you sure you want them back?