З шаблона стылю да экрана: як CSS падчыняецца ў процесе обрабаткі браузера
Следаванне CSS ад завантажэння да пікселей: як ствараюцца DOM, CSSOM і дрэўо адрасавання, дзе выконваецца каскадаванне стыляў, і якія варыянты стыляў конкуруюць за кожны элемент.
Большасць разработчыкаў пішаюць CSS на інтуіцыі: зменяюць якую-небудзь власнасць, перазавантажуюць сторунку і пераканальваюцца ў рэзультате. Гэта працюе, пакуль якаясь правіла таёмніча ці не будзе застосавана, сторунка пакажае контэнт без стылю або „простая“ зміна стылю спрычыняе працясценне скроллінгу. Кожна з гэтых проблем становіцца лёгкай да разумення, калі вы знаеце, што на самай працы рабіць браузер между приймам стылевага файла і атрыбутаваннем пікселей.
У гэтым кяле вельмі структуравана адпаведзь на гэтыя пытанні. Вы пазнаеце, як браузер ператварае HTML у DOM, як стылевыя файлы становіцца CSSOM, як гэтыя два элементы з’еднаюцца ў дрэво атрыбутаў, дзе рашаюцься суперсучасныя заявы стылю і якія джэрела стылю конкуруюць за кожны элемент. Гэта таксама ўзнакомы вопыск у абавесцях, як правільна часта фармулюецца як „як на самай працы функцыонуе CSS?“, а адпаведзь нижэй дае вам структураваны спосаб працаваць з гэтым вопыскам.
Першы крок: HTML становіцца DOM
Калі вы ачынаеце URL, прыгледач спачатку отрымае дакумент HTML. Ён аналізуе маркап з верху да ніжоў, і па ходу стварае Model об’екта дакумента. DOM — это дрэва, якое представляе весь дакумент: кожны элемент — это вузол, а вузлы выступаюць у зв’язку адно з іншым як выродзілі, дзеці та браты-сястры, падобна да генеалагічнага дрэва. Усё, што было описанае ў HTML, тепер знаходзіцца ў гэйскай структуре, і самэ гэта JavaScript чытае та меняе.
Аналіз ведэцца поступова. Прыгледач не чакае заканчэння загрузкі всіх файлоў, прычыму ён можа знаходзіць іншыя рэсурсы задоўга да таго, як дакумент будзе загружаны цэлы.
Другі крок: шаблоны стылю стаюць CSSOM
Падчытваючы HTML, прыгледач знаходзіць шаблоны стылю, незалежна ад таго, чырпаюцца яны за дапамою <link rel="stylesheet"> у частцы head чы ўбудованы ў элементы <style>, і таксама пачынае ўзяць іх та падчытваць. CSS падчытвается і ператвараецца у сябее структуру у форме дрэва — CSS Object Model, або CSSOM. Ён выпалюе тую ж ролю для стылю, якую DOM выпалюе для маркапа.
Ператворэнне CSS у стылі, якія можна выкарыстоўваць для элемента, апыходзіцца большай працай, чым ператворэнне HTML у вузлы. Выделяюцца два заведамення:
- Расляжэнне суперсечанняў. Часта калькі настоўваюць тую ж власнасць для таго ж элемента. Прыгледач разрешае гэтыя суперсечання за дапамою алгорытму, які называецца каскадаваннем.
2em, 50% або inherit, чыя значэння ўзлётна-посадковы механізм паказвальнай сістэмы яшчэ не можа выкарыстоўваць. Браузер ператварае іх у конкрэтныя значэння.Стрычна кажучы, CSSOM — это апрацаваная версія шаблонаў стылю, а каскадаванне і вычыслення значэнняў адбываецца, калі браузер вычысляе стыль кожнага элемента. Аднак для простага розумеўня можна супакоўвацца з думкай, што "CSS апрацоўваецца, суперсечанні рашаюцца, значэння заканчоўваюцься, а рэзультат прыкладаецца да элементаў">.
Адзін практычны наследак: так как браузер патрэбуюць стылі, прытаманныя ему, перш чым ён зможа атрыбутаваць значэння элементам, шаблоны стыліў у блоку head атрыбуецца толькі пасля ўсунення і аналізу. Самэй гэтага большыя, повольныя шаблоны стыліў спрычыняюць затрымку пад час першага атрыбування стыліў, і самэй гэтага важна, каб критычны CSS быў маленькі, для паўнага функцыонавання браузера.
Трэці крок: DOM і CSSOM аб’еднуюцца ў дрэво атрыбування стыліў
Калі маркап з’являецца ў формате DOM, а стылі — у формате CSSOM, браузер з’еднае іх у дрэво атрыбування стыліў. У гэтым дрэве знаходзяцца вузлы, якія будуць практычна адобразжаны, кожны з якіх супараджаны з вырачанымі для яго стыліямі. Вузлы, якія не даюць візуальнага рэзультата, такія як контент <head> або элементы з атрыбутам display: none, не включаюцца.
У гэты момент браузер ведае, што трэба адобразіць і як кожны элемент стылізаваць, але ўсё ж не ведае, дзе самэй гэты элемент будзе розташоўвацца і якога ён будзе размеру.
Чэтырый крок: раскладка і модель візуальнага форматавання
Ёжылкі, які маюць стыль, ператвараюцца на рамкі з адначытаемай пазухой, і браузер для гэтага выкорыстоўвае тое, што спецыфікацыя CSS называе модэллю візуальнага форматавання. Шырокi частка спецыфікацыі CSS описвае, як элементы дрэва дакумента распалажуцца на экранах візуальных прыстроёў, такіх як ноутбукі чыста тэлефоны. У яй уключаны модэль рамкі, форматаванне блакоў і айнлайна-элементаў, плаванне элементаў, пазухаванне і іншыя правілы, якія вялікай меры вплываюць на размер і пазуху кожнай рамкі.
Калі раскладка вырахавае геаметрыю кожнай рамкі, браузер яе атрыбутуе тэкстам, кольрамі, рамкамі, адпраўкамі і ценямі, і ў падсумку рэзультат апынваецца на экране.
Весь процес у пераглядзе
Складанне эйхацоў дае простую алергію ад маркапаў да пікселей. Кожны стрэлка скрывае значную кантэнцыю работы, але самэй лепшы ёсьць тое, што мае значэнне для аналізу багоў і выканаў:
HTML
↓
DOM
↓
CSS
↓
CSSOM
↓
DOM + CSSOM
↓
Render Tree
↓
Layout
↓
Paint
↓
Pixels on the Screen
Рэальныя браузеры перакрываюць гэтыя крокі і дадаюць ўсё больш (напрыклад, шары композіцыі), і змена стылю пазней можа вымусіць браузер зноў расчысляць стылі, пераранаваць лейаут або перамалюваць, залежна ад наявных параметраў. Чым дакладней паглядзець на гэтыя затраты, можна прачытаць у чым кожная змена CSS коштае браузер.
Чаму декларацыі суперсучасныя
У рэште гіда праблема сфокусаваная на першай з двух задач обробкі CSS: рашыранні канфліктав. Алгорытм, який за гэта відпавядае, — каскадаванне. Ён аб’еднвае всішыя шаблоны стылю, якія застосоўваюцца да дакумента, і калі болей адна декларацыя задае тую жа власць для таго ж элемента, ён выбірае, калія з іх мае прывілей.
Канфліктав немагчыма ухіліцца, і не толькі таму, што ваш саўны шаблон стылю можа задаць color для хутчоў у двух месцах. Стылі прыходзяць з кальколька незалежных джэрел, якія называюцца аднагоўшчынамі, і ўсе яны застосоўваюцца да тых сабе элементаў адночасова.
Стылі автара
Это тыя декларацыі, якія пішаеце вы і ваша каманда: вашы шаблоны стылю, блакі <style> і атрыбуты style унутрана. На большыні сайтаў яны ў значнае меры ёсць найбольшым джэрелам правіл.
Стылі корыстніка
Чалавек, які выглядае сторанку, таксама можа вплываць на стылі. Браузеры дазваляюць корыстувачам налаштаваць такі параметры, як стандартны размер шрыфта, а дзеярыя з іх таксама падтрымляюць спецыяльныя шаблоны стылів корыстувача або дадаткі, якія іх вставляюць. Гэтыя настройкі ўсё бол важлівыя для доступнасці, таму што яны дазваляюць чытальнікам з слабкым зорам або тым, у кых є труднасці з чытаннем, прыстосаваць сторанку да своіх патрэб.
Стылі пользователя-агента
На заканчык, браузер (пользователь-агент) выкарыстоўвае свой сябе стандартны шаблон стыліў. Самэльга таму элемент <a> без стыліў выглядае сінім і падкрэсленым, загалоўныя элементы выдатнаеся жырным шрыфтом і ў большым размере, чым тэкст корпусу, а элемент <body> мае невялікі відступ. Гэтыя стандарты называюцца стылі пользователя-агента.
Калі каскадны прыем з’еднае ўсе тры джерела, адной і той жа властыбет на аднам і том жа элементе можа легка практычна прыміць калькі супернікаючых значэнняў, і браузеру патрэбны дэтэрміністычны спосаб выбору.
Як працюе каскадна прагматыка
Каскадная прагматыка поручае суперсечныя заявленнія, выкарыстоўваючы фіксаваную серыю крэтарыяў, і пераходзіць да наступнага толькі тады, калі папершній дае раўнасць:
- Паходжанне і значыцьба. Звядзе где бераецася заявленне, і чы роўнасць пазначана як
!important. - Спецыфічнасць. Насколькі точна селектар нацэлёваеся на элемент; селектар ID мае перавагу над селектаром класу, які зноў мае перавагу над селектаром типу.
- Порядак у выкліканні. Якшчы ўсё інше адно, заявленне, якое выказваецца пазней, выграўае.
Ранжыраванне паходжанняў
Для першага крэтарыяў класычны порядак прывілеяў ідзе з высокага на низкі такім чынам:
- Заявленні корыстувача, пазначаныя
!important. - Заявленні автара, пазначаныя
!important. - Звычайныя заявленні автара.
Зверніце увагу, што гэта значыць. Вашы звычныя стылі перакрываюць звычныя прагпаты корыстунача і стандартныя настроекі прыгледача, і самэ гэта дазволяе вам ствараць сторанку. Але !important перакідвае парадокс межу корыстуначамі і автарамі: корыстунач, якому сапраўды патрэбны большыя шрыфты або вышы контраст, можа пазначыць гэты прагпат як важны і перакрыць нават вашы правіла !important. Стандартныя настроекі самога прыгледача знаходзяцца ў канцы і прыкладжуюцца толькі тады, калі ніхто іншы нічога не запрашвае.
Сучасны CSS дапраўляе гэтыя прынцыпы. Чыргавая практыка таксама узьлічвае шары чыргавай практыки (@layer), стылі, заданыя пад час анімацый і пераходаў, а таксама заявы !important для user-agent, якія маюцы вышэйшую прыоритетнасць за ўсі іншыя важлівыя заявы. Апусцоўаны вышэй спіс все ж такі паказвае найважлівейшыя зв’язкі, якія маюць значэнне ў практычным жыцці; для абсолютнага порядку пераказоў застосавіце ссылку на дырэктыву чыргавай практіки MDN, якая даўно была даная.
Спецыфічнасць і порядак выканання засобаў задаючых стылі заслуговуюць на адзельны детальны разгляд, укладаючы ў сябе тое, як порівнююцца вагі селектараў, і чаму !important часта стварае больш проблем, чым яны рашае. Гэта раскрываецца ў статыцы «Як чыргавая практіка выбирае пераможця».
Чаму гэтыя знанья ўжыткавы
Розумеўшы гэты процес, вы зменяеце спосаб діагностикі і стварэння стыліў:
- Правіла, які не паўтрапляюць у прыменэнне, часта ўскладняюць роботу заўсёды. Якщо вам вядома парада походжэння, спецыфічнасці і порядак выкарыстоўвання правіла, вы знаеце, дзе шукати рашэння, а не павінны вяртацца да
!important. - Моменты, калі контэнт не мае стылю або стыль застосовуецца пазней, выходзяць з таго, што шаблоны стылю можу блакаваць процес атрыбутавання элементаў, і з таго, што стылі застосовуецца пасля першага атрыбутавання.
- Нестабільныя взаімадзеі часта ўскладняюцца з-за змян, якія прымушваюць систему паўтарна выконваць задачі з распакоўкай элементаў аб ўзораваннем, чаго можна ухіліцца, як толькі з’ясуеце, на калькі стадыі паўтарна вплывае тая чы іншая власць.
- CSS, які лёгка ў тыямленні, — это CSS з низкай, прагнозаванай спецыфічнасцю і чыстым порядкам выкарыстоўвання правіла, што спрадчыяе як для прыстрою перагляду, так і для вашых колег у обробцы.
Заключэнне
Браузер ператварае HTML у DOM, шаблоны стылю — у CSSOM, апярожвае іх у дрэва адраджавання з виднымі, стылізаванымі вузламі, а пасля выкарыстоўвае модэль візуальнага форматавання, каб распакаваць рамкі прытым, як іх намалаваць. У стадії CSS першым фільтрам є каскадаванне: яно з’едынае стылі автара, корыстувальніка і user-agent, рашуе кожны конфлікт па падчыненню і значэнні, потым — па спецыфічнасці, а пасля — па порядку выканання. Наступная стадія, калі паводзячыяся значэння ператвараюцца ў конкретныя цифры, якія можа выкарыстоўваць двыжак распакавання, апісана ў як браузеры рашуюць значэння CSS прытым, як распакаваць.