I always watch your videos at least twice. First one just to learn something new. And the second one when I'm creating new cool feature and just realize: "Wait a minute. I saw very similar cool feature on CZcams." And then I go to search for your two-months-ago video and recall everything in my head. Thank you twice!
I've been working with CSS for about 10 years and your channel shows me that there's still so much that I don't know/can learn about using CSS efficiently and creatively.
Css isolate is probably the best thing I learnt in 2022. It saves so much trouble. I maybe using a bit too much of it but it can't be helped, it is just so convenient in the world of component libraries.
I struggled with understand isolation on the MDN docs, and I found your video, and it greatly simplified it and showed how useful it actually is. Thank you so much Kevin!
Nice video! Yeah, isolation isolate is super handy when it is needed. Great tip that is probably not widely known. I've not used ::marker before, cool cool cool and the ch unit is refreshing. Thanks for the video!
While working on a component and fiddling with z-index I was deeply wondering if any such property like isolation: isolate existed because it seems like a no-brainer. To my knowledge it was not listed on MDN under the z-index section & tutorials. Thanks, very eye opening and it will help me finishing my component right away !
found marker, counter and accent-color most useful - in particular accent-color for checkbox and radio inputs -- i usually increase width and height for checkbox and radio inputs to make them easier to touch on mobile devices and regular screens are also better
i've been testing marker with details tag - i was able to change color, width, height on desktop browsers but on my iphone se 2020 in safari, chrome and firefox the changes were not applied
Love all of this. I learned a couple of things I never knew. Can't believe I didn't know some of it. One thing I wanted to point out is the as of right now, screen readers generally ignore CSS. There are only a couple of things that are honored like "display: none." This means using content via CSS to inject readable content into the page excludes screen reader users. So while the counter is a really cool trick, it means users that rely on a screen reader are excluded. For now I would suggest accomplishing this with JS instead so that the actual content is injected.
Fantastic video as always! Css is fun and love that there is always something new to learn. But I am puzzled with those vertical lines (list-title | fw-bold) in some classes 8:37min... What is their purpose?
Hi, Kevin! Can you also talk about new class grouping method in your html, like section-title | fs-700? Also, using command line to run sass easily. Did you install sass first, then run this command or it requires some kind of packages needs to downloaded?
Hello Kevin, I'm a new web developer currently learning CSS and your videos have been a great help for me these past two weeks. I tried creating a website of my own and having issues making a responsive nav bar. While searching for solutions, I keep seeing videos where developers use chekcbox with icons and z-index to create a menu nav bar for smaller screens. The problem with this is that it solves the situation but I don't understand the logic behind them as most videos are just created with music in the background. I was wondering if you have a video that explains the concept of using checkbox and z-index to create this or if you can have this idea in your upcoming videos. I really want to know the idea behind this solution rather than just copy and paste codes. Thanks Your fan from Nigeria
Great properties, specially ch. Very useful. By the way, I don't know if you have any video about how to create different sections in a home with diagonals to separate the content between each section. I had to do it the other day in my work, and it looks fine in the browser, but I think that I could do it better as far as CSS are concerned. Less z-index position and more isolate ;-), .... no negative margin-top, ..... etc, etc, and using the skewY property. If you don't have any video showing how to do that, it might be a good idea if you don't mind. Thanks for your videos. They are a great for web developers like me.
How position relative,influence the stack context?I've seen that in the first stage you make .inner-isolation position absolute without its parent cotainer beeing positionated relative,and for the last one Is margin-inline center instead of margin-inline auto.Thanks
With the use of counter, can you explore the accessibility concerns with this, does it get added to the accessibility tree as a numbered item? How different does it render in comparison to ol? Thank you.
Bro. Do you have any solution to custom dynamically -webkit-scrollbar-track's margin bottom base on the input textarea's height on css. I try it inline style with js but it does not support. 😭😭😭😭😭
Kevin, I am glad i subscribed to your channel, I am learning new things, One thing I always stuck with is dealing with 125% scaled devices on responsive modes, I am currently using media query with 97dpi & zoom:0.8, Does there's any better solution you can suggest, Thanks for you great tutorials
@@KevinPowell Thanks for your quick reply, I totally agree with you but in some cases, It is hard to make the client understand that at 125% scaled display devices design will slightly differ from 100% scaled devices. Thanks again bro, Keep the good work coming.
Hey kevin I've gone nuts with a css issue, how do you add a horizontal scroll bar to a table cell (content in a cell can be dynamic), so far I've got the scroll bar to appear but it don't scroll. Searched for hours but cannot find a solution Could you please give any leads?
No influence there. For position: absolute, it looks for it's nearest ancestor with a position other than position: static (the default)... so there you're still doing a position: relative most of the time.
Hey kevin quick question like you I love css and not much of programming languages like JS and react..Im wondering whats a good career angle you recommend UI designer or Front End Dev for people who mostly wants to do Css work.I would love to hear your insight and take on this
Depends on the type of work you want to do, but going deeper into design systems is probably a good bet. You need to learn to market the value of them a little, depending on the roles or companies your applying to, but getting into scalable solutions is something that has value. That said, focusing mostly on css can be hard. I think the landscape is starting to change, but still not enough focus on the importance of that side of things yet.
@@KevinPowell thanks for the answer I been hearing alot of senior devs talk about how front end is splitting between more of a css ui/ux dev and something like a middle dev with js on the front...I think the landscape is changing because css is a handful and enough to focus all my attention on but I'll learn more about design for now thanks again
I'm picky again but ::marker is a pseudo-element, not a property. That aside, the examples in the video are great to let people follow for what they can actually be useful.
.covidInfected{ position:absolute; inset:0; /*Cause they everywhere I swear*/ } .karen .mask{ display:none /*Cause I dont know and they cause everything else to break*/ }
Underrated by whom Kevin? That doesn’t make any sense. If the people doing the ratings are people we repect, they can’t possibly, by definition, be underrated. I think you mean “largely undiscovered, valuable CSS properties”
Anyone else here annoyed that he did not save the last thing or is it just me? I can't.. I can't have a white dot next to the file name man, come oooooon
I always watch your videos at least twice. First one just to learn something new. And the second one when I'm creating new cool feature and just realize: "Wait a minute. I saw very similar cool feature on CZcams." And then I go to search for your two-months-ago video and recall everything in my head. Thank you twice!
So true +1
exactly my problem XD I should write a list with descriptions and links to the vids.
Me too!
I've been working with CSS for about 10 years and your channel shows me that there's still so much that I don't know/can learn about using CSS efficiently and creatively.
Css isolate is probably the best thing I learnt in 2022. It saves so much trouble. I maybe using a bit too much of it but it can't be helped, it is just so convenient in the world of component libraries.
Well it has almost the same support as CSS Grid Layout. So I think there is not a problem with using isolate
I struggled with understand isolation on the MDN docs, and I found your video, and it greatly simplified it and showed how useful it actually is. Thank you so much Kevin!
Nice video! Yeah, isolation isolate is super handy when it is needed. Great tip that is probably not widely known.
I've not used ::marker before, cool cool cool and the ch unit is refreshing. Thanks for the video!
You are amazing kevin my personally favorite ::marker pseudo element, love you man
My CSS skills have sky-rocketed lately, much thanks to your vids.
Kevin, I love you so much! I can't say thank you enough, you have helped my css career🙌
While working on a component and fiddling with z-index I was deeply wondering if any such property like isolation: isolate existed because it seems like a no-brainer.
To my knowledge it was not listed on MDN under the z-index section & tutorials.
Thanks, very eye opening and it will help me finishing my component right away !
found marker, counter and accent-color most useful - in particular accent-color for checkbox and radio inputs -- i usually increase width and height for checkbox and radio inputs to make them easier to touch on mobile devices and regular screens are also better
i've been testing marker with details tag - i was able to change color, width, height on desktop browsers but on my iphone se 2020 in safari, chrome and firefox the changes were not applied
Omg, Kevin, this is pure gold, thank you so much! I love your videos and a way you presenting stuff
you're a goddamn legend, the isolate property is godsend
Your channel is one of my favorites to grab a 'tip of the day'. So much good information is in each video.
I'm a Senior Engineer with 10 years of experience, and I learned 2 new things today. Thank you!
Dayum Kevin, my corner of the internet is going to be FAB-U-LOUS now! I really appreciate EVERYTHING you're doing.
isolation isolate is just SO nice
Every of your videos gives something new! Thanks a lot!
Love all of this. I learned a couple of things I never knew. Can't believe I didn't know some of it.
One thing I wanted to point out is the as of right now, screen readers generally ignore CSS. There are only a couple of things that are honored like "display: none." This means using content via CSS to inject readable content into the page excludes screen reader users.
So while the counter is a really cool trick, it means users that rely on a screen reader are excluded. For now I would suggest accomplishing this with JS instead so that the actual content is injected.
At 7:45, you changed to and the end tag changed as well - was that automatically? What do you use to do that? Thanks!
Kevin, you're a true wizard master, and we are nothing but your pupils. Thks
4:52
Glad that 'position: aboslute' changed to 'position: absolute'!
Thank you a lot Kevin sir
I started loving css coz of you
From scrimba to your CZcams every single thing helped me ✌️
The isolation propriety is very handy!
Oooh, I always thought ch counted the number of characters. This really explains why some of my components sometimes acts wonky. Thank you 🤣
Why are you using ch? I mean, it's not a common CSS units.
I’ve never used all of them ! Thank you for the tips!!
I wish I'd known about isolate sooner! That could have helped me a couple times in my career.
Fantastic video as always! Css is fun and love that there is always something new to learn. But I am puzzled with those vertical lines (list-title | fw-bold) in some classes 8:37min... What is their purpose?
Hi, Kevin! Can you also talk about new class grouping method in your html, like section-title | fs-700? Also, using command line to run sass easily. Did you install sass first, then run this command or it requires some kind of packages needs to downloaded?
No one's talking about "margin-inline: center" at the end of the video. 🤔
And as always great tips Kevin!!
Hahah, no idea how that ended up there, lol. Should have been auto, guess I went too fast there!
Thank you!
Just when I started to look into isolation isolate😍. Kevin read minds
Hello Kevin,
I'm a new web developer currently learning CSS and your videos have been a great help for me these past two weeks.
I tried creating a website of my own and having issues making a responsive nav bar. While searching for solutions, I keep seeing videos where developers use chekcbox with icons and z-index to create a menu nav bar for smaller screens.
The problem with this is that it solves the situation but I don't understand the logic behind them as most videos are just created with music in the background.
I was wondering if you have a video that explains the concept of using checkbox and z-index to create this or if you can have this idea in your upcoming videos.
I really want to know the idea behind this solution rather than just copy and paste codes.
Thanks
Your fan from Nigeria
The nice thing with caret-color is you can tweak your contrast over fancy backgrounds.
Cool lighting gradient on your background wall
Feels like you're seducing us
Really appreciate it. Tysm!
Kevin, I noticed your classes are separated with a pipe. Do you have a video where you explain why? Thanks!
Great properties, specially ch. Very useful. By the way, I don't know if you have any video about how to create different sections in a home with diagonals to separate the content between each section. I had to do it the other day in my work, and it looks fine in the browser, but I think that I could do it better as far as CSS are concerned. Less z-index position and more isolate ;-), .... no negative margin-top, ..... etc, etc, and using the skewY property.
If you don't have any video showing how to do that, it might be a good idea if you don't mind.
Thanks for your videos. They are a great for web developers like me.
very helpful, thank you!
How position relative,influence the stack context?I've seen that in the first stage you make .inner-isolation position absolute without its parent cotainer beeing positionated relative,and for the last one Is margin-inline center instead of margin-inline auto.Thanks
With the use of counter, can you explore the accessibility concerns with this, does it get added to the accessibility tree as a numbered item? How different does it render in comparison to ol? Thank you.
Very useful information. thanks.
Bro. Do you have any solution to custom dynamically -webkit-scrollbar-track's margin bottom base on the input textarea's height on css. I try it inline style with js but it does not support. 😭😭😭😭😭
Kevin, I am glad i subscribed to your channel, I am learning new things, One thing I always stuck with is dealing with 125% scaled devices on responsive modes, I am currently using media query with 97dpi & zoom:0.8, Does there's any better solution you can suggest, Thanks for you great tutorials
I try not to make changes like that. If they want it scaled up, I want to respect that decision
@@KevinPowell Thanks for your quick reply, I totally agree with you but in some cases, It is hard to make the client understand that at 125% scaled display devices design will slightly differ from 100% scaled devices. Thanks again bro, Keep the good work coming.
Amazing 😍😍😍
Hey kevin I've gone nuts with a css issue, how do you add a horizontal scroll bar to a table cell (content in a cell can be dynamic), so far I've got the scroll bar to appear but it don't scroll. Searched for hours but cannot find a solution
Could you please give any leads?
Could counter be used in a calc?
🤯te amo!
does isolation: isolate also help when moving stuff around with position:absolute (as in creating a bounding box) or is it just for z-index stacking?
No influence there. For position: absolute, it looks for it's nearest ancestor with a position other than position: static (the default)... so there you're still doing a position: relative most of the time.
@@KevinPowell Thanks!
Het kevin why did you use a pipe “|” between the classnames in the html?
He said : visual difference between component classes and utility classes
Hey kevin quick question like you I love css and not much of programming languages like JS and react..Im wondering whats a good career angle you recommend UI designer or Front End Dev for people who mostly wants to do Css work.I would love to hear your insight and take on this
Depends on the type of work you want to do, but going deeper into design systems is probably a good bet. You need to learn to market the value of them a little, depending on the roles or companies your applying to, but getting into scalable solutions is something that has value. That said, focusing mostly on css can be hard. I think the landscape is starting to change, but still not enough focus on the importance of that side of things yet.
@@KevinPowell thanks for the answer I been hearing alot of senior devs talk about how front end is splitting between more of a css ui/ux dev and something like a middle dev with js on the front...I think the landscape is changing because css is a handful and enough to focus all my attention on but I'll learn more about design for now thanks again
Interested in watching the video, but I noticed it only has autocaptions. Any plans to caption your video? It's one long run-on sentence.
I'm picky again but ::marker is a pseudo-element, not a property. That aside, the examples in the video are great to let people follow for what they can actually be useful.
I'm facing a problem in making website responsive....could u plz help me out?...I will ask my doubt if u replied to this message.....
Why you're using pipes in your html classes?
Oh, they're called pipes?
covid-19 {
isolation: isolate;
}
.covidInfected{
position:absolute;
inset:0;
/*Cause they everywhere I swear*/
}
.karen .mask{
display:none
/*Cause I dont know and they cause everything else to break*/
}
Noice!!!
👍👍👍👍👍👍
Hey Kevin,
Now you can use scale as an independent property rather than inside of a transform.
Try out.
Yes, just the browser support isn't great yet :\
Man !, i guess CSS must be named after you.
it actually is. He's a Kevin CSS
Really man
Told you before that ::marker isn't supported on all browsers yet, especially mobile phone browsers.
:)
You know what to do.
START THE CHAIN :)
@Tobi yes
Im still frustrated by it xD
Underrated by whom Kevin?
That doesn’t make any sense.
If the people doing the ratings are people we repect, they can’t possibly, by definition, be underrated.
I think you mean “largely undiscovered, valuable CSS properties”
Anyone else here annoyed that he did not save the last thing or is it just me? I can't.. I can't have a white dot next to the file name man, come oooooon
isolation: isolate??? They should just give us or back. CSS is broken.
Avoid putting actual content into pseudo classes, they are ignored by screen readers.
also prefer rem units for font size