Features in css 3 and a bit about features 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 this can and even sometimes needs to be used in projects.

In order not to waste your time, I will describe the properties that 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 glee 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 various external factors. In fact, it was just a great addition to the standardized functionality in css 2.1.

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 were born (in fact the second is a subset of the first).

W3c did not stop there, and most recently we heard about a feature like supports or CSS Feature Queries, which is only supported in firefox since version 21, chrome since version 28 and in the latest (12.1) opera.

These are our stars, they are in the spotlight, and everyone loves them. With them, everything is quite clear and obvious. Now let's take a look at less significant functions.

Counter

This is an increment function in css, which by the way has existed since version 2.1. What is she doing, you ask ?! And she does the following:
The counter function allows you to start a counter with a name, increment it and reset it to zero. The content of the counter can be displayed through the pseudo-elements after and before . In general, to simulate my lists, though for myself, I did not find any benefit in this function.

Calc

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

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

That makes little sense, doesn't it ?! But 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 clicking on the link

Regarding 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 you to slightly reduce the code when for example I need to center an 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 got the following logic: If the parent property font-style has the value italic, then apply normal for the child element, if the parent value is different from italic, then the child element will be italic.

I did not find information about supporting this method, but the test results led me to the idea that no one supports it yet. Well, I'm not upset, I don’t use the cascade at all, so I don’t need such capabilities, and in general they are narrow-profile.

attr

I think many people are familiar with the attr function .

.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 . The function, by the way, has also existed since css 2.1, but it received an update in version 3. This attribute will allow you to write things such as:

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

There is currently no support for this improvement anywhere.

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

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

So we may not see all these charms.

Total

Personally, I like the fact that functions appear in css, and they allow you to do what javascript did before, and I think this is great. This is where I ended up about the features.

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 regular em. Hence the name root em => rem.

rem supports all modern browsers, including 9 and 10 Internet explorer. If you support version 8 ie, then unfortunately you won’t be able to use rem.

vw and vh

Behind these incomprehensible at first glance abbreviations lie very clear and useful units of measurement.

• Viewport height - vh
• Viewport width - vw

1 unit vh or vw is equal to 1% of the width or height of the user’s viewport. Therefore, 100wh will be equal to 100% of the width of the browser window, which in some cases can be useful, since when setting the value of the allowable width, you do not start from the parent width, but from the viewport, which you would not be able to do 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 business.