Несподівані CSS властивості, які можна використовувати вже зараз

19

Від автора: під час роботи над проектом Juju GUI, переглядаючи пул запитів, я виявив, що css властивість box-sizing написано без вендорних префіксів. І я подумав, що слід перевірити, а чи потрібні вони перед тим, як звертатися в пул для їх додавання. В пошуках я був приємно здивований, що існує набагато більше властивостей з повною підтримкою, ніж я думав. Я простудіював сайт Can I use і відкрив для себе кілька дуже цікавих речей.

filter: sepia(1); — підтримка в браузерах 78%

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

Я був шокований, коли дізнався, що сьогодні фільтри підтримуються 78% браузерів, а точніше усіма крім Edge, IE і Opera Mini. Тобто можна було б написати наступне:

img {
transition: -webkit-filter .5s;
-webkit-filter: blur(0);
}
.overlay-active img {
-webkit-filter: blur(1);
}

Хоча цього мало для всіх браузерів, вже можна відійти від брудних трюків і скористатися технікою прогресивного поліпшення. До того ж, нічого страшного, якщо користувачі IE побачать просто альфа прозорий шар, а не розмитий.

CSS3 селектори – підтримка в браузерах 97.73%

CSS3 селектори ознаменували нову еру можливостей в CSS і дали цілу купу нових методів. Найцікавіші селектори наведені нижче. [foo^=»bar»], символ ^ це регулярний вираз, який означає, що будуть вибиратися атрибути, що починаються на «bar». Простий приклад використання:

a[href^=»http»] {
background: url(external-icon.svg) no-repeat;
padding-left: 10px;
}

Ми вибираємо всі посилання на сторонні сайти і автоматично додаємо до неї невелику іконку. [foo$=»bar»], схоже регулярний вираз, тільки в цьому випадку розглядається кінець рядка.

a[href$=».pdf]:after {
content: «(PDF)»;
}

У прикладі вибираються посилання на PDF файли і вставляється підпис «PDF», щоб користувач розумів, куди веде це посилання. :nth-child() вибирає елементи за їх появи в послідовності. Наприклад:

li:nth-child(n2) {
background-color: light grey;
}

Будуть обрані кожен другий елемент, до яких застосується світло-сірий фон. Можна використовувати і odd, але я хотів показати приклад з використанням саме nth. :empty вибирає будь-порожній елемент, який не містить в собі нічого, навіть HTML коментарів. Підходить:

Не підходить:

Псевдоклас :empty може бути корисний при приховуванні порожніх елементів з паддингом, які можуть зрушити контент. Також ховається рамка порожніх елементів списку. :not() – селектор заперечення. Елемент вибирається за параметрами. Якщо дорівнює false, то стилі застосовуються.

.menu:not(.is-hidden) {
// стилі
}

foo ~ bar – комбінатор. Працює за принципом foo + bar, але менш суворий. У методі з + буде обраний тільки перший bar після foo. А в методі з ~ будуть вибрані всі bar після foo.

h2 ~ p {
margin-top: 1em;
}

Ви, швидше за все, були під сильним враженням, як і я, що ці селектори погано підтримувалися. Можливо, ви думали, що для їх використання потрібно напружитися трохи більше звичайного і скористатися полифилами або технікою прогресивного поліпшення. Однак я був здивований, коли дізнався, що CSS3 селектори на 97%73% підтримуються у всіх браузерах, навіть в IE8 і вище.

Calc() – підтримка в браузерах 80.75%

Це одна з моїх улюблених нових функцій в CSS. З допомогою calc() в CSS можна обчислювати математичні вирази з різними одиницями вимірювання. Приміром, розташування фонової іконки праворуч від поля вводу.

Всі ми пам’ятаємо, ви додаєте фонову іконку і розміщуєте її right center. Нескладна робота. Ви показуєте готовий дизайн, а замовник просить вас зрушити іконку на 10px вправо від елемента. Іконка йде фоном, і не хочеться створювати заради неї окремий елемент. І ви ставите фон на 90% center. На різних дозволах даний підхід не працює, але тут нам допоможе calc!

.search-field {
background-position: calc(100% — 10px) center;

}

Відмінний варіант. Також якщо ви хочете, щоб плаваючий сайдбар займав всю висоту екрану крім хедера, можна написати:

.sidebar {
height: calc(100% — 50px)
}

З такою гарною підтримкою в 80.75% і відсутністю префіксів пора задуматися над додаванням даної функції в свій арсенал.

CSS-анімація – підтримка в браузерах 90.29%

Після смерті Flash ми шукали, чим заміняти Flash анімацію. На наше щастя CSS анімація з’явилася досить швидко. Мені було цікаво, але я все ж не наважувався використовувати всі ці нові функції без відповідного фолбэка. На даний момент CSS анімація може похвалитися підтримкою в 90.29% з префіксом «-webkit-». Можна сміливо підвищувати юзабіліті ваших UI компонентів. Приміром, анімовані повідомлення, що привертають увагу користувача.

