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!
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 😊
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!
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 🙂🙂
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.)
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.
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 :)
@@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.
**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.
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!
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!
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' }
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 :)
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".
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)
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!
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
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
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.
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
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.
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.
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
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.
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.
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?
... 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:
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?
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 :)
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 :)
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?
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.
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!
@Cube Memes I upload and schedule things out in advance ☺️
@@KevinPowell That's cool. The comment you are reading now was scheduled 2 weeks ago by me. 😆
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 😊
There's always something I learn from these videos. Today I learned that has() is awsome and that a placeholder pseudo-element exists.
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!
KEVIN LOVED MY COMMENT WWWOOOOOOO
Another good UX addition could be cursor: not-allowed on the button when it's greyed out.
and maybe pointer-events to none. (although tabbing and enter will still work)
And maybe disable the button?
@@trinkel8 is it possible to trigger "disabled" using css? I can only think of having two buttons and toggling each one's "display"..
@@mityukov hmmmmm. Good point. JS is the only option I can think of for that. So, never mind. ☹️
Can't we just create two buttons, one disabled, and show the proper one depending on whether the form is valid? No js required.
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 🙂🙂
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.)
Nice to validate a form this way. Nice upgrade for the form!
That was interesting! Yes, I would like to see the css for the spinning letters, please.
This was awesome Kevin!
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.
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 :)
@@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.
@@canadianavenger I’ve tried and I ran into some edge cases IIRC
@@KevinPowell Is it supported on the Brave browser?
Thanks for explaining everything so thoroughly.
Marvelous as usual! Thank you !
**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.
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!
Loved this. Keep doing these!
Hi Kevin, you are such an inspiration to me and changed my life
Definitely the letter flipped thing, please. That's what I clicked on the vid for. :)
A true CSS Hero on UA-cam 🥇
Amazing to see how things start from scratch ..
19:17 USE "pointer-events: none;" and "pointer-events: auto;" to disable btn in invalid state and enable in valid :)
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!
I love seeing notifications from you
To enable in Firefox, set: `layout.css.has-selector.enabled` in about:config to True.
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' }
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
you still want to keep learning though
Tnx kevin i learned a lot from you❤
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?
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 :)
I really appreciate it ❤️☺️. Keep continue.....
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".
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.
Love this reverse-engineering breakdown approach! Thank you for this. Hope we get more videos in this format. 👍
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)
Yes and hopefully FireFox will have has very soon as well. I think it is behind flag at the moment.
@@stephenJpollei yep: go to about:config and enable `layout.css.has-selector.enabled`
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!
Please make a detailed video on container query because chrome supporting it.
It's on my schedule already :D
Thanks!
Thank you so much (and sorry for missing this until now!)
Breaking down someone else's code can help others to understand code better, so please keep it up 👍
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 😁
100% it needs to be checked server side too! but some UX hints for the user are always nice :)
I like to think of it as a multi layered approach
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
Your software engineers were so preoccupied with whether or not they could, they didn't stop to think if they should.
Kevin, in Jhey's code there are styles like this "--word-total:1" Can you explain this, maybe I'm just missing something
"if your browser is Firefox you should... Switch-" 😲
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
For a browser called The New IE, I can't believe Safari has had default support for *has* for about six months now.
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.
Could've added a pointer-events: none and cursor: not-allowed to simulate the button disabled state.
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
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.
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.
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
Is there anyway to measure performance of a CSS only solution vs a CSS/JS solution?
I'm curious as well!
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.
Does :not(:focus) mean "when losing focus" and "not having focus" at the same time?
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.
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?
oh, nice. As long as that works, it's nice having it together :)
Form :valid sudo class is an experimental one,i mean very new?Thanks!
It's been around for a *long* time now!
i wish firefox has() support for this. it's coming tho!
Actually :has(:focus) is :focus-within :)
... 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:
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?
popup is a new thing that's being trialed. I've read about it, but forget the details.
@@KevinPowell Thanks
“JavaScipt” 😉
@keyframes shake {
0%, 100% {
transform: translateX(0);
}
20%, 40%, 60%, 80% {
transform: translateX(-4%);
}
10%, 30%, 50%, 70%, 90% {
transform: translateX(4%);
}
}
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.
Because of loc?
Your thumbnail has a typo: "JavaScipt" instead of "JavaScript"
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
If we write what you have said, it would be relative to form itself not it's input
^
Explanation: You want to make sure the :invalid input is :not(:focus) instead of the element that :has() the invalid input.
I often ask myself where the Javascipt is. I always end up using Javascript instead 😉
"That's the easy part"
Not really CSS only, this is CSS + HTML5.
What CSS libraries and frameworks are you using?
None 😂. I have my own system using Sass, that is sort of like a framework I guess.
Should've removed pointer events for the disabled submit button
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 :)
, during the second wave..
From what I can tell _:has_ has very low browser support - as of the end of June.
As of this week, Chrome and Safari both support it I believe, Firefox is coming soon.
a good artist copy a great artist steals
Yeah, it's cool, but it's never using at commercial :D
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 :)
I always tell people: There's no shame in copy and paste
Do you know about kaboom js
I never had, but just looked now! Looks really cool, but I don't do much game stuff.
@@KevinPowell i wanted a complete tutorial of kaboom js because i want to become a game developer
@@shiekhpalace2401 check code with harry
@@siddiqahmed3274 but he had not uploaded full tutorial i wanted full
@@shiekhpalace2401 kevin is not a js guy. You have to find it somewhere else
I just installed tNice tutorials program and just looking at it makes my brain hurt lol
i dont understand but then again I only have cs:go
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?
Shamelessly stealing this... 🤣🤣🤣🤣 The whole lot of it
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
Good Job
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
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.