Options in css 3 and a little about the possibilities for rubber sites

Good time of day. I want to tell you about the trend of the appearance of functions in css 3 and how it can be and even sometimes needs to be used in projects.



In order not to waste your time, I will sign the properties I would like to tell you about:

• counter function
• calc function
• attr function
• toggle function
• unit of measure - rem
• unit of measure - vw
• unit of measure - vh

Functions in css 3

Great jubilation swept through the legion of developers, when we received one of the first functions — media queries , which allowed us to accept certain styles depending on all sorts of external factors. In fact, it was just a big addition to the functionality that was standardized in the css 2.1 version.

')

Thanks to the emergence of such opportunities, the world has become brighter, sites have become much more convenient when browsing with all possible gadgets and concepts such as Responsive Web Design and Adaptive Web Design have arisen (in fact, the second is a subset of the first).



W3c did not stop at that, and most recently we heard about a feature such as supports or CSS Feature Queries , which is supported only in firefox starting from version 21, chrome starting from version 28 and in the last (12.1) opera.



These are our stars, they are the center of attention, and everyone loves them. With them everything is quite clear and obvious. And now we will look at less significant functions.

Counter

This is an increment function in css, which by the way exists since version 2.1. What does she do, you ask ?! And she does the following:

A function counter allows you to start a counter with a name, increment it and reset it. The content of the counter can be output through the pseudo-elements after and before . In general, to imitate my lists, though for myself I did not find any benefit in this function.

Calc

The calc function allows you to set calculated values ​​in properties, for example:

.column { width: calc( 10px + 2px ); } 

Not enough in this sense, is not it ?! And what if I tell you that you can calculate values ​​of different types?

 .responsiveColumn { width: calc( 100% / 3 - 20px ); float: left; margin: 0 10px; } 

What is the result? You can take a look by following the link.



As for support:

• Internet explorer 9+
• Mozilla Firefox 19+
• Google Chrome 24+
• Safari 6+
• Opera does not support

Personally, I really like this function, since it will allow a little bit to reduce the code when I, for example, need to center the element:

 .box { position: absolute; width: 400px; left: calc( 50% - 200px ); } 

Toggle

The toggle function allows you to accept certain styles depending on the styles of the parent element.

 .parent { font-style: italic; } .child { font-style: toggle( italic, normal ); } 

As a result, we have the following logic: If the parent has the font-style property set to italic, then the normal element for the child element is used, but if the parent has a different value from italic, then the child element will be italic.



I did not find any information on the support of this method, but the results of the testing led me to the point that nobody supports it yet. Well, I’m not upset, I don’t use a cascade at all, so I don’t need such features, and in general they are narrow-profile.

attr

I think the attr function is also familiar to many.

 <div class="new" data-price="99."></div> 

 .new { /* some styles */ } .new::after { content: attr(data-price); } 

The function allows you to display the value of any attribute through the pseudo-elements after and before . By the way, the function also exists from css 2.1, but received an update in version 3. This attribute will allow you to write things like:

 <stock> <wood length="12"/> <wood length="5"/> <metal length="19"/> <wood length="4"/> </stock> 

 stock > * { display: block; width: attr(length em); /* default 0 */ height: 1em; border: solid thin; margin: 0.5em; } 

Currently there is no support for this improvement.



Unfortunately, this material is in the status of Candidate Recommendation and it is not yet known whether the above mentioned buns will work in the near future. Also in the document has the following line:

The following features are at-risk and may be dropped during the CR period: 'calc ()', 'toggle ()', 'attr ()'.

So we can not see all these charms.

Total

Personally, I like that functions appear in css, and they allow you to do what javascript used to do, and I think this is great. On this, I finished the functions.

Rem, vw and vh

rem

The value of rem is analogous to em, only with the difference that it always looks at the value of html, and not the parent, as with ordinary em. Hence the name root em => rem.



rem is supported by all modern browsers, including 9 and 10 Internet explorer. If you support version 8 ie, then unfortunately you will not be able to use rem.

vw and vh

Behind these incomprehensible at first glance, abreveatures are very clear and useful units of measurement.

• Viewport height - vh
• Viewport width - vw

1 unit vh or vw is equal to 1% of the user's viewport'a width or height. Consequently, 100wh will be equal to 100% of the width of the browser window, which in some cases can be useful, since when defining a value, let's say the width you start not from the parent width, but from the viewport, which you wouldn’t have done with%.



Support:

• Internet explorer 9+
• Mozilla Firefox 19+
• Google Chrome 24+
• Safari 6+
• Opera does not support

Thank you for your attention, I hope you find this useful in our sometimes difficult task.