8 найсучасніших функцій CSS (і як їх використовувати)

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

CSS GRID приймає макети на нові рівні, які не видно раніше, спеціальні властивості вводять концепцію змінних, тоді як функція запиту перевіряє підтримку браузера. Запит засобів масової інформації переміщує рівень з новими властивостями доступності, змінні шрифти пропонують максимальну творчість з мінімальним кодом, під час зручності прокрутки усуває потребу в JavaScript. Перевірте наше прохолодний Анімація CSS Приклади, щоб побачити, що ви можете створити. Або, щоб побудувати сайт без коду, спробуйте це Будівельники веб-сайту .

Для тих, хто хоче отримати Creative, є фігури CSS для унікальних макетів та безліч режимів суміші та фільтрів для введення ефектів дизайну стилів Photoshop. Читайте далі, щоб дізнатись, як ви можете використовувати ці функції, спробуйте у своїх останніх збірних. Але пам'ятайте, що складний веб-сайт означає, що вам потрібно веб хостинг Сервіс, який може підтримувати ваші потреби.

01. Спеціальні властивості

Якщо ви використовуєте препроцесор, як SASS, або дійсно, мова програмування, як JavaScript, ви не сумніваєтеся, будуть знайомі з концепцією змінних - значення, які визначаються для повторного використання у вашому коді. Спеціальні властивості дозволяють нам зробити це в наших CSS, без необхідності передпроцесорами. Змінні можуть бути встановлені на рівні: кореневий рівень (створення глобальних змінних) або обманується в межах селектора. Потім вони можуть бути названі за допомогою синтаксису var (-> - MyVariblename). Наприклад, ми можемо встановити змінну під назвою - пермінаркольора подобається це:

 / * На кореневому елементі (глобальний
змінна) * /
: root {
- - перспективний колір: # F45942;
}
/ * Оброблений до селектора * /
.My-компонент {
- - перспективний колір: # 4171F4;
} 

Тепер ми можемо використовувати цю змінну як значення властивості:

 H1 {
Колір: Var (- -primarycolor);
} 

