9 недооцінених можливостей CSS

За більше як 20 років свого існування CSS став стандартом стилізації веб-сторінок. Продовжують виходити нові специфікації (Наприклад, CSS4), що додають нові круті можливості: анімації, трансформації, нові одиниці виміру.

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

1. Функція calc()

W3C | CanIuse

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

.box {
  width: calc( 100% - 20px );
}

Схоже на який препроцесор, але насправді це вбудована можливість CSS, в якій використовується вже відрендерені розміри елементу (що неможливо при використанні препроцесорів).

2. Медіа-запити для екрану та сенсору

W3C | CanIuse

На жаль, поки що такі медіа-запити погано підтримуються браузерами (~70%). Зазвичай для адаптивної верстки використовують медіа-запити ширини екрану, але вже є можливість визначити чим користувач здійснює керування сторінкою. Вони дозволяють вам запитати у браузера: "цей користувач використовує свій палець чи мишку?".

@media( pointer: coarse) { }

Можливі значення

none В даному пристрої не передбачено вказівника.

coarse Вказівник з обмеженою точністю. Це можуть бути тачскріни чи Xbox'овський Kinect.

fine Точний вказівник Наприклад, мишка, тачпад, графічний планшет.

Підтримка

Вона лишає бажати кращого, але все ж позитивні зрушення є. Так Webkit, Blink та Edge вже підтримують цю можливість, а от Gecko/Firefox ще ні.

3. Змінна currentColor

W3C | CanIuse

Додана в CSS3, ця вбудована змінна вказує на... поточний колір (color) елементу!

.card {
    color: #333333;
}
.card--error {
    color: #ff0000;
}
    .card__guts {
        border-top-color: currentColor; // see note below [1]
    }

Michael Wong зробив важливе зауваження. Не слід використовувати цю змінну там, де колір і так каскадно успадковується. В своєму прикладі я допустив помилку, border-top-color і так матиме колір батьківського елементу. Тому використовуйте цю змінну на інших властивостях, наприклад, background.

4. Псевдоселектори :valid, :invalid та :empty

W3C (2) | CanIuse

Ці псевдоселектори використовуються при стилізації валідованих форм. Більшість нових інпутів можуть бути валідними чи невалідними, залежно від їх типу. Наприклад, input типу "email" з якимось випадковим текстом буде відображати стилі з псевдокласом :invalid. І це все вже вбудовано в браузер!

input:valid { color: green; }
input:invalid { color: red; }

Псевдоклас :empty спрацьовує на елементах, що не мають всередині себе нічого (працює не тільки з формами). Тепер в шаблонах вам не потрібно писати додаткову логіку для відображення і приховання <h1>{name}</h1>.

h1:empty { display: none; }

5. Лічильники

W3C | CanIuse

Вам потрібен нумерований список, але ви не хочете (або не можете) використовувати елемент <ol>? Не хочете використовувати для цього JS? І не потрібно, це все можна зробити на CSS.

.shelf { counter-reset: books; }
    .shelf__book { counter-increment: books; }
        .shelf__book::before {
            content: "Book " counter(books) " of 10.";
        }

Так, іноді CSS виглядає кумедним, і це один з таких випадків. Тут немає оператора для з'єднання стрічок, просто поставте між ними пробіл

6. Більш передбачувані таблиці

W3C | CanIuse

За умовчуванням ширина стовпця в таблиці вираховується після рендерингу таблиці, таким чином на неї впливають всі елементи в стовпці. Додання table-layout:fixed змусить браузер встановлювати ширину стовпця опираючись на перший елемент в ньому. Це швидше і робить таблиці більш керованими.

.grid {
    table-layout: fixed;
}

7. Селектор за сусіднім елементом

W3C | CanIuse

Селектор за сусіднім елементом є азами, які вчить кожен новачок. Але вони чомусь майже зовсім не використовуються. А даремно, з ними можна дуже легко стилізувати форми та надписи до них, і все без 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()

W3C | CanIuse

Селектори з nth-child() дуже зручні для прибирання рамки з останнього елементу, чи організації чергування стилів для різних рядків таблиці. Але це лише невелика частина того, що можна з ним робити.

Згадайте трошки алгебри і ви зможете виділити кожен четвертий елемент починаючи з першого:

.book:nth-child(4n+1) { color: red; }

чи кожен третій починаючи з другого:

.book:nth-child(3n-1) { color: blue; }

nth-test.com Як працює nth-child

9. Анімація елементів з animation-fill-mode

W3C | CanIuse

Зазвичай, після відображення анімації, елементу слід запам'ятовувати свої поточні характеристики і не відновлюватися до тих, що були до анімації. Коли ви хочете саме такої поведінки в ваших стилях — просто використовуйте animation-fill-mode на потрібному елементі.

@keyframes slideIn {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(0); }
}

.slideIn {
    animation-name: slideIn;
    animation-duration: .25s;
    animation-fill-mode: forwards;
}