As a web developer, CSS and by extension, CSS units, always appear as one of the easiest and hardest programming languages to master. When working with CSS, many find themselves getting stuck at CSS units.
Are you having a hard time trying to figure out CSS units?
Don’t feel discouraged! Not knowing should not put you at a disadvantage, rather it should be a reason to dig deeper and learn more.
The web is constantly changing and so are the technologies behind web design and development. This requires a webmasters, web designers, and developers to constantly keep up-to-date with their skills at every given opportunity. Knowing your skillset means you are ready to take in more knowledge.
In line with this, we’ll be discussing CSS tools that are basically units of measurement in CSS and web design. Don’t be so sure that you already know all the unites, as you may not have heard about some of these CSS units before now.
Let’s go over 6 of these CSS units now…
vh and vw
If you are conversant with CSS, you’ll know that it’s the basis of every responsive web design and responsive design relies on percentage rules.
But that’s not to say that CSS percentage is the best for every problem your design throws at you.
When it comes to the width of any given element, the rule of thumb when it comes to CSS width is that it is the closest to the parent elements.
The dilemma comes in when you need to use the height or width of the viewport rather than the width of the parent element.
This is where the vh and vw units come to play.
1vw = 1% of viewport width
1vh = 1% of viewport height
It’s like this; let’s assume that the browser height is set at 800px. Here 1vh would equal 8px, hence 1vh equals 1% of the viewport height. That also goes for the viewport width when it’s set to 550px, the 1vw would come out as 5.5px.
Let’s assume you want your title to fill the width of the screen, the font size would be determined using vw in order to scale the size to the width of the browser.
This should be something you are familiar with. The em unit is often determined by the font size. That’s to say that the font size on the body element, when set, will have a bearing on the em value of any child element within the body.
In this example, the font size is set at 1.2em, which means that it will be 1.2 times whatever font size we have. In this instance, 1.2 x 14, and the result is 16.8px.
However, rem isn’t just about font sizing as it can also be used in building an entire grid system. In the end, you’ll have not just a predictable font size but a reliable scaling that can help you build responsive designs.
ex and ch
Advanced users of CSS techniques know that ex and ch share similarities to rem and em. The ex and ch units also work with font and font sizing.
The differences lie in the use of font family by ex and ch.
Also called the character unit, ch is an advanced measurement of the width of the “0” (zero) character.
On the other hand, the ex unit is the x-height of the current font, it could also be the one half of the em.
There are quite a number of usage cases to the ex and ch units.
One of such usage relates to the typographic micro-adjustments.
While the ex unit isn’t new to CSS (as it’s been around since CSS1), the ch unit is quite new to CSS.
vmin and vmax
Remember vh and vm? They are both about viewport height and width. Similar to them are vmin and vmax.
However, these units are about the maximum and minimum of the width and height, a factor of whichever is smaller or larger.
1vmin = 1vw or 1vh, whichever is smaller
1vmax = 1vw or 1vh, whichever is larger
Let’s use a couple of examples;
Let’s say the browser is set as 1000px wide and 800px tall, your 1vmin would be 8px while the 1vmax would be set at 10px.
Here’s another example, let’s say you have a width and height at 800px and 1080px respectively, the vmin would be 8px and 10.8px would be the vmax.
Final Thoughts on CSS Units
As a webmaster, don’t be left out of the scheme. If you want to be a top-notch user of CSS techniques, you will need to make it a point to know all the available toolsets in the field.
Also, look out for advancements and developments in the web design and CSS to keep up with ways to create beautiful yet responsive websites.