Спеціальні властивості успадковуються, що має деякі дуже корисні наслідки. Один з тих, хто тема. Візьміть наведений вище приклад: ми можемо визначити глобальну змінну (# F45942 - яскравий оранжевий червоний) для - пермінаркольора На кореневому рівні, то кожен екземпляр, де ми використовуємо цю змінну, значення буде червоним. Але ми також переосмислити ту ж змінну в межах селектора, з іншим значенням (# 4171F4 - середній синій). Тому для кожного прикладу, де ми використовуємо - пермінаркольора Змінна в межах цього селектора, обчислене значення буде синім.

Налаштування за замовчуванням

Обмеження змінних - це чудова особливість, але одна, яка може зловити вас на випадок! Якщо ви намагаєтеся використовувати змінну, яка ще не визначена, отримане значення повернеться до стандартного браузера, або успадковане значення, а не змінну, визначену подальшим каскадом. У деяких випадках може бути доцільним встановити значення за замовчуванням:

 H1 {
Колір: Var (- -primarycolor, синій);
} 

Як власні властивості відрізняються від змінних препроцесорів?

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

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

02. Особливі запити

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

Функціональні запити добре підтримуються в сучасних браузерах, але вони відносно новими, а одна "Gotcha" полягає в тому, що деякі браузери, які ви можете перевірити, щоб підтримка, можливо, не підтримує функціональні запити. Часто найкращий спосіб обробки цього полягає в тому, щоб спочатку надати стилі загибелі (за межами запиту функцій), а потім оберніть усиновлення для підтримки браузерів всередині @supports Правило.

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

Як використовувати функціональні запити

Для перевірки для підтримки єдиної вартості майна ми можемо надати в першу чергу. У цьому прикладі ми надаємо FlexBox FlexBox для браузерів, які не підтримують макет сітки.

. Мій-компонент {
Дисплей: сітка;
}
@Supports (дисплей: сітка) {
.My-компонент {
Дисплей: Flex;
}
} 

03. Media Queries

Ви, швидше за все, звикнути до використання Media Queries, щоб виявити ширину та висоту перегляду, а також тип носія (найчастіше екрана або друк). Специфікація запитів на рівні 5 приносить нам деякі нові функції медіа до (необов'язково) тесту для, які вже підтримуються в деяких браузерах. Вони пропонують деякі великі переваги для доступності.

Користувачі з вестибулярними розладами, і ті, хто страждає від хвороби руху, не можуть цінувати веб-сторінки з великою кількістю руху, таких як анімації та ефекти прокручування паралакса. Використовуючи засоби масової інформації, ми можемо надати користувачам, які вибираємо з альтернативою зниженого руху.

. Мій-елемент {
Анімація: Трястіть 500ms легкість у вигляді 5;
}
@media (віддає перевагу-знижену рух: зменшити) {
. Мій-елемент {
Анімація: Ні;
}
} 

Це стає все більш популярним для веб-сайтів, щоб забезпечити альтернативну темну тему. Free Forms-Scheme дозволяє нам запитувати, чи користувач встановив широкосмуговий уподобання (використовуючи ключові слова темно, світло або відсутність переваги), а також показувати відповідну колірну схему.

 / * Media Queries 02 * /
тіло {
Фон: лінійно-градієнт (до
нижній, # b5faff, # ffe2b4);
}
@Media (віддає перевагу-колір-схему: темно) {
тіло {
Колір: білий;
Фон: лінійно-градієнт (до
нижній, # 0c1338, # 3E3599);
}
} 

04. Змінні шрифти

Загалом, якщо ми хочемо включити ряд різних шрифтів з тієї ж сім'ї на нашій веб-сторінці, нам потрібно буде завантажити таку ж кількість файлів шрифтів. Чим більше файлів шрифтів, які ви завантажуєте, тим більше вага, яку ви додаєте до своєї сторінки, за допомогою впливу на продуктивність - так, звичайно, для завантаження максимум три-чотири файли шрифтів (залежно від бюджету продуктивності).

Змінні шрифти змінюють все це. Вони дозволяють нам завантажувати один файл шрифту для всієї сім'ї шрифту. Хоча цей файл, як правило, буде більшим, ніж один шрифт, якщо ви хочете скористатися різними вагами та стилями, то змінний шрифт є більш виконаним рішенням. Якщо ви купили всю сім'ю шрифту, не забувайте безпечно розбити його хмара зберігання Таким чином, ви не втрачаєте свої файли!

Ось варіація

Не тільки це, але і з змінними шрифтами, ми не обмежуємося невеликою підмножиною ваги шрифтів. При роботі з регулярними шрифтами доступні ваги шрифтів наведені в множинах 100. Як правило, 400 може бути звичайною вагою, 300 легкою вагою, а також 700 сміливої ​​ваги - з різними сім'ями, що постачають більше ваг або менше. Змінними шрифтами мають вісь варіації, яка забезпечує нам ряд значень для властивостей, таких як вага шрифту. Шрифт може мати вісь 1-900, яка забезпечить нам доступ до 900 різних ваг!

Ось варіації не обмежується вагою. Змінними шрифтами можуть мати різні осей для X-висоти, нахилу, довжини серійної та контрастності (щоб вибрати лише кілька прикладів) - це означає, що один файл шрифту може дати нам доступ до сотень, або навіть тисяч варіацій! Ми могли б навіть анімувати ці властивості, дозволяючи нам досягти деяких дійсно цікавих ефектів. Манді Михайло ( https://codepen.io/mandimichael ) має ціле навантаження творчих демо, які дійсно перевіряють межі.

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

Майте на увазі, якщо ви хочете скористатися змінними шрифтами прямо зараз, вам потрібно переконатися, що ви використовуєте найновішу операційну систему - вони не працюватимуть на старшій OSS.

Налаштування шрифту-варіації

Хоча ми можемо легко змінити масу шрифту шрифт-вага Власність CSS, Налаштування шрифту-варіації це нова власність, яка дає нам повний доступ до різних осей відмінності шрифтів. До них відносяться обидва зареєстрованих осей, так і спеціальних осей.

Зареєстровані осі

Є п'ять різних зареєстрованих осей, які відповідають різним властивостям CSS. Кожен з них має те, що називається "тег вісь". Зареєстровані осей: топ (маса шрифту), вогнище (шрифт-розтягування), безліч (стиль шрифту: косий / кут), італьний (стиль шрифту: курсив), опча (Шрифт-оптичний розмір). Ми можемо отримати доступ до цих осей або майно CSS, або з Налаштування шрифту-варіації .

Ці осі не обов'язково включаються до кожного змінного шрифту (деякі можуть мати лише одну або дві осей), але вони, ймовірно, будуть найпоширенішими.

Митні осі

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

Обидва типи осей повинні бути виражені як чотириколісний тег. Зареєстровані осей повинні бути малими, а спеціальні осей є великими. Обидва можуть бути об'єднані в властивості налаштувань шрифтів-варіації. Налаштування Font-Variation - це анімація, що може дозволити деякі дуже прохолодні ефекти UI! Деякі дуже цікаві експерименти були виготовлені за допомогою значків шрифтів.

05. Графічні ефекти

Якщо ви знайомі з інструментами дизайну, таких як Photoshop та Illustrator, ви можете знати про режими суміші та способу їх використання для створення різних ефектів на зображенні. Спосіб роботи режимів змішування полягає в тому, щоб об'єднати два або більше шарів, використовуючи математичні формули для розрахунку отриманого значення для кожного пікселя. Шари можуть бути що-небудь - зображення, градієнти або плоскі кольори. Деякі режими Blend виробляють потемнівний результат (наприклад, помноження, який помножує значення пікселів шарів), деякий легше (наприклад, екран та накладання). Ми не повинні розуміти математику, щоб використовувати їх. Граючи з різними режимами змішування може дати нам хороше відчуття, для яких з них виробляють бажані результати при поєднанні з різними шарами.

За допомогою властивостей CSS Mix-Blend-Mode і Режим фону-суміші , ми можемо досягти ефектів, подібних до фотошоп, у браузері. Обидва властивості приймають однакові значення, але трохи по-різному працюють.

Режим фону-суміші

Режим фону-суміші Поєднується разом з фоновими шарами елемента, який ми націлюємо. Наш елемент може мати фонові зображення, кольори та градієнти, і вони всі будуть змішуватися один з одним, не впливаючи на вміст переднього плану. Ми можемо вказати кілька значень для Режим фону-суміші , один для кожного фонового шару.

. Мій-елемент {
Фон: URL (#myurl),
Лінійний-градієнт (45deg, RGBA (65, 68,
244, 1), РГБА (203, 66, 244, 0,5)),
RGBA (244, 65, 106, 1);
Розмір фон: обкладинка;
Режим фону-суміші: екран,
помножити;
} 

Mix-Blend-Mode

Mix-Blend-Mode Вміхає, як елемент поєднується з батьками та його братами і сестрами, включаючи будь-який передній план та фонове вміст, а також псевдоелементи. Деякі цікаві творчі ефекти можуть бути досягнуті шляхом змішування, накладених псевдо-елементів (:: до та :: після).

. Мій-елемент {
Фон: RGB (244, 65, 106);
Mix-Blend-Mode: Помножте;
} 

Фільтри CSS

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

Перетворити в чудові

Ми можемо маніпулювати кольорами елемента з більшою ступенем контролю, ніж покладаючись на режим суміші. Фільтри можуть конвертувати зображення до сірого, відрегулюйте яскравість, контрастність та насиченість, розмити елемент або додати тінь. Вони також можуть також бути анімовані, і чудово виглядати з ефектами наводу.

Фільтри SVG

Фільтри CSS фактично спрощені версії фільтрів SVG. CSS фільтрувати власності також займає URL () Функція, що дозволяє нам проходити в URL-адресі фільтру SVG. Фільтри SVG надзвичайно потужні та дозволяють для деяких неймовірних ефектів зображення - але вони також набагато складніші, ніж функції фільтра CSS! Sara Soueidan має чудову серію статей на коробках, якщо ви зацікавлені в зануренні до кодування власних користувацьких фільтрів SVG. Перевірте статтю https://tympanus.net/codrops/2019/01/15/svg-filters-101/

Обрізання та маскування: за прямокутниками

Ми звикли мати справу в коробках в Інтернеті, але не все повинно бути прямокутним! Обрізання та маскування - це дві сторони тієї ж монети, і різні способи приховувати та показувати різні частини елемента таким чином, щоб фон показує. Це дає нам силу, щоб запровадити цікаву та творчу форму до наших конструкцій.

Кліп-шлях

Точний Кліп-шлях () Властивість дозволяє нам "вирізати" елемент, визначивши шлях. Це займає ряд основних функцій форми, Вставка (), коло (), еліпс (), або багатокутник () , що дозволяє нам ремонтувати більш складні вирізні форми, використовуючи пари XY координує, щоб визначити шлях. Крім того, ми також можемо пройти в SVG Path з використанням Шлях () функція або використання URL () Щоб забезпечити ідентифікатор шляху SVG.

Не всередині шляху

Обрізання елементів кліпси все за межами шляху ви визначаєте, але сам елемент все ще є прямокутником. Якщо у вас є вміст, який виходить з межі шляху кліпу, то теж буде обрізана - вона не буде обертати всередині форми.

Маска-зображення

маска-зображення Дозволяє показати та приховати частини зображення за допомогою зображення (SVG або прозорий PNG) або градієнт як маска. На відміну від кліп-шлях Ми можемо додати текстуру до наших зображень з маскуванням, оскільки джерело маски не повинна бути шлях - це дозволяє ступеня прозорості.

06. Форми CSS

Специфікація фігур CSS дозволяє нам обгортати текст навколо плаваючих геометричних фігур, створюючи деякі цікаві, журнальні макети. Це робиться можливим за допомогою зовнішній майно. Схожий на кліп-шлях , ми можемо дати цю власність основну функцію форми Коло (), еліпс (), вставка (), багатокутник () , або URL-адреса до шляху SVG, і насправді дві роботи в гармонії дуже добре! зовнішній ефективно обернеться, але це не вплине на плаваючий елемент. Якщо ми хочемо, щоб текст виглядав, як він обгортає навколо зображення або плаваючого об'єкта, ми можемо використовувати те саме значення для кліп-шлях . Використання мандрівка Щоб додати пробіл між шляху форми та закупорювання вмісту. Подивитися на Матеріал & amp; Дурниця Сайт, щоб побачити, як фігури CSS використовується для обертання тексту навколо центрального зображення.

Firefox має a Редактор форми-шляху На панелі Dev Tools, яка особливо корисна для роботи з складними формами. Однак, використовуйте з обережністю. Обгортання переднього краю абзацу тексту чудово підходить для художнього ефекту, але не завжди чудово для користувацького досвіду. Комплексні племінні фігури можуть зробити блоки тексту важче читати. Для важливого вмісту ви, можливо, захочете керувати.

07. Scrawing Snowing

Багато веб-сайтів скористаються бібліотеками JavaScript, щоб забезпечити тонкий, нативний досвід прокрутки, де вміст "знімає", щоб вказувати, як прокрутки користувачів. Тепер, за допомогою специфікації Snaps SnoP, ми можемо зробити це право в межах нашого файлу CSS - мало необхідно імпортувати у важких модулях JS, щоб роздути вашу сторінку!

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

Snowing Snoppe може бути ще більш ефективним, коли поєднується з іншим новим значенням властивості CSS - Позиція: липкий . Ця позиція значення "палить" елемент до заданого положення під час прокрутки в межах контейнера - інша поведінка, яка була лише можлива лише за допомогою JavaScript. Ознайомтеся з Snaps з позицією: приклади липкого та перехрестя .

08. CSS Grid та макети

Фронтальні розробники мають зламану макет з будь-якими інструментами, які можна було б використовувати в той час - останнім часом Flexbox, який багато сучасних систем використання сітки. Але Flexbox ніколи не була розроблена для побудови строгі сітки - її мета - гнучкість!

CSS Grid - це перша специфікація, яка призначена для двовимірного макета, що дозволяє нам повний контроль над створенням макета та розміщення елементів як в рядку, так і на осі стовпчиків. Створення реадмірного макета з сіткою не вимагає Calc () або злому з негативними полями. Секретна зброя - це одиниця FR - нова одиниця ексклюзивна для сітки. Розміри одиниць одиниця (рядки та стовпці) як частка доступного простору. Вона враховує будь-які фіксовані доріжки, жолоби та вміст, а потім розподіляє решту простору відповідно. Jen Simmons придумав термін "внутрішній веб-дизайн", щоб описати нову епоху веб-макета, що входить до Інтернету.

Як використовувати сітку CSS

Сітка вимагає елемента з значенням властивості дисплея, встановленим для сітки, щоб виступати як сітка контейнера. Прямі діти сітки є елементами, які можуть бути розміщені на сітці. Ми використовуємо властивості Грид-шаблон-ряди і Сітки-шаблони-стовпці визначити доріжки (рядки і стовпці) сітки, і колонка-розрив і розрив визначити жолоби (прогалини між доріжками).

 .grid {
Дисплей: сітка;
Грид-шаблон-стовпці: повторити (4, 1FR);
Грид-шаблони-ряди: повторити (4, 200px);
Розрив: 20px;
} 

Ми використовуємо повторити () функція, щоб зберегти код більш лаконічним, як альтернативу Longhand (наприклад, Grid-шаблони-стовпці: 1FR 1FR 1FR 1FR ). Цей приклад також використовує скорочення розрив за розрив і колонка-розрив .

Код вищезазначеного дає нам чотири рядові доріжки, кожний високий рівень 100px та чотири стовпчики, які кожен заповнює рівну частку доступного простору, використовуючи одиниця FR.

Варто зазначити, що це не єдиний спосіб створити сітки. Неявні доріжки також можуть бути створені шляхом розміщення елементів сітки. Це корисно прочитати трохи про це, якщо ви використовуєте сітку, оскільки вона платить, щоб отримати глибше розуміння того, як сітка поводиться в різних умовах, і може зробити кодування макету набагато простіше.

Ми можемо розміщувати елементи на сітку, посилаючись на номери лінії сітки, які є числовими лініями, які сидять між кожною доріжкою. Тут ми використовуємо скорочення сітка-колонка і сітка-рядок за сітка-стовпчик-початок , сітка-колонка-кінець , сітка-рядок-початок і сітка-рядок-кінець . Вони сказали браузер, на якому лінія наш елемент повинен починатися і закінчити кожну вісь.

 .ITEM {
сітка-колонка: 1/4;
Грид-рядок: 2;
} 

Grid надає нам різні способи розміщення предметів: ми могли замість цього назвати наші лінії сітки:

 .grid {
Дисплей: сітка;
Grid-шаблони-стовпці: [image-start] 1fr
 1fr 1fr [image-start] 1FR;
Грид-шаблони-ряди: 200px [image-start]
 200px 200px [Image-End] 200px;
Розрив: 20px;
} 

Альтернативно, Грід-шаблон-область Власність дозволяє нам "залучити" сіткою макету з текстом.

 .grid {
Дисплей: сітка;
Грид-шаблон-стовпці: повторити (4, 1FR);
Грид-шаблони-ряди: повторити (4, 200px);
Розрив: 20px;
Грид-шаблон-області:
". . . . '
'Зображення зображення зображення.
'Зображення зображення зображення.
". . . . ';
} 

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

 .image {
Grid-area: зображення;
} 

Ця стаття була опублікована в журналі Creative Web-дизайну Веб-дизайнер . Купити проблему 290 зараз.

• 10 кращих каркасів CSS у 2019 році
• Як додати анімацію до SVG з CSS
• 52 Інструменти для веб-дизайну, щоб допомогти вам працювати розумнішим у 2019 році