- PVSM.RU - https://www.pvsm.ru -
Доброе время суток. Я хочу рассказать вам о тенденции появления функций в css 3 и о том, как это можно и даже порой нужно использовать в проектах.
Чтобы не тратить ваше время я распишу свойства, о которых я хотел бы вам рассказать:
Великое ликование пронеслось по легиону разработчиков, когда мы получили одну из первых функций — media queries [1], которая позволяла нам принимать те или иные стили в зависимости от всевозможных внешних факторов. По факту это было просто большое дополнение к стандартизированному еще в версии css 2.1 функционалу.
Благодаря появлению таких возможностей мир стал ярче, сайты стали гораздло удобней при просмотре со всемвозможных гаджетов и зародились такие понятия как Responsive Web Design и Adaptive Web Design (по сути второе есть подмножество первого).
На этом w3c не остановилось, и совсем недавно мы услышали о такой функции, как supports или CSS Feature Queries [2], которая поддерживается только в firefox начиная с 21 версии, chrome начиная с 28 версии и в последней (12.1) opera.
Это наши звезды, они в центре внимания и все их любят. С ними всё вполне понятно и очевидно. А теперь взглянем на менее значимые функции.
Это функция инкремента в css, которая кстати существует еще с версии 2.1. Что же она делает, спросите вы ?! А делает она следующее:
Фунция counter [3] позволяем вам начинать счетчик с именем, инкрементировать его и обнулять. Контент счетчика можно выводить через псевдоэлементы after и before [4]. В общем имитировать свои списки, правда для себя я никакой пользы в этой функции не нашел.
Функция calc [5] позволяет вам задавать калькулируемые значения в свойствах, например:
.column {
width: calc( 10px + 2px );
}
Мало в этом смысла, не правда ли ?! А что, если я вам скажу, что вы можете калькулировать значения разных типов?
.responsiveColumn {
width: calc( 100% / 3 - 20px );
float: left;
margin: 0 10px;
}
Что в результате? Можете взглянуть, пройдя по ссылке [6]
Что касается поддержки:
Лично мне данная функци очень нравится, так как она позволит немного сократить код когда мне например нужно отцентровать элемент:
.box {
width: 400px;
margin-left: calc( 50% - 200px );
}
Функция toggle [7] позволяет принимать те или иные стили в зависимости от стилей родительского элемента.
.parent {
font-style: italic;
}
.child {
font-style: toggle( italic, normal );
}
В результате у нас появилась следующая логика: Если у родителя свойство font-style имеет значение italic, то для дочернего элемента применить normal, если же у родителя значение будет отличаться от italic, то дочерний элемент будет italic.
Информацию о поддержке данного метода я не нашел, но результаты тестирования навели меня на мысть, что никто это пока не поддерживает. Ну я не расстроен, я вообще каскад не использую, так что мне такие возможности не нужны, и в целом они узкопрофильные.
С функцией attr [8] я думаю тоже многие знакомы.
<div class="new" data-price="99р."></div>
.new {
/* some styles */
}
.new::after {
content: attr(data-price);
}
Функция позволяет выводить значение любого атрибута через псевдоэлементы after и before [4]. Функция кстати так же существует с версии 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 [9] является аналогом em, только лишь с тем отличием, что всегда смотрит на значение body, а не родителя как с обычными em. Отсюда и название root em => rem.
rem поддерживают все современные браузеры, в том числе 9 и 10 Internet explorer. Если же вы поддерживаете 8 версию ie, то к сожалению rem вам использовать не получится.
За этими непонятными на первый взгляд абревеатурами кроются очень понятные и полезные единицы измерения.
1 единица vh или vw равна 1% ширины или высоты viewport'a пользователя. Следовательно 100wh будет равна 100% ширины окна браузера, что в некоторых случаях может быть полезным, так как при задании значения допустим ширины вы отталкиваетесь не от родительской ширины, а от viewport'а, что с % вам сделать бы не удалось.
Поддержка:
Спасибо за внимание, надеюсь вам это пригодиться в нашем порой нелегком деле.
Автор: delch
Источник [12]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/css/33272
Ссылки в тексте:
[1] media queries: http://www.w3.org/TR/2012/REC-css3-mediaqueries-20120619/
[2] supports или CSS Feature Queries: http://www.w3.org/TR/css3-conditional/#at-supports
[3] counter: http://www.w3.org/TR/CSS21/generate.html#counter-styles
[4] after и before: http://www.w3.org/TR/CSS21/generate.html#before-after-content
[5] calc: http://www.w3.org/TR/2013/CR-css3-values-20130404/#calc-notation
[6] ссылке: http://dabblet.com/gist/5478903
[7] toggle: http://www.w3.org/TR/2013/CR-css3-values-20130404/#toggle
[8] attr: http://www.w3.org/TR/2013/CR-css3-values-20130404/#attr
[9] rem: http://www.w3.org/TR/css3-values/#rem-unit
[10] Viewport height — vh: http://www.w3.org/TR/css3-values/#vw-unit
[11] Viewport width — wh: http://www.w3.org/TR/css3-values/#vh-unit
[12] Источник: http://habrahabr.ru/post/178307/
Нажмите здесь для печати.