9 недооцінених можливостей CSS
Джерело фото: https://bit.ly/3RcV759
За більше як 20 років свого існування CSS став стандартом стилізації веб-сторінок. Продовжують виходити нові специфікації (наприклад, CSS4), що додають нові круті можливості: анімації, трансформації, нові одиниці виміру. В швидкому світі веб-розробки ми часто пропускаємо повз себе багато важливих функцій. Сьогодні ми поговоримо про те, що заслуговує уваги, але чомусь майже не використовується розробниками.
1. Функція calc()
сalc() це, напевно, найкрутіша фіча в цьому списку. Якщо ви колись нею користувались, то погодитесь, що простими словами її можна описати так: “Я хочу, щоб цей елемент займав ось таку ширину, мінус стільки-то пікселів.”
.box {
width: calc( 100% - 20px );
}
Схоже на який елемент препроцесору типу SASS, але насправді це вбудована можливість CSS, в якій використовується вже відрендерені розміри елементу (що неможливо при використанні препроцесорів).
Елемент .box, який вказано на прикладі вище, буде займати “100% своєї гіпотетичної ширини, мінус 20 пікселів.” Ця фіча буде корисна для таких цілей як додавання елементів з фіксованою шириною разом з елементами з різноманітною шириною.
2. Медіа-запити для екрану та сенсору
На жаль, поки що такі медіа-запити погано підтримуються браузерами (~70%). Зазвичай для адаптивної верстки використовують медіа-запити ширини екрану, але вже є можливість визначити чим користувач здійснює керування сторінкою. Вони дозволяють вам запитати у браузера: "Цей користувач використовує свій палець чи мишку?" для того, щоб створити кнопки відповідного розміру.
@media( pointer: coarse) { }
Можливі значення:
none - в даному пристрої не передбачено вказівника.
coarse - вказівник з обмеженою точністю. Це можуть бути тачскріни чи Xbox'овський Kinect.
fine - точний вказівник. Наприклад, мишка, тачпад, графічний планшет.
Підтримка
Вона лишає бажати кращого, але все ж позитивні зрушення є. Так Webkit, Blink та Edge вже підтримують цю можливість, а от Gecko/Firefox ще ні.
3. Змінна currentColor
Додана в CSS3, ця вбудована змінна вказує на... поточний колір (color) елементу!
.card {
color: #333333;
}
.card--error {
color: #ff0000;
}
.card__guts {
border-top-color: currentColor;
}
Michael Wong зробив важливе зауваження. Не слід використовувати цю змінну там, де
колір і так каскадно успадковується. В своєму
прикладі я допустив помилку, border-top-color і так матиме колір батьківського
елементу. Тому використовуйте цю змінну на інших властивостях, наприклад,
background.
4. Псевдоселектори :valid, :invalid та :empty
Ці псевдоселектори використовуються при стилізації валідованих форм. Більшість нових інпутів
можуть бути валідними чи
невалідними, залежно від їх типу. Наприклад, input типу "email" з якимось випадковим текстом
буде відображати стилі з
псевдокласом :invalid . І це все вже вбудовано в браузер!
input:valid { color: green; }
input:invalid { color: red; }
Псевдоклас :empty спрацьовує на елементах, що не мають всередині себе нічого (працює
не тільки з формами). Тепер в шаблонах вам не
потрібно писати додаткову логіку для відображення і приховання
<h1>{name}</h1> .
h1:empty { display: none; }
5. Лічильники
Вам потрібен нумерований список, але ви не хочете (або не можете) використовувати елемент
<ol></ol> ?
Не хочете використовувати для цього JS? І не потрібно,
це все можна зробити на CSS.
.shelf {
counter-reset: books;
}
.shelf__book {
counter-increment: books;
}
.shelf__book::before {
content: "Book " counter(books) " of 10.";
}
Так, іноді CSS виглядає кумедним, і це один з таких випадків. Тут немає оператора для з'єднання, просто поставте між ними пробіл.
6. Більш передбачувані таблиці
За замовчуванням ширина стовпця в таблиці вираховується після рендерингу таблиці, таким чином на
неї впливають всі
елементи в стовпці. Додавання table-layout:fixed змусить браузер встановлювати
ширину стовпця спираючись на перший елемент в ньому. Це швидше і робить таблиці більш
керованими.
.grid {
table-layout: fixed;
}
7. Селектор за сусіднім елементом
Селектор за сусіднім елементом є азами, які вчить кожен новачок. Але вони чомусь майже зовсім не використовуються. А даремно, з ними можна дуже легко стилізувати форми та надписи до них, і все без JS.
[type="checkbox"] + label {
font-weight: normal;
}
[type="checkbox"]:checked + label {
font-weight: bold;
}
[required]:valid + span {
color: green;
}
[required]:invalid + span {
color: red;
}
8. Алгебраїчні вирази в nth-child()
Селектори з nth-child() дуже зручні для прибирання рамки з останнього елементу, чи
організації чергування стилів для різних рядків таблиці. Але
це лише невелика частина того, що можна з ним робити. Згадайте трошки алгебри і ви зможете
виділити кожен четвертий
елемент починаючи з першого:
.book:nth-child(4n+1) {
color: red;
}
чи кожен третій починаючи з другого:
.book:nth-child(3n-1) {
color: blue;
}
9. Анімація елементів з animation-fill-mode
Зазвичай, після відображення анімації, елементу слід запам'ятовувати свої поточні характеристики
і не відновлюватися до
тих, що були до анімації. Коли ви хочете саме такої поведінки в ваших стилях — просто
використовуйте animation-fill-mode
на потрібному елементі.
@keyframes slideIn {
0% { transform: translateX(-100%); }
100% { transform: translateX(0); }
}
.slideIn {
animation-name: slideIn;
animation-duration: .25s;
animation-fill-mode: forwards;
}
Так як розробники браузерів прагнуть до того, аби їх веб-сторінки виглядали наче застосунки, інструменти CSS стають все більш звичнішими, складнішими та цікавішими. Кожен день з’являються нові фічі та круті функції не за горами.
Але з всією цією новизною, не нехтуйте тим стандартом CSS і вже наявними там функціями, де іноді можна знайти саме те, що потрібно.
Джерело: https://bit.ly/3RobqMa
Переклад українською мовою: Аліна Берестень
Адміністратор: Дмитро Берестень