HTML - мова гіпертекстової розмітки із якої починають всі при вивченні фронтенду.
Говорячи про doctype у більшості матеріалів сказавно - ну це штука яку потрібно писати бо якщо не напишеш то браузер якось по іншому все намалює. От про це - “якось по іншому намалює” і поговоримо.
Цей довгопис буде розгорнутим і в моментах нудний, бо теорії до біса. Але постараюсь наводити приклади і позначати дійсно важливі місця.
Doctype
Як doctype описаний в інтернетах:
Оголошення doctype у HTML використовується для визначення версії документа HTML, який використовується. Він розміщується на самому початку документа HTML і не є тегом HTML. Оголошення doctype допомагає веб-браузеру правильно відображати веб-сторінку, повідомляючи, яка версія HTML використовується в документі.
Круто, наче зрозуміло - НІ.
що таке doctype HTML - зрозуміло. Але щож тоді означає просто doctype ?
Які взагалі версії doctype існують і чим відрізняються ?
Що означає *правильно відображати веб-сторінку* ?
Чи є різниця відображення у різних браузерах ?
Люблю дайвити у теми які здаються зрозумілими по абстрактному поясненню. Розбираючись із такими темами зможете прокачатись в ширину і глибину одночасно.
Перед тим як зануритись у недрі, поясню за doctype:
Doctype - це файл (зазвичай із розширенням dtd). DTD - document type definition, звідси і скорочення - doctype.
Тепер більш зрозуміло за що відповідає і що означає слова doctype.
Специфікацій doctype безкінечна кількість бо це загальне поняття яке не тісно пов’язане із HTML. Скоріше doctype має більше віднощшення до XML. І звісно кожен може створити свою специфікацію doctype.
Ще один важливий поінт закритий. Йдемо далі, тепер тільки про доктайпи які стосуються браузеру і відображення контенту у браузері.
Взагалі сприймати doctype як (document type definition), якось душно, тому я сприймаю це як визначений namespace який описує допустимі теги та всі властивості цих тегів, а також API можливості для JS.
Короткий список доктайпів для HTML, SVG. так SVG також мають свій doctype.
HTML
HTML5: <!doctype html>
HTML 4.01 Strict: <!doctype html PUBLIC "-//W3C//DTD HTML 4.01//EN" "<http://www.w3.org/TR/html4/strict.dtd>">
HTML 4.01 Transitional: <!doctype html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "<http://www.w3.org/TR/html4/loose.dtd>">
XHTML 1.0 Strict: <!doctype html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "<http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>">
XHTML 1.0 Transitional: <!doctype html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>">
SVG
SVG 1.0: <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "<http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd>">
SVG 1.1: <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "<http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd>">
SVG 1.1 Basic: <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Basic//EN" "<http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-basic.dtd>">
SVG 1.1 Tiny: <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "<http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd>">
SVG 1.2: <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.2//EN" "<http://www.w3.org/Graphics/SVG/1.2/DTD/svg.dtd>">
Так, тяжко. А ще буквально 10 років тому потрібно було пам’ятати doctype для HTML 4.01…
Quirks Mode
Якщо коротко про Quirks Mode - у часи динозаврів сайти писались під 2 популярних браузери (Netscape Navigator, Microsoft Internet Explorer). Але все це робилось без правил або стандартів і тоді у цю гру увійшла організація W3C із своїми правилами. Але браузери не могли так просто перейти на ці стандарти, тому вони вирішили частково грати по правилах і звідси пішло поняття Quirks Mode.
На новіших версіях браузерів - сайти працювали по новомодних стандартах W3C. Але на старих все працювало у режимі Quirks Mode, порушуючи всі правила і закони, і це було OK тому що часи були складні (Взагалі це зробили для того щоб все що було створено в інтернеті до 1990х не перестало відображатись у нових браузерах із новими стандартами).
З часом Quirks Mode вирішили теж стандартизувати, бо хоч всі погодились із тим що старі браузери грають не по правилах, нові стандарти додавались і оновлювались дуже стрімко і уже нові браузери такі як IE6, IE7… Теж відображали контент у режимі Quirks Mode відносно останнього апдейту стандарту (Часи були складні).
Починаючи із IE10, IE11 Quirks Mode починає стандартизуватись і опиратись на реалізацію Quirks Mode в інших браузерах, і таке поняття назвали - *interoperable Quirks mode* (сумісний режим). А зробили це тільки тому що у IE6-9 був свій Quirks mode який опирався на IE5.5.
І тепер коли говорять про Quirks mode мають на увазі IE5.5, а щоб бути сучасним-молодіжним, говорять *interoperable Quirks mode* або *Almost Standards Mode*.
Як потрапити у цей режим ?
Ну якщо вам дуже хочеться то вам потрібен IE нижче 9 версії. Але такого при здоровому розумі ніхто робити не захоче. (Загалом нічого суперординарного ви не побачите, просто половина тегів працювати не буде, а інша половина відобразиться із іншими відступами і розмірами ніж ті до яких ви звикли).
Які є режими відображення у Браузерах ?
Quirks Mode - Уже розібрали
Standards Mode - doctype HTML (останній стандарт)
Almost Standards Mode або interoperable Quirks mode - (Те що писав вище)
The Mode for application/xhtml+xml Content (XML Mode) - це стандарти не для HTML, тому про них якось потім.
IE-Specific Web Content-Controllable Additional Modes from Microsoft - ще один темний ліс від Майкрософт. Коротко - це не глобальний мод для всіх браузерів, це найменування групи яка включає у себе опис моду для кожного браузеру IE.
IE-Specific Additional Modes from Google - теж саме що і Майкрософт тільки від Гугла (Бо можуть).
Doctype Sniffing (Doctype Switching)
Це останнє що розглянемо.
Doctype Sniffing - для аристократів.
Doctype Switching - для смертних.
Це одне і теж саме.
Коротко - це процес визначення doctype, тому що як виявилось, для того щоб знати у якому режимі малювати контент то потрібно визначити цей самий режим (doctype), чи є він валідним, чи це стандарт чи ні, якщо не задали то чи є у браузеру якийсь фолбек і подібні ситуації.
Але саме цікаве те що поки розробили цей механізм то нові браузери уже перейшли на HTML 5, а старі не могли собі ніяк його імплементувати і просто малювали все у Quirks Mode.
Отакий легенький прикол від стрімкого розвитку ІТ
Підсумок
Коли більше року тому перший раз спробував знайти матеріал на цю тему, був деже здивований його відсутністю. На просторах інтернету існує буквально 2-3 гарні статті у яких детально розписана ця тема.
Я постарався написати про все простими словами і насправді багато чого пропустив, тема дуже складна якщо розібратись у ній досконально.
Більш детальніше можна подивитись у моєму матеріалі тут.
