Функции в css 3 и немного о возможностях для резиновых сайтов

Доброе время суток. Я хочу рассказать вам о тенденции появления функций в css 3 и о том, как это можно и даже порой нужно использовать в проектах.

Чтобы не тратить ваше время я распишу свойства, о которых я хотел бы вам рассказать:

• функция counter
• функция calc
• функция attr
• функция toggle
• единица измерения — rem
• единица измерения — vw
• единица измерения — vh

Функции в css 3

Великое ликование пронеслось по легиону разработчиков, когда мы получили одну из первых функций — media queries, которая позволяла нам принимать те или иные стили в зависимости от всевозможных внешних факторов. По факту это было просто большое дополнение к стандартизированному еще в версии css 2.1 функционалу.

Благодаря появлению таких возможностей мир стал ярче, сайты стали гораздо удобней при просмотре со всемвозможных гаджетов и зародились такие понятия как Responsive Web Design и Adaptive Web Design (по сути второе есть подмножество первого).

На этом w3c не остановилось, и совсем недавно мы услышали о такой функции, как supports или CSS Feature Queries, которая поддерживается только в firefox начиная с 21 версии, chrome начиная с 28 версии и в последней (12.1) opera.

Это наши звезды, они в центре внимания, и все их любят. С ними всё вполне понятно и очевидно. А теперь взглянем на менее значимые функции.

Counter

Это функция инкремента в css, которая кстати существует еще с версии 2.1. Что же она делает, спросите вы ?! А делает она следующее:
Фунция counter позволяем вам начинать счетчик с именем, инкрементировать его и обнулять. Контент счетчика можно выводить через псевдоэлементы after и before. В общем имитировать свои списки, правда для себя я никакой пользы в этой функции не нашел.

Calc

Функция calc позволяет вам задавать калькулируемые значения в свойствах, например:

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

Мало в этом смысла, не правда ли ?! А что, если я вам скажу, что вы можете калькулировать значения разных типов?

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

Что в результате? Можете взглянуть, пройдя по ссылке

Что касается поддержки:

• Internet explorer 9+
• Mozilla Firefox 19+
• Google Chrome 24+
• Safari 6+
• Opera не поддерживает

Лично мне данная функция очень нравится, так как она позволит немного сократить код когда мне например нужно отцентровать элемент:

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

Toggle

Функция toggle позволяет принимать те или иные стили в зависимости от стилей родительского элемента.

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

В результате у нас появилась следующая логика: Если у родителя свойство font-style имеет значение italic, то для дочернего элемента применить normal, если же у родителя значение будет отличаться от italic, то дочерний элемент будет italic.

Информацию о поддержке данного метода я не нашел, но результаты тестирования навели меня на мысть, что никто это пока не поддерживает. Ну я не расстроен, я вообще каскад не использую, так что мне такие возможности не нужны, и в целом они узкопрофильные.

attr

С функцией attr я думаю тоже многие знакомы.

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

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

Функция позволяет выводить значение любого атрибута через псевдоэлементы after и before. Функция кстати так же существует с версии css 2.1, однако получила обновление в версии 3. Данный атрибут будет позволять вам писать такие вещи, как например:

<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;
}

На текущий момент поддержки этого улучшения нет нигде.

К сожалению данный материал находиться в статусе Candidate Recommendation и пока не известно, будут ли вышеуказанные плюшки работать в ближайшее время. Так же в документе имеется следующая строка:

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

Так что мы можем и не увидеть всех этих прелестей.

Итог

Лично мне нравится, что в css появляются функции, и они позволяют делать то, что раньше делал javascript, и я считаю, что это прекрасно. На этом о функциях я закончил.

Rem, vw и vh

rem

Значение rem является аналогом em, только лишь с тем отличием, что всегда смотрит на значение html, а не родителя как с обычными em. Отсюда и название root em => rem.

rem поддерживают все современные браузеры, в том числе 9 и 10 Internet explorer. Если же вы поддерживаете 8 версию ie, то к сожалению rem вам использовать не получится.

vw и vh

За этими непонятными на первый взгляд абревеатурами кроются очень понятные и полезные единицы измерения.

• Viewport height — vh
• Viewport width — vw

1 единица vh или vw равна 1% ширины или высоты viewport’a пользователя. Следовательно 100wh будет равна 100% ширины окна браузера, что в некоторых случаях может быть полезным, так как при задании значения допустим ширины вы отталкиваетесь не от родительской ширины, а от viewport’а, что с % вам сделать бы не удалось.

Поддержка:

• Internet explorer 9+
• Mozilla Firefox 19+
• Google Chrome 24+
• Safari 6+
• Opera не поддерживает

Спасибо за внимание, надеюсь вам это пригодиться в нашем порой нелегком деле.