Якщо ви хочете оживити ваш сайт або веб-додаток з допомогою анімації, можна додати трохи руху на початку повідомлення, як у цьому простому прикладі:

.notification-open {
-webkit-animation: dropDown .6s;
-webkit-animation-fill-mode: forwards;
-webkit-animation-timing-function: ease-in-out;
animation: dropDown .6s;
animation-fill-mode: forwards;
animation-timing-function: ease-in-out;
}
@-webkit-keyframes dropDown {
from {-webkit-transform: translate(0,-100px);}
to {-webkit-transform: translate(0,25 px);}
}
@keyframes dropDown {
from {-webkit-transform: translate(0,-100px);}
to {-webkit-transform: translate(0,25 px);}
}

Порада: не анімуються стилі позиціонування типу top і margin. Це викликає перемальовування сторінки, і в деяких випадках змушує браузер заново обчислювати позиції видимих елементів.

@supports – підтримка в браузерах 67.85%

З допомогою @supports можна перевірити, чи підтримується властивість чи ні, і по цій умові стилізувати елементи. Наприклад, правило можна використовувати для перевірки підтримки flexbox. Якщо підтримка відсутня, ми повертаємося до обтеканиям.

@supports (display: flex) {
div { display: flex; }
}
@supports not (display: flex) {
div { float: left; }
}

@supports можна поєднувати з ключовим словом not. Один з підводних каменів в тому, що за допомогою даного правила в більшості випадків ми перевіряємо старі браузери на підтримку нових властивостей. А старі браузери самі по собі не підтримують такий тип запиту.

На момент написання статті правило підтримується на 67.85%. Значення далеко від ідеального, але воно явно перекриває останні версії основних браузерів, що вже добре. Дане правило не підтримується тільки в IE і Opera Mini. Дане правило також корисно, так як ми тепер можемо відмовитися від Modernizr.

Flexbox – підтримка в браузерах 95.4%

Про це я нічого не чув. Та жартую! Про даному інструменті кажуть в сотнях блогів і на різних конференціях. Відмінний інструмент для позиціонування елементів, як горизонтально, так і вертикально. З його допомогою можна легко центрувати елементи або задавати елементи однієї висоти. Також можна змінювати порядок, в якому елементи відображаються на сторінці. Вас коли-небудь просили поміняти порядок зображень і тексту секції для маленьких екранів? Мене просили, і flexbox легко з цим справляється.

@media only min-width(768px) {
.row {
display: flex;
flex-direction: column-reverse;
}
}

І все ж я побоювався використовувати цей інструмент для чогось важливого, так як і з іншими випадками я не вірив у таку високу підтримку. Flexbox може гордо похвалитися своєю підтримкою в 95.4%. Він підтримується у всіх останніх браузерах, навіть в Opera Mini. Відсутня підтримка тільки в IE9 і нижче, але це можна пережити.

3D трансформації – підтримка в браузерах 89.87%

З допомогою даної функції можна позиціонувати елементи в третьому вимірі. Також є властивість перспективи, з допомогою якого можна задати z-index 3D елемента.

Всі ми бачили дивовижної краси приклади використання 3D на чистому CSS, але рівень підтримки в браузерах мене сильно здивував. З підтримкою в 89.87% для префікса webkit дане властивість вже сьогодні можна використовувати. Я б навіть запропонував не додавати фолбэк, так як в більшості випадків функціонал 3D елемента буде працювати. Швидкий приклад – картка, яка буде крутитися і перевертатися, якщо навести на неї миша.

.card {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: rotateX(0deg) rotateY(0deg);
transform: rotateX(0deg) rotateY(0deg);
transition: transform 1s;
}
.card:hover {
-webkit-transform: rotateX(180deg) rotateY(180deg);
transform: rotateX(180deg) rotateY(180deg);
}

Висновок

Я прочитав багато блогів і прослухав ще більше подкастів за front-end розробці, але так і не зрозумів, що потрібно було читати документацію властивостей на сайті Can I use. Серйозно, знімаю капелюха перед творцями сайту.

Якщо ви не впевнені у підтримці тієї чи іншої властивості, Can I use це святий грааль. Рекомендую всім front-end розробникам прочитати на сайті інформацію за всіма властивостями, їх підтримки та відомих проблеми. Місця для покращання навички в CSS не знайти.

Сподіваюся, ви бачите всі ті дивні речі, які можна розробляти за допомогою властивостей з цього поста. 2016 рік – рік, коли можна почати використовувати нові властивості і створювати багатий, захоплюючий досвід роботи з користувачем. Веб-застосунок або ж звичайний сайт, ніколи не чекайте дозволу працювати з новими властивостями. Просто необхідно розуміти рівень підтримки і використовувати відповідний фолбэк. А тепер вперед, користуйтеся новими властивостями!