12 маловідомих фактів про CSS

17

Від автора: CSS не надто складна мова. Але навіть якщо ви писали CSS протягом багатьох років, вам, ймовірно, все ще трапляються нові речі – властивості, які ви ніколи не використовували, значення, які ви ніколи не розглядали, або деталі специфікації, про яких ви ніколи не знали.

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

1. Властивість color використовується не тільки для тексту

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

Погляньте на демо нижче:

Зверніть увагу, CSS, тільки одна властивість color використовується для елементі body зі значенням yellow. Як ви можете побачити, все на сторінці жовте, в тому числі:

Текст атрибута alt показаний при зображенні відсутній

Межа елемента списку

Маркер в неупорядоченном списку

Числовий маркер в упорядкованому списку

Елемент hr

Цікаво, що елемент hr, за замовчуванням не успадковує значення властивості color, але я повинен був змусити його зробити це, використовуючи border-color: inherit. Для мене це дещо дивну поведінку. Все це підтверджується специфікацією:

Це властивість визначає колір текстового наповнення елемента на передньому плані. Крім того, він використовується, щоб забезпечити потенційне непряме значення …для будь-яких інших властивостей, які приймають значення color. Я не можу згадай нічого такого, що могло б бути кваліфіковано як «передній план», але якщо ви згадаєте, дайте нам знати в коментарях.

2. Властивість visibility може застосовувати значення «collapse»

Ви, напевно, використовували властивість visibility сотні разів. Найбільш часто використовувані значення – це visible (значення за замовчуванням для всіх елементів) і hidden, що змушує елемент зникнути, дозволяючи йому як і раніше займати простір, як ніби він і досі там перебуває ( на відміну від display: none).

Третє і рідко використовується значення властивості visibility є collapse. Це працює так само, як hidden для всіх елементів, крім рядків таблиці, груп рядків таблиць, стовпців таблиці і груп стовпців таблиць. У разі цих табличних елементів, значення collapse повинно працювати аналогічно display: none, так що простір, займане захованої рядок / стовпець може бути включена іншим контентом.

На жаль, не всі браузери обробляють collapse належним чином. Подивіться наступне демо:

Альманах CSS-Tricks радить ніколи не використовувати це значення, у зв’язку з неоднозначною підтримкою браузерів. За моїми спостереженнями:

У Chrome, не має ніякого значення застосуйте ви collapse або hidden (Див. цей звіт про помилку і коментарі)

У Firefox, Opera, і ИЕ11, collapse ніби має працювати як слід: Рядок видаляється, а нижня рядок рухається вгору.

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

3. Скорочене властивість background має нові значення

В CSS2.1 скорочене властивість background приймає 5 значень — background-color,background-image, background-repeat, background-attachment, і background-position. У CSS3 і вище на даний момент входять ще три значення, що в цілому становить 8. Ось як виглядає повний набір значень:

background: [background-color] [background-image] [background-repeat]
[background-attachment] [background-position] / [ background-size]
[background-origin] [background-clip];

Зверніть увагу на «/», подібно до того, як скорочені форми font і border-radius можуть бути написані. Коса риса дозволяє включати значення background-size. До того ж, у вас є два способи для оголошення background-origin і background-clip. Таким чином, синтаксис наступний:

.example {
background: aquamarine url(img.png)
no-repeat
scroll
center center / 50%
content-box content-box;
}

Ви можете протестувати в браузері наступне демо:

Що стосується підтримки браузерів, ці нові значення повинні працювати у всіх сучасних браузерах, але швидше за все вам доведеться додавати запасні властивості для браузерів, які не забезпечують підтримку, для відповідності принципом «graceful degradation».

4. Властивість clip працює тільки для елементів, що мають position: absolute

Говорячи про background-clip, швидше за все ви вже бачили властивість clip раніше. Воно виглядає наступним чином:

.example {
clip: rect(110px, 160px, 170px, 60px);
}

Цей код «відріже» елемент в заданих місцях (детальніше тут). Єдиний підступ полягає в тому, що елемент, якому ви ставите clip повинен бути пропонується абсолютно. Тобто, вам потрібно виконати наступне:

.example {
position: absolute;
clip: rect(110px, 160px, 170px, 60px);
}

Ви можете бачити, як обрізка скасовується при відключенні position: absolute:

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

5. Величини у відсотках для верхніх і нижніх відступів розраховуються відносно ширини, а не висоти

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

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

Зверніть увагу, що задані 3 «вертикальних» процентних величини, оголошених для внутрішнього блоку (верхній і нижній padding, і нижній margin). Коли слайдер рухається, він змінює тільки ширину контейнера. Але інші величини змінюються відповідно, сторінка показує, що ці величини, оголошені у відсотках, ґрунтуються на ширині контейнера.

