З 66% да 185 пкс: Как дзеянні прыгледачаў вырашаюць значэнні CSS перад разметкай

Зяванне паводзя з метаючымі правіламі не ўсунецца на канець процесу обробкі заявы CSS. Якім бы ні быў результат, калі width: 50% перамагае ўсе іншыя правілы, браузер усё раве не можа передаць значэнне 50% своему механізму распакоўкі; яму трэба вырахаваць, што саме становіць 50% у даным контэксте, і ператворыць гэта на конкретны размер. Шырынае кераванне пашледжвае адно значэнне чераз кожны з этапаў обробкі, якія визначае спэцыфікацыя, паказвае, дзе вырахоўваныя абсалютныя елементы, такія як rem і відсоткі, а таксама пояснюе популярны трык ператварэння px у rem і яго наследкі для доступнасці.

Значэнне, якое вы запісуеце, не ўсегда будзе тым, якое будзе выкарыстоўвацца

Большая частка таго, што вы запісуеце ў файле стылю, — это адносныя вазнесення, а не безпосереднія меры. Шырока можа быць часткай шырокі гэтага элемента:

width: 50%;

або, у іншым правіле, іншай часткай:

width: 66%;

Размер шрыфту можа быць абсалютным у стосунку да размеру шрыфту корневага элемента:

font-size: 2rem;

А высота можа быць часткай відворы ўвагі:

height: 50vh;

Нічнае з гэтага не запісваецца ў пікселях, пры тым канфігурацыя ў канечнай лініи патрэбуе рэальных размераў, каб выявіць, дзе будзе распаложаны кожны елемент. Чырагуя гэты прыем, кожная значэнне проходзіць чераз фіксаваны ряд этапаў:

Declared Value
      ↓
Cascaded Value
      ↓
Specified Value
      ↓
Computed Value
      ↓
Used Value
      ↓
Actual Value

Назвы спачатку здаюцца жарганам, але кожны этап адпавядае на адну конкрэтную запытку. Наступныя разделы розглядаюць іх па порядку, вжываючы адны прыклад.

Заявленая значэнне: тое, што вы запыталі

Заявленая значэнне — это проста тое значэнне, якое выказваецца ў заяве. Дадана:

width: 66%;

Заявленая значэнне для width — 66%. Це проста запытка, больш нічога. Элемент можа легка мець калькі заявленых значэнняў для той самай власнасці, якія праганяюцца з разных правіл, таму першым крокам є выбіранне аднаго з іх.

Каскадаваныя значэння: тое заявленне, якое засталося

Уявіце два правіла, якія або бацька задаюць шырыню параграфа. Адно з іх викорыстоўвае селектар типу:

p {
  width: 100px;
}

а другое — клас:

.amazing {
  width: 66%;
}

Якщо параграф мае клас amazing, якія б правіла не застосаваны, яны падходзяць да ўсіх. Селектар класу є болей спецыфічным, чым селектар простага элементу, таму каскад выбірае:

width: 66%;

Тое засталое значэння 66% і є каскадаваным значэнням. Штадзе гэты крок мае значэнне, таму што кожны наступны этап працюе толькі з адним переможцам; заявленні, якія праспалі, адхоўляюцца, а не обрабоўваюцца.

Заданае значэння: перакананне, што кожная власцьтва мае сваё

Заданае значэння — это рэзультат гарантавання таго, што кожная власцьтва кожнага элементу мае якое-небудзь значэння. Правіло простае:

• якщо існуе каскадаванае значэння, яно стае заданным значэннем;

У іншым случае, для спадковайяя властывасці, заданая значэнне ўзимае форму вычысленага значэння абяцелі;

У іншым случае, гэта ўсё тое ж пачатковая значэнне властывасці, стандартнае за правіламі спефікацыі.

У нашам прыкладзе існуе каскадаванне значэнняў, таму заданая значэнне застаецца 66%, і на гэтым этапе нічога не выканана. Гэта становіцца важлівым для властывасцяў, пра якія зовсама не сказана ніякіх правіл, і самэ гэта є моментам, калі прыходзіць до спадкування. Гэты механізм рассказваецца ў заключным раздзеле.

Вычысленая значэнне: выявленьне таго, што можа быць выявлена без форматавання

Вычысленая значэнне — гэта тады, калі браузер выявляе ўсё, што можа быць вырахавана без фактычнага форматавання стораніцы. Абсалютныя дужынкі ствараюцца на адной з абсалютных дужынак, якія базуюцца на розмерах шрыфтаў, а ключавыя словы ператвараюцца ў конкрэтныя значэнні. Разглядзім:

