7 речей, які вміє CSS і про яких ви не знали

18

Від автора: CSS і JavaScript, хочете – вірте, хочете — ні, стали перетинатися один з одним, у міру того як у CSS з’являються нові можливості. Коли я писав статтю 5 способів взаємодії CSS і JavaScript, про яких ви не знали, люди були здивовані тим, як CSS і JavaScript можуть перетинатися. Сьогодні я виділю сім завдань, які можна виконати на CSS, без залучення зображень або JavaScript.

CSS @supports

Будь-який хороший фронт-енд розробник тестує підтримку браузером певних можливостей до їх застосування. Тестування підтримки завжди здійснювалося за допомогою JavaScript, і багато використовували Modernizr, вражаючий набір утиліт з безліччю функціоналу для тестування можливостей браузера. Однак, з’явився новий API для того, щоб тестувати можливості браузера за допомогою CSS: @supports. Тут можна побачити кілька прикладів того, як працює @supports:

/* базове використання */
@supports(prop:value) {
/* more styles */
}
/* даний використання */
@supports (display: flex) {
div { display: flex; }
}
/* також тестуються префікси */
@supports (display: -webkit-flex) or
(display: -moz-flex) or
(display: flex) {
section {
display: -webkit-flex;
display: -moz-flex;
display: flex;
float: none;
}
}

Нова можливість @supports, яка також має аналог на JavaScript, з’явилася вже давно, і ми з нетерпінням чекаємо приводу її використовувати!

CSS Filters

Напишіть сервіс для зміни відтінків зображення і ви можете продати його Фейсбуку за мільярд доларів! Звичайно ж, це спрощення, але написання фільтрів для зображення – це не ракетобудування. Я написав крихітне додаток під час першого тижня роботи в Mozilla (яке перемогло в конкурсі, це до слова), яке використовувало математику JavaScript для того, щоб створювати фільтри для зображень з допомогою canvas, але сьогодні ми можемо створювати фільтри для зображень лише на CSS!

/* простий фільтр */
.myElement {
-webkit-filter: blur(2px);
}
/* складний фільтр */
.myElement {
-webkit-filter: blur(2px) grayscale (.5) opacity(0.8) hue-rotate(120deg);
}

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

Подивитися демо

Покажчики подій і блокування кліків

Властивість CSS pointer-events надає метод для ефективного відключення елемента, таким чином, що клік по посиланню не викликає подія JavaScript:

/* нічого не робити по кліку або активації */
.disabled { pointer-events: none; }
/* це _не_ спрацює через pointer-events: none application */
document.getElementById(«disabled-element»).addEventListener. («click», function(e) {
alert(«Clicked!»);
});

У прикладі вище, подія кліка навіть не буде викликано, завдяки значенню CSS pointer-events. Я знаходжу це надмірно корисним, оскільки вам не потрібно скрізь робити перевірки за назвою класу чи атрибуту для того, щоб переконатися, що щось відключено.

Подивитися демо

Виїзд вниз і вгору

CSS дає нам можливість створювати переходи і анімації, але часто потрібні JavaScript бібліотеки для того, щоб змінювати якісь речі і контролювати анімацію. Однієї такої популярної анімацією є ефекту виїзду вниз і заїзду назад, при цьому більшість не знає, що цього ефекту можна домогтися за допомогою CSS.

/* слайдер у відкритому стані */
.slider {
overflow-y: hidden;
max-height: 500px; /* приблизна максимальна висота */
transition-property: all;
transition-duration: .5s;
transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}
/* закриваємо класу «closed» */
.slider.closed {
max-height: 0;
}

Мудре використання властивості max-height дозволяє елементу збільшуватися і зменшуватися при необхідності.

Подивитися демо

Лічильники на CSS

У нас часто виникає непорозуміння з приводу того, що означає слово «лічильник» в інтернеті, на лічильники на CSS – це щось зовсім інше. CSS лічильники дозволяють розробникам збільшувати лічильник і показувати його для даного елемента з допомогою :before або :after:

/* ініціалізація лічильника */
ol.slides {
counter-reset: slideNum;
}
/* збільшення значення лічильника */
ol.slides > li {
counter-increment: slideNum;
}
/* показ значення лічильника */
ol.slides li:after {
content: «[» counter(slideNum) «]»;
}

Ви часто бачите CSS лічильники, використовувані в слайд шоу на конференціях і навіть в списках, таких як зміст.

Подивитися демо

CSS класи в Юнікод

Є безліч документів, присвячених кращій практиці CSS, і всі вони починаються з іменування CSS класів. Те, чого ви ніколи не побачите в цих документах – це як використовувати символи Unicode для іменування класів:

.ಠ_ಠ {
border: 1px solid #f00;
background: pink;
}
.❤ {
background: lightgreen;
border: 1px solid green;
}

Мабуть, не варто використовувати їх. Але ви можете, теоретично.

Подивитися демо

Круги на CSS

CSS трикутники – це цікава техніка, також як і кола на CSS. Використовуючи border-radius не зовсім за призначенням, ви можете створювати бездоганні кола!

.circle {
border-radius: 50%;
width: 200px;
height: 200px;
/* ширина і висота можуть бути будь-якими, але однаковими */
}

Ви можете додавати градієнти вашим колам і навіть використовувати CSS-анімації, щоб повертати їх! У CSS незабаром з’явиться більш формалізоване API для створення Фігур, але ви можете створювати кола вже зараз!

Подивитися демо

7 речей, які вміє CSS і про яких ви не знали

Ось і все: сім прийомів CSS, які вас здивують. Кілька дуже корисних, кілька для рідкісних випадків.