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

@ontheruntonowhere

Жыл бұрын

Agreed, and I like that he messes up a lot. Makes me feel better about my own mistakes.

@BGdev305

Жыл бұрын

you're 100% correct.. his mistakes and corrections actually help me understand things even more.

@MrOmaromran

Жыл бұрын

and he rubs his nose immediately when he messes up.

@shreekharr3940

Жыл бұрын

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.

@ontheruntonowhere

Жыл бұрын

@@shreekharr3940 It's free, whatcha gonna do?

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!

Kyle, you simply nailed it as you do always. So much thank you.

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!

Brilliant! Thanks Kyle ... and Kevin.

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.

@ontheruntonowhere

Жыл бұрын

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.

@EvertJunior

Жыл бұрын

@@ontheruntonowhere but the input is a focusable element so it might confuse the user because checking the input won’t do / announce anything

@ontheruntonowhere

Жыл бұрын

@@EvertJunior Yes, great point. I yield!

@PhilLesh69

Ай бұрын

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.

Best/most useful mini CSS tutorial yet. Thank you so much for your great content.

You have no idea how much I needed this, thanks so much man.

Thank you for the tips as always!

Great job! Thanks

Well explained and very useful. Thank you

Love this. Thanks for sharing

Your videos are a rabbit hole of information that I can't stop watching.

You can add "text-overflow: ellipsis;" to your styles to add the 3 dots for the overflow text if you want to.

@boring91

Жыл бұрын

That's not gonna work.

@opjoter

Жыл бұрын

You misunderstood the problem

@HorsiMusic

Жыл бұрын

This limits to only 1 line.

@atchaukhac7731

Жыл бұрын

@@boring91 it will if use it with "-webkit-box-oriented: vertical;"

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!

Wow nice tips! Thanks!

Great content! Thanks a lot 🙏

this is so cool and useful !

Great content bro, very useful!

Great video as always. Keep going.

You are my life saver! Thank you!

thankyou for teaching. amazing content

tks u verry much about your knowledge

Great tips!

Kyle this is d best video on this topic 💜💜

This was good one , got to learn a lot

oh I so needed this in one of my recent projects.. thank you, I will use it :))))))))))

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.

Excellent little trick. Thanks :)

You're a genius! Thanks for the tutorial.

Great tip

Great content. Congrats on your success.

This was so amazing

Very Cool idea for my project

Just what I needed

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!

@GabrielSoldani

10 ай бұрын

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.

Whatever! I still watch your videos. Love you bro ❣️

great work

What a dynamic creativity with just CSS 🤯

cool tutorial, tnx

he does not edit the parts where he messes up. he acknowledges and looks for the error and he is so handsome

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 ❤😊

@nomad100hd

Жыл бұрын

Using a checkbox is bad practice because it is not accessibility friendly.

@Tony.Nguyen137

Жыл бұрын

@@nomad100hd yeah. You‘Re right. Besides accessibility I tried the code on my ipad and didn‘t get the same result.

Thanks!

@WebDevSimplified

Жыл бұрын

You're very welcome!

Kyle is so good with this. Thnx!

@codeWithMete

Жыл бұрын

Hello, I just create my channel, can you support?😊

Damn after years of CSS I still can learn new things from you or Kevin :D

this is awesome

Wow! That's really some advanced level CSS 😘😘

I'd love to see a full tutorial!

Awesome 👍

You are a wizard ❤

I was just about to search for how to do that!

Btw you can add lorem as a language to your code spell extension, so it stops detecting it as errors

This is awesome, make me want to this, add transition animation, it'll be smooth and look modern.

great!

Really cool

:has() does not work on firefox, unless you unlock it via configuration. Understandably this means production code cannot use :has() selector :/

@theodorealenas3171

Жыл бұрын

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.

hi and great thanks. Is it possible to somehow get the expansion animate a bit slower? smooth scroll like.

Awesome.

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?

Holly shoot this is life changing level thanks!

Just 😲 wow!

Thanks

@isfaharuddinnishan

Жыл бұрын

😃

Superbb

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.

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!

what is the 1em in the calc is that 16 px ?

Thank you. Is there a way to show the button only if the text is overflowing?

Awesome

Great video. Just curious when the next CSS battle... 😁

how can I make the fade effect stick to the bottom if my container's overflow was auto not hidden?

Make a video on an input box in which height auto increases and max-height 200px scrollbar comes

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

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

Wow , your vidio so good bro , yeah i like to learn your vidio and practice 😂

Can you provide tips on how to make the transition in 'p' height more smoother?

Cool sir

can you teach me how to add transition to this wonderful thing?

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

That was magic ... 😁

Can you show us how to make a random image gallery fetching images from a folder?

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

nice

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.

@nomad100hd

Жыл бұрын

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.

@alex4tm1

Жыл бұрын

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

@haidubogdan8712

Жыл бұрын

@@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] { ... }

Hello .. can you please teach how to use nodemailer to send a welcome mail automatically after a user registers

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.

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.

:has selector is a game changer

its cool

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.

@nomad100hd

Жыл бұрын

It is also not accessibility friendly.

why do you use -- at the beginning of line-height?

Please make a detailed explanation video on Redux

That last minute was wild! Headed to that :has() video now!

Plz make videos on Google auth with mern and Rest api with nodejs and sql

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.

@offgridvince

Жыл бұрын

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.

can we add animation to it?