12 класних функцій CSS3, які ви нарешті можете використовувати, CSS
Якщо ви схожі на мене, то коли ви бачите вражаючий приклад нової функціональності CSS3, вам не терпиться почати використовувати його на ваших веб-сайтах. Звичайно, потім ви помічаєте, що це доступно лише в одному або двох основних браузерах (і ніколи серед них немає IE), тому найчастіше ви вирішуєте почекати.
У мене для вас гарні новини: останні версії браузерів реалізують кілька класних функцій, які нарешті підтримуються скрізь, і ви можете почати використовувати їх прямо зараз!
Невелика пересторога: більшість цих функцій не працюють у старих версіях IE (9 і нижче). Якщо частка цих браузерів серед ваших відвідувачів велика, я боюся, для реалізації цих функцій вам доведеться використати обхідні варіанти. Ну а для решти, ось що можуть нам запропонувати сучасні браузери:
1. Анімація та переходи засобами CSS
Анімація засобами CSS доступна в усіх основних браузерах, навіть в IE (починаючи з 10 версії). Існують два способи створення анімації в CSS.
Другий спосіб визначення анімації трохи складніше - він передбачає опис особливих моментів анімації за допомогою правила @keyframe. Це дозволить вам створити анімацію, що повторюється, не залежить від дій користувача і не запускається за допомогою Javascript.
Ви ще багато чого можете дізнатися про анімацію засобами CSS. Я раджу почати з цієї статті в Mozilla Developer Network (MDN). Якщо вас цікавить підтримка браузерами, дивіться таблицю сумісності .
2. Розрахунок значень за допомогою calc()
Інша чудова нова особливість CSS – функція calc(). Вона дозволяє вам робити прості арифметичні розрахунки у CSS. Ви можете використовувати її дезавгодно, де потрібна довжина чи розмір. Що ще краще, ви можете вільно змішувати різні одиниці, наприклад, відсотки та пікселі. Це робить застарілими безліч хаків розмітки, які ви, найімовірніше, використали в минулому. Вам цього замало? Функція працює в IE9 та вище, без префіксів.
Дізнайтеся подробиці про функцію calc() тут або дивіться таблицю сумісності.
3. Поліпшені селектори
В даний час, якщо ви надаєте ID елементам тільки для того, щоб застосувати до них стилі, ви, швидше за все, робите неправильно. CSS 2.1 і CSS 3 представили кілька потужних селекторів, які можуть зробити вашу розмітку чистіше, а ваші таблиці стилів крутіше.
Наступні селектори підтримуються всіма основними браузерами, включаючи IE9 та вище.
Дізнайтеся подробиці про ці селектори тут або подивіться, які браузери їх підтримують.
4. Генерація контенту та лічильники
Генерація контенту – потужний інструмент у руках розробників – стала доступною завдяки псевдо-елементам ::before і ::after . Ця функція дозволяє використовувати менше коду HTML для досягнення тих же результатів.
Це особливо корисно у випадках, коли вам потрібні додаткові тіні або інші візуальні елементи, яким знадобилися б додаткові елементи span або div . В результаті ви отримаєте менший за розміром та семантично правильний код HTML.
CSS3 також дає псевдо-елементам доступ до лічильників, які можуть збільшуватися за допомогою правила CSS. Вони також можуть отримати доступ до атрибутів батьківських елементів, які їх містять. Дивіться код прикладу нижче.
Генерація контент підтримується скрізь, включаючи IE9 і вище.
5. Градієнти
Градієнти дають веб-дизайнерам можливість створювати гладкі переходи між кольорами.без використання зображень. Градієнти CSS також чудово виглядають на retina-дисплеях, тому що вони генеруються на льоту.
Вони можуть бути лінійними чи радіальними, а також можуть повторюватися. Градієнти були доступні вже протягом деякого часу, і після кількох невеликих синтаксичних змін в останні кілька місяців вони нарешті доступні майже скрізь, без префіксів!
Дивіться детальний опис тут, а таблицю сумісності тут.
Можете собі уявити, що був час, коли ми були обмежені лише жменькою «web-безпечних» шрифтів і нічим більше? Важко повірити, враховуючи, що сьогодні ми маємо сервіси, на кшталт Google Fonts або typekit, які дозволяють вам підключити прекрасні шрифти, просто включивши таблицю стилів у код вашої сторінки.
Використовуючи невеликі доробки, можна змусити веб-шрифти працювати навіть у IE6. Два сервіси шрифтів, згадані вище, беруть цю проблему на себе, тому вам не доведеться нічого робити додатково.
7. Розмір блоків
Найбільший головний біль початківців у CSS – це блокова модель. У творців стандартів, напевно, були свої причини, але інтуїтивно не зовсім зрозуміло, чому на ширину і висоту елемента впливають заповнення та межі.
Ця невелика (шкідлива) особливість ламає розмітку і вносить хаос, але нарешті є спосіб відновити здоровий глузд, використовуючи правило box-sizing. Ви можете встановити значення в border-box, що змусить елементи поводитися так, як ви задумали. Дивіться самі:
Дізнайтеся більше про правила box-sizing тут або дивіться таблицю сумісності .
8. Межі як зображень
Властивість border-image дозволяє відображати нестандартні межі навколо елементів. Кордони містяться в єдиномузображенні (спитайте), де кожен регіон зображення відповідає певній частині кордону. У наступному прикладі зображення використовується як межа.
Для більш детальної інформації, перегляньте сторінку на MDN і цю статтю про трюки CSS. Кордони у вигляді зображень підтримуються у всіх основних браузерах та IE11.
9. Правила Media query
Правила Media query абсолютно необхідні, якщо ви серйозно займаєтеся веб-дизайном. Вони були доступні вже деякий час, і варто згадати, що вони змінили спосіб створення веб-сайтів.
Раніше вам доводилося створювати звичайний веб-сайт, досить широкий, щоб підійти під найменшу роздільну здатність монітора, що використовується в той час; і окрему мобільну версію. Сайти, які ми створюємо зараз, чуйні: вони адаптуються до типу пристрою, орієнтації екрану та роздільної здатності.
Правила Media query напрочуд прості у використанні – все, що вам потрібно, укласти стилі CSS у блок із правилом @media. Кожен блок @media активується, коли дотримується одна або більше умов. Як приклад, спробуйте змінити розмір цієї сторінки . Також у прикладі нижче спробуйте забрати блок @media і перевірити, що зміниться.
Правила media query можуть містити перевірки роздільної здатності та орієнтації екрана пристроїв, глибину кольору, щільність пікселів та багато іншого. Подробиці ви знайдете в цій статті, а також дивіться таблицю сумісності.
10. Множинні фонові зображення
Використовуючи множинні фонові зображення, дизайнери можуть досягти дуже цікавих ефектів. Вони можуть накладати різні зображення один на одного як тло одного і того ж елемента.
Кожне зображення (або шар) окремо може бути зрушене або анімоване, як ілюструє приклад нижче (наведітьмиша на зображення). Всі правила CSS, що стосуються фону, тепер можуть приймати розділений комами список властивостей, кожне для певного фонового зображення:
Додаткова інформація про множинні фонові зображення знаходиться тут. Ця функція широко підтримується браузерами - все нові версії її підтримують (див. таблицю).
11. Колонки CSS
Цей процес безпідставно ускладнений та забирає цінний час розробника від речей, які реально важливі. На щастя, зараз існує спосіб обійти це, використовуючи правило CSS columns :
Це правило широко підтримується, хоча все ще потребує префіксів. Місця, де контент поділяється на колонки, залежать від підтримки браузером тих чи інших правил розбиття та від відмінностей у обробці браузерами прикордонних випадків.
12. 3D трансформація засобами CSS
Ніщо так не тішить око, як вражаюча 3D демонстрація засобами CSS. І хоча застосування подібної трансформації поза демонстрацією або сайтами-портфоліо дуже спірне, 3D CSS пропонує потужну функціональність дизайнерам та розробникам, яка допоможе завоювати серця користувачів, якщо вона грамотно реалізована.
Подивіться код наступного прикладу:
Цей код зроблено на основі нашої форми входу в стилі 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», підготовленою дружною командою проекту Інтернет-технології.