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.)
**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.
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.
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!
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' }
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!
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 :)
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!
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".
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
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)
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?
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.
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?
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
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.
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.
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.
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
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.
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
... 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:
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.
