Использование data-атрибутов и функции attr(). Использование пользовательских data-атрибутов и функции attr()

Функция attr() применяется для добавления значения атрибута HTML-элемента в стилевое свойство. Например, можно получить значение атрибута class , а затем использовать его в качестве значения свойства background для изменения цвета.

Обозначения

	Описание	Пример
<тип>	Указывает тип значения.	<размер>
A && B	Значения должны выводиться в указанном порядке.	<размер> && <цвет>
A | B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	normal | small-caps
A || B	Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.	width || count
	Группирует значения.	[ crop || cross ]
*	Повторять ноль или больше раз.	[,<время>]*
+	Повторять один или больше раз.	<число>+
?	Указанный тип, слово или группа не является обязательным.	inset?
{A, B}	Повторять не менее A, но не более B раз.	<радиус>{1,4}
#	Повторять один или больше раз через запятую.	<время>#

×

Значения

<атрибут> Имя атрибута элемента передаваемое в CSS. <тип> Тип значения свойства CSS. Допустимы следующие ключевые слова: string (строки), color (цвет), url (веб-адрес), integer (целое число), number (вещественное число), angle (угол), time (время), deg (градус), а также единицы CSS вроде em, px и др. <значение> Значение, которое будет использоваться в том случае, если атрибута нет или браузер не может его получить.

Между версиями CSS есть небольшая разница по прочтению некоторых особенностей attr() . В CSS2.1 функция attr() может использоваться только совместно со свойством content и всегда возвращает строку в качестве значения. В CSS3 attr() допустимо применять с любым свойством и возвращаемое значение может быть в любом корректном для CSS3 формате.

Пример

Полезный сайт

В данном примере после ссылок с классом site в скобках выводится значение атрибута href , к которому применяется стилевое оформление.

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

• Recommendation (Рекомендация ) - спецификация одобрена W3C и рекомендована как стандарт.
• Candidate Recommendation (Возможная рекомендация ) - группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
• Proposed Recommendation (Предлагаемая рекомендация ) - на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
• Working Draft (Рабочий проект ) - более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
• Editor"s draft (Редакторский черновик ) - черновая версия стандарта после внесения правок редакторами проекта.
• Draft (Черновик спецификации ) - первая черновая версия стандарта.

×

СКАЧАТЬ ПРИМЕРЫ

Если вы похожи на меня, то когда вы видите впечатляющий пример новой функциональности CSS3, вам не терпится начать использовать его на ваших веб-сайтах. Конечно, затем вы замечаете, что это доступно только в одном или двух основных браузерах (и никогда среди них нет IE), поэтому чаще всего вы решаете подождать.

У меня для вас хорошие новости: последние версии браузеров реализуют несколько классных функций, которые наконец-то поддерживаются везде, и вы можете начать использовать их прямо сейчас!

Небольшое предостережение: большинство этих функций не работают в старых версиях IE (9 и ниже). Если доля этих браузеров среди ваших посетителей большая, я боюсь, для реализации этих функций вам придётся использовать обходные варианты. Ну а для остальных, вот что могут нам предложить современные браузеры:

1. Анимация и переходы средствами CSS

Анимация средствами CSS наконец-то доступна во всех основных браузерах, даже в IE (начиная с 10 версии). Есть два способа создания анимации в CSS.

Первый очень прост, он осуществляется через анимацию изменений свойств CSS с помощью декларации transition (переход). С помощью переходов вы можете создать эффекты наведения мыши или нажатия кнопки мыши, или вы можете запустить анимацию, изменив стиль элемента с помощью JavaScript. В примере ниже переход осуществляется при наведении мыши на планету, это вынудит ракету приблизиться.

Второй способ определения анимации немного сложнее – он подразумевает описание особых моментов анимации с помощью правила @keyframe . Это позволит вам создать повторяющуюся анимацию, не зависящую от действий пользователя и не запускаемую при помощи Javascript.

HTML

CSS

