Px, em, %, pt і ключові слова

Коли справа доходить до установки розмірів в CSS, у вас з’являється безліч можливостей. Ви можете вказати ключове слово, наприклад:

p { font-size: small; }

або числове значення. В останньому випадку необхідно вказати одиниці виміру – один з чотирьох варіантів. Що ж краще? -Залежить від обставин. Давайте подивимося уважніше.

Ключові слова

Коректними значеннями для розмірів шрифтів є ключові слова xx-small, x-small, small, medium, large, x-large та xx-large, а також smaller та larger, що вказують відносний розмір.

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

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

Лише при вказівці відносного розміру реалізується «каскадність», і розмір шрифту батьківського елементу впливає на розмір шрифту дочірнього. Припустимо, для батьків вказано розмір medium, а для нащадкаlarge. У цьому випадку розмір шрифту дочірнього елемента буде тільки large, і нічого більше. Однак, якщо для батьків ми вкажемо medium, а для нащадкаlarger (зауважте, larger, а не просто large), дочірній елемент «підросте», щоб мати більший розмір шрифту, ніж у батька. Змініть розмір шрифту батька, зміниться і дочірній розмір, звідси «каскадність».

Використання ключових слів – це відмінний спосіб управління шрифтами на web-сторінці. Ось одне з найбільш поширених застосувань цієї техніки: ви можете визначити з допомогою ключового слова розмір шрифту для елемента body, а потім встановлювати відносні розміри для інших елементів. Це дасть вам можливість з легкістю зменшувати і збільшувати розмір шрифту одного лише елемента body (наприклад, за допомогою JavaScript), при цьому буде відповідним чином змінюватися і вміст всієї сторінки.

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

px

Якщо вам потрібна точність, вказівка розмірів у пікселях (px) – відмінний вибір (і мій улюблений). На комп’ютерному екрані немає нічого дрібніше окремого пікселя. Визначаючи розмір в пікселах, ви буквально вказуєте браузеру вивести символи точно заданої висоти.

У Windows або Мac, в різних браузерах, згладжений чи ні – не важливо, шрифт розміром 14px матиме висоту 14 пікселів. Але це не означає, що не може бути ніяких відхилень.

За своєю суттю, значення, вказані в пікселях, не можуть бути каскадними. Якщо батьківський елемент має розмір 18px, а дочірній – 16px, то останній завжди буде 16px. Проте, можна комбінувати два способи. Наприклад, якщо для батьків було вказано розмір 16px, а для нащадка – ключове слово larger, то предок дійсно виявиться більшим батька.

Larger збільшило розмір батьківського елемента, 16px, до 20px, тобто на 25%.

У цього методу було погане минуле в плані загальнодоступності і юзабіліті. В IE версії 6 і нижче, текст з розміром, зазначеним в пікселях не міг бути збільшений або зменшений користувачем. Це означає, що ми, розумні, молоді та здорові дизайнери, можемо нормально читати на екрані текст розміром 12px, однак, коли більш літні люди спробують збільшити розмір цього тексту, щоб його прочитати, виявиться, що це неможливо. Насправді, це вина IE 6, а не наша, але, що є, то є, і цю проблему доводиться вирішувати.

Визначення розмірів шрифту в пікселях – найбільш точний (і, я вважаю, найбільш прийнятний) спосіб, але візьміть до уваги відвідувачів вашого сайту, які все ще користуються IE 6. Хоча зараз ми якраз на порозі того, щоб перестати про це дбати.

em

Вказівка розмірів в em – можливо найскладніший для розуміння спосіб, так як ідея, на якій він побудований, абстрактна і умовна. Ось в чому вона полягає: 1em еквівалентний поточному розміру шрифту елемента. Якщо розмір шрифту не був зазначений, використовується значення за замовчуванням, для більшості браузерів рівне 16px. Отже, за замовчуванням 1em = 16px. Якщо ви встановили розмір шрифту 20px для елемента body, тоді 1em = 20px.

Думаю, історично величина «em» походить від ширини великої літери M, але не варто посилатися на мене з цього питання.

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

