8 трюків з функціями в CSS

33

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

Зринаючі підказки. на чистому CSS

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

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

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

Використання користувальницьких data-атрибутів і функції attr()

Ми вже задіяли функцію attr() для створення тултипов, проте у неї є і інші способи застосування. За допомогою цієї функції разом з data-атрибутами можна створювати превью зображень з заголовком і описом. І все це робиться одним рядком HTML коду:

Illustration

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

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

}

Нижче показаний приклад превью зображення з спливаючим заголовком події hover:

Зверніть увагу: у генерованого контенту можуть виникнути проблеми з доступністю. Тут вам допоможе стаття на тему доступності генерованого CSS контенту.

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() ви можете комбінувати відносні і абсолютні значення для ідеального вирівнювання:

.wrapper {
max-width: 1060px;
margin: 0 auto;
}
.floating-bubble {
position: fixed;
right: calc(50% — 530px); /* 50% — половина ширини контейнера */
}

Анімація за допомогою функції cubic-bezier()

Щоб зробити інтерфейс сайту або програми більш привабливим, ви можете використовувати анімацію. Однак стандартний набір функцій анімації досить обмежений. Приміром, «linear» або «ease-in-out». Стандартні можливості не дозволяють створити такий вид анімації, як анімація з відскоком. За допомогою функції cubic-bezier() ви можете анімувати елементи, як завгодно.

Використовувати cubic-bezier() можна двома способами. Перший – зрозуміти математику і створити свою функцію. Другий – скористатися генератором cubic-bezier. Якщо чесно, я волів би другий варіант.

Висновок

Розумний підхід до CSS функцій не тільки вирішує відомі проблеми типу створення розумної системи сіток, але і дає вам свободу для фантазії. Підтримка в браузерах стає все краще і краще, так що вам обов’язково варто переглянути свій CSS код і поліпшити його функцією calc().