The last time I really worked with CSS was more than 10 years ago, it's really amazing to see that css can easily replace almost 90% of javascript ui code
I'd avoid using positioning to place the elements where possible in favor of grid placement instead. Positioning introduces stacking contexts where elements might appear on top of each other in unexpected ways. Additionally, I'd use font relative units for icons so they scale with the text it is associated with. This would mean using `em` instead of `rem` for the size.
I get the font one, but I never had issues with positioning(yeah it can be tricky sometimes), can you just explain how something like in the video can be done with grid placement
I've used the placeholder-shown quite a long time now for my inputs. I use an empty space as the placeholder, and then a the label is being positioned inside the input as the placeholder. This allows me to keep the label visible when there's text in the input, but usually minimised to a much smaller font-size and moved to the top:0px of the input. That way you always have the name of the input shown, but when used, it's being moved off to the side with a transition, and you keep the accessibility automatically as you're using the label. Besides I think it looks great (in most cases anyway...)
Have been using this kind of pattern a lot with inputs in the last year. I mostly use the input-wrapper , the input inside , then pseudo element with a bg image of the icon, or the input + button > icon . And use grid or flex on the wrapper. I love the placeholder shown pseudo class , then I use the :has(input:focus) to put the outline around the wrapper (not sure why he turned off the outline just to use a box shadow though; the outline doesn’t take up space either). If it’s an icon not a button , then I use :focus-within. Then I can animate the width of input or flex-grow on the wrapper. :has(input:focus) outline then highlights the wrapper when the input is focused but still highlight the focus ring on the button when it’s focused. Also some fun timing functions to transition that width! I love css, and all the selectors and pseudo classes we have. There are so many ways to approach the same result !! Love a css video!
Absolutely agree, the box-shadow as a replacement for an outline was unnecessary as outline behaves like it already. Only border takes width and causes ugly layout shifts.
well, to me the interesting part of this is actually the ':placeholder-shown' pseudo-class, I personally had no clue that was a thing and would 100% have used some conditional rendering in JS to display each icon. ofc if you already knew about that then I don't see why you'd keep watching after seeing what was gonna be shown in the first place.
It’s fairly new and not fully supported but a good progressive enhancement ! Edit: Just got to this part of the video , I’ve always seen it as “allow-discrete”. Would have to pop onto the dev tools to see if “discrete” is valid but if so that’s great to know
Really cool examples of css features that were completely new to me! Now while you can do a lot of cool things with just complex CSS-selectors, the readability is just awful when you put a bunch of them together like that.. so sticking to js and toggling classes with proper names is still the way to go IMO. But awesome showcase of what can be done with just CSS and HTML alone!
this is only for a product that has made it. so many teams want to build this shit before the product is even successful, ultimately dooming the project contributing to the large % of software products that fail.
OMG Firefox finally supports :has! Last year I wrote bunch of CSS to handle all sorts of things in a form using :has many times, only to get a feedback that it does not work on Firefox... I forgot to check before going that route. To fix it, I had to write JS that I was not really looking forward as I always prefer CSS based solutions. Now I see they finally support it since December last year. Interesting how you added support for IE but IE does not support :has which means that the main animation won't even work
What is the keyboard shortcut to hop to the end of the “word” you’re on, not the whole line ? Eg at 16:14 when he is adding the :not() and jumps the cursor to the end of ”placeholder”, then one more jump to the end of “shown”?
Whoops. I forgot to include that in this version of the code. I have it in the final version of the project csssimplified.netlify.app/22-discord-clone/after If you want you can take a look at the code here using dev tools to see what needs to be added for padding.
Whoops. I forgot to include that in this version of the code. I have it in the final version of the project csssimplified.netlify.app/22-discord-clone/after If you want you can take a look at the code here using dev tools to see what needs to be added for padding.
13:10 i wouldn't use "has" without necessity. It's a relative new selector and there might be users who haven't updated their browsers yet. You may use sibling selectors here: input:not(:placeholder-shown) + button>.search-icon
Depends on the aim with your application, I think. I already use nested CSS, which is newer than :has and will break everything if not supported anyways, but I do agree that in some cases, using the older and tested techniques can be better, for backwards compatibility and for readability too. It can have changed since last time I researched some years ago, but TV apps could be where you would want compatibility rather than flexibility. I don't know how often SMART TVs update their browser engine?
I mean, if your user base is _everyone_ you probably have to look at backwards compatibility. You can use something like netrenderer which is an onlince service were you can quickly test your site in IE5.5-11. If it works in IE11, it probably also works on most other older browsers. As I remember, IE11 was quite standard compliant.
instead of width/height/top/bottom/left/right i would prefer block/inline/start/end etc. so you can change directions easily. for example inline-size instead of width or inset-inline-start instead of left margin-block-end instead of margin-bottom. and other similar stuff.
it depends on personal preference. For instance I would use width instead of inline-size. But some other person would use inline-size instead of width. So it is personal choice. No one cares about what you use as long as you get the desired output.
Nice vid. But x button would not really work, and using :has and :not selectors is not a great way to write css. Sure, its modern, but support of these selectors are lacking, so it would be better if you can teach both using and not using these selectors
:has has been supported in all modern browsers since 2023 and :not has been supported since 2020. There is no reason not to use these features. Grid and Flexbox for example have less than 1% more support that :not and all these properties (including :has) have greater than 94% support.
@@WebDevSimplified hmm, interesting. perhaps i'm getting old and not keeping up with trends :) just some time ago I tried using :has and it was already not working somewhere even I was using. but as others mentioned, these features could be avoided in favor of all and more well-supported ones. they're nice to teach, but with a cautionary tale of having new nice DX abstractions. thank you for your work, Kyle
CSS Simplified: courses.webdevsimplified.com/css-simplified/?G052uyQw&coupon=CSS
Project lead: iT's jUsT aN iNpuT, wHy wOuLd yOu nEeD mOrE tHaN a MiNuTe fOr tHe TaSk?
Developers:
Those fancy CSS elements are like a degree, higher ups wonder why it takes so long but complain when it's not there 🤣
The last time I really worked with CSS was more than 10 years ago, it's really amazing to see that css can easily replace almost 90% of javascript ui code
Love this. Way better then "Stop this" or "stop that" video's :)
Not a fan of the stop this videos, but the stop that videos are 🔥
Agreed, that is super stressful!
I'd avoid using positioning to place the elements where possible in favor of grid placement instead. Positioning introduces stacking contexts where elements might appear on top of each other in unexpected ways. Additionally, I'd use font relative units for icons so they scale with the text it is associated with. This would mean using `em` instead of `rem` for the size.
I get the font one, but I never had issues with positioning(yeah it can be tricky sometimes), can you just explain how something like in the video can be done with grid placement
@@theo-k4i8mby using grid template areas. Recently wes bos created an short video on this.
congrats, you kept both pace and clarity, this is impressive, ill really think of following your course.
I've used the placeholder-shown quite a long time now for my inputs. I use an empty space as the placeholder, and then a the label is being positioned inside the input as the placeholder. This allows me to keep the label visible when there's text in the input, but usually minimised to a much smaller font-size and moved to the top:0px of the input. That way you always have the name of the input shown, but when used, it's being moved off to the side with a transition, and you keep the accessibility automatically as you're using the label. Besides I think it looks great (in most cases anyway...)
Have been using this kind of pattern a lot with inputs in the last year. I mostly use the input-wrapper , the input inside , then pseudo element with a bg image of the icon, or the input + button > icon . And use grid or flex on the wrapper.
I love the placeholder shown pseudo class , then I use the :has(input:focus) to put the outline around the wrapper (not sure why he turned off the outline just to use a box shadow though; the outline doesn’t take up space either). If it’s an icon not a button , then I use :focus-within.
Then I can animate the width of input or flex-grow on the wrapper. :has(input:focus) outline then highlights the wrapper when the input is focused but still highlight the focus ring on the button when it’s focused. Also some fun timing functions to transition that width!
I love css, and all the selectors and pseudo classes we have. There are so many ways to approach the same result !! Love a css video!
Same I use flex-grow as well, much better.
Absolutely agree, the box-shadow as a replacement for an outline was unnecessary as outline behaves like it already. Only border takes width and causes ugly layout shifts.
wow, finaly someone discovered that you can target the focus state of an input 👏👏👏
for real, title is actually kinda baity
:has(:focus-within) 😎
well, to me the interesting part of this is actually the ':placeholder-shown' pseudo-class, I personally had no clue that was a thing and would 100% have used some conditional rendering in JS to display each icon.
ofc if you already knew about that then I don't see why you'd keep watching after seeing what was gonna be shown in the first place.
Right as I'm watching this, my discord search bar got split up into two rows and has no background. Well done Discord!
this gets complicated really fast. I can just imagine how it looks like for someone who's not tracking css changes for a while
Awesome! Thank you Kyle!
that descrete property is something i have never read about in last 3 years of my learning damn 😮
It’s fairly new and not fully supported but a good progressive enhancement !
Edit: Just got to this part of the video , I’ve always seen it as “allow-discrete”. Would have to pop onto the dev tools to see if “discrete” is valid but if so that’s great to know
Wow, this is really cool. Thanks 👍
I like the video and modern CSS, as always Kyle is spot on! 👌🏻 Thank you!
Thanks for a nice video!
Great video, thank you!
Though It still would be nice to see how the x-button could be wired to clear the input without JavaScript
This is impossible to do without JS.
Really cool examples of css features that were completely new to me! Now while you can do a lot of cool things with just complex CSS-selectors, the readability is just awful when you put a bunch of them together like that.. so sticking to js and toggling classes with proper names is still the way to go IMO. But awesome showcase of what can be done with just CSS and HTML alone!
Great video, Thanks
Always amazing
this is only for a product that has made it. so many teams want to build this shit before the product is even successful, ultimately dooming the project contributing to the large % of software products that fail.
Exactly, they get lost in the sauce (aesthetics)
bro who wants to use a php 2001 looking site
Sick, today I learned
OMG Firefox finally supports :has!
Last year I wrote bunch of CSS to handle all sorts of things in a form using :has many times, only to get a feedback that it does not work on Firefox... I forgot to check before going that route.
To fix it, I had to write JS that I was not really looking forward as I always prefer CSS based solutions.
Now I see they finally support it since December last year.
Interesting how you added support for IE but IE does not support :has which means that the main animation won't even work
12:08 But is it hidden from the accessibility tree as well?
really cool
the full version!!
What is the keyboard shortcut to hop to the end of the “word” you’re on, not the whole line ?
Eg at 16:14 when he is adding the :not() and jumps the cursor to the end of ”placeholder”, then one more jump to the end of “shown”?
Ctrl+Left/Right Arrow to jump over a word. Holding shift will jump the word & select it.
@7orivorian141 you're a rock star, thank you.
Outline should be used instead of box shadow. Outline does not take up space.
😮 interesting
I just bought your course
Thank you for the support!
Your version is actually better than Discord's, theirs is all javascript
Very nice, I love this. If the input text is long enough, won't it be displayed behind the icon?
Yes, it will. When icon is visible a larger padding on the right will fix it I guess..
Whoops. I forgot to include that in this version of the code. I have it in the final version of the project csssimplified.netlify.app/22-discord-clone/after
If you want you can take a look at the code here using dev tools to see what needs to be added for padding.
@@WebDevSimplified Great! Thank you
CSS is really crazy
The x button does not working any more, does it? unless we write js to handle this?
That is correct. You could either add JS to make it work or you could wrap the input in a and use a for the X button.
The other issue is that in your current setup the input may overlap those buttons, because you forgot to adjust it's right padding.
Whoops. I forgot to include that in this version of the code. I have it in the final version of the project csssimplified.netlify.app/22-discord-clone/after
If you want you can take a look at the code here using dev tools to see what needs to be added for padding.
13:10 i wouldn't use "has" without necessity. It's a relative new selector and there might be users who haven't updated their browsers yet.
You may use sibling selectors here: input:not(:placeholder-shown) + button>.search-icon
:has is not as new as it used to be :)
@@stepans2167 Just one year has passed after it was implemented in firefox.
Don't care about users who haven't updated their browsers in over a year.
Depends on the aim with your application, I think. I already use nested CSS, which is newer than :has and will break everything if not supported anyways, but I do agree that in some cases, using the older and tested techniques can be better, for backwards compatibility and for readability too. It can have changed since last time I researched some years ago, but TV apps could be where you would want compatibility rather than flexibility. I don't know how often SMART TVs update their browser engine?
I mean, if your user base is _everyone_ you probably have to look at backwards compatibility. You can use something like netrenderer which is an onlince service were you can quickly test your site in IE5.5-11. If it works in IE11, it probably also works on most other older browsers. As I remember, IE11 was quite standard compliant.
when you paid by the hour and not by the job:
How would you avoid targeting all buttons? [10:15]
wait.. I don't do webdev and even I knew that
title baited me ngl
Looks like googles material focus-ring … or tailwind with placeholder shown. Cool nonetheless the less
Yayy 🤣
What do you use for the local web server? I see 127.0.0.1:5501 address.
That's VSCode extension live server. You can see it at bottom-right of VSCode, before "Spell"
Proper but is the blue outline a personal choice? My discord has none.
If you use the tab key to interact with elements they have a blue outline in Discord.
@ you are right i tried it now
instead of width/height/top/bottom/left/right
i would prefer block/inline/start/end etc. so you can change directions easily.
for example inline-size instead of width
or inset-inline-start instead of left
margin-block-end instead of margin-bottom. and other similar stuff.
I disagree because those properties are much harder to read/understand
it depends on personal preference. For instance I would use width instead of inline-size. But some other person would use inline-size instead of width. So it is personal choice. No one cares about what you use as long as you get the desired output.
would you make your search box vertical for this to matter?
how often do you change directions?
Can you teach us how to build real time database in css?
With some machine models on top of it
🎉🎉❤
Highly doubt Discord builds their client in CSS and HTML
Who uses plain css
Talwind is used much
Misleading video title. Used HTML as well
Nice vid. But x button would not really work, and using :has and :not selectors is not a great way to write css. Sure, its modern, but support of these selectors are lacking, so it would be better if you can teach both using and not using these selectors
:has has been supported in all modern browsers since 2023 and :not has been supported since 2020. There is no reason not to use these features. Grid and Flexbox for example have less than 1% more support that :not and all these properties (including :has) have greater than 94% support.
@@WebDevSimplified hmm, interesting. perhaps i'm getting old and not keeping up with trends :) just some time ago I tried using :has and it was already not working somewhere even I was using. but as others mentioned, these features could be avoided in favor of all and more well-supported ones. they're nice to teach, but with a cautionary tale of having new nice DX abstractions. thank you for your work, Kyle
Why do you shake your head so much when talking?
Because he is from India
What answer are you expecting from him?
Such a weird question... Sometimes it's okay to not act on every thought that comes into mind
Why your avatar's triangles are crossed like that, tho?
autism