Почему мой CSS не отображается корректно?

· HTML & CSS и Блог · 1 мин чтения

Во время разработки сайта вы должны учитывать огромное количество правил. Во время создания веб-страниц важно всегда помнить о DOCTYPE, так как именно он говорить браузеру о версии HTML. 

Что такое DOCTYPE?

Простыми словами — это тип документа (DOC — document или документ, а TYPE — тип). Это самая первая строка в HTML, которая говорит браузеру о типе разметки веб-страницы. Есть два основных типа или так называемых мода DOCTYPE, они описаны ниже.

Современные браузеры включают в себя два основных рендеринг мода DOCTYPE’а:

  • Quirks Mode. Это режим так же называется режимом обратной совместимости. Чаще всего веб-страницы попадают в эту категорию из-за нестандартного рендеринга документа (нестандартной верстки) или из-за отсутствия DOCTYPE в HTML.
  • Стандартный мод. Этот мод приветсвуется при соблюдении всех правил W3C. Все новые современные HTML страницы (по крайнее мере в 2015-2016) должны быть разработаны по определенным правилам. Если это так и есть, то они попадают в эту категорию. Так же большую роль играет версия DOCTYPE — усли стоит современный, напирсер <!DOCTYPE html> (самая последняя версия, подробнее о версиях ниже), то документ будет проходить рендеринг по этому моду.

Типы DOCTYPE

Ниже представлен список DOCTYPE которые чаще всего используются для указания версии документа.

<!DOCTYPE html> /* Это HTML5 doctype. Каждый современный браузер использует HTML5 парсер, а так же это рекомендуемый doctype */

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Вывод

Я лично советую использовать <!DOCTYPE html>, так как это самая последняя версия doctype, которая поддерживает все последние веб-стандарты.

Если у вас остались какие-либо вопросы — пишите ниже под этой записью.

Источники