Таблица стилей (веб-разработка)

Таблица веб- стилей — это форма разделения контента и представления для веб-дизайна , в которой разметка (т. е. HTML или XHTML ) веб-страницы содержит семантическое содержимое и структуру страницы, но не определяет ее визуальный макет (стиль). Вместо этого стиль определяется во внешнем файле таблицы стилей с использованием языка таблицы стилей, такого как CSS или XSLT . Этот подход к дизайну определяется как «разделение», поскольку он в значительной степени заменяет предыдущую методологию, в которой разметка страницы определяла как стиль, так и структуру.

Философия, лежащая в основе этой методологии, представляет собой частный случай разделения задач .

Преимущества

Разделение стиля и содержания имеет свои преимущества. но стал практичным только после улучшения в популярных веб-браузерах реализаций CSS .

Скорость

В целом, пользователи смогут освоить сайт, использующий таблицы стилей, быстрее, чем сайты, которые не используют эту технологию. «В целом», поскольку первая страница, вероятно, будет загружаться медленнее, поскольку необходимо будет перенести таблицу стилей И контент. браузера Последующие страницы будут загружаться быстрее, поскольку загружать информацию о стиле не потребуется — файл CSS уже будет в кеше .

Ремонтопригодность

Хранение всех стилей представления в одном файле может сократить время обслуживания и снизить вероятность ошибок, тем самым улучшая согласованность представления. Например, цвет шрифта, связанный с типом текстового элемента, можно указать — и, следовательно, легко изменить — на всем веб-сайте, просто изменив одну короткую строку символов в одном файле. Альтернативный подход, использующий стили, встроенные в каждую отдельную страницу, потребует громоздкого, трудоемкого и подверженного ошибкам редактирования каждого файла.

Доступность

Сайты, использующие CSS с XHTML или HTML, легче настроить, чтобы они выглядели одинаково в разных браузерах (Chrome, Internet Explorer , Mozilla Firefox , Opera , Safari и т. д.).

Сайты, использующие CSS, « изящно деградируют » в браузерах, неспособных отображать графический контент, таких как Lynx , или в браузерах, настолько старых, что они не могут использовать CSS. Браузеры игнорируют CSS, который они не понимают, например операторы CSS 3. Это позволяет широкому спектру пользовательских агентов иметь доступ к содержимому сайта, даже если они не могут отображать таблицу стилей или не разработаны с учетом графических возможностей. Например, браузер, использующий для вывода обновляемый дисплей Брайля , может полностью игнорировать информацию о макете, и пользователь по-прежнему будет иметь доступ ко всему содержимому страницы.

Кастомизация

См. также: CSS § Источники.

Если информация о макете страницы хранится снаружи, пользователь может решить полностью отключить информацию о макете, оставив пустой контент сайта в читаемой форме. Авторы сайтов также могут предлагать несколько таблиц стилей, которые можно использовать для полного изменения внешнего вида сайта без изменения его содержимого.

Большинство современных веб-браузеров также позволяют пользователю определять свою собственную таблицу стилей, которая может включать правила, переопределяющие правила макета автора. Это позволяет пользователям, например, выделять жирным шрифтом каждую гиперссылку на каждой посещаемой ими странице. Расширения браузера, такие как Stylish и Stylus, были созданы для облегчения управления такими пользовательскими таблицами стилей.

Консистенция

Поскольку семантический файл содержит только те значения, которые намеревается передать автор, стиль различных элементов содержимого документа очень единообразен. Например, заголовки, выделенный текст, списки и математические выражения получают последовательно применяемые свойства стиля из внешней таблицы стилей. Авторам не нужно беспокоиться о свойствах стиля во время композиции. Эти презентационные детали можно отложить до момента презентации.

Портативность

Отсрочка деталей представления до момента представления означает, что документ можно легко переназначить для совершенно другого носителя представления с помощью простого применения новой таблицы стилей, уже подготовленной для нового носителя и соответствующей элементарному или структурному словарю носителя. смысловой документ. Тщательно созданный документ для веб-страницы можно легко распечатать в твердом переплете с верхними и нижними колонтитулами, номерами страниц и сгенерированным оглавлением, просто применив новую таблицу стилей.

недостатки

В настоящее время спецификации (например, XHTML, XSL, CSS) и программные инструменты, реализующие эти спецификации, достигают только ранних стадий зрелости. Таким образом, есть некоторые практические проблемы, с которыми сталкиваются авторы, стремящиеся использовать этот метод разделения содержания и стиля.

анализа и

Хотя спецификации стилей достаточно зрелы и все еще развиваются, программные инструменты адаптируются медленно. Большинство основных инструментов веб-разработки по-прежнему используют смешанную модель представления и контента. Поэтому авторам и дизайнерам, ищущим для своей работы инструменты на основе графического пользовательского интерфейса, трудно следовать методу семантической сети. В дополнение к инструментам графического пользовательского интерфейса, общие репозитории для обобщенных таблиц стилей, вероятно, помогут внедрить эти методы.

См. также

• Разделение интересов

Внешние ссылки

• CSS Zen Garden : сайт, который предлагает дизайнерам создавать новые макеты страниц, не затрагивая исходный код XHTML. Включает в себя десятки макетов. Исходный код CSS можно просмотреть для каждого макета.