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!
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!
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.
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
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.
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! 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?
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.
@@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.
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!
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.
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 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
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.
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.
![Gucci Mane & Sexyy Red - You Don't Love Me [Official Music Video]](http://i.ytimg.com/vi/j7IBqyFKT4c/mqdefault.jpg)
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.
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?
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!
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!
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.
I literally searched this up about two weeks ago because I needed it for a project. Thank you for this vid!
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.
Best/most useful mini CSS tutorial yet. Thank you so much for your great content.
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.
Kyle, you simply nailed it as you do always. So much thank you.
Your videos are a rabbit hole of information that I can't stop watching.
Brilliant! Thanks Kyle ... and Kevin.
Btw you can add lorem as a language to your code spell extension, so it stops detecting it as errors
he does not edit the parts where he messes up. he acknowledges and looks for the error and he is so handsome
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.
What a dynamic creativity with just CSS 🤯
Thank you. The kings of css, we want a css framework from Kyle and Kevin.
You have no idea how much I needed this, thanks so much man.
Whatever! I still watch your videos. Love you bro ❣️
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.
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] { ... }
Kyle this is d best video on this topic 💜💜
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
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.
Really cool!
Thank you Kail.
✌️👏🤝👍
This is awesome, make me want to this, add transition animation, it'll be smooth and look modern.
Make a video on an input box in which height auto increases and max-height 200px scrollbar comes
Kyle is so good with this. Thnx!
Hello, I just create my channel, can you support?😊
Can you provide tips on how to make the transition in 'p' height more smoother?
Wow nice tips! Thanks!
Wow! That's really some advanced level CSS 😘😘
oh I so needed this in one of my recent projects.. thank you, I will use it :))))))))))
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.
this is so cool and useful !
I'd love to see a full tutorial!
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?
Well explained and very useful. Thank you
That last minute was wild! Headed to that :has() video now!
I was just about to search for how to do that!
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.
Great video as always. Keep going.
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.
Love this. Thanks for sharing
Great job! Thanks
You're a genius!
Thanks for the tutorial.
Great content bro, very useful!
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!
Damn after years of CSS I still can learn new things from you or Kevin :D
Excellent little trick. Thanks :)
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.
thankyou for teaching. amazing content
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 content. Congrats on your success.
This was good one , got to learn a lot
For the second technique, how do I get text-overflow: ellipsis to work?
tks u verry much about your knowledge
Thank you. Is there a way to show the button only if the text is overflowing?
Thank you for the tips as always!
Great video. Just curious when the next CSS battle... 😁
Great tips!
You are my life saver! Thank you!
:has selector is a game changer
Just what I needed
Please make a detailed explanation video on Redux
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
Great content! Thanks a lot 🙏
Ever thought about teaching basics of XML ??
cool tutorial, tnx
nice video! it would be cool to hide the button if it is not required when the text is shorter too.. ;-)
You are a wizard ❤
Great tip
Holly shoot this is life changing level thanks!
great work
This was so amazing
can you teach me how to add transition to this wonderful thing?
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.
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 😂
great video, learn a ton, but :has is not supported in firefox...
Amazing!
Can you code Doom in CSS?
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.
is has supported yet in firefox? also doesn't that input cause accessibility issues? Nice concepts anyways.
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
hi and great thanks. Is it possible to somehow get the expansion animate a bit slower? smooth scroll like.
Hey Kyle, can you move into flutter? or make another channel app dev simplified.
checkbox vs button (css vs js)
Thanks!
You're very welcome!
Can you show us how to make a random image gallery fetching images from a folder?
Plz make videos on Google auth with mern and Rest api with nodejs and sql
Awesome 👍
Wow , your vidio so good bro , yeah i like to learn your vidio and practice 😂
Really cool
Hello .. can you please teach how to use nodemailer to send a welcome mail automatically after a user registers
Superbb
why do you use -- at the beginning of line-height?
what is the 1em in the calc is that 16 px ?
how can I make the fade effect stick to the bottom if my container's overflow was auto not hidden?
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.
Just 😲 wow!
Nice, but not Firefox friendly with has() 🙂