I appreciate how the title mystery catches my attention, then wanting to satisfy the "am I right?" thought make for a catchy title. I had to say I started your video hoping the answer you were going to illustrate was: "no unit" or "unitless" (using number values) which I love to use on line-height properties, especially of text that will change size. I figured if it were an actual unit, it would be one of those I think of as design-y-units-I-dont-understand-how-to-use and this video helped demystify it a bit for me. Thanks for the great content.
Like you I have a Design background before starting my front-end journey, typography always was my favorite subject, because it really can make a HUGE difference. Before the CSS draft of "ch" unit I used to compose my css using the "ex" unit, is not the same but it's quite close to it.
Wow. This would be handy for setting form input widths. When a field is max 10 chars you can just set max-width: 10ch. (As an addition to setting html props of course)
This is such a ridiculously perfectly timed video for something I'm working on! I haven't commented before, but just wanted to say a big thank you for your videos. They've become something I watch whilst sat at my desk eating breakfast before working. Thank you so much for the time and effort you put it and the nuggets of wisdom you are passing on to us all.
Could be used for indentation, too. When I found the CH unit (only after you asked the question), I immediately thought - yay, no more % or rem based indents. With this, it'd be character based! Oh ya, much cooler.
Yo guys! This guys grew his channel to 140k subs in 3 years.- that's awesome . It's a lot of people considering the fact that he teaches only front end web dev which is a very small niche on TH-cam
4 ปีที่แล้ว +42
I had never seen "ch" (And I have seen a LOT of CSS material)
I tend to use ch, principally for the purpose of adhering to the principles of readability. I get the need to limit line length, but you do need to be careful when using it with wider content blocks.
Man that CSS responsiveness course is just in time for me and day 1 just feels spot on. I have one template that i got from following a tutorial a while back and i rly want to re-use it but i don't want to build it from scratch atm. Frustrating thing is, is that it loads on small mobille devices a bit zoomed in.. so the user has to zoom out evertime they load a new page. Tried the lot, had to cool off for a bit. Rly glad with this course! Hope getting out the other end more confident :)
Does anyone know about any compatibility issues? Or any experience if this works well with people who have their fonts larger or display zoomed in? I am assuming it actually improves that experience?
Not sure but I want to try ex unit in the same way for height. Thanks Kevin. I actually learnt a lot here. I hope I will be able to give back to the community one day just like you.
I was having that talk with a friend a month ago, that "ch" is overlooked. not only this, most people don't even know it exists for a long time already.
that absolutely makes no sense. When you're playing around with ch values anyway you also could use px and play around with it. the result would be the same or even better because ch is too unstable considering it takes the value of a zero-width. wouldn't it be much easier to look what the actual font is and set the ch value to the widest letter in this font ? (programmatically that would not be hard)
The unit is "ch". It's mentioned all they way at 2:50. There is no explanation for when this would be better than other units. The rest of the video is about max-width.
I didn’t know about the tracking issue with long lines. I’ve noticed that I sometimes have that problem. Interesting. I wonder if it affects some people more than others, making reading in general more difficult. Anyway, love your videos, thanks.
Now I get why media websites are basically always this narrow. I always thought it was just because of ads on the sides and simpler to optimize between this narrow desktop and mobile pages.
Currently following the course. Many things I did wrong. But all these units, and which to use, are a bit confussing. I already moved from using pixels to using em's, now I am starting to use Rem, and this " new"unit looks also like something I could/should use.
I have a question: Why are you using a div for the main content instead of a section? If it has semantic value shouldn't it be a section? Sorry if the question is not about the topic discussed in this video, but i struggle a bit with semantic html and i really would love to know the reasoning behind that decision.
Thank you for showing the CSS unit ch use case. But I think using the clamp to control line width will be more suitable for this use case. What is your opinion on it?
Hi Kevin, you mention that the number of characters should be in the 55 to 65 range for best readability. I've noticed that even in your adjusted paragraphs, the number of characters including spaces between words, commas and full stops if closer to 80. Does CH just add up all the characters or is it really a distance based on the size of the o? In other words you can fit far more iiiiiiiiii's in a space than oooooooooo's.
Yes, it's based on the width of the zero character, and not total number of characters. Also depends on the font. Some fonts don't have that info embeded in them, so then 1ch = 0.5em
Never heard of this one. When I hear "typography and CSS" I think of using points, but this is one I'll need to look into. I'm guessing it has different values for different fonts, specifically handwriting or monospace fonts?
Hey Kevin, Any chance you could make a video to explain pointer-events in css i kinda know myself what its for but i would like some more information on it. Things like if its worth using or if there is another alternativ to it that works better for other browsers and so on. And its something i dont see many people using but its definitely useful since you can for example put a div over the navbar and still make the links on the navbar behind the div clickable by using pointer-events: none; You always explain everyone in so perfect way so i rather listen to you explaining about it instead of google it myself honestly :p
How to use background images for seo friendly ?? Is it possible to give alternative text and title tag for background images?? Difference between background image and image??
background images are decoration, images are content. So no, background images can't contribute to SEO as far as I know. That said, alt text doesn't do a lot on that front either.
Sir I love your videos, your explanations are so cool and awesome...sir could you make a crash course on css grid I really want to learn this from you...
It’s awesome to see this unit (I’d never heard of it!) but I don’t think CH is good for setting max-widths. If a user increases their font size they’ll end up in scenarios you as the designer/dev didn’t anticipate
Actually, it's the opposite. I'd rather that the content area can grow with the font-size than it getting locked in :) If people are zooming in and out, you want things to respond to that, if not the layout can become really awkward!
That’s cool, thanks for the reply! I disagree though. If the text’s larger and the content’s filled the screen, you’ll likely be having issues with images either being a limitation on layout scaling properly or becoming blurry if they’re set to fill the available space. Anyway horses for courses, and I enjoyed the video, thanks!
@@KevinPowell like giving some courses about sql or php and how to download web server how to host your own websites without worrying about buying monthly
This is kind of ironic. Doesn't the "em" term descend from typography, when it literally meant the width of a letter "m", or a wide character? We have "em" dashes and "en" dashes, based on their width. It was traditionally a reference to width not height.
Thank you for making those videos, they're great and I'm learning a lot! Content suggestion: How is this -rallyinteractive.com/#ikon-ar-maps- background made?
@@KevinPowell This would be cool to learn...soon. Also make it one that you publish/keep the code for... especially us in BC. :-) We also have noses on our happy faces.
I hate how the modern media landscape forces everybody to title their content as a mystery including the surprised expression thumbnail. Back in the day this would have just said "CH : the underrated unit". Now when I search TH-cam for CH, does this pop up?
I tend to agree, but since this is a big part of my living now I have to play the game a little. It can be hard to balance, I hate click-bait too, but it gets a bad wrap because a lot of the time the content is crappy or the title misleading. I try my best to not do that. It really depends on the content as well. If it's something people search for a lot, like "how to do X", then I'd definitely want to include it. Say, like "How do background images work", my title and thumbnail would be very related. For something that people don't search for very often, this type of thing tends to perform better. That said, in an incognito search, it's still number 3 in my results for "ch unit" because TH-cam knows every word I say in the video and uses that for search just as much as the title, description, and key words (where I do mention it as well). And because it'll get a strong response early on (hopefully, 😂), it can also lead to helping push it higher in the search results... but again, this is something that almost no one searches for anyway because people don't know it exists. Because of that, I'm more focused on introducing people to it in this one, rather than making a video that is made for search. Next week's video is the opposite, it's very much geared for search and trying to perform well there.
Do you think another CSS unit deserves more love than it gets? If so, which one?
How about turn for rotations/angles? E.g. rotate(3.5turn) == rotate(1260deg). Just sugar, I guess.
@@maddancing Still, yes, that's a great one so few people know about!
I appreciate how the title mystery catches my attention, then wanting to satisfy the "am I right?" thought make for a catchy title. I had to say I started your video hoping the answer you were going to illustrate was: "no unit" or "unitless" (using number values) which I love to use on line-height properties, especially of text that will change size. I figured if it were an actual unit, it would be one of those I think of as design-y-units-I-dont-understand-how-to-use and this video helped demystify it a bit for me. Thanks for the great content.
Like you I have a Design background before starting my front-end journey, typography always was my favorite subject, because it really can make a HUGE difference. Before the CSS draft of "ch" unit I used to compose my css using the "ex" unit, is not the same but it's quite close to it.
I like to use vw on font-size in certain cases.
This channel has become my netflix now a days. I am literelly learning css from kevin. Great Job Man.
So glad that you're enjoying my content!
Seriously. I can’t sleep so I come on TH-cam to binge watch Kevin’s css videos
70% of CSS I've truly "learned" comes from Kevin's videos.
Wow. This would be handy for setting form input widths. When a field is max 10 chars you can just set max-width: 10ch. (As an addition to setting html props of course)
This is such a ridiculously perfectly timed video for something I'm working on!
I haven't commented before, but just wanted to say a big thank you for your videos.
They've become something I watch whilst sat at my desk eating breakfast before working.
Thank you so much for the time and effort you put it and the nuggets of wisdom you are passing on to us all.
No problem at all, glad you're enjoying them, and that the timing was right on this one!
A decade of using CSS and I'd never come across this unit until now. Awesome Kevin
Could be used for indentation, too. When I found the CH unit (only after you asked the question), I immediately thought - yay, no more % or rem based indents. With this, it'd be character based! Oh ya, much cooler.
Oh, that's a great use case!
Could be used within a form for specific inputs where you know the data input limit or just to limit widths in general
This is the way I used ch
Yo guys! This guys grew his channel to 140k subs in 3 years.- that's awesome .
It's a lot of people considering the fact that he teaches only front end web dev which is a very small niche on TH-cam
I had never seen "ch" (And I have seen a LOT of CSS material)
Now, that's being underated!
I first saw it on w3schools
I tend to use ch, principally for the purpose of adhering to the principles of readability. I get the need to limit line length, but you do need to be careful when using it with wider content blocks.
True.
I'm working with CSS for the last 4 yrs and I have never seen/used 'ch'. That was interesting. Thanks !
One of THE BEST in CSS. Thank you for sharing your knowledge with us.
Glad he's spreading the word. Discovered the CH unit a few years ago and it's been my daily driver ever since.
I LOVE that course. Learned so much about responsiveness and how to do it efficiently (mobile-first).
Thank You! This is the first video I see on this...I am not at all surprised that you are the first one I am learning this from
Man that CSS responsiveness course is just in time for me and day 1 just feels spot on. I have one template that i got from following a tutorial a while back and i rly want to re-use it but i don't want to build it from scratch atm. Frustrating thing is, is that it loads on small mobille devices a bit zoomed in.. so the user has to zoom out evertime they load a new page. Tried the lot, had to cool off for a bit. Rly glad with this course! Hope getting out the other end more confident :)
I'm just starting out and feeling overwhelmed with so much to know. Have a feeling I'm going to be watching a ton of these videos.
Never encountered "ch". I'm a web designer but I work directly with a developer everyday. We love this, thank you for sharing!
Does anyone know about any compatibility issues? Or any experience if this works well with people who have their fonts larger or display zoomed in? I am assuming it actually improves that experience?
I love all your contents. Well explained.
Dude, every single video is about a something I just need.
Haha, glad I can help :D
Thanks for bringing up ch untis Kevin, much appreciate your work!
I'm mastering CSS from you, my CSS Master ♥️
Super useful! THX Kevin! ♥
Finally someone speaks it out AND has a solution. Good one!
Thank you, Kevin😍
Not sure but I want to try ex unit in the same way for height. Thanks Kevin. I actually learnt a lot here. I hope I will be able to give back to the community one day just like you.
Another great video man keep up the great production.
Excellent content, as always.
Thanks a lot Kevin !! I didn't even know this unit existed ! You're on my binge list these days
I was having that talk with a friend a month ago, that "ch" is overlooked. not only this, most people don't even know it exists for a long time already.
WHAAAAT?! Always learning something new from you. Thanks Kevin.
This is mind-blowing! 😃
Learned something new today...thanks kev.
Very nice. Thank you for this.
thank you Kevin Glad to learn every day
Always new things to learn, thanks man
that absolutely makes no sense. When you're playing around with ch values anyway you also could use px and play around with it. the result would be the same or even better because ch is too unstable considering it takes the value of a zero-width. wouldn't it be much easier to look what the actual font is and set the ch value to the widest letter in this font ? (programmatically that would not be hard)
ch values are device independent. px values are not.
I tried using "ch" once before but it didn't seem to work as well as it did in your example. Now I'm inspired to try it once again! :)
The unit is "ch". It's mentioned all they way at 2:50. There is no explanation for when this would be better than other units. The rest of the video is about max-width.
Thanks kevin 🙏🤞
I didn’t know about the tracking issue with long lines. I’ve noticed that I sometimes have that problem. Interesting. I wonder if it affects some people more than others, making reading in general more difficult. Anyway, love your videos, thanks.
Now I get why media websites are basically always this narrow. I always thought it was just because of ads on the sides and simpler to optimize between this narrow desktop and mobile pages.
he kept us salivating for 4 days .
Currently following the course. Many things I did wrong. But all these units, and which to use, are a bit confussing. I already moved from using pixels to using em's, now I am starting to use Rem, and this " new"unit looks also like something I could/should use.
If you're still on the em/rem stage, stick with them for now :) - this is a little sugar on the top, but I wouldn't stress about it right now!
I love this content!
Very interesting, thanks.
This guy knows his shit!!!
I have a question: Why are you using a div for the main content instead of a section? If it has semantic value shouldn't it be a section?
Sorry if the question is not about the topic discussed in this video, but i struggle a bit with semantic html and i really would love to know the reasoning behind that decision.
Mostly because it was just a quickly thrown together example, but with so many people watching, I probably should be more careful!
@@KevinPowell Thanks for the answer 👍.
And don't worry you are doing a great job(before this video i wouldn't even consider using ch)!
How is this different to setting a max width on the paragraph?
great learned something new.
thanks ! really helpful !
Why you use rems and ems insted of px?
Nice! Never knew about that, thanks :)
mostly I use ch unit. And you have already mentioned this unit in one of your figma design videos. I think it 's weathercast design and code
Ctrl+Shift+M - mobile view for firefox!!! Best shorcut ever 😁😊
You Are The Sunshine of My Gloomy Life!
Thank you for showing the CSS unit ch use case. But I think using the clamp to control
line width will be more suitable for this use case. What is your opinion on it?
Absolutely in love with clamp. I could see setting the min and max values in it with ch actually, and keeping the middle value a vw
Love your videos!
Should I do your free responsive layout course or your scrimba course?
Both? 😂
My Scrimba course is much more in depth. The free one is very specific on just layouts
@@KevinPowell ohh thanks, I think I will do both since I'm also interested in Gary Simon's course on there.
Hi Kevin, I have used ch in this way - on the paragraphs, I so hate really long lines of text.
Which font are you using ?
Hi Kevin, you mention that the number of characters should be in the 55 to 65 range for best readability. I've noticed that even in your adjusted paragraphs, the number of characters including spaces between words, commas and full stops if closer to 80. Does CH just add up all the characters or is it really a distance based on the size of the o? In other words you can fit far more iiiiiiiiii's in a space than oooooooooo's.
Yes, it's based on the width of the zero character, and not total number of characters. Also depends on the font. Some fonts don't have that info embeded in them, so then 1ch = 0.5em
@@KevinPowell Thank you Kevin! Much appreciated.
Great stuff I didn't know.
Never heard of this one. When I hear "typography and CSS" I think of using points, but this is one I'll need to look into. I'm guessing it has different values for different fonts, specifically handwriting or monospace fonts?
Hi Kevin, There are a lot of tutorials about width out there, but not enough about height !
May you make some about it ?
Less to talk about, in general, don't set it and you're good, lol.
I could make a video on why not to use height ☺️
omg Kevin is that Jon Duckett's HTML/CSS book? What are you thoughts about it??
It is :D - I only read it a really long time ago and haven't gone back in awhile, but pretty sure it was a solid read!
"It's free and will always be free", wow
So it's the em unit, but based off of "0" instead of "m"?
Not useless, but not exactly useful, is it?
Exactly, because "em" is the width of a capital letter M of the font-size of the current element. I don't understand how is "ch" useful...
What about CJK?
Dude i love you
Heyy thank you for the video ! Great one as always !
How the dialog box is centered ? I don't see anything in css centering it
Great video! Btw what vscode theme are you using?
Atom Dark One :)
@@KevinPowell Ty!
Hey Kevin, Any chance you could make a video to explain pointer-events in css i kinda know myself what its for but i would like some more information on it. Things like if its worth using or if there is another alternativ to it that works better for other browsers and so on. And its something i dont see many people using but its definitely useful since you can for example put a div over the navbar and still make the links on the navbar behind the div clickable by using pointer-events: none; You always explain everyone in so perfect way so i rather listen to you explaining about it instead of google it myself honestly :p
How to use background images for seo friendly ??
Is it possible to give alternative text and title tag for background images??
Difference between background image and image??
background images are decoration, images are content. So no, background images can't contribute to SEO as far as I know. That said, alt text doesn't do a lot on that front either.
I think that this could have been a better video if you contrasted ch with em. I am still not clear how the ch unit helps the process of coding.
Hi Kevin, is the code for this example available?
Sorry, I didn't keep this. I only keep the code from designs I put together, not so much these types of videos.
Hy Kevin what's your favorite fonts?
I use Basic Sans for my personal site and stuff, so it's probably my favorite right now 😁
i just heard about this "ch" unit for the first time, right here, right now! it is so much cooler! thanks a lot sir!
Sir I love your videos, your explanations are so cool and awesome...sir could you make a crash course on css grid I really want to learn this from you...
It’s awesome to see this unit (I’d never heard of it!) but I don’t think CH is good for setting max-widths. If a user increases their font size they’ll end up in scenarios you as the designer/dev didn’t anticipate
Actually, it's the opposite. I'd rather that the content area can grow with the font-size than it getting locked in :) If people are zooming in and out, you want things to respond to that, if not the layout can become really awkward!
That’s cool, thanks for the reply! I disagree though. If the text’s larger and the content’s filled the screen, you’ll likely be having issues with images either being a limitation on layout scaling properly or becoming blurry if they’re set to fill the available space. Anyway horses for courses, and I enjoyed the video, thanks!
Pica is an absolute value of 16px, which is another pretty uncommon unit used in css.
first time I've heard about this unit... :O
There are a ton of CSS units no one knows about. Most of them are kind of useless... this one on the other hand should be much more well known!
@@KevinPowell What is your opinion on ex?
Can you think about hosting
What do you mean?
@@KevinPowell like giving some courses about sql or php and how to download web server how to host your own websites without worrying about buying monthly
Wrong channel. 😂
So ch is just a slightly smaller version of em? I know they actually don't behave the exact same way, but this video didn't explain the difference.
Just commented to tell ur videos are good...
SMASH THAT LIKE BUTTON!
This is kind of ironic. Doesn't the "em" term descend from typography, when it literally meant the width of a letter "m", or a wide character? We have "em" dashes and "en" dashes, based on their width. It was traditionally a reference to width not height.
- CH only works with monospace fonts? If so, it's practically useless.
Very cool!
Here's the support table of the ch unit: caniuse.com/#feat=ch-unit
Thank you for making those videos, they're great and I'm learning a lot! Content suggestion: How is this -rallyinteractive.com/#ikon-ar-maps- background made?
That is cool :) - It's using a canvas. I should do a video on something like that one day for sure :)
@@KevinPowell This would be cool to learn...soon. Also make it one that you publish/keep the code for... especially us in BC. :-) We also have noses on our happy faces.
Why do we still have CSS?
Please add "CC" at your videos for non-english speakers
You can turn on auto-generated subtitles. It's almost 70% correct.
I hope it helps you out.
Search Results
Web results
❤
I hate how the modern media landscape forces everybody to title their content as a mystery including the surprised expression thumbnail. Back in the day this would have just said "CH : the underrated unit". Now when I search TH-cam for CH, does this pop up?
I tend to agree, but since this is a big part of my living now I have to play the game a little. It can be hard to balance, I hate click-bait too, but it gets a bad wrap because a lot of the time the content is crappy or the title misleading. I try my best to not do that. It really depends on the content as well. If it's something people search for a lot, like "how to do X", then I'd definitely want to include it. Say, like "How do background images work", my title and thumbnail would be very related.
For something that people don't search for very often, this type of thing tends to perform better. That said, in an incognito search, it's still number 3 in my results for "ch unit" because TH-cam knows every word I say in the video and uses that for search just as much as the title, description, and key words (where I do mention it as well). And because it'll get a strong response early on (hopefully, 😂), it can also lead to helping push it higher in the search results...
but again, this is something that almost no one searches for anyway because people don't know it exists. Because of that, I'm more focused on introducing people to it in this one, rather than making a video that is made for search. Next week's video is the opposite, it's very much geared for search and trying to perform well there.
Did you mean to use max-inline-size? 🤓
Well, I guess it’s not under appreciated for no reason, it kinda sux.
First comment
First
First, Maybe D:
I think a few people beat you to it!
@@KevinPowell hhhhh