what I like about Kyle's videos is that he does not edit the parts where he messes up. he acknowledges and looks for the error instead of recording it again
That line limit is very nice, but the css only expand button I'm not sure is WCAG compliant and might be confusing for screen readers users so It's probably best to give it an aria-hidden prop since the entire text will be readable because screen readers don't consider css styles.
I was wondering about this myself, but I think aria-hidden is unnecessary in this case since the collapsed state is purely visual decoration. The complete content should always be available to assistive devices, letting the user decide whether to skip on to the next. It's a bit different than an accordion where the entire content block is hidden.
This also has a very limited use case. Maybe on some sort of dashboard. You wouldn't want this as an index of articles because it creates a distraction click that might reduce the amount of clicks to the actual content. If your abstract needs to be expanded before someone clicks on the link to read your article, the solution is a better written excerpt, not a fancier design pattern and more things for the user to interact with and get lost or distracted by.
this is EXACTLY the task I've been working on and was having some trouble with because I had a lot of different scenarios and eventually one of them would just mess everything up, thank you!
Both you and Kevin and excellent, and so is the content of both of you! This is such an eye-opener. CSS is becoming such that with it it's possible to implement features which were previously only possible using JavaScript.
Wonderful solution! The only thing I would do another way is the text into the button - I would use instead CSS prop "content" because it keeps all text content in markup and lets a developer use variables here (from CMS or a translation). I suppose the label is better for accessibility as well.
I thought I was experiencing déjà vu, but I wasn't... I was thinking of the video just like this that Kevin Powell released about a week ago! Same thumbnail concept, too!
Yes yes yes: for the vendor-prefix-free clamping technique! No no no: for text in css content (not localizable, poorly adoptable by framework components). A great video as always!
but then you would always have to click to see the content no matter if it was 3 lines or 20, this solves that problem and when the text is short u see it all, when it's long u see a preview
@@alex4tm1 it's related to using the "hack" checkbox as a toggle element to expand / collapse. For me this is a bit counter-intuitive. The same principle of css ~:checked rule, can be applied on details[open] { ... }
I love how you were going nice and slow and explaining things clearly. And then the "has" property kicks in and you go full throttle and I don't understand what the hell just happened :D
I probably would have quit web dev by now if it were not for you, Kyle. You are the best web dev teacher out there, no paid course even compares to your videos. Thank you a million times!
@@broadshare , Though old browsers are not used for personal use, there are still corporate servers and applications that use legacy or may be some previous versions of browsers. On the contrary, as a developer, it's a good practice to always check for the edge case, even if no body uses old browsers, we still have to consider someone around the world might use it and be ready for it.
You can even write it without has selector, just select sibling, by ~ sign, you need to move the input before paragpraph, so you must hide input and pair it with label, and then it will works even on older browsers without has() support. I use this hack for every hsmburger menu, sliding articles and so on.
This is really nice but doesn't work with Firefox if you don't manually set a flag in your Browser. I'm sure it will work in a near future version, but right now it's something to keep in mind.
Thank you! This looks really cool. My only concern is accesibility, I think a screen reader would not be able to transmit the CSS text content and will not linit the content shown. Do you think that could be handled CSS only?
Very cool approach… I love it thanks kyle. The only shame is you can’t smoothly animate between the checked states can you? So the boxes smoothly animate to and from the expanded style.
my take is not really, it actually makes more sense than a button : It looks like a button but it is a check that toggle if the content is expanded or not. checkbox should be used for true and false situations and this actually is a true and false situation..
There is an older technique here using the siblings css selector on the checked checkbox. But the drawback is the order of the elements inside the HTML.
Thanks for the great video. I'm trying to do limited text lines with ellipsis in a table cell using css but can't get it to work. Any suggestions would be a great help.
What if I get 2 lines of text only and don't want to show the button. Then what approach we can take. I tried to remove the button if it is coming inside my max lines but not able to achieve it.
Currently, the biggest problem in the web technologies is the lack of extensibiity. Till now we don't have any way of extending internal CSS and JavaScript classes. If that would be the case, we could have got more control of things such as font rendering, height calculation, etc. We are having to (kind of) live with workarounds.
Thank you so much for you videos, I'm learning so much. Also, I am having a difficult time with the login tutorial. I can only get the login in route to work in deveplopment. I can't seem to get bcrypt compare to work in production with MongoDB Atlas or Compass. Please help. Thank you.
Great video. Helps a lot. I there any way to implement in wordpress classic editor because after include this is deleted form page and if I use code snippet include ::before
what I like about Kyle's videos is that he does not edit the parts where he messes up. he acknowledges and looks for the error instead of recording it again
Agreed, and I like that he messes up a lot. Makes me feel better about my own mistakes.
you're 100% correct.. his mistakes and corrections actually help me understand things even more.
and he rubs his nose immediately when he messes up.
I am glad you and plenty others like it, but for me, especially in long learning sessions, can be distracting and even irritating at points.
@@shreekharr3940 It's free, whatcha gonna do?
That line limit is very nice, but the css only expand button I'm not sure is WCAG compliant and might be confusing for screen readers users so It's probably best to give it an aria-hidden prop since the entire text will be readable because screen readers don't consider css styles.
I was wondering about this myself, but I think aria-hidden is unnecessary in this case since the collapsed state is purely visual decoration. The complete content should always be available to assistive devices, letting the user decide whether to skip on to the next. It's a bit different than an accordion where the entire content block is hidden.
@@ontheruntonowhere but the input is a focusable element so it might confuse the user because checking the input won’t do / announce anything
@@EvertJunior Yes, great point. I yield!
This also has a very limited use case. Maybe on some sort of dashboard. You wouldn't want this as an index of articles because it creates a distraction click that might reduce the amount of clicks to the actual content. If your abstract needs to be expanded before someone clicks on the link to read your article, the solution is a better written excerpt, not a fancier design pattern and more things for the user to interact with and get lost or distracted by.
I literally searched this up about two weeks ago because I needed it for a project. Thank you for this vid!
this is EXACTLY the task I've been working on and was having some trouble with because I had a lot of different scenarios and eventually one of them would just mess everything up, thank you!
Both you and Kevin and excellent, and so is the content of both of you! This is such an eye-opener. CSS is becoming such that with it it's possible to implement features which were previously only possible using JavaScript.
Best/most useful mini CSS tutorial yet. Thank you so much for your great content.
he does not edit the parts where he messes up. he acknowledges and looks for the error and he is so handsome
Your videos are a rabbit hole of information that I can't stop watching.
Wonderful solution! The only thing I would do another way is the text into the button - I would use instead CSS prop "content" because it keeps all text content in markup and lets a developer use variables here (from CMS or a translation). I suppose the label is better for accessibility as well.
You can add "text-overflow: ellipsis;" to your styles to add the 3 dots for the overflow text if you want to.
That's not gonna work.
You misunderstood the problem
This limits to only 1 line.
@@boring91 it will if use it with "-webkit-box-oriented: vertical;"
can we animate when the box expands? if yes how do we do it?
Thanks!
You're very welcome!
Kyle, you simply nailed it as you do always. So much thank you.
I thought I was experiencing déjà vu, but I wasn't... I was thinking of the video just like this that Kevin Powell released about a week ago! Same thumbnail concept, too!
You have no idea how much I needed this, thanks so much man.
Thank you. The kings of css, we want a css framework from Kyle and Kevin.
Using input checkbox as button is really a cool approach that I didnt know. I always hided the checkbox and used a label inside a button ❤😊
Using a checkbox is bad practice because it is not accessibility friendly.
@@nomad100hd yeah. You‘Re right. Besides accessibility I tried the code on my ipad and didn‘t get the same result.
Yes yes yes: for the vendor-prefix-free clamping technique!
No no no: for text in css content (not localizable, poorly adoptable by framework components).
A great video as always!
Use together with content: attr(data-label-expand); and content: attr(data-label-collapse); if you want to keep it localizable and outside your CSS.
Brilliant! Thanks Kyle ... and Kevin.
What a dynamic creativity with just CSS 🤯
Whatever! I still watch your videos. Love you bro ❣️
Kyle this is d best video on this topic 💜💜
Btw you can add lorem as a language to your code spell extension, so it stops detecting it as errors
This is exactly what I was looking for
I think a example using and would have been interesting to see. In this case you can solve the expanding animation without the need of a checkbox.
but then you would always have to click to see the content no matter if it was 3 lines or 20, this solves that problem and when the text is short u see it all, when it's long u see a preview
@@alex4tm1 it's related to using the "hack" checkbox as a toggle element to expand / collapse. For me this is a bit counter-intuitive. The same principle of css ~:checked rule, can be applied on details[open] { ... }
Damn man the ridiculously complex series of js loops I created to do this with pictures and then seeing the simplicity of pure css is insane.
Using a checkbox is bad practice because it is not accessibility friendly. It is better to use javascript.
Kyle is so good with this. Thnx!
Hello, I just create my channel, can you support?😊
I love how you were going nice and slow and explaining things clearly. And then the "has" property kicks in and you go full throttle and I don't understand what the hell just happened :D
I probably would have quit web dev by now if it were not for you, Kyle. You are the best web dev teacher out there, no paid course even compares to your videos. Thank you a million times!
oh I so needed this in one of my recent projects.. thank you, I will use it :))))))))))
You're a genius!
Thanks for the tutorial.
Wow nice tips! Thanks!
Damn after years of CSS I still can learn new things from you or Kevin :D
Wow! That's really some advanced level CSS 😘😘
this is so cool and useful !
Great tips, I think instead of the + you can use ~ and will select only the siblings, witch in your code will be only 1 paragraph sibling.
Plus, it will also work on old browsers.
@@saroj_kumar I get maaaad every time someone mentions those old browsers😥 where are they, who is even using them? win officially killed IE
@@broadshare , Though old browsers are not used for personal use, there are still corporate servers and applications that use legacy or may be some previous versions of browsers. On the contrary, as a developer, it's a good practice to always check for the edge case, even if no body uses old browsers, we still have to consider someone around the world might use it and be ready for it.
You can even write it without has selector, just select sibling, by ~ sign, you need to move the input before paragpraph, so you must hide input and pair it with label, and then it will works even on older browsers without has() support. I use this hack for every hsmburger menu, sliding articles and so on.
This is awesome, make me want to this, add transition animation, it'll be smooth and look modern.
Great video as always. Keep going.
Well explained and very useful. Thank you
Make a video on an input box in which height auto increases and max-height 200px scrollbar comes
This is really nice but doesn't work with Firefox if you don't manually set a flag in your Browser. I'm sure it will work in a near future version, but right now it's something to keep in mind.
Just what I needed
This was good one , got to learn a lot
I'd love to see a full tutorial!
Thank you. Is there a way to show the button only if the text is overflowing?
I was just about to search for how to do that!
Great content bro, very useful!
Really cool!
Thank you Kail.
✌️👏🤝👍
For the second technique, how do I get text-overflow: ellipsis to work?
Excellent little trick. Thanks :)
You are my life saver! Thank you!
Thank you! This looks really cool.
My only concern is accesibility, I think a screen reader would not be able to transmit the CSS text content and will not linit the content shown. Do you think that could be handled CSS only?
Love this. Thanks for sharing
thankyou for teaching. amazing content
Great content. Congrats on your success.
Great job! Thanks
Very cool approach… I love it thanks kyle. The only shame is you can’t smoothly animate between the checked states can you? So the boxes smoothly animate to and from the expanded style.
Thank you for the tips as always!
Great video. Just curious when the next CSS battle... 😁
Can you provide tips on how to make the transition in 'p' height more smoother?
You are a wizard ❤
Any accessibility ramifications since we are using a checkbox in the second example?
Why, the use case is actually to switch between two states. A button is actually meant to trigger an action, not switch between two states.
my take is not really, it actually makes more sense than a button : It looks like a button but it is a check that toggle if the content is expanded or not. checkbox should be used for true and false situations and this actually is a true and false situation..
Great tips!
tks u verry much about your knowledge
This was so amazing
:has selector is a game changer
Holly shoot this is life changing level thanks!
Hey Kyle, how did you edit the cursor when you placed the last cursor in multiple cursors at wrong place. It was around 1:35 mark
Great content! Thanks a lot 🙏
nice video! it would be cool to hide the button if it is not required when the text is shorter too.. ;-)
Great tip
That last minute was wild! Headed to that :has() video now!
There is an older technique here using the siblings css selector on the checked checkbox. But the drawback is the order of the elements inside the HTML.
It is also not accessibility friendly.
can you teach me how to add transition to this wonderful thing?
great work
cool tutorial, tnx
Thanks for the great video. I'm trying to do limited text lines with ellipsis in a table cell using css but can't get it to work. Any suggestions would be a great help.
Can you show us how to make a random image gallery fetching images from a folder?
Ever thought about teaching basics of XML ??
Please make a detailed explanation video on Redux
What if I get 2 lines of text only and don't want to show the button. Then what approach we can take. I tried to remove the button if it is coming inside my max lines but not able to achieve it.
Currently, the biggest problem in the web technologies is the lack of extensibiity. Till now we don't have any way of extending internal CSS and JavaScript classes. If that would be the case, we could have got more control of things such as font rendering, height calculation, etc. We are having to (kind of) live with workarounds.
Thank you so much for you videos, I'm learning so much. Also, I am having a difficult time with the login tutorial. I can only get the login in route to work in deveplopment. I can't seem to get bcrypt compare to work in production with MongoDB Atlas or Compass. Please help. Thank you.
I'll accept knowledge from the chat as well. I reached out with comments on that video, but it's like 2 years old now. Not too active.
Great video. Helps a lot. I there any way to implement in wordpress classic editor because after include this is deleted form page and if I use code snippet include ::before
Amazing!
Can you code Doom in CSS?
Awesome 👍
Just 😲 wow!
great video, learn a ton, but :has is not supported in firefox...
Wow , your vidio so good bro , yeah i like to learn your vidio and practice 😂
That was magic ... 😁
Thanks
😃
checkbox vs button (css vs js)
Really cool
this is awesome
Hello .. can you please teach how to use nodemailer to send a welcome mail automatically after a user registers
I remember amount of time I spend on this like 5 year ago for one client newsletter thingy that want this on web and also inside outlook 😂
is has supported yet in firefox? also doesn't that input cause accessibility issues? Nice concepts anyways.
hi and great thanks. Is it possible to somehow get the expansion animate a bit slower? smooth scroll like.
how can I make the fade effect stick to the bottom if my container's overflow was auto not hidden?
Plz make videos on Google auth with mern and Rest api with nodejs and sql