6. Властивість border «поглинає» значення

Ми всі колись робили таке:

.example {
border: 1px solid black;
}

Властивість border є скороченням для border-style, border-width, border-color – все в одному оголошення:

.example {
border-width: 2px 5px 1px 0;
}

Але не забувайте про те, що кожна властивість, що входить в border, саме по собі представляє скорочення. Таким чином, border-width може бути оголошено окремо.

Це задасть різну ширину кожної з чотирьох кордонів. Те ж саме вірно і для border-color і border-style, що демонструє наступне демо:

До того ж, кожна з цих властивостей може бути розбите на ще більшу кількість border-left-style, border-top-width, border-bottom-color, і так далі.

Але підступ полягає в тому, що ви не можете використовувати властивостей border для завдання різних стилів для різних меж. Це скорочення всередині скорочення всередині скорочення, як-то так.

7. Властивість text-decoration тепер є скороченням

Я знав, що хоч один пункт у цьому списку вразить вашу уяву. Тепер це – скорочення, згідно специфікації:

a {
text-decoration: overline aqua wavy;
}

Це властивість тепер являє собою 3 властивості: text-decoration-line, text-decoration-color, і text-decoration-style. На жаль, єдиним браузером їх підтримує Firefox є, і я вважаю для зворотної сумісності), поки не підтримує їх у вигляді скорочення. Подивіться наступне демо Firefox:

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

8. Властивість border-width приймає значення у вигляді ключових слів

Не зовсім відкриття Америки, і далеко не нове, але, на додачу до стандартних величин довжини (наприклад, 5px або 1em), властивість border-width приймає три ключових значення: medium, thin і thick. Зокрема, початкове значення властивості border- «medium». Демо приклад нижче показує значення «thick».

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

9. Ніхто не використовує властивість border-image

Я описав про властивості CSS3 border-image SitePoint деякий час назад. Ця властивість підтримується всіма сучасними браузерами за винятком IE10 і нижче. Але кому це цікаво? Воно здається класної можливістю, що дозволяє створювати «гумові» кордону у вигляді зображень. Спробуйте змінити розмір цього демо, щоб протестувати його:

На жаль, border-image здається новинкою, тому деякі його використовують. Але я можу помилятися. Якщо вам відомі приклади використання властивості border-image на реальних проектах, або ж використовували його самі, дайте нам знати в коментарях.

10. Існує властивість empty-cells

Ця властивість підтримується практично всіма браузерами навіть IE8, і виглядає ось так:

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

table {
empty-cells: hide;
}

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

11. Властивість font-style приймає значення «oblique»

Практично кожен раз, коли ви бачите властивість font-style, воно використовується разом з «normal» або «italic». Але ви також можете задати йому властивість «oblique»:

Але що конкретно воно означає? Але чому воно виглядає також як «italic»?

Специфікація пояснює, що властивість «oblique»…

«…вибирає той шрифт, який позначений як «oblique» в набір шрифтів, або курсив, якщо шрифту «oblique» немає в наборі.»

Опис «italic» в специфікації практично збігається. Термін «oblique» – типографический, який позначає похилий текст, але не зовсім курсив. Завдяки тому, як CSS звертається з похилим текстом, то похилий текст і курсив взаємозамінні, інакше (як пояснює специфікація) буде використовуватися шрифт, позначений як «oblique».

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

12. word-wrap –це те ж саме, що і overflow-wrap

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

Тому що спочатку воно було створено Microsoft, це властивості підтримується всіма браузерами, включаючи всі версії Internet Explorer, аж до IE 5.5.

Незважаючи на крос-браузерность і, судячи з того, що я бачу, постійної підтримки, консорціум W3C вирішив замінити word-wrap на overflow-wrap – я підозрюю, що з-за того. Що колишнє ім’я може вводити в оману. overflow-wrap має такі ж значення, як і word-wrap, і word-wrap тепер вважається «альтернативним синтаксисом» для overflow-wrap.

У той час як кілька нових браузерів підтримують overflow-wrap, здається марним задаватися цим питанням, так як старі браузери звертаються з word-wrap, так як потрібно, і всі браузери зобов’язані підтримувати word-wrap протягом невизначеного терміну, з причин спадкування.

Ми можемо почати використовувати overflow-wrap тоді, коли всі використовувані браузери автоматично змінить – але до тих пір, я не бачу причин для того, щоб перемикатися зі старого синтаксису.

Скільки речей з перерахованих були для вас дивиною? Чи дізналися ви щось нове з цього поста? Я сподіваюся, що так. Напевно, найбільш досвідчені розробники CSS вже знали багато хто, якщо не всі вищеперелічені моменти. Але швидше за все тим, хто недавно почав працювати c CSS це буде корисно.