Css функции. Создание собственных моделей ускорения с помощью функции cubic-bezier(). Другие методы, достойные упоминания
Доброе время суток. Я хочу рассказать вам о тенденции появления функций в 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. Данный атрибут будет позволять вам писать такие вещи, как например:
На текущий момент поддержки этого улучшения нет нигде.
К сожалению данный материал находиться в статусе 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 не поддерживает
Спасибо за внимание, надеюсь вам это пригодиться в нашем порой нелегком деле.
От автора: 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+
- Google Chrome 24+
- Safari 6+
- Opera не поддерживает
Лично мне данная функци очень нравится, так как она позволит немного сократить код когда мне например нужно отцентровать элемент:
CSS может гораздо больше, чем вы от него ожидаете. С каждым годом этот язык становится всё мощнее, получая функционал, который раньше был только у JavaScript. В этой статье мы рассмотрим 8 хитрых трюков с CSS-функциями, для которых не нужен JS.
1. Подсказки (tooltips)
Многие сайты до сих пор используют JavaScript для создания подсказок, но самом деле на CSS их сделать гораздо проще. Самым лёгким решением будет прописать текст подсказки в data-атрибуте HTML-кода, например, data-tooltip="…" . Теперь можно использовать CSS для отображения текста подсказки в функции attr() :
Tooltip::after { content: attr(data-tooltip); }
Всё предельно просто. Конечно, для стилизации нужно больше кода, но, к счастью, для этого есть прекрасная библиотека Hint.css .
2. Использование data-атрибутов и функции attr()
Мы уже использовали attr() для подсказок, но это не единственный способ её применения. В сочетании с data-атрибутами вы можете создать изображение-ярлык с заголовком и описанием, используя лишь одну строку HTML-кода:
Теперь вы можете использовать функцию attr() для отображения заголовка и описания:
Caption::after { content: attr(data-title); ... }
Вот рабочий пример с анимацией, срабатывающей при наведении:
3. CSS-счётчики
То, что можно делать с CSS-счётчиками, похоже на магию. Это не самая известная функция языка, и многие считают, что она почти не поддерживается, но это не так:
CSS-счётчики также прекрасно подходят для отображения динамически изменяющихся чисел в списках, которые можно пересортировать перетаскиванием:
4. Эффект «замерзшего стекла» при помощи CSS-фильтров
Ещё в iOS 7 Apple добавила эффект «замерзшего стекла» - полупрозрачные, размытые элементы. Этот эффект становится весьма популярным. Реализовать его раньше было не так уж и просто - до того, как появились CSS-фильтры, изображения приходилось искажать . Теперь же всё стало намного легче .
6. Улучшенная сетка при помощи calc()
Гибкие сетки - это очень полезная штука, но при работе с ними возникают различные проблемы, связанные в основном с разметкой и размерами блоков. Даже flexbox не справится с этой задачей в одиночку. Но функция calc() , которую можно использовать в качестве значения, может принести много пользы. В этом руководстве приведены примеры использования этой функции. Используя препроцессор наподобие Sass и функцию calc() , создать удобную сетку будет совсем несложно . Кроме того, эта функция поддерживается почти всеми браузерами.
See Can I Use calc? Data on support for the calc feature across the major browsers from caniuse.com.
7. Выравнивание фиксированных элементов
Функцию calc() также можно использовать для выравнивания элементов с фиксированным положением. Например, если у вас есть обёртка с полями переменного размера слева и справа и вам нужно точно выровнять элемент внутри обёртки, то вам придётся поломать голову, выбирая правильный размер отступа. С calc() вы можете сочетать абсолютные и относительные величины для идеального выравнивания:
Wrapper { max-width: 1060px; margin: 0 auto; } .floating-bubble { position: fixed; right: calc(50% - 530px); /* 50% - half your wrapper width */ }
Функция 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 (Черновик спецификации ) - первая черновая версия стандарта.
