7 CSS Units You Might Not Know About

It's easy to get working with CSS techniques that we know well, but doing so puts us at a disadvantage when new problems emerge.

As the Web continues to grow, the demand for new solutions will also grow. Therefore, as web designers and front-end developers, we have no choice but to meet our set of tools, and know well.

That means knowing even specialty tools - which are not used as often, but when needed, are exactly the right tool for the job.

Today, I'll introduce you to some CSS tools you may not have known before. These tools are each units of measurement, such as pixels or ems, but chances are you've never heard of them! Let us enter.

Rem

Let's start with something that is similar to something you are probably already familiar. The em unit is defined as the size of the current font. Thus, for example, if a font size in the body element, the value em any child elements within the body is equal to the font size is set.




Here, we have said that the div will have a font size of 1.2em. That's 1.2 times what the size of the font that has inherited, in this case 14px. The result is 16.8px.

However, what happens when the font sizes defined cascading em inside the other? In the following excerpt we apply exactly the same as the above CSS. Each div inherits its font-size from his father, who gives us gradually increasing font sizes.





While this may be desirable in some cases, often you may want to simply rely on a single metric to scale against. In this case, you must use rem. The "r" in rem means "root"; this is equal to the font size set on the root element; in most cases be the html element.






In the three divs nested in the above example, the font would evaluate 16.8px.
Good for Grids

Rems are not only useful to determine the font size. For example, you could base a complete network system library or user interface styles in the HTML root using rem font-size, scale and use em in specific locations. This would give more predictable size and font scaling.





Conceptually, the idea behind such a strategy is to allow the interface to scale with the size of its content. However, it may not necessarily make the most sense for all cases.
vh and vw

Responsive web design techniques rely heavily on the percentage rules. However the percentage of CSS is not always the best solution for each problem. CSS width is on the array element containing nearest. What if you want to use the width or height of the view instead of the width of the parent element? That's exactly what the VH and vw units provided.

The vh element is equal to 1/100 of the height of the viewport. For example, if the height of the browser is 900px, 1VH evaluate to 9px. Similarly, if the viewport width is 750px, 1vw evaluate to 7.5px.

There are seemingly endless uses for these standards. For example, a very simple way to make slideshow full-height or full-height fence can be achieved with a single line of CSS:





Imagine you wanted a holder that was created to fill the width of the screen. To accomplish this, you must set a font size in vw. That size will scale with browser width.

Vmin and Vmax

While vh and vm are always related to the height and display width, respectively, Vmin and Vmax are related to such maximum or minimum widths and heights, depending on which is smaller and larger. For example, if the browser is set to 1100px width and 700px height, and 1vmin would 1vmax would 7px 11px. However, if the width is set to 800px and height set to 1080px, Vmin would equal 8px while vmax would be set to 10.8px.

So, when might you use these values?

Imagine you need an item that is always visible on the screen. The use of a height and width set to a value below 100 vmin allow this. For example, an element of the square that always plays at least two sides of the screen may be defined as:




If you need a square box that always covers the visible viewport (touching all four sides of the screen at all times), using the same rules, except vmax.






Combinations of these rules provide a flexible way to use the size of the viewport in new and exciting ways.

ex and ch

Former and ch units, similar to them and real, are based on the font and size of the current font. However, unlike them and real, these units are also based on the font family, as determined based on the measurements of the specific source.

The ch unit or character unit is defined as the "new measure" the width of the zero character, 0. Some very interesting about what this means can be found on the blog of Eric Meyers discussion, but the basic concept is that, given a monospace font, a box with a width of N character units, such as width: 40CH;, can always contain a string with 40 characters from that particular source. While conventional uses of this particular rule refer to trace the braille, the possibilities for creativity here certainly extend beyond these simple applications.

The former unit is defined as the "height x of the current source or half an em." Thex a given source height is the height of the lowercase x from that source. Often, it is the mark of the source media.
There are many uses for this type of unit, most of them for micro-typographic settings. For example, the sup element superscript means, can be pushed up in the line using the relative position and a lower value of 1ex. Similarly, you can pull down an element subscript. The default browser to utilize these rules and specific vertical-align subscript superscript-, but if you wanted more granular control that could handle the explicit type this:

Design Tip: The Value Of White Space

"Above the fold" is not just a newspaper term. On the Web, it refers to the part of a Web page displayed in the browser of a visitor without scrolling. It is the most valuable part of the page - and everyone in an organization wants privileged. But, in trying to please everyone, web designers often try to cram too much within too small a space.

Remember that the value of white space. It makes your page look more attractive, professional, and readable. All are key components of a successful website!
Activate your blank

White space is a term that refers to the design of space that is not occupied by text, images, or other elements of the visible page. The amount and use of white space is a key component of legibility and readability of a page. There are two types:

      Active White Space: Space that is deliberately left blank for a better structure of the page and to emphasize the different content areas.
      Passive white space: The empty space around the outside of the blank page or within the content areas as a result of poor design.

 

A page with very little white space makes visitors feel uncomfortable because the page seems cluttered and difficult to read. Visitors get overwhelmed quickly and move to a more welcoming place. Conversely, pages with lots of white space seem empty, as if there is not enough content to fill the page. Visitors may wonder, "why bother with anything?" and go somewhere else.

If properly used, the blank is an integral part of the design of a page and a major contributor to the ease of use. The content is structured feel, it's easy to find information, and the page layout works with the content to highlight the most important information.
The design with white space in mind

So when you are designing or redesigning your page layout, consider using the active whitespace to create a consistent look. Create your own or choose a ready-made template with white space in mind template.

A good page template includes an active whitespace as an intentional element that visually separates page navigation, content, header, and footer. Visitors can predict where the areas of navigation and content will, as they jump from page to page.

Often, it is best to make your first page layout design on paper instead of coding it. Avoid the temptation to start adding site logo and "just a little content" and focus on how the individual elements combine to create the overall effect instead. When you've spent a lot of time coding example, are less likely to change - even if the page is not as great.

Consider creating shadowboxes as placeholders for content. You get a better sense of weight and contrast page without being distracted by the content.

Here's an example. At a glance, you can immediately identify areas blank white space on liability: