Введение
Форма разделения контента и представления для веб-дизайна
Веб-таблица стилей – это форма разделения контента и представления для веб-дизайна, в которой разметка (т.е. HTML или XHTML) веб-страницы содержит семантическое содержание и структуру страницы, но не определяет её визуальное оформление (стиль). Вместо этого стиль определяется во внешнем файле таблицы стилей с использованием языка таблиц стилей, такого как CSS или XSLT. Этот подход к дизайну называется "разделением", поскольку он в значительной степени вытесняет предшествующую методологию, в которой разметка страницы определяла как стиль, так и структуру. Философия, лежащая в основе этой методологии, является частным случаем принципа разделения ответственности.
Преимущества
Разделение стиля и содержимого имеет преимущества, но стало возможным лишь благодаря усовершенствованиям в реализации CSS в популярных веб-браузерах.
Скорость
В целом, взаимодействие пользователей с сайтом, использующим таблицы стилей, обычно происходит быстрее, чем с сайтами, которые не используют эту технологию. Первая страница, как правило, загружается медленнее, поскольку необходимо передать как таблицу стилей, так и содержимое. Последующие страницы загружаются быстрее, так как информация о стиле загружаться повторно не потребуется – CSS-файл уже будет находиться в кэше браузера.
Сохранность
Сохранение всех стилей оформления в одном файле может сократить время поддержки и снизить вероятность ошибок, что повышает единообразие оформления. Например, цвет шрифта, связанный с определенным типом текстового элемента, можно задать — и, следовательно, легко изменить — на всем веб-сайте, просто изменив короткую строку символов в одном файле. Альтернативный подход, при котором стили встроены в каждую отдельную страницу, потребовал бы сложного, трудоемкого и подверженного ошибкам редактирования каждого файла.
Доступность
Сайты, использующие CSS с XHTML или HTML, проще адаптировать для единообразного отображения в различных браузерах (Chrome, Internet Explorer, Mozilla Firefox, Opera, Safari и т. д.). Сайты, использующие CSS, "плавно деградируют" в браузерах, не способных отображать графический контент, таких как Lynx, или в очень старых браузерах, не поддерживающих CSS. Браузеры игнорируют незнакомые им конструкции CSS, например, инструкции CSS 3. Это позволяет широкому спектру пользовательских агентов получать доступ к содержимому сайта, даже если они не могут отобразить таблицу стилей или не предназначены для работы с графикой. Например, браузер, использующий дисплей Брайля с обновляемым выводом, может полностью игнорировать информацию о макете, при этом пользователь все равно сможет получить доступ ко всему содержимому страницы.
Настройка
Если информация о макете страницы хранится отдельно, пользователь может полностью отключить отображение макета, оставив только читаемый текстовый контент сайта. Авторы сайтов также могут предлагать несколько таблиц стилей, которые позволяют полностью изменить внешний вид сайта, не затрагивая его содержание. Большинство современных веб-браузеров позволяют пользователю задавать собственные таблицы стилей, которые могут содержать правила, переопределяющие правила оформления, заданные автором. Это позволяет пользователям, например, выделять жирным шрифтом все гиперссылки на посещаемых страницах. Для удобства управления такими пользовательскими таблицами стилей были созданы расширения для браузеров, такие как Stylish и Stylus.
Последовательность
Поскольку семантический файл содержит только те значения, которые автор стремится донести, оформление различных элементов содержимого документа отличается высокой согласованностью. Например, заголовки, выделенный текст, списки и математические выражения последовательно получают свойства стиля из внешнего файла стилей. Авторам не нужно заботиться о свойствах стиля в процессе написания. Эти детали представления можно отложить до момента отображения.
Переносимость
Отсрочка оформления до момента презентации означает, что документ можно легко адаптировать для совершенно другой среды представления, просто применив новый табличный стиль, уже подготовленный для этой среды и соответствующий элементарному или структурному словарю семантического документа. Тщательно разработанный документ для веб-страницы можно легко распечатать в виде переплетенного тома с заголовками, нижними колонтитулами, нумерацией страниц и автоматически сгенерированным оглавлением, просто применив новый табличный стиль.
Практические недостатки сегодня
В настоящее время спецификации (например, XHTML, XSL, CSS) и программные средства, реализующие эти спецификации, находятся лишь на начальных этапах развития. Поэтому авторы, стремящиеся использовать этот подход к разделению содержания и оформления, сталкиваются с определенными практическими трудностями.
Узкое принятие без инструментов анализа и генерации
В то время как спецификации стилей достаточно зрелые и продолжают развиваться, программное обеспечение адаптируется медленно. Большинство основных инструментов веб-разработки по-прежнему придерживаются смешанной модели представления контента. Поэтому авторам и дизайнерам, ищущим инструменты с графическим интерфейсом для своей работы, сложно следовать принципам семантической веб-разработки. Помимо инструментов с графическим интерфейсом, общие репозитории обобщенных таблиц стилей, вероятно, способствовали бы более широкому внедрению этих методов.