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:
No comments:
Post a Comment