font-size: 2rem;

Единица меры тут:

2rem

Гэта характарызуець спяванне „двойная велічына размеру шрыфта корневага элемента“, а не фіксаваную велічыну. На этапе вычыслення браузер знаходзіць размер шрыфта корневага элемента і перакладае гэтую велічыну у пікселі. Якщо размер шрыфта корневага элемента становіць 16 пкс, то вычыслены размер шрыфта будзе 32 пкс.

Однай з прычын такога перакладу ў гэты момент являецца наследаванне: вычысленая велічына являецца тым, што успадковуюць дзеціны элементаў, таму яны отрымаюць конкрэтную дужыну заместо спявання, якое мусілі бы пераадрасаваць у своем контэксте. Самэй гэтага вялічыны шрыфта, заданыя за дапамою em, нараджаюцца адна ў адной, і самэй гэтага высота лінійы, заданая у відсотках, інодзе стварае пераскорчаны текст у дзеціны элементаў з большыми размерамі шрыфта.

Дзеяныя значэнні ўсё яшчэ нельга вырахаваць. Шырыню у відсотках павярнуе розмер блока, які ўтрымвае елемент, а гэты розмер вядомы толькі пасля стварэння макета, таму 66% зазвычай застаецца відсоткам у вырахаваным значэнні і будзе фіксавана толькі на наступным этапе.

Выкарыстана значэнне: інформацыя пра макет

Выкарыстана значэнне — это рэзультат пасля таго, як стане доступна інформацыя пра макет. Вернуцца да:

width: 66%;

Сама по сабе відсотковая цифра є непূরнай, пакуль не вядома частка, яку ёй належыць. Для width такой параметр — это шырыня блока, які ўтрымвае елемент. Падазроўваючы, што родны блок є:

280px

шырокім. Браузер тады можа вырахаваць:

66% of 280px

чыя гэта значэнні:

184.8px

Эта значэнне ўжо ёсць фактычнае. Цэе є перыямок у процесе: прыгледальнік больш не выкарбавае паказаны вялічыну у відсотках, а рэальную габарит, які вылучаецца з фактычной геаметрыяй стораніцы. То ж самае стосуецца значэнняў у відпаведнасці да auto, якія маюць сэнс толькі пасля таго, як вядома структура розміткі навакола. Якщо вы запытаеце элемент у JavaScript за дапамой getComputedStyle, багатыя атрыбуты, залежныя ад розміткі, такія як width, вяртаюць гэтае фактычнае значэнне ў пікселях, а не вялічыну у відсотках, што є зручным спосабам абсалютвацыя стадію ў практыцы.

Фактычнае значэнне: прыстосаванне да абмежэнняў прыгледальніка

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

184.8px

і можа быць адрасавана прыблізна так:

185px

Гэты скоррекаваны значэнне ёсць фактычным значэннем. У практыцы сучасныя браузеры форматуюць элементы з точнасцю пад пікселем і прыменяюць заокругленне або іншыя корэкты ў розныя моменты, залежна ад атрыбутаў і самага двыжка, таму не варта паследважвацца конкрэтным правілам заокруглення. Галоўная ідея проста: можа быць фінальная корэктаванне межы вычысленым значэннем і тым, што практычна падае на экран.

Якщо адмаўчыць пра деталі, весь гэты процес сводзіцца да адной фразы: тое, што вы запісуеце ў файле стылю, не павінна прымусова быць тым, што браузер нарэшце выкарыстоўвае, і існуюць чытка вялізначаныя этапы, якія праходзяць у межах гэтага процесу.

Чаму абсалютныя елементы становяцца менш загадковымі

Гэтыя моделі пояснююць, чаму абсалютныя елементы такія ценныя, але часта неправильна разумеваныя. Такія елементы, як:

%
rem
em
vh
vw

Гэта дозволяе описваць размеры за дапамою іншых параметраў (розмеру абяцкі, базовага размеру шрыфта, сэрвыснага размеру шрыфта элемента, прастора адображэння), замест таго каб прыкладзаць значэння пікселей як статычныя канстанты. Самэ гэта спакоюе лейауты так, каб яны прыстосаваліся да разных экранаў і настройкаў корыстніка.

