В мире веб-разработки, который меняется каждый день, некоторые элементы кода становятся историей, а некоторые остаются важными маркерами правил «хорошего тона». Одним из таких элементов является атрибут type в теге <style>.
Когда вы подключаете стили к HTML-документу с помощью тега <style>, вы часто можете увидеть такую конструкцию:
<style type="text/css">
body
{
background-color: white;
}
</style>
Но что именно означает этот атрибут и насколько он важен сегодня?
Значение по умолчанию: text/css
Исторически сложилось так, что Интернет развивался как универсальная среда. Браузеры должны были понимать, с каким типом содержимого страницы они имеют дело. Для этого используется MIME-тип (Multipurpose Internet Mail Extensions).
Атрибут type в теге <style> сообщает браузеру, какой язык или тип таблицы стилей находится внутри тега. Стандартом де-факто для каскадных таблиц стилей (CSS) является тип text/css.
На заре веба указание этого типа было обязательным требованием спецификации. Если вы его не указывали, браузер не обязан был интерпретировать содержимое как CSS.
Другие типы: Эксперименты, которые не взлетели
Хотя сегодня text/css — это король, технически в атрибут type можно было подставлять и другие значения. Это открывало двери для альтернативных языков описания стилей, которые, однако, так и не получили широкой поддержки.
Вот несколько примеров таких таблиц, которые либо плохо поддерживались, либо были окончательно отвергнуты сообществом:
1. text/xsl (eXtensible Stylesheet Language)
XSL — это язык правил для преобразования и форматирования XML-документов. Его часть, XSL-FO (XSL Formatting Objects), предназначена именно для визуального форматирования (верстки под печать или экран). XSL гораздо сложнее CSS и никогда не был предназначен для интеграции с HTML через тег <style>. Поддержки в браузерах для использования XSL в качестве «внутренних» стилей практически не было (XSLT использовался для преобразования структуры, а не для стилизации в реальном времени через <style>).
2. text/jsss (JavaScript Style Sheets — JSSS)
В конце 90-х компания Netscape предложила альтернативу CSS — таблицы стилей, написанные на JavaScript (точнее, на его диалекте). Выглядело это так:
<style type="text/javascript">
tags.body.color = 'white';
tags.p.fontSize = '14pt';
</style>
Эта технология (известная как JSSS) была реализована только в браузере Netscape Communicator 4 и очень быстро умерла, проиграв войну CSS. Сегодня это лишь историческая сноска.
3. text/html
Технически, можно было попытаться вставить внутрь тега <style> HTML-разметку, но браузеры либо игнорировали бы это, либо ломали парсинг страницы. Это некорректный тип для стилей.
Можно ли не указывать type?
Современные спецификации HTML (в частности, HTML5) сделали большой шаг вперед. Сейчас, если вы не указываете атрибут type в теге <style>, браузер автоматически предполагает, что вы имеете в виду text/css.
Более того, даже если вы укажете несуществующий или неизвестный тип (например, type="text/my-crazy-styles"), браузер просто проигнорирует содержимое тега, что может сломать верстку.
Почему лучше всегда указывать type="text/css"?
Несмотря на то, что современные браузеры умны и по умолчанию подставляют text/css, существует как минимум три причины, почему стоит продолжать явно указывать этот атрибут (или использовать пригодные шаблоны, где это требуется):
- Точность кода и корпоративные стандарты: Многие крупные компании и строгие “проверяльщики” кода (например, для госсайтов или банковских систем) могут требовать строгого соответствия стандартам XHTML или устаревшим корпоративным правилам кодирования. Отсутствие обязательного (в старых спецификациях) атрибута может считаться ошибкой.
- Защита от будущего и странных окружений: Хотя это маловероятно, существуют парсеры, инструменты для преобразования данных на экране (скрин-ридеры) или нестандартные браузерные окружения (встроенные в приложения), которые могут не следовать логике HTML5 по умолчанию. Явное указание типа исключает двусмысленность.
- Совместимость со старыми браузерами: Очень старые браузеры (например, Netscape 4, Internet Explorer 5 для Mac), увидев тег <style> без атрибута type, могли просто проигнорировать его, посчитав неизвестным элементом, или вывести его содержимое на экран как текст. Для современной разработки этот аргумент почти неактуален (доля таких браузеров стремится к нулю), но для проектов, ориентированных на очень специфичную аудиторию, он все еще может иметь вес.
Вывод
Атрибут type="text/css" в теге <style> — это рудимент эпохи становления веба, когда браузеры нуждались в явных подсказках. Сегодня, в эпоху HTML5, его можно смело опускать, если вы не связаны жесткими корпоративными стандартами и не поддерживаете браузеры 20-летней давности.
Однако его указание или не указание не делает погоды и не экономит особо ваше время. Если ваш стиль кода требует максимальной ясности и точности по старым лекалам, смело оставляйте type="text/css". Если же вы предпочитаете чистоту и краткость современного HTML, знайте, что браузер поймет вас и без него. Главное — быть последовательным в своем выборе.
На этом всё. Подписывайтесь на канал, чтобы ничего не пропустить.