<length>
Тип даних CSS <length>
(довжина) представляє значення відстані. Довжини можуть використовуватися в багатьох властивостях CSS, як то width
, height
, margin
, padding
, border-width
, font-size
і text-shadow
.
Примітка: Попри те, що значення
<percentage>
можуть використовуватися в частині тих властивостей, що приймають значення<length>
, самі відсоткові значення не є значеннями<length>
. Дивіться<length-percentage>
.
Синтаксис
Тип даних <length>
складається з <number>
, після чого стоїть одна з одиниць вимірювання, перелічених нижче. Як з усіма розмірами CSS, немає пробілів між числом та літералом одиниці вимірювання. Задання одиниці довжини – необов'язкове, якщо число – 0
.
Примітка: Частина властивостей дозволяє від'ємні значення
<length>
, частина – ні.
Задане значення довжини (задана довжина) представлено своїми кількістю та одиницею вимірювання. Обчислене значення довжини (обчислена довжина) – це задана довжина, приведена до абсолютного значення, і її одиниця вимірювання не розрізняється.
Одиниці вимірювання <length>
можуть бути відносними й абсолютними. Відносні довжини представляють вимірювання відносно якоїсь іншої відстані. Залежно від одиниці, ця відстань може бути розміром певного символу, висотою рядка символів чи розміром області перегляду. Таблицям стилів, що використовують відносні одиниці вимірювання довжини, легше масштабуватися між різними середовищами.
Примітка: Дочірні елементи не успадковують відносні значення у такому вигляді, в якому вони задані на їх предках; вони успадковують обчислені значення.
Перелічені тут відносні одиниці вимірювання довжини засновані на шрифті та області перегляду.
Відносні одиниці вимірювання довжини, засновані на шрифті
Шрифтові довжини визначають значення <length>
відносно розміру певного символу чи атрибуту конкретного шрифту, застосованого до елемента чи його предка.
Примітка: Ці одиниці, особливо
em
іrem
, нерідко використовуються для створення масштабованих макетів, котрі зберігають вертикальний ритм сторінки навіть тоді, коли користувач змінює розмір шрифту.
cap
Представляє "cap height" – "висоту заголовної літери" (номінальну висоту великих літер)
шрифту
елемента.ch
Представляє ширину, а точніше – попередній розмір гліфа
0
(нуля, символу Unicode U+0030) ушрифті
елемента. У випадках, коли неможливо чи непрактично визначати розмір гліфа0
, він повинен вважатися0.5em
завширшки та1em
заввишки.em
Представляє обчислене значення
font-size
елемента. Коли використовується у самій властивостіfont-size
, то представляє успадковане значення font-size елемента.ex
Представляє x-висоту
шрифту
елемента. У шрифтах з літероюx
це зазвичай висота малих літер шрифту; у багатьох шрифтах1ex ≈ 0.5em
.ic
Дорівнює застосованому попередньому розмірові гліфа "水" (ідеограма води в CJK, U+6C34), знайденого в шрифті, що застосовується для відображення.
lh
Дорівнює обчисленому значенню властивості
line-height
елемента, на якому застосована, перетвореному на абсолютну довжину.rem
Представляє
font-size
кореневого елемента (зазвичай елемента<html>
). Коли використовується уfont-size
кореневого елемента, то представляє початкове значення (загальноприйняте в браузерах усталене значення –16px
, але користувацькі налаштування можуть його змінити).rlh
Дорівнює обчисленому значенню властивості
line-height
на кореневому елементі (зазвичай елементі<html>
), перетвореному на абсолютну довжину. Коли використовується у властивостяхfont-size
чиline-height
кореневого елемента, то вказує на початкове значення відповідної властивості.
Відносні одиниці вимірювання довжини, засновані на області перегляду
Відсоткові щодо області перегляду одиниці вимірювання довжини засновані на чотирьох різних розмірах області перегляду: малому, великому, динамічному та усталеному. Наявність такого розмаїття розмірів вікна перегляду ґрунтується на необхідності реагувати на динамічне розширення і звуження елементів інтерфейсу браузера, та появу і приховування вмісту в них.
- Малий
Коли при реагуванні на динамічне розширення елементів браузерного інтерфейсу використовується найменша можлива область перегляду, слід використовувати малий розмір області. Малий розмір області перегляду дає змогу заповнити усю область перегляду, коли браузерний інтерфейс розширюється. Вибір такого розміру також може залишити пустий простір, коли браузерний інтерфейс звужується.
Наприклад, елемент, що отримує розмір у відсоткових одиницях від малої області перегляду, досконало заповнює екран, і жодний вміст не затуляється, коли виводиться динамічний браузерний інтерфейс. Проте коли такий інтерфейс приховано, навколо елемента може бути зайвий порожній простір. Таким чином, загалом одиниці вимірювання відсотків від малої області перегляду "безпечніше" використовувати, але вони можуть виробляти не найпривабливіший макет, коли користувач починає взаємодіяти зі сторінкою.
Малий розмір області перегляду представлений префіксом
sv
і приводить до одиниць вимірювання, відсоткових щодо області перегляду,sv*
. Розміри одиниць вимірювання у відсотках від малої області – фіксовані, якщо область перегляду не змінює своїх розмірів.- Великий
Коли при реагуванні на динамічне звуження елементів браузерного інтерфейсу потрібно отримати найбільшу можливу область перегляду, слід використовувати великий розмір області. Великий розмір області перегляду дає змогу заповнити усю область перегляду, коли браузерний інтерфейс звужується. Проте слід мати на увазі, що частина вмісту може бути прихована, коли браузерний інтерфейс розшириться.
Наприклад, на мобільних телефонах, де квадратура екрана – преміального рівня, браузери нерідко частково або повністю приховують заголовок і поле адреси, коли користувач починає прокручувати сторінку. Коли елемент отримує розмір за допомогою одиниці вимірювання у відсоткових одиницях від великого розміру області, вміст елемента заповнить усю видиму сторінку, коли інтерфейс браузера – прихований. Проте коли ці зменшувані елементи інтерфейсу виводяться, вони можуть приховати вміст, що отримує розмір чи розташування у відсоткових одиницях відносно великої області видимості.
Великий розмір області перегляду представлений префіксом
lv
і приводить до одиниць вимірювання, відсоткових щодо області перегляду,lv*
. Розміри одиниць вимірювання у відсотках від великої області – фіксовані, якщо область перегляду не змінює своїх розмірів.- Динамічний
Коли область перегляду повинна автоматично отримувати розмір у відповідь на динамічне розширення чи звуження інтерфейсу браузера, можна використати динамічний розмір області. Динамічний розмір області дає вмістові змогу точно вписатися в область перегляду, незалежно від присутності динамічних елементів інтерфейсу браузера.
Динамічна одиниця області перегляду представлена префіксом
dv
і приводить до відсоткових одиниць вимірюванняdv*
. Розміри одиниць вимірювання у відсотках від динамічної області – нестабільні, навіть якщо сама область перегляду не змінюється.Примітка: Хоч динамічний розмір області перегляду може дати більше контролю і гнучкості, використання відсотків від динамічного розміру області перегляду може змусити вміст змінювати розмір, коли користувач прокручує сторінку. Це може призвести до деградації користувацького інтерфейсу та падіння швидкодії.
- Усталений
Усталений розмір області перегляду – визначений браузером. Поведінка результівної одиниці вимірювання може наслідувати логіку роботи відсоткових одиниць малої області перегляду, великої області, проміжної між попередніми двома, або ж динамічного розміру.
Примітка: Наприклад, браузер може реалізувати усталену одиницю відсотків щодо області видимості для висоти (
vh
), рівносильну одиниці висоти щодо великої області перегляду (lvh
). Якщо це так, то це може призвести до затуляння вмісту при повносторінковому перегляді, коли браузерний інтерфейс – розгорнутий.
Довжини у відсотках від області перегляду визначають значення <length>
– відносні щодо розміру початкового контейнерного блоку, котрий своєю чергою заснований або на розмірі області видимості, або на розмірі області сторінки, тобто видимої частини документа. Коли висота чи ширина початкового контейнерного блока змінюється, елементи, що отримали розмір на їх основі, відповідно масштабуються. Є одиниці вимірювання довжини на основі області перегляду, що відповідають кожному з розмірів області перегляду, як описано нижче.
Примітка: Довжини від області перегляду вважаються недійсними у блоках оголошення
@page
.
vh
Представляє відсотки від висоти початкового контейнерного блока області перегляду.
1vh
– це 1% від висоти області перегляду. Наприклад, якщо її висота –300px
, то значення властивості70vh
означатиме210px
.Для малих, великих та динамічних розмірів області перегляду відповідними одиницями відсотків від області видимості є
svh
,lvh
іdvh
.vh
представляє одиницю, засновану на усталеному розмірі області перегляду.vw
Представляє відсотки від ширини початкового контейнерного блока області перегляду.
1vw
– це 1% від ширини області перегляду. Наприклад, якщо її ширина –800px
, то значення властивості50vw
означатиме400px
.Для малих, великих та динамічних розмірів області перегляду відповідними одиницями відсотків від області видимості є
svw
,lvw
іdvw
.vw
представляє одиницю, засновану на усталеному розмірі області перегляду.vmax
Представляє більше серед
vw
іvh
.Для малих, великих та динамічних розмірів області перегляду відповідними одиницями відсотків від області видимості є
svmax
,lvmax
іdvmax
.vmax
представляє одиницю, засновану на усталеному розмірі області перегляду.vmin
Представляє менше серед
vw
іvh
.Для малих, великих та динамічних розмірів області перегляду відповідними одиницями відсотків від області видимості є
svmax
,lvmax
іdvmax
.vmax
представляє одиницю, засновану на усталеному розмірі області перегляду.vb
Представляє відсотки від розміру початкового контейнерного блоку, в напрямку блокової осі кореневого елемента.
Для малих, великих та динамічних розмірів області перегляду відповідними одиницями відсотків від області видимості є
svb
,lvb
іdvb
відповідно.vb
представляє одиницю, засновану на усталеному розмірі області перегляду.vi
Представляє відсотки від розміру початкового контейнерного блоку, в напрямку рядкової осі кореневого елемента.
Для малих, великих та динамічних розмірів області перегляду відповідними одиницями відсотків від області видимості є
svi
,lvi
іdvi
відповідно.vi
представляє одиницю, засновану на усталеному розмірі області перегляду.
Одиниці вимірювання довжини для контейнерних запитів
При застосуванні стилів до контейнера за допомогою контейнерних запитів можна використовувати окремі одиниці вимірювання довжини для контейнерних запитів. Ці одиниці задають довжину відносно розмірів контейнера запиту. Компоненти, що використовують одиниці вимірювання довжини, відносні щодо контейнера, є гнучкішими у використанні в різних контейнерах, адже не потребують заново обчислювати конкретні значення довжини. Докладніше про це – в Контейнерних запитах.
cqw
Представляє відсотки від ширини контейнера запиту.
1cqw
– це 1% від ширини контейнера запиту. Наприклад, якщо ширина контейнера запиту –800px
, то значення властивості50cqw
означатиме400px
.cqh
Представляє відсотки від висоти контейнера запиту.
1cqh
– це 1% від висоти контейнера запиту. Наприклад, якщо висота контейнера запиту –300px
, то значення властивості10cqh
означатиме30px
.cqi
Представляє відсотки рядкового розміру контейнера запиту.
1cqi
– це 1% від рядкового розміру контейнера запиту. Наприклад, якщо рядковий розмір контейнера запиту –800px
, то значення властивості50cqi
означатиме400px
.cqb
Представляє відсотки від блокового розміру контейнера запиту.
1cqb
– це 1% від блокового розміру контейнера запиту. Наприклад, якщо блоковий розмір контейнера запиту –300px
, то значення властивості10cqb
означатиме30px
.cqmin
Представляє відсотки від рядкового або блокового розміру контейнера запиту, залежно який розмір менше.
1cqmin
– це 1% від рядкового або блокового розміру контейнера запиту, залежно який розмір менше. Наприклад, якщо рядковий розмір контейнера запиту –800px
, а блоковий –300px
, то значення властивості50cqmin
означатиме150px
.cqmax
Представляє відсотки від рядкового або блокового розміру контейнера запиту, залежно який розмір більше.
1cqmax
– це 1% від рядкового або блокового розміру контейнера запиту, залежно який розмір більше. Наприклад, якщо рядковий розмір контейнера запиту –800px
, а блоковий –300px
, то значення властивості50cqmax
означатиме400px
.
Абсолютні одиниці довжини
Абсолютні одиниці довжини представляють фізичну міру, коли фізичні властивості засобу виведення – відомі, як то при верстанні для друку. Це виконується шляхом прив'язування однієї з одиниць до фізичної одиниці, а потім визначення інших одиниць відносно неї. Прив'язування виконується по-різному для пристроїв з низькою роздільною здатністю, як то екранів, і пристроїв з високою, як то принтерів.
Для пристроїв з низьким DPI одиниця вимірювання px
представляє фізичний референтний піксель; решта одиниць визначаються щодо неї. Таким чином, 1in
визначається як 96px
, що дорівнює 72pt
. Наслідком такого визначення є те, що на таких пристроях міри, описані в дюймах (in
), сантиметрах (cm
) чи міліметрах (mm
) не обов'язково збігаються з розмірами однойменної фізичної одиниці вимірювання.
Для пристроїв з високим DPI дюйми (in
), сантиметри (cm
) та міліметри (mm
) – такі самі, як їх фізичні відповідники. Таким чином, одиниця вимірювання px
визначається відносно них (1/96 від 1in
).
Примітка: Чимало користувачів збільшує розмір шрифту свого користувацького агента, аби зробити текст розбірливішим. Абсолютні довжини можуть призвести до негараздів з доступністю, адже вони фіксовані й не масштабуються відповідно до користувацьких налаштувань. З цієї причини при заданні
font-size
слід віддавати перевагу відносним одиницям (як тоem
чиrem
).
px
Один піксель. Для екранних пристроїв ця одиниця традиційно представляє один піксель пристрою (точку). Проте для принтерів та екранів високої роздільної здатності один піксель означає декілька пікселів пристрою.
1px
=1in / 96
.cm
Один сантиметр.
1cm
=96px / 2.54
.mm
Один міліметр.
1mm
=1cm / 10
.Q
Одна чверть міліметра.
1Q
=1cm / 40
.in
Один дюйм.
1in
=2.54cm
=96px
.pc
Одна пайка.
1pc
=12pt
=1in / 6
.pt
Один пункт.
1pt
=1in / 72
.
Інтерполяція
При анімації значення типу даних <length>
інтерполюються як дробові числа з рухомою комою. Інтерполяція відбувається на підрахованому значенні. Швидкість інтерполяції визначається функцією хронометражу, пов'язаною з конкретною анімацією.
Приклади
Порівняння різних одиниць довжини
Наступний приклад надає поле введення, у котре можна ввести значення <length>
(наприклад, 300px
, 50%
, 30vw
), аби задати ширину результівної риски, що з'явиться під полем, щойно буде натиснуто клавішу Enter або Return.
Це дасть змогу порівняти й помітити різницю між різними одиницями довжини.
HTML
<div class="outer">
<div class="input-container">
<label for="length">Введіть ширину:</label>
<input type="text" id="length" />
</div>
<div class="inner"></div>
</div>
<div class="results"></div>
CSS
html {
font-family: sans-serif;
font-weight: bold;
box-sizing: border-box;
}
.outer {
width: 100%;
height: 50px;
background-color: #eee;
position: relative;
}
.inner {
height: 50px;
background-color: #999;
box-shadow: inset 3px 3px 5px rgb(255 255 255 / 0.5), inset -3px -3px 5px rgb(0
0 0 / 0.5);
}
.result {
height: 20px;
box-shadow: inset 3px 3px 5px rgba(255 255 255 / 0.5), inset -3px -3px 5px rgb(0
0 0 / 0.5);
background-color: orange;
display: flex;
align-items: center;
margin-top: 10px;
}
.result code {
position: absolute;
margin-left: 20px;
}
.results {
margin-top: 10px;
}
.input-container {
position: absolute;
display: flex;
justify-content: flex-start;
align-items: center;
height: 50px;
}
label {
margin: 0 10px 0 20px;
}
JavaScript
const inputDiv = document.querySelector(".inner");
const inputElem = document.querySelector("input");
const resultsDiv = document.querySelector(".results");
inputElem.addEventListener("change", () => {
inputDiv.style.width = inputElem.value;
const result = document.createElement("div");
result.className = "result";
result.style.width = inputElem.value;
result.innerHTML = `<code>ширина: ${inputElem.value}</code>`;
resultsDiv.appendChild(result);
inputElem.value = "";
inputElem.focus();
});
Результат
Специфікації
Сумісність із браузерами
desktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
<length>
|
Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1 | Internet Explorer Full support 3 | Opera Full support 3.5 | Safari Full support 1 | WebView Android Full support 37 | Chrome Android Full support 18 | Firefox for Android Full support 4 | Opera Android Full support 10.1 | Safari on iOS Full support 1 | Samsung Internet Full support 1.0 |
Q unit
|
Chrome Full support 63 | Edge Full support 79 | Firefox Full support 49 | Internet Explorer No support No | Opera Full support 50 | Safari No support No | WebView Android Full support 63 | Chrome Android Full support 63 | Firefox for Android Full support 49 | Opera Android Full support 46 | Safari on iOS No support No | Samsung Internet Full support 8.0 |
cap unit
|
Chrome No support No | Edge No support No | Firefox Full support 97 | Internet Explorer No support No | Opera No support No | Safari No support No | WebView Android No support No | Chrome Android No support No | Firefox for Android Full support 97 | Opera Android No support No | Safari on iOS No support No | Samsung Internet No support No |
ch unit
|
Chrome Full support 27 | Edge Full support 12 | Firefox Full support 1 | Internet Explorer Full support 9 | Opera Full support 20 | Safari Full support 7 | WebView Android Full support 37 | Chrome Android Full support 27 | Firefox for Android Full support 4 | Opera Android Full support 14 | Safari on iOS Full support 7 | Samsung Internet Full support 1.5 |
ex unit
|
Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1 | Internet Explorer Full support 4 | Opera Full support 3.5 | Safari Full support 1 | WebView Android Full support 1 | Chrome Android Full support 18 | Firefox for Android Full support 4 | Opera Android Full support 10.1 | Safari on iOS Full support 1 | Samsung Internet Full support 1.0 |
ic unit
|
Chrome No support No | Edge No support No | Firefox Full support 97 | Internet Explorer No support No | Opera No support No | Safari Full support 15.4 | WebView Android No support No | Chrome Android No support No | Firefox for Android Full support 97 | Opera Android No support No | Safari on iOS Full support 15.4 | Samsung Internet No support No |
lh unit
|
Chrome No support No | Edge No support No | Firefox No support No | Internet Explorer No support No | Opera No support No | Safari No support No | WebView Android No support No | Chrome Android No support No | Firefox for Android No support No | Opera Android No support No | Safari on iOS No support No | Samsung Internet No support No |
rem unit
|
Chrome Full support 4 | Edge Full support 12 | Firefox Full support 3.6 | Internet Explorer Full support 9 | Opera Full support 11.6 | Safari Full support 5 | WebView Android Full support 2 | Chrome Android Full support 18 | Firefox for Android Full support 4 | Opera Android Full support 12 | Safari on iOS Full support 4 | Samsung Internet Full support 1.0 |
rlh unit
|
Chrome No support No | Edge No support No | Firefox No support No | Internet Explorer No support No | Opera No support No | Safari No support No | WebView Android No support No | Chrome Android No support No | Firefox for Android No support No | Opera Android No support No | Safari on iOS No support No | Samsung Internet No support No |
vb unit
|
Chrome No support No | Edge No support No | Firefox No support No | Internet Explorer No support No | Opera No support No | Safari Full support 15.4 | WebView Android No support No | Chrome Android No support No | Firefox for Android No support No | Opera Android No support No | Safari on iOS Full support 15.4 | Samsung Internet No support No |
vh unit
|
Chrome Full support 20 | Edge Full support 12 | Firefox Full support 19 | Internet Explorer Full support 9 | Opera Full support 20 | Safari Full support 6 | WebView Android Full support 37 | Chrome Android Full support 25 | Firefox for Android Full support 19 | Opera Android Full support 14 | Safari on iOS Full support 6 | Samsung Internet Full support 1.5 |
vi unit
|
Chrome No support No | Edge No support No | Firefox No support No | Internet Explorer No support No | Opera No support No | Safari Full support 15.4 | WebView Android No support No | Chrome Android No support No | Firefox for Android No support No | Opera Android No support No | Safari on iOS Full support 15.4 | Samsung Internet No support No |
vmax unit
|
Chrome Full support 26 | Edge Full support 16 | Firefox Full support 19 | Internet Explorer No support No | Opera Full support 15 | Safari Full support 7 | WebView Android Full support 1.5 | Chrome Android Full support 26 | Firefox for Android Full support 19 | Opera Android Full support 14 | Safari on iOS Full support 7 | Samsung Internet Full support 1.5 |
vmin unit
|
Chrome Full support 26 | Edge Full support 12 | Firefox Full support 19 | Internet Explorer Full support 10 | Opera Full support 15 | Safari Full support 7 | WebView Android Full support 37 | Chrome Android Full support 26 | Firefox for Android Full support 19 | Opera Android Full support 14 | Safari on iOS Full support 7 | Samsung Internet Full support 1.5 |
vw unit
|
Chrome Full support 20 | Edge Full support 12 | Firefox Full support 19 | Internet Explorer Full support 9 | Opera Full support 20 | Safari Full support 6 | WebView Android Full support 37 | Chrome Android Full support 25 | Firefox for Android Full support 19 | Opera Android Full support 14 | Safari on iOS Full support 6 | Samsung Internet Full support 1.5 |