h1 { font-size: 2em; }

Ця двійка – по суті, коефіцієнт для поточного значення в em. Так, якщо поточне значення – 16px, розмір заголовка стане рівним 32px. Математика працює залізно, але, як ви можете собі уявити, часто доводиться округляти значення.

Найбільш популярний метод роботи з em – установка розміру шрифту для елемента body в 62.5%. Оскільки за замовчуванням розмір шрифту дорівнює 16px, це еквівалентно 10px (але без безпосередньої вказівки розміру 10px, який не був би каскадним). (Цю пропозиціюя варто прокоментувати. Розміри, задані в em, будуть каскадними, навіть якщо розмір шрифту в body вказано в пікселях. Однак, якщо задати базовий розмір жорстко в пікселях, то будуть проігноровані налаштування браузера, що небажано, так як користувачі зі слабким зором можуть встановлювати збільшені розміри шрифтів. у цьому випадку, розміри в пікселях справді не каскадуються з налаштуваннями браузера.) Використовувати в якості множника 10 набагато простіше, ніж 16. Вам потрібен розмір шрифту 18px? Використовуйте font-size: 1.8em.

Так навіщо морочити голову, якщо це всього лише абстракція для значень, заданих в пікселях? Можна назвати три причини:

– Цей спосіб дозволяє користувачеві змінювати розміри в IE 6
– Можна ставити відносні розміри (для «гумових» сайтів)
– Можна реалізувати каскадність

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

Em можна застосовувати не тільки для шрифтів, цією одиницею виміру можна задавати будь-які розміри (ширину, висоту і т.д.). У «гумових» сайтах em використовуються всюди, що дійсно робить їх «розтягнутими»: при збільшенні розміру шрифту збільшується розмір усіх елементів в межах ширини сторінки сайту. Розміри, задані в em мають прямий зв’язок один з одним. Якщо у вас є контейнер висотою 10em і текст розміром 1em всередині нього, то текст займе рівно одну десяту висоти контейнера. Ця точність в пропорціях робить em потужним засобом веб-дизайну.

Є одна потенційна проблема, що відноситься до третього пункту. Значення у em дійсно каскадні. Кожне значення в em залежить від батьківського значення. Якщо ви використовуєте em як безпосередню заміну значень в пікселах, це може викликати проблеми. Наприклад, ви можете виставити елементам p (параграф) і li (елемент списку) розміри 1.2em. Сьогодні це буде виглядати чудово, але завтра ви додасте параграф, що містить список. Два розміри через каскадність будуть перемножені (1.2 x 1.2) і елемент списку стане більшим, ніж текст параграфа. Немає ніякого виходу, крім як видалити тег.

%

Принцип роботи значень, вказаних у відсотках, досить очевидний. Працюють вони точно так, як ви від них очікуєте. Якщо батько має розмір 20px, а предок – 50%, то його висота становитиме 10px. Також як і em, відсоткові значення відносні. Їм також властива каскадність, тому описана вище проблема з параграфом і списком проявляється і тут.

Ось популярна техніка використання відсоткових значень: вказати відповідний розмір шрифту для елемента body (наприклад, small), а потім використовувати відсоткові значення для всіх інших елементів. Це дозволить при необхідності виправити значення всього в одному місці, щоб маштабувати шрифти на всій сторінці, що набагато спростить реалізацію такої функції як зміна розмірів шрифтів.

pt

Остання одиниця виміру, в якій можна вказувати розміри – пункти (pt). Пункти використовуються тільки в CSS-схемах для друку! Пункт – це одиниця виміру, яка використовується на практиці в друкарні. 72 пункти дорівнюють одному дюйму, справжньому, як на лінійці. Але не дюйму на екрані, який цілком і повністю залежить від роздільної здатності.

Пункти, так само, як і пікселі на екрані, абсолютно точно задають розміри на папері. Для крос-браузерності і крос-платформності задавайте розміри в CSS-схемах, призначених для друку, тільки в пунктах.

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