CSS – Cascading Style Sheets – Каскадные стили

CSS – Cascading Style Sheets – Каскадные стили – технология описания внешнего вида документа, написанного языком разметки html/xhtml.

До появления CSS оформление веб-страниц осуществлялось непосредственно внутри содержимого документа. Однако с появлением CSS стало возможным принципиальное разделение содержания и представления документа.

Это нововведение обеспечивает лёгкое применение единого стиля оформления для схожих документов и быстрое изменение этого оформления.

Раздвигаем рамки возможностей

Сегодня уже никто не спорит, что хорошим можно назвать только тот сайт, который сделан на основе:

  • правильной разметки документа (html)
  • и грамотного применения стилей оформления (каскадных стилей – CSS)

Ибо эти действия расширяют возможности оформления и использования сайта.

Раздвигаем рамки возможностей

Правильная разметка страниц сайта на языке html и грамотное применение каскадных стилей (CSS) позволяют полностью разделить содержание (контент), представление (дизайн) и функциональность (программирование), что является основной идеей веб-стандартов (web-standards).

Веб-стандарты. Что это и зачем они нам?

W3C (Консорциум Всемирной паутины - WWW Consortium) разрабатывает для Интернета единые принципы и стандарты, называемые «Рекомендациями» (W3C Recommendations), которые затем внедряются производителями программ и оборудования. Таким образом достигается совместимость между программными продуктами и аппаратурой различных компаний, что делает Всемирную сеть более совершенной, универсальной и удобной.

Для нас польза от их деятельности очевидна: теперь дизайнер, верстальщик и программист могут работать каждый в своей области, не мешая друг другу.

Применение веб-стандартов уменьшает стоимость и сложность веб-разработок и при этом способствует унификации и продлению жизнестойкости любых документов, опубликованных в Интернет.

CSS верстка

Цель верстки - трансформировать статичные иллюстрации дизайнера в живые, интерактивные страницы веб-сайта, да так, чтобы их было легко интегрировать с программным кодом, например, CMS (Content Management System).

Преимущества CSS верстки:

  • Несколько дизайнов страницы для разных устройств просмотра. Например, на экране дизайн будет рассчитан на большую ширину, во время печати меню не будет выводиться, а на КПК и сотовом телефоне меню будет следовать за содержимым.
  • Уменьшение времени загрузки страниц сайта за счет переноса правил представления данных в отдельный CSS-файл. В этом случае браузер загружает только структуру документа и данные, хранимые на странице, а представление этих данных загружается браузером только один раз и может быть закешировано.
  • Простота последующего изменения дизайна. Не нужно править каждую страницу, а лишь изменить CSS-файл.
  • Дополнительные возможности оформления. Например, с помощью CSS вёрстки можно сделать блок текста, который остальной текст будет обтекать (например для меню) или сделать так, чтобы меню было всегда видно при прокрутке страницы.

Недостатки CSS-верстки

  • Различное отображение вёрстки в разных браузерах (особенно устаревших, например: IE6 и даже IE7), которые по разному интерпретируют одни и те же данные CSS.
  • Часто встречающаяся необходимость на практике исправлять не только CSS-файл, но и теги HTML и код PHP, которые сложным и ненаглядным способом связаны с селекторами CSS, что иногда сводит на нет простоту применения единых файлов стилей и значительно удлиняет время редактирования и тестирования.

Как видите, у CSS верстки плюсов больше, чем минусов. Теперь, планируя создание нового сайта или редизайн старого, вы знаете, о чем говорить с исполнителем и что от него требовать ;о)

Ложка дегтя или пара слов о поддержке браузерами

Максимально поддерживающими стандарт CSS являются браузеры, работающие на Gecko (Mozilla Firefox) и WebKit (Safari, Google Chrome), а также Opera.

Бывший когда-то самым распространённым браузером Internet Explorer 6 поддерживает CSS не полностью. Сегодня это безнадежно устаревший браузер.

Вышедший через семь лет Internet Explorer 7 улучшил уровень поддержки CSS, но всё ещё содержит значительное количество ошибок.

В Internet Explorer 8 используется новый движок, который полностью поддерживает CSS 2.1 и частично — CSS 3.

Для проверки поддержки браузером различных частей стандарта CSS был разработан тест Acid. Его вторая версия называется Acid2, а третья Acid3.