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.
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
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] { ... }
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.
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.
@@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.
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.
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.
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
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.
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.
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.
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!
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?
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!
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!
Best/most useful mini CSS tutorial yet. Thank you so much for your great content.
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.
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.
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.
Thank you. The kings of css, we want a css framework from Kyle and Kevin.
Kyle, you simply nailed it as you do always. So much thank you.
Whatever! I still watch your videos. Love you bro ❣️
What a dynamic creativity with just CSS 🤯
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 have no idea how much I needed this, thanks so much man.
Brilliant! Thanks Kyle ... and Kevin.
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.
Kyle this is d best video on this topic 💜💜
Make a video on an input box in which height auto increases and max-height 200px scrollbar comes
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] { ... }
Btw you can add lorem as a language to your code spell extension, so it stops detecting it as errors
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.
Kyle is so good with this. Thnx!
Hello, I just create my channel, can you support?😊
Wow! That's really some advanced level 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.
This is awesome, make me want to this, add transition animation, it'll be smooth and look modern.
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
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.
oh I so needed this in one of my recent projects.. thank you, I will use it :))))))))))
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.
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!
You're a genius!
Thanks for the tutorial.
I'd love to see a full tutorial!
Wow nice tips! Thanks!
Really cool!
Thank you Kail.
✌️👏🤝👍
thankyou for teaching. amazing content
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 !
Holly shoot this is life changing level thanks!
Just what I needed
Can you provide tips on how to make the transition in 'p' height more smoother?
tks u verry much about your knowledge
You are my life saver! Thank you!
Great video. Just curious when the next CSS battle... 😁
This was good one , got to learn a lot
Well explained and very useful. Thank you
Excellent little trick. Thanks :)
You are a wizard ❤
Great job! Thanks
That last minute was wild! Headed to that :has() video now!
Love this. Thanks for sharing
Great video as always. Keep going.
:has selector is a game changer
Thank you for the tips as always!
Great content bro, very useful!
nice video! it would be cool to hide the button if it is not required when the text is shorter too.. ;-)
Great content. Congrats on your success.
For the second technique, how do I get text-overflow: ellipsis to work?
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!
Please make a detailed explanation video on Redux
cool tutorial, tnx
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 tip
Great content! Thanks a lot 🙏
This was so amazing
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.
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 😂
Ever thought about teaching basics of XML ??
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 work
can you teach me how to add transition to this wonderful thing?
great video, learn a ton, but :has is not supported in firefox...
Can you show us how to make a random image gallery fetching images from a folder?
Thanks!
You're very welcome!
Nice, but not Firefox friendly with has() 🙂
checkbox vs button (css vs js)
Amazing!
Can you code Doom in CSS?
Wow , your vidio so good bro , yeah i like to learn your vidio and practice 😂
Thanks
😃
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
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.
Great!, but if I have 2 paragraphs?, I should test it..
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
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.
Just 😲 wow!
Plz make videos on Google auth with mern and Rest api with nodejs and sql
Awesome 👍
Really cool
That was magic ... 😁
this is awesome
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.
: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.