12 маловідомих фактів про CSS, CSS
З тим, що CSS не надто складна мова мало хто буде сперечатися. Але якщо ви писали на ньому досить тривалий час, напевно, досі відкриваєте для себе все нові і нові його особливості — властивості, якими раніше ви не користувалися, значення, які не брали до уваги, або специфічні деталі, про які навіть не чули.
За час, який я витратив на вивчення та застосування CSS, я постійно зустрічаю нові для себе речі, і в цій статті поділюся з вами деякими з них.
Звичайно ж, не всі з них знайдуть практичне застосування, але, можливо, деякі виявляться корисними для вас у майбутньому.
1. Властивість color не тільки для тексту
Давайте почнемо з найпростішого. Властивість color використовується дуже часто кожним CSS-розробником. Деякі з вас, хто ще не настільки досвідчений у CSS, можуть не усвідомлювати цього, проте color визначає не лише колір тексту.
Зауважте, що ми використовуємо лише одну властивість color , в елементі body , встановлену значення yellow .
І як ви бачите, все на сторінці набуває жовтого кольору:
Цікаво те, що hr за замовчуванням не успадковує властивість color, але я змусив це зробити, використовуючи border-color: inherit . Для мене ця особливість видається трохи дивною.
Все описане вище відображено у специфікації.
2. Властивість visibility може набувати значення «collapse»
Думаю, ви використовували властивість visibility не одну сотню разів. Найбільш поширене його використання зі значеннями visible (за умовчанням у всіх елементів) і hidden , що робить елемент невидимим і одночасно дозволяє йому займати свій простір у розмітці (на відміну від display: none).
Третій, і найрідкісніший варіантВикористання властивості visibility - значення collapse. Працює воно так само, як і hidden з усіма елементами, за винятком осередків, груп осередків, стовпців та груп стовпців таблиць.
Що стосується елементами таблиць, значення collapse передбачає роботу, схожу з display: none — область, зайнята згорнутим осередком/стовпцем таблиці може бути зайнята іншим вмістом розмітки.
Але що відбувається насправді? Браузери відображають значення collapse зовсім не однаково.
Правду кажучи, ця властивість використовується рідко, але, однак, вона існує, і, якщо ви не знали про неї раніше, то тепер, у якомусь сенсі, ви стали трохи освіченішими.
3. Скорочена властивість background отримала нові значення
У специфікації CSS 2.1 скорочена властивість background має 5 значень - background-color, background-image, background-repeat, background-attachment і background-position.
У CSS3 та пізніших версіях додано ще три значення. Усього їх стало вісім.
Ось повний синтаксис:
Зауважте наявність прямого слеша. Він може використовуватися так само, як у випадку з властивостями font і border-radius. Слеш дозволить вам увімкнути значення background-size після визначення позиції, але лише у браузерах, які це підтримують.
До того ж, у вас є дві необов'язкові властивості background-origin і background-clip .
Можете випробувати це у своєму браузері, використовуючи цей демо-режим.
Що ж до коректного відображення, то ці нововведення чудово працюють у всіх сучасних браузерах, проте не варто забувати про включення резервних варіантів коду для випадків, коли використовується браузер, який неабияк застарів.
4. Властивість clip застосовується тільки до елементів забсолютним позиціонуванням
Згадуючи background-clip , ви, напевно, згадаєте, що бачили перед ним значення clip .
Виглядало це приблизно так.
Цей код буде обрізати елемент у певних областях ( тут описано більш детально).
Єдине, про що хочу вас попередити: необхідно позиціонувати елемент, що обрізає, абсолютно.
Приблизно таким чином:
У прикладі нижче ви можете побачити, як заборонити обрізання, коли включено властивість position: absolute .
Ви також можете застосовувати до елемента властивість position зі значенням fixed , тому що згідно зі специфікацією , елемент фіксованої позиції також визначається як елемент, позиціонований абсолютно.
5. Відсоткове значення вертикальних величин визначається відносно ширини контейнера, а не висоти елемента
Те, про що я писав раніше, могло ввести вас в деяку оману.
Можливо, вам відомо, що при визначенні ширини елемента у відсотках значення розраховується на основі ширини контейнера.
Але значення таких властивостей, як margin-top , margin-bottom , padding-top і padding-bottom , при зазначенні відсоткових значень, також розраховуються на основі ширини цього ж контейнера, а не його висоти, як могло здатися логічним.
Для наочності, у цьому прикладі, ви можете використовувати слайдер для встановлення значення width .
Зауважте, що я задаю у відсотках три значення для внутрішньої області ( margin-top , margin-bottom та padding-bottom ). Слайдер змінює значення ширини контейнера.
Розмір інших властивостей області змінюється щодо ширини, як в процентному співвідношенні. Це також відображено у прикладі.
6. Властивість border
Всі ми коли-небудь використовували подібнийкод:
Властивість border — скорочений варіант запису кількох властивостей, який визначає значення border-style, border-width і border-color.
Але не забувайте про те, що кожна властивість, яку ви описуєте за допомогою скороченої властивості border, сама по собі є скороченою властивістю.
Таким чином, border-width може бути визначено окремо:
Код вище встановить різні ширини для кожної з чотирьох рамок. Для властивостей border-color та border-style це також працює, як бачимо з прикладу нижче:
До того ж, кожна з цих властивостей може бути розбита на border-left-style, border-top-width, border-bottom-color і так далі.
Але сіль в тому, що ви не можете використовувати звичайну властивість border для встановлення різних значень для різних сторін.
Тому що виходить, що це вкладення скороченої якості всередину іншого скороченого якості, яке в свою чергу знаходиться всередині ще одного скороченого якості, хоча це не зовсім так.
7. Властивість text-decoration тепер скорочена
Впевнений, що код нижче вразить вас. Тепер це стандарт, відображений у специфікації:
Тепер ця властивість містить три: text-decoration-line , text-decoration-color , і text-decoration-style .
Дивно те, що Firefox поки що єдиний браузер, що підтримує всі ці три властивості, не підтримує варіант їх короткого запису. Припускаю, що причина у питанні зворотної сумісності.
Запустіть цей демо приклад у Firefox.
8. Властивість border-width працює з ключовими значеннями
Це не вразило світ, це не нове, але, до того ж до стандартних числових значень довжини (наприклад, 5px або 1em), властивість border-width тепер допускає три ключі:medium, this і tricks .
Насправді значення border-width за умовчанням – «medium». У демонстраційному прикладі використовується "thick".
Специфікація не вимагає від браузерів приведення ключів до певних значень, але, як я можу бачити, всі браузери використовують 1px, 3px та 5px відповідно.
9. Ніхто не використовує властивості border-image
Я писав про властивість border-image зі специфікації CSS3 раніше. Ця фіча підтримується всіма браузерами, крім IE 10 .
Але хіба комусь це потрібно?
Ця лаконічна властивість дозволяє створювати рухомі рамки для зображень. Скористайтеся демо прикладом , щоб зрозуміти, як це виглядає.
Несподівано, але border-image виглядає як таке нововведення, яке більшість боїться використовувати. Можливо, я й помиляюсь.
10. А як вам властивість empty-cells?
Ця властивість підтримується всіма браузерами, у тому числі IE8:
Як ви могли здогадатися, воно використовується для HTML-таблиць. Воно визначає будуть показуватися порожні осередки чи ні.
Спробуйте покрутити кнопку в цьому демо-режимі для того, щоб наочно побачити, як працює зміна властивості empty-cells.
Так як у цьому прикладі мені потрібно бути впевненим, що таблиця не роз'їдеться, і межі осередків залишаться видимими, я додав кілька відступів між ними. У деяких випадках зміна властивості empty-cells не дасть жодного видимого ефекту.
11. Властивість font-style тепер може набувати значення «oblique»
Практично щоразу, коли ви бачите властивість font-style, воно використовується у значенні "normal" або "italic". Але воно також можете мати значення «oblique»:
Що це означає насправді та чому виглядає як звичайний “italic”?
Успецифікації про значення «oblique» говориться …
"...вибирається тип шрифту "похилий" або ж використовується тип шрифту "курсив", якщо "похилий" відсутній".
Опис значення «italic» у специфікації приблизно такий самий. Слово «oblique» друкарський термін і є похилим шрифтом, але це не курсив.
У зв'язку з тим, як CSS обробляє похилий шрифт, він може бути взаємозамінним з курсивом, якщо (як відображено в специфікації), шрифт, що використовується не має, власне, похилого типу.
Ніколи не чув про якийсь шрифт, який мав би похилий тип, але, знову ж таки, можливо, я помиляюся.
З того, що я накопав, випливає, що шрифт не може одночасно мати похилий вигляд і курсив, тому що похилий вид шрифту передбачається як заміна курсива у тих шрифтів, які його не мають.
З чого, якщо я не все-таки не помиляюся, слідує, що якщо шрифт не має виду «курсив», а в CSS ви прописали йому font-style: italic - браузер відобразить його як font-style: oblique.
12. word-wrap те саме, що й overflow-wrap
Не можу віднести властивість word-wrap до часто використовуваних, але в деяких моментах вона може надати велику допомогу.
Так як ця річ є оригінальною розробкою компанії Microsoft, підтримується всіма браузерами аж до IE 5.5.
Незважаючи на крос-браузерність, W3C вирішила замінити word-wrap на overflow-wrap і, припускаю, через те, що вживання колишнього найменування було визнано неправильним.
.overflow-wrap має той самий набір значень, що word-wrap , а word-wrap тепер називається «альтернативним синтаксисом» до overflow-wrap .
Але зовсім невелика кількість браузерів підтримують overflow-wrap, мені здається, немає сенсу його використовуватиповсюдно, поки працює word-wrap , а всі браузери так і будуть підтримувати цю властивість за необхідності підтримувати сумісність.
Як на мене, можна починати використовувати новий варіант синтаксису, коли всі браузери оновляться, але не раніше.
Як багато нового ви дізналися?
Скажіть, Ви почерпнули щось нове з цієї посади? Сподіваюся, що почерпнули.
Звичайно, є люди, які знають більше, якщо не ВСІ, про те, що я тут написав. Але для багатьох і цієї інформації буде чимало цього разу.
Переклад статті "12 Little-Known CSS Facts" був підготовлений дружньою командою проекту Сайтобудування від А до Я.