Container{ width: 300px; height:300px; margin: 0 auto; position:relative; overflow:hidden; } .planet{ position:absolute; top:0; left:0; width:100%; height:100%; background:url(http://demo.tutorialzine.com/2013/10/css3-features-you-can-finally-use/assets/img/planet.png) no-repeat center center; } .rocket{ position:absolute; top:0; left:0; width:100%; height:100%; background:url(http://demo.tutorialzine.com/2013/10/css3-features-you-can-finally-use/assets/img/rocket.png) no-repeat 50px center; /* Chrome всё ещё требует префикса -webkit- */ -webkit-animation:orbit 2s linear infinite; animation:orbit 2s linear infinite; transition:background-position 0.8s; } .container:hover .rocket{ background-position:80px center; } /* Определяем правила keyframes анимации */ @-webkit-keyframes orbit { from { -webkit-transform:rotate(0deg);} to { -webkit-transform:rotate(360deg); } } @keyframes orbit { from { transform:rotate(0deg); /* Здесь включены свойства -webkit-transform, потому что Chrome может начать поддерживать keyframe без префикса в будущем, но нет уверенности, что он станет поддерживать безпрефиксные свойства transform */ -webkit-transform:rotate(0deg);} to { transform:rotate(360deg); -webkit-transform:rotate(360deg); } }

Вы ещё много чего можете узнать про анимацию средствами CSS. Я советую начать с этой статьи в Mozilla Developer Network (MDN) . Если вас интересует поддержка браузерами, смотрите эту таблицу совместимости .

2. Расчёт значений с помощью calc()

Другая прекрасная новая особенность CSS – функция calc() . Она позволяет вам производить простые арифметические расчёты в CSS. Вы можете использовать её где угодно, где требуется длина или размер. Что ещё лучше, вы можете свободно смешивать разные единицы, например, проценты и пиксели. Это делает устаревшими множество хаков разметки, которые вы, скорее всего, использовали в прошлом. Вам этого мало? Функция работает в IE9 и выше, без префиксов.

HTML

CSS

Container{ /* Расчёт ширины */ width: calc(100% - 40px); background-color:#CDEBC4; color:#6D8B64; text-align:center; padding:25px 0; margin: 0 auto; }

Узнайте подробности о функции calc() здесь или смотрите таблицу совместимости .

3. Улучшенные селекторы

В настоящее время, если вы присваиваете ID элементам только для того, чтобы применить к ним стили, вы, скорее всего, делаете неправильно. CSS 2.1 и CSS 3 представили несколько мощных селекторов, которые могут сделать вашу разметку чище, а ваши таблицы стилей круче.

Следующие селекторы поддерживаются всеми основными браузерами, включая IE9 и выше.

HTML

Это простой параграф текста, к которому применено несколько классных стилей из CSS3...

/* Стили элементов (здесь ничего интересного) */ p{ font-size: 16px; width: 420px; margin: 20px auto 0; text-align:center; } .container{ width: 420px; margin:50px auto 0; overflow: hidden; padding:5px; } .elem{ width:30px; height:30px; margin:4px; background-color:#A0DFAC; float:left; } .elem span{ position:absolute; top:5px; left:5px; right:5px; bottom:5px; border:2px solid #fff; } /* Селекторы, выбирающие первую букву и первую строку: */ p::first-letter{ background-color: #666; color: #FFF; font-size: 24px; font-style:normal; display: inline-block; padding: 0 5px; border-radius: 3px; margin-right: 2px; font-family: serif; } p::first-line{ font-size: 18px; text-transform: smallcaps; font-style: italic; text-decoration: underline; } /* Делаем первый и последний элементы фиолетовыми */ .elem:first-child, .elem:last-child{ background-color:#948bd8; } /* Делаем каждый чётный элемент круглым */ .elem:nth-child(odd){ border-radius:50%; } /* Делаем шестой элемент красным */ .elem:nth-child(6){ background-color:#cb6364; } /* Применяем стили к элементам, содержащим элемент span */ .elem:not(:empty){ background-color:#444; position:relative; -webkit-transform:rotate(25deg); transform:rotate(25deg); } /* Выбираем элементы по атрибутам */ .elem{ background-color:#aaa; } .elem{ background-color:#d7cb89; } /* Значение атрибута должно начинаться с bar. Под это подходят оба элемента */ .elem{ width: 16px; height: 16px; margin: 11px; } /* Элемент, который следует за элементом с атрибутом data-foo="bar2" */ .elem + .elem{ background-color:#78ccd2; }

Узнайте подробности об этих селекторах здесь или посмотрите, какие браузеры их поддерживают .

4. Генерация контента и счётчики

Генерация контента – мощный инструмент в руках разработчиков – стала доступной, благодаря псевдо-элементам ::before и::after . Эта функция позволяет вам использовать меньше кода HTML для достижения тех же результатов.

Это особенно полезно в случаях, когда вам нужны дополнительные тени или другие визуальные элементы, которым бы понадобились дополнительные элементы span или div . В результате вы получите меньший по размеру и семантически правильный код HTML.

CSS3 также даёт псевдо-элементам доступ к счётчикам , которые могут увеличиваться с помощью правила CSS. Они также могут получить доступ к атрибутам родительских элементов, содержащих их. Смотрите код примера ниже.

HTML

CSS

Container{ /* Установка счётчика cnt на 0 */ counter-reset: cnt; position:relative; text-align:center; padding:20px 0; width:420px; height: 160px; margin: 0 auto; } /* Вы можете применить стили к псевдо-элементам и задать их контент так, как если бы они были реальными элементами на странице */ .container::before{ display: block; content:"Наведите мышь на эти элементы:"; font-size:18px; font-weight:bold; text-align:center; padding:15px; } .container span{ display:inline-block; padding:2px 6px; background-color:#78CCD2; color:#186C72; border-radius:4px; margin:3px; cursor:default; } /* Создание счётчика псевдо-элементов */ .container span::after{ /* Каждый раз, когда выполняется это правило, значение счётчика увеличивается на 1 */ counter-increment: cnt; /* Добавление значения счётчика как часть контента */ content:" #" counter(cnt); display:inline-block; padding:4px; } /* Псевдо-элементы могут даже получать доступ к атрибутам своих родительских элементов */ .container span::before{ position:absolute; bottom:0; left:0; width:100%; content:attr(data-title); color:#666; opacity:0; /* Анимация переходов */ -webkit-transition:opacity 0.4s; transition:opacity 0.4s; } .container span:hover::before{ opacity:1; }

Генерация контенте поддерживается везде, включая IE9 и выше.

5. Градиенты

Градиенты дают веб-дизайнерам возможность создавать гладкие переходы между цветами без использования изображений. Градиенты CSS также отлично выглядят на retina-дисплеях, потому что они генерируются на лету.

Они могут быть линейными или радиальными, а также могут повторяться. Градиенты были доступны уже в течение некоторого времени, и после нескольких небольших синтаксических изменений в последние несколько месяцев, они наконец-то доступны почти везде, без префиксов!

HTML

CSS

Container{ text-align:center; padding:20px 0; width:450px; margin: 0 auto; } .container div{ width:100px; height:100px; display:inline-block; margin:2px; box-shadow: 0 0 1px rgba(0, 0, 0, 0.5) inset, 0 1px 1px #DDD; border-radius:2px; color:#666; vertical-align: top; line-height: 230px; font-size: 12px; } #el1{ background:linear-gradient(to bottom, #8dd2d9 , #58c0c7); } #el2{ background:radial-gradient(#77d19e,#46c17b); } #el3{ background:repeating-linear-gradient(-45deg, #de9dd4, #de9dd4 5px, white 5px, white 10px); } #el4{ background:repeating-radial-gradient(#b8e7bf, #b8e7bf 5px, white 5px, white 10px); }

Смотрите детальное описание здесь , а таблицу совместимости здесь .

6. Шрифты

Можете себе представить, что было время, когда мы были ограничены всего лишь горсткой «web-безопасных» шрифтов и ничем более? Сложно поверить, учитывая, что сегодня у нас есть сервисы, вроде Google Fonts или typekit , которые позволяют вам подключить прекрасные шрифты, просто включив таблицу стилей в код вашей страницы.

Существуют даже шрифты значков, такие как fontawesome , содержащие симпатичные векторные значки вместо букв и цифр. Это всё возможно благодаря правилу @font-face, которое позволяет вам определить имя, характеристики и файлы исходного кода шрифтов, к которым вы затем можете обратиться в ваших объявлениях font/font-family.

HTML

Вот мой красивый веб-шрифт!

CSS

h1{ /* Используем шрифт, подключённый в коде HTML: */ font-family: Satisfy, cursive; font-weight:normal; font-size:24px; padding-top: 60px; }

Используя небольшие доработки, можно заставить веб-шрифты работать даже в IE6. Два сервиса шрифтов, упомянутые выше, берут эту проблему на себя, так что вам не придётся ничего делать дополнительно.

7. Размер блоков

Самая большая головная боль начинающих в CSS – это блочная модель . У создателей стандартов наверняка были свои причины, но интуитивно не совсем понятно, почему на ширину и высоту элемента влияют заполнения и границы.

Эта небольшая (вредная) особенность ломает разметку и вносит хаос, но наконец-то есть способ восстановить здравый смысл, используя правило box-sizing . Вы можете установить значение в border-box, что заставит элементы вести себя точно так, как вы задумали. Смотрите сами:

HTML

CSS

Container{ text-align:center; } .container div{ /* Установка свойства box-sizing: */ box-sizing:border-box; /* Firefox всё ещё требует префикса -moz */ -moz-box-sizing:border-box; width:120px; height:120px; display:inline-block; vertical-align:top; } /* Благодаря box-sizing, мы можем установить любые заполнения и границы, какие захотим, а элементы сохранят одинаковый размер */ #el1{ color:#524480; background-color:#B2A4E0; } #el2{ padding:8px; border:10px solid #9ec551; background-color:#fff; } #el3{ padding:32px; background-color:#ccc; }

Узнайте больше о правиле box-sizing здесь , или смотрите таблицу совместимости .

8. Границы в виде изображений

Свойство border-image позволяет вам отображать нестандартные границы вокруг элементов. Границы содержатся в единственном изображении (спрайте), где каждый регион изображения соответствует определённой части границы. В следующем примере изображение используется в качестве границы.

HTML

Поприветствуйте красивую границу в виде изображений!

CSS

p{ text-align:center; padding:20px; width:340px; margin: 0 auto; /* Установка свойств границы и изображения для границы */ border:30px solid transparent; border-image:url(http://demo.tutorialzine.com/2013/10/css3-features-you-can-finally-use/assets/img/border.png) 30 30 round; }

Для более подробной информации, посмотрите страницу на MDN и эту статью про трюки CSS. Границы в виде изображений поддерживаются во всех основных браузерах и IE11.

9. Правила Media query

Правила Media query абсолютно необходимы, если вы серьёзно занимаетесь веб-дизайном. Они были доступны уже некоторое время, и стоит упомянуть, что они изменили способ создания веб-сайтов.

Раньше вам приходилось создавать обычный веб-сайт, достаточно широкий, чтобы подойти под наименьшее разрешение монитора, используемое в то время; и отдельную мобильную версию.Сайты, которые мы создаём сейчас, отзывчивы: они адаптируются к типу устройства, ориентации экрана и разрешению.

Правила Media query удивительно просты в использовании – всё, что вам нужно, заключить стили CSS в блок с правилом @media . Каждый блок @media активируется, когда соблюдается одно или более условий. Как пример, попробуйте изменить размеры этой страницы . Также в примере ниже попробуйте убрать блок @media и проверить, что изменится.

HTML

CSS

/* Стили основного контента и бокового блока */ .container{ width:900px; margin: 0 auto; overflow:hidden; } .main-section{ background-color:#CDEBC4; color:#6D8B64; width:520px; float:left; height:500px; } .sidebar{ background-color:#ccc; width:350px; float:right; height:400px; } .container p{ padding-top:100px; text-align:center; } .note{ text-align:center; padding-top:60px; font-style:italic; } /* Это простое правило media query располагает колонки друг под другом на маленьких экранах */ @media (max-width:900px){ .container{ width:100%; } .main-section, .sidebar{ width:auto; margin-bottom:20px; float:none; } }

Правила media query могут содержать проверки разрешения и ориентации экрана устройств, глубину цвета, плотность пикселей и многое другое. Подробности вы найдёте в этой статье , а также смотрите таблицу совместимости .

10. Множественные фоновые изображения

Используя множественные фоновые изображения, дизайнеры могут достичь весьма интересных эффектов. Они могут накладывать разные изображения друг на друга в качестве фона одного и того же элемента.

Каждое изображение (или слой) по отдельности может быть сдвинуто или анимировано, как иллюстрирует пример ниже (наведите мышь на изображение). Все правила CSS, относящиеся к фону, теперь могут принимать разделённый запятыми список свойств, каждое для определённого фонового изображения:

HTML

CSS

Space{ /* Передаём разделённый запятыми список фоновых изображений: */ background:url("http://demo.tutorialzine.com/2013/10/css3-features-you-can-finally-use/assets/img/rocket_big.png") no-repeat center 70px, url("http://demo.tutorialzine.com/2013/10/css3-features-you-can-finally-use/assets/img/space.jpg") no-repeat bottom center; width:200px; height:200px; margin: 0 auto; border-radius:3px; /* Анимируем расположение обоих фоновых изображений */ transition:background-position 1s; } .space:hover{ /* То же самое относится к таким свойствам, как background-position и repeat */ background-position:35% 20px, top right; }

Дополнительная информация по множественным фоновым изображениям находится здесь . Эта функция широко поддерживается браузерами – все новые версии её поддерживают (смотрите таблицу ).

11. Колонки CSS

Разметку по колонкам было заведомо сложно реализовать в CSS. Обычно для этого приходилось использовать JavaScript или серверную обработку, разделяющую контент на разные элементы.

Этот процесс безосновательно усложнён и забирает ценное время разработчика от вещей, которые реально важны. К счастью, сейчас существует способ обойти это, используя правило CSS columns :

HTML

CSS

Container{ width: 500px; margin: 0 auto; } /* Создать колонки теперь вот так просто: */ .container p{ -moz-columns:3; -webkit-columns:3; columns:3; }

Это правило широко поддерживается , хотя всё ещё требует префиксов. Места, где контент разделяется на колонки, зависят от поддержки браузером тех или иных правил разбивки и от различий в обработке браузерами пограничных случаев.

12. 3D трансформация средствами CSS

Ничто так не радует глаз, как впечатляющая 3D демонстрация средствами CSS. И хотя применение подобной трансформации вне демонстрации или сайтов-портфолио очень спорно, 3D CSS предлагает мощную функциональность дизайнерам и разработчикам, которая поможет завоевать сердца пользователей, если она грамотно реализована.

Взгляните на код следующего примера:

HTML

CSS

Container{ /* Насколько выраженными должны быть 3D эффекты */ perspective: 800px; -webkit-perspective: 800px; background: radial-gradient(#e0e0e0, #aaa); width:480px; height:480px; margin:0 auto; border-radius:6px; position:relative; } .iphone-front, .iphone-back{ /* Включаем 3D трансформацию */ transform-style: preserve-3d; -webkit-transform-style: preserve-3d; /* Мы используем два отдельных элемента div для передней и задней панелей телефона. Следующий код скрывает элемент div, когда тот переворачивается, чтобы отобразить обратную сторону: */ backface-visibility: hidden; -webkit-backface-visibility: hidden; width:200px; height:333px; position:absolute; top:50%; left:50%; margin:-166px 0 0 -100px; background:url(http://demo.tutorialzine.com/2013/10/css3-features-you-can-finally-use/assets/img/iphone.png) no-repeat left center; /* Анимация переходов */ transition:0.8s; } .iphone-back{ /* Задняя панель по умолчанию перевёрнута на 180 градусов */ transform:rotateY(180deg); -webkit-transform:rotateY(180deg); background-position:right center; } .container:hover .iphone-front{ /* Когда мышь находится над контейнером, переворачиваем переднюю панель и прячем её, ... */ transform:rotateY(180deg); -webkit-transform:rotateY(180deg); } .container:hover .iphone-back{ /* ... в то же время, делая видимой заднюю панель */ transform:rotateY(360deg); -webkit-transform:rotateY(360deg); }

Этот код сделан на основе нашей формы входа в стиле Apple . Если вы хотите узнать о 3D трансформациях в CSS подробнее, посмотрите эту детальную инструкцию . Если вам не нужна поддержка старых версий IE, остальные браузеры поддерживают её достаточно широко.

Другие методы, достойные упоминания

Существуют и другие запоминающиеся функции, о которых стоило бы упомянуть. Если вы так ещё не сделали, можете прекратить использовать префиксы для свойств border-radius и box-shadow . Также вы теперь можете использовать data-uri как фоновые изображения во всех браузерах. Opacity также поддерживается везде, также как и очень полезное свойство background-size .

Придётся ещё немного подождать поддержки flexbox , @supports , фильтров, и CSS масок, но я думаю, это ожидание окупится!

Перевод статьи «12 Awesome CSS3 Features That You Can Finally Start Using » был подготовлен дружной командой проекта .

Хорошо Плохо

От автора: CSS способен на гораздо большее, чем многие веб-разработчики полагают. С каждым годом язык разметки стилей становится все мощнее и мощнее, создавая новый функционал в браузерах, который раньше можно было реализовать только через JS. В этой статье мы рассмотрим 8 трюков с функциями CSS, которые совсем не требуют JS.

Тултипы на чистом CSS

Множество веб-сайтов до сих пор используют JS для создания тултипов, однако сейчас их намного проще сделать через CSS. Самый простой способ – это добавить текст тултипа в data-атрибут в HTML коде. Например, data-tooltip=»…». Для отображения текста тултипа внутри функции attr() вам необходимо добавить следующий код CSS к уже имеющейся разметке:

Tooltip::after { content: attr(data-tooltip); }

Tooltip :: after { content : attr (data - tooltip ) ;

Пояснений не нужно ведь, правда? Конечно, необходимо добавить кода и нормально стилизовать тултип, но не беспокойтесь. Чисто для этих целей есть специальная библиотека, написанная на CSS, Hint.css .

Использование пользовательских data-атрибутов и функции attr()

Мы уже задействовали функцию attr() для создания тултипов, однако у нее есть и другие способы применения. При помощи этой функции вместе с data-атрибутами можно создавать превью изображений с заголовком и описанием. И все это делается одной строкой HTML кода:

< a class = "caption" href = "#" data - title = "Vulture" data - description = "..." > < img src = "img.jpg" alt = "Illustration" / > < / a >

Теперь функцию attr() можно использовать для отображения заголовка и описания:

Caption::after { content: attr(data-title); ... }

Caption :: after { content : attr (data - title ) ; . . .

Ниже показан пример превью изображения с всплывающим заголовком по событию hover:

CSS Счетчики

То, что мы можем вытворять с CSS счетчиками похоже на магию. Эта функция не самая известная, и большинство людей подумают, что она плохо поддерживается. Однако все браузеры поддерживают CSS счетчики:

Не стоит использовать CSS счетчики на нумерованных списках (ol). Однако они отлично подходят для постраничной навигации или для отображения чисел под элементами галереи. Вы даже можете посчитать количество выбранных элементов, что не может не впечатлить, учитывая тот крошечный код, который за это отвечает (и совсем без JS).

CSS счетчики также отлично подходят для динамической смены номеров в списке элементов, которые можно перетасовать при помощи мыши:

Как и с предыдущим примером, помните, что с генерируемым контентом возникают проблемы с доступностью.

Эффект матового стекла при помощи CSS фильтров

С выходом iOS 7 Apple подарили нам эффект матового стекла – полупрозрачный, размытый элемент, который похож на матовое стекло. Благодаря Apple, этот эффект стал появляться во многих местах. Воссоздать эффект довольно сложно. До появления CSS фильтров эффект матового стекла приходилось имитировать через размытые изображения. На данный момент CSS фильтры полностью поддерживаются почти во всех браузерах, воссоздать этот эффект намного проще.

В будущем мы сможем создавать похожие эффекты с помощью backdrop фильтров и функции filter(), которые сейчас поддерживаются только в Safari.

Использование HTML тегов в качестве фоновых изображений

Обычно в качестве фонового изображения или градиента вы указываете файлы JPEG или PNG. А знали ли вы, что с помощью функции element() в качестве фонового изображения можно указать тег div? На данный момент функция element() поддерживается только в Firefox:

Возможности функции почти бесконечны, вот пример с MDN.

Умные сетки при помощи calc()

Жидкие сетки – отличный инструмент, однако есть несколько серьезных проблем. К примеру, нельзя сделать разделители сверху и снизу одного размера с разделителями слева и справа. Кроме того, в зависимости от используемой системы сеток, разметка просто захламлена. Даже flexbox нельзя назвать лучшим решением, однако с функцией calc(), которую можно использовать в качестве значения в CSS, сетки могут стать гораздо лучше. В этом уроке на SitePoint Джордж Марцукос показывает несколько практических примеров, среди которых сетка-галерея с идеальными отступами. С CSS препроцессорами создание системы сеток может стать невероятно простым занятием, а сама сетка будет очень проста в обслуживании. Поддержка функции очень хорошая, обязательно используйте функцию calc().

Выравнивание элементов со свойством position: fixed при помощи CSS функции calc()

Еще один пример использования функции calc() – выравнивание элементов с фиксированным позиционированием. К примеру, у вас есть блок-обертка для контента с жидкими отступами слева и справа, и вы хотите точно выровнять фиксированный элемент внутри контейнера. Вам нужно было бы потратить кучу времени на вычисление точных значений для свойств right или left. Однако с calc() вы можете комбинировать относительные и абсолютные значения для идеального выравнивания.

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

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

• Internet explorer 9+
• Mozilla Firefox 19+
• 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 я думаю тоже многие знакомы.

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

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

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 появляются функции, и они позволяют делать то, что раньше делал , и я считаю, что это прекрасно. На этом о функциях я закончил.

Rem, vw и vh

Значение 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+
• Chrome 24+
• Safari 6+
• Opera не поддерживает

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