Кожны з іх, пры тым, павінен быть вырашаны ў стосунку да свайго кансэнтру пры тым, як лейаут можа іх выкарыстоўваць, і яны вырашаны на разных этапах: единіцы, залежныя ад шрыфта, — на этапе вычыслення, а працэнты — у стосунку да блока-якоря на этапе выкарыстоўвання. Вядучы за гэтым процесам, можна заменіць нечыткую ідэю пра тое, што «браузер сам усё вырашыць», на болей чыткое запитанне пад час дэбагавання: ад чаго залежыць гэтае значэнне і які ў цю момент є кансэнтр? Калі рэспонзыўны лейаут працюе некоректна, прычыной часта ёст той кансэнтр, які не збігаецца з тым, што вы прыпускалі, напрыклад, працэнт, які вырашаецца у стосунку да неспадзяванага блока-якоря, або елемент em, які накапліваецца через калькі наявных элементаў.

Пераклад px у rem з коранам 10px

Розуменне працэўвання з значэнням таксонаміі таксама раз’ясняе популярны процес канфігурацыі размэру: пераклад запісаў пікселей з дизайну у rem. Падазроўваючы, што дизайн паказвае:

padding: 30px;

і вы хочаце выразыць гэта так:

padding: 3rem;

Популярны падход — задаць розмэру шрыфта-кораня круглым числам:

html {
  font-size: 10px;
}

Калі гэта ўсталяна:

1rem = 10px

тады пераклады стаюць простай матэматыкай:

30px → 3rem
40px → 4rem
20px → 2rem

У загале:

rem = pixels / 10

Прычынная перавага — не толькі адносна чыстыя цифры. Адтакуль кожны rem вырахоўваецца на адной з базовых значэнняй шрыфта, таму змена гэтага значэння адразу пераскаліруе ўсе меры, заснованыя на rem, у сторонніку, што дае можлівасць ефектыва кантролюваць систему размэру.

Існуе важлівая застережэнне. Установка значэння кореня на фіксаваныя 10px перакрывае стандартны размер шрыфта, які можа быць выбраны корыстнікам у настройках браузера, што падрывае адну з галоўных прычын викорыстання rem — забезпечэнне доступнасці. Шырока аднойчы викорыстоўваная альтэрнатыва — html { font-size: 62.5%; }: пры стандартным значэнні 16px у браузеры, гэта таксама дае 10px, але размер шрыфта прыроста пропорцыйнальна, калі корыстнік зменшае або падвайнае жаданы ў яго размер. Якщо вы вядомаеце гэты падход, не забудзіце таксама задаць чытальны размер шрыфта для body (напрыклад, 1.6rem), адтуды ў іншым случае текст будзе прадуманы за стандартны, зменшаны размер кореня.

Калі нічога не было задана

Адна запытка застаецца без адказу пасля выканання паказаных вышэй крокаў. Возьмім такі маркап:

<div class="parent">
  <p>Hello World</p>
</div>

і правілу для обгорткі:

.parent {
  color: red;
}

Нідзе няма правілы на кшталт:

p {
  color: red;
}

Адзінакова, тэкст абзацу ў жоўтым калеры. У абзаце няма каскадаванага значэння color, таму заданая яго вялічына павінна прыйсці з іншага джерага. Паколькі color ўзяты як спадчынае атрыбут, браузер выкарыстоўвае вычыслены калер бацькім элементу. Гэта і є спадчына, якая безпаследкова прабівае на стадію заданых значэнняў, апісаную раней. Ёсць патрэба аддзельнага розгляду спадчыны, каб дакладна разумець, якія атрыбуты спадчываюцца, чаму дзецяві элементы атрыбуюцца вычысленыя, а не заданыя значэнняі, і як inherit і initial перакрываюць стандартныя настройкі.

Ключовыя выводы

• Значэння CSS праходзіць через шасць стадыяў: заданае, каскадаванае, спакаянэ, вычысленае, выкарыстоўванае і фактычнае.
• Каскадаванне ператварае многія заданыя значэнняў у адна каскадаванае значэнне; толькі гэтае значэнне працоўвае далей.

Указаная значэньце пераходзіць на спадчынную значэньцу або на пачатковую, калі нічога не было заявлена.

Единіцы, залежныя ад шрыфту, такія як rem і em, стаюць абсалютнымі дыявохамі на этапе вычыслення; шырэйнес у відсотках чакае на распалоўку і фіксуецца на этапе выкарыстоўвання.

Фактычная значэньце можа быць скоректавана з учыткам меры можлівасцей прыстрою, таму трэба утрымлівацца ад пасляўжнення на точнае заокругленне.

Трюк з 10px-root спрыяе простам перакладу en rem, але 62.5% лепей вырахоўвае прагантыванні корыстувальця ў шрыфтах, чым фіксаваны 10px.