12 маловідомих CSS фактів
У своїх дослідженнях я постійно стикаюся з невеликими фішками, які не помічав раніше. Отже, я вирішив поділитись своїми спостереженнями в цій статті. Правда, не все в цьому пості має явну практичну цінність, але, можливо, ви відберете для себе корисну інформацію, яку зможете використовувати при розробці своїх сайтів.
1. Властивість color не тільки для тексту
Почнемо з простих речей. Властивість color використовується всіма розробниками CSS. Незалежно від досвіду розробки є момент, який втрачається з уваги: якість color визначає не тільки колір тексту.
Погляньте на demo нижче:
Позначте CSS: використовується лише одна властивість color для елемента body , у властивості color встановлено значення yellow . Як ви можете бачити все на жовтій сторінці, включаючи:
- Текст атрибута alt та втраченого зображення
- Рамки біля пункту списку
- Маркер у невпорядкованого списку
- Числовий маркер упорядкованого списку
- Елемент hr
2. У властивості visibility може бути значення collapse
Ви, можливо, використовували властивість visibility сотні разів. Найчастіше використовувані значення це visible (за умовчанням всім елементів) і hidden - елемент стає невидимим, тобто займане ним простір не схлопывается (на відміну display: none ).
На жаль, браузери хаотично обробляє значення collapse. Погляньте на demo:
CSS-Tricks радить не використовувати collapse для якостіvisibility.
3. Універсальна властивість background має нове значення
У CSS2.1 універсальна властивість background дозволяє включити до 5 характеристик (значень) фону - background-color, background-image, background-repeat, background-attachment і background-position. У CSS3 і вище, додано ще три характеристики, всього виходить 8. Нижче наведена карта значень:
Зверніть увагу на сліш. Слєш дозволяє увімкнути значення background-size після позиції.
Крім того, ви можете підключити два додаткові значення, що характеризують background-origin and background-clip .
Таким чином, синтаксис виглядає так:
Нові значення чудово працюють у всіх сучасних браузерах, але вам доведеться передбачити резервні варіанти для старих браузерів.
4. Властивість clip працює тільки на елементах, що абсолютно позиціонуються.
Властивість clip працює приблизно так:
Властивість clip визначає область позиціонованого елемента, де буде показано його вміст. Єдине обмеження: елемент, для якого використовується clip , повинен задати абсолютне позиціонування. Таким чином, ви повинні зробити наступне:
Як бачите, clip не працює, коли position:absolute знімається.
Крім того, ви можете встановити position:fixed , оскільки згідно специфікації зафіксовані елементи також кваліфікуються як абсолютно позиціоновані.
5. Вертикальні відсотки щодо ширини контейнера, а чи не висоти
Ще одна заплутана штука, про яку я писав раніше. Як ви знаєте, відсотки у ширини обчислюються щодо ширини контейнера, відсотки за такими властивостями як padding-top, padding-bottom, margin-top, margin-bottom також розраховуютьсящодо ширини контейнера, а чи не висоти.
Нижче приклад, на якому за допомогою повзунка ви явно побачите правоту моїх слів:
Зазначте, у відсотках оголошено властивості padding-top, padding-bottom і margin. Рухаючи повзунок, ви змінюєте ширину контейнера. При цьому значення вертикальних властивостей також змінюються, що підтверджує наше твердження, що вертикальні властивості, задані у відсотках, залежать від ширини контейнера.
6. Властивість border
Ми всі робили це:
Але не варто забувати, що кожна властивість, що входить до загальної властивості border, є скороченою (універсальною). Наприклад, для border-width можна вказати таке значення:
Це дозволить встановити різну товщину для кожної із чотирьох рамок. До того ж кожна з цих властивостей може бути розбита ще далі, наприклад, border-left-style, border-top-width, border-bottom-color і т.д.
7. Властивість text-decoration є скороченою (універсальною)
Відповідно до специфікації тепер це стандарт:
Ця властивість в даний час представляє 3 властивості: text-decoration-line, text-decoration-color і text-decoration-style.
На жаль, firefox є єдиним браузером, який підтримує ці нові властивості. При цьому firefox не підтримує (поки що) скорочений запис для text-decoration.
Нижче наведено демо для firefox:
8. Властивість border-width дозволяє використовувати як значення ключові слова
Зовсім не нове, але на додаток до стандартних значень довжини (наприклад, 5px або 1em ), властивість border-width приймає три ключові слова, як значення: medium , thin і thick .
Фактично при ініціалізації значення властивості border-width дорівнює medium . У демо нижчевикористовується thick.
Специфікація не вимагає прив'язки значень (ключові слова) до конкретних величин, але, наскільки я можу судити, всі браузери використовують 1px, 3px та 5px.
9. Ніхто не використовує border-image
Властивість border-image підтримується всіма сучасними браузерами, за винятком IE10 і нижче.
Схоже, завдяки можливості створювати гумові рамки на основі зображень властивість border-image дійсно може стати в нагоді.
10. Властивість empty-cells
Властивість empty-cells підтримується повсюдно, включаючи IE8, і виглядає так:
Як ви, мабуть, здогадалися, ця властивість використовується для таблиць HTML. Властивість empty-cells говорить браузеру у тому, що робити (показати чи приховати) з порожніми осередками таблиці (контент відсутній). Нижче ви можете побачити, як працює властивість empty-cells .
У нашому випадку потрібно гарантувати межі та простір між осередками. У деяких випадках ця властивість не має жодного візуального ефекту, тому що потрібно візуально щось бачити, щоб відчути різницю.
11. Властивість font-style набуває значення oblique
Майже завжди властивість font-style має значення normal або italic . Але ви також можете призначити значення oblique :
Щоб це означало напевно? Чому oblique виглядає так, як italic (курсив)?
Специфікація пояснює значення oblique …
…вибирає шрифт, позначений як похилий, інакше курсивний
Опис italic у специфікації в основному такий самий. Слово oblique у друкарні означає похилий текст, який не є курсивом.
Існує взаємозамінність похилого тексту з курсивом (якщо у сімействі відсутній похилий шрифт, використовуєтьсякурсив та навпаки).
12. Word-wrap те саме, що overflow-wrap
Властивість word-wrap використовується не дуже часто, але іноді дуже корисним. Часто за допомогою word-wrap запобігають виходу довгого нерозривного рядка за межі елемента-контейнера.
Підтримка браузерами всеосяжна, тому властивість розроблена Microsoft.
Припускаю, так як найменування властивість в цілому неправильне, W3C вирішив замінити word-wrap overflow-wrap .
overflow-wrap має ті ж значення, що і word-wrap, і word-wrap в даний час є альтернативним синтаксисом для overflow-wrap.
В принципі підтримка браузерами якості overflow-wrap істотна.