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
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!
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.
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!
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!
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..
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.
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.
One thing I noticed: your original demo also had 3 dots and when you coded there are no longer 3 dots. These 3 dots + white gradient look way better, so can you update and let us know how to also add 3 dots, without use of line-clamp and be limited to display: -webkit-box ?
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.
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.
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.
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?
@@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.
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.
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 don't understand how adding the expand content with the before attribute puts the text inside the input. Wouldn't it put the text before the input element?
Inside, and before contained text. But there's no contained text. So a before element for a heading, which is meant to add a dash in front of the heading, is actually a child of the heading instead of a sibling. It looks the same but it means things are contained more logically. That's handy for abusing the before element for tricks, and setting overflow hidden, you'll stumble upon examples. It's fancy! Eventually.
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 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?
he does not edit the parts where he messes up. he acknowledges and looks for the error and he is so handsome
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!
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!
Thanks!
You're very welcome!
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?
Best/most useful mini CSS tutorial yet. Thank you so much for your great content.
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.
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.
Your videos are a rabbit hole of information that I can't stop watching.
Kyle, you simply nailed it as you do always. So much thank you.
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.
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.
Whatever! I still watch your videos. Love you bro ❣️
You have no idea how much I needed this, thanks so much man.
Thank you. Is there a way to show the button only if the text is overflowing?
What a dynamic creativity with just CSS 🤯
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 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
Kyle this is d best video on this topic 💜💜
This is exactly what I was looking for
For the second technique, how do I get text-overflow: ellipsis to work?
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!
Btw you can add lorem as a language to your code spell extension, so it stops detecting it as errors
Can you provide tips on how to make the transition in 'p' height more smoother?
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..
Make a video on an input box in which height auto increases and max-height 200px scrollbar comes
Wow nice tips! Thanks!
this is so cool and useful !
Kyle is so good with this. Thnx!
Hello, I just create my channel, can you support?😊
Really cool!
Thank you Kail.
✌️👏🤝👍
Wow! That's really some advanced level CSS 😘😘
Damn after years of CSS I still can learn new things from you or Kevin :D
can you teach me how to add transition to this wonderful thing?
oh I so needed this in one of my recent projects.. thank you, I will use it :))))))))))
I was just about to search for how to do that!
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.
Great job! Thanks
:has selector is a game changer
tks u verry much about your knowledge
You're a genius!
Thanks for the tutorial.
thankyou for teaching. amazing content
Love this. Thanks for sharing
Just what I needed
Great video as always. Keep going.
You are my life saver! Thank you!
Well explained and very useful. Thank you
This is awesome, make me want to this, add transition animation, it'll be smooth and look modern.
Excellent little trick. Thanks :)
You are a wizard ❤
This was good one , got to learn a lot
I'd love to see a full tutorial!
Great content bro, very useful!
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.
Thank you for the tips as always!
Hello .. can you please teach how to use nodemailer to send a welcome mail automatically after a user registers
One thing I noticed: your original demo also had 3 dots and when you coded there are no longer 3 dots. These 3 dots + white gradient look way better, so can you update and let us know how to also add 3 dots, without use of line-clamp and be limited to display: -webkit-box ?
Great tips!
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.
hi and great thanks. Is it possible to somehow get the expansion animate a bit slower? smooth scroll like.
That last minute was wild! Headed to that :has() video now!
cool tutorial, tnx
Holly shoot this is life changing level thanks!
what is the 1em in the calc is that 16 px ?
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. Congrats on your success.
how can I make the fade effect stick to the bottom if my container's overflow was auto not hidden?
why do you use -- at the beginning of line-height?
can we add animation to it?
Great video. Just curious when the next CSS battle... 😁
Great tip
This was so amazing
great video, learn a ton, but :has is not supported in firefox...
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 🙏
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 work
Please make a detailed explanation video on Redux
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 😂
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.
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?
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.
:has() does not work on firefox, unless you unlock it via configuration. Understandably this means production code cannot use :has() selector :/
Nor qutebrowser. And I'm meant to be able to use it, websites are text with fancy bullshits why wouldn't I be able to 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.
Can you show us how to make a random image gallery fetching images from a folder?
hi thank, but how to add ...read more to the right of a line..i see you put a button in new line
Amazing!
Can you code Doom in CSS?
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] { ... }
Ever thought about teaching basics of XML ??
I don't understand how adding the expand content with the before attribute puts the text inside the input. Wouldn't it put the text before the input element?
Inside, and before contained text. But there's no contained text.
So a before element for a heading, which is meant to add a dash in front of the heading, is actually a child of the heading instead of a sibling. It looks the same but it means things are contained more logically. That's handy for abusing the before element for tricks, and setting overflow hidden, you'll stumble upon examples. It's fancy! Eventually.
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 it possible to add that button at the end of the line? (Not in new line).
It's kind of task 😇
Just 😲 wow!
checkbox vs button (css vs js)
nice video! it would be cool to hide the button if it is not required when the text is shorter too.. ;-)
Wow , your vidio so good bro , yeah i like to learn your vidio and practice 😂