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

css3logo
Доброе время суток. Я хочу рассказать вам о тенденции появления функций в 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

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


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

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


Спасибо за внимание, надеюсь вам это пригодиться в нашем порой нелегком деле.
Поделиться публикацией
AdBlock похитил этот баннер, но баннеры не зубы — отрастут

Подробнее
Реклама
Комментарии 28
  • 0
    когда мне например нужно отцентровать элемент


    А почему не margin-left: auto; margin-right: auto?
    • 0
      Виноват, плохой пример. Лучше будет так:
      .box {
          position: absolute;
          width: 400px;
          left: calc( 50% - 200px);
      }
      
      • 0
        И чем это лучше такого?

        .box {
            position: absolute;
            width: 400px;
            left: 50%;
            margin-left: -200px;
        }
        
        • 0
          Никто не говорит, что это лучше. На мой взгляд это компактней в данном случае в 2 раза.
        • +1
          Опять же можно CSS 2.1:
          .box {
              position: absolute;
              left: 0;
              right: 0;
              margin: auto;
              width: 400px;
          }
          
          • 0
            Не очень понимаю смысл написанного? Left: 0 и right: 0 при условии, что ширина указана не имеет на мой взгляд никакого смысла.
            • 0
              Вы забыли про margin.
              • 0
                Хм, интересно. Для меня такое поведение — шок. Спасибо, пошел разбираться почему это работает именно так.
                • 0
                  Всё логично: margin: auto равномерно распределяет поля. Это действует даже по вертикали при аналогичных условиях.
                  • 0
                    Спасибо, видимо мне стоит получше ознакомиться с документацией по абсолютным элементам.
                  • 0
                    В том-то и проблема, что такое поведение не совсем очевидно по написанному коду, к тому же может зависеть от условий. Когда видишь margin-left: -200px, и тем более left: calc( 50% — 200px), сразу можно понять, что именно происходит.
                    • 0
                      Магические числа (200px) заведомо не могут быть понятнее.
                      • 0
                        Чтобы справится с магическими числами можно использовать комментарии или переменные в SASS (или другом любимом препроцессоре).
                        • 0
                          Теперь напишите этот код и объясните чем он настолько понятней.
                          • 0
                            чистый css
                            margin-left: -200px; // половина ширины модального окна

                            или SASS
                            margin-left: -( $modal_width / 2 );
                            • 0
                              Весь блок напишите. Сразу увидите, что ни разу не более понятно. Тем более что препроцессоры — сами по себе хак с кучей недостатков.
              • 0
                .box {
                    margin: auto;
                    width: 400px;
                }
                

                так, кстати, тоже работает. ;)
                но только по горизонтали. зато не выбивается из потока (не абсолютное).
        • 0
          Функция calc — очень полезна, жаль что нет полной поддержки браузерами.
          • 0
            Лично я надеюсь, что к моменту выхода новой версии opera на движке blink позиции internet explorer 8 сильно спадут, и тогда можно будет смело использовать. Хотя тут уже зависит от проекта. У меня на работе допустим поддержка internet explorer от 9 версии, остается только opera.
          • –3
            calc ето просто обалденно, нада попробовать заэмулировать для IE8
            • 0
              Opera не поддерживает

              За оперу можно не бояться — скоро на хромиум поставять. Так что все ништяк
              • 0
                Ну как мне кажется, это произойдет ближе к осени.
                • 0
                  Ну, а раньше не жду)
                  За статью спасибо, была бы возможность поставил б +
              • 0
                Counter позволяет делать шикарные нумерованные списки
                Такие, например:
              • 0
                Верстальщики, пожалуйста, поделитесь примерами использования возможностей CSS описанных в статье.
                • 0
                  Со списками пример уже выше привели, кроме этого использовал только attr для тултипов и rem, который больше не хочу использовать, с ним много мороки)

                Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.