The ch unit is the most underappreciated CSS unit
ฝัง
- เผยแพร่เมื่อ 6 ก.ย. 2024
- Join Conquering Responsive Layouts: courses.kevinp...
There are a ton of CSS units out there, and the most underappreciated is, in my opinion at least, the ch unit.
Is there another unit that you think is under-appreciated? Let me know in the comments!
--
Come hang out with other dev's in my Discord Community
💬 / discord
---
Keep up to date with everything I'm up to
✉ www.kevinpowel...
---
Help support my channel
👨🎓 Get a course: www.kevinpowel...
👕 Buy a shirt: teespring.com/...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstu...
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my TH-cam channel, make sure to follow me on Instagram and Twitter.
Instagram: / kevinpowell.co
Twitter: / kevinjpowell
Codepen: codepen.io/kev...
Github: github.com/kev...
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!
![[กูเพิ่งซื้อมึงปิดหนี] 20 นาที ผมรีวิวเกมที่แย่ที่สุดในโลก CONCORD](http://i.ytimg.com/vi/XhC-3q3Ii7I/mqdefault.jpg)
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.
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!
I had never seen "ch" (And I have seen a LOT of CSS material)
In the official CSS documentation, there is no mention about ch unit too.
Now, that's being underated!
I first saw it on w3schools
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)
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
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
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 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.
I LOVE that course. Learned so much about responsiveness and how to do it efficiently (mobile-first).
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.
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'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?
Glad he's spreading the word. Discovered the CH unit a few years ago and it's been my daily driver ever since.
I'm mastering CSS from you, my CSS Master ♥️
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)!
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
Dude, every single video is about a something I just need.
Haha, glad I can help :D
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 :)
Thank you, Kevin😍
I love all your contents. Well explained.
Finally someone speaks it out AND has a solution. Good one!
Super useful! THX Kevin! ♥
Thanks a lot Kevin !! I didn't even know this unit existed ! You're on my binge list these days
Thanks for bringing up ch untis Kevin, much appreciate your work!
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.
Excellent content, as always.
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!
This is mind-blowing! 😃
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! :)
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?
Another great video man keep up the great production.
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.
Hi Kevin, I have used ch in this way - on the paragraphs, I so hate really long lines of text.
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...
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.
Learned something new today...thanks kev.
Always new things to learn, thanks man
great learned something new.
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.
Ctrl+Shift+M - mobile view for firefox!!! Best shorcut ever 😁😊
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
thank you Kevin Glad to learn every day
WHAAAAT?! Always learning something new from you. Thanks Kevin.
Thanks kevin 🙏🤞
Very interesting, thanks.
Very nice. Thank you for this.
This guy knows his shit!!!
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
"It's free and will always be free", wow
I love this content!
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
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
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...
thanks ! really helpful !
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, 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.
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?
Nice! Never knew about that, thanks :)
he kept us salivating for 4 days .
How is this different to setting a max width on the paragraph?
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!
Love your videos!
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 ☺️
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.
Dude i love you
You Are The Sunshine of My Gloomy Life!
Great stuff I didn't know.
i just heard about this "ch" unit for the first time, right here, right now! it is so much cooler! thanks a lot sir!
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.
Why you use rems and ems insted of px?
Which font are you using ?
What about CJK?
SMASH THAT LIKE BUTTON!
Very cool!
Here's the support table of the ch unit: caniuse.com/#feat=ch-unit
Great video! Btw what vscode theme are you using?
Atom Dark One :)
@@KevinPowell Ty!
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. 😂
Just commented to tell ur videos are good...
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 😁
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.
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.
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.
- CH only works with monospace fonts? If so, it's practically useless.
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.
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?
Search Results
Web results
❤
Did you mean to use max-inline-size? 🤓
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.
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.
First comment
First
Well, I guess it’s not under appreciated for no reason, it kinda sux.
First, Maybe D:
I think a few people beat you to it!
@@KevinPowell hhhhh