Спецификация CSS2

Спецификация CSS2 (Cascading Style Sheets, уровень 2) — это вторая версия каскадных таблиц стилей, формального языка описания внешнего вида документа, написанного с использованием языка разметки (например, HTML или XML). Разработанная и поддерживаемая Консорциумом Всемирной паутины (World Wide Web Consortium, W3C), спецификация CSS2 была опубликована как рекомендация W3C 12 мая 1998 года. Она стала значительным расширением и уточнением первой версии (CSS1), вводя множество новых возможностей для позиционирования элементов, работы с медиа, генерации контента и улучшения типографики. Основной целью CSS2 было предоставление веб-разработчикам и дизайнерам более мощных и гибких инструментов для отделения содержимого документа от его представления, что способствовало повышению доступности, гибкости и удобства поддержки веб-страниц.

История и развитие

Предпосылки и создание

Первая спецификация CSS (CSS1) была опубликована в декабре 1996 года и заложила основы для стилизации веб-документов: управление шрифтами, цветами, полями, рамками и фонами. Однако к концу 1990-х годов веб-дизайн столкнулся с новыми вызовами: необходимость точного позиционирования элементов на странице, создания многоколоночных макетов, адаптации к различным устройствам вывода (принтеры, проекторы, мобильные устройства) и улучшения типографики. Работа над CSS2 началась в 1997 году под руководством рабочей группы CSS W3C. В группу входили представители крупнейших производителей браузеров (Netscape, Microsoft), а также независимые эксперты. Ключевыми редакторами спецификации выступили Хокон Виум Ли (соавтор CSS1) и Берт Бос.

Публикация и статус

12 мая 1998 года W3C официально утвердил CSS2 как рекомендацию (Recommendation). Однако вскоре после публикации были обнаружены многочисленные неточности, неоднозначности и ошибки, что затрудняло реализацию спецификации браузерами. В связи с этим в 2002 году началась работа над исправленной версией, которая получила название CSS 2.1. Спецификация CSS 2.1 была выпущена как рекомендация W3C в 2011 году, исправив большую часть проблем CSS2 и став фактическим стандартом, на который ориентировались все современные браузеры. Тем не менее, оригинальная CSS2 остаётся исторически важной вехой, определившей вектор развития веб-стандартов на десятилетие вперёд.

Новые возможности и ключевые отличия от CSS1

CSS2 значительно расширила функциональность CSS1. Основные нововведения можно разделить на несколько категорий.

Позиционирование и макет

Одним из самых значительных нововведений стала система позиционирования, позволяющая размещать элементы в определённых местах страницы независимо от нормального потока документа. CSS2 ввела свойства position и float, которые стали основой для создания сложных макетов.

Относительное позиционирование (position: relative) — элемент смещается относительно своего нормального положения в потоке, но занимаемое им исходное пространство сохраняется.
Абсолютное позиционирование (position: absolute) — элемент полностью удаляется из потока документа и позиционируется относительно ближайшего предка с заданным позиционированием (или относительно начального содержащего блока, обычно окна браузера).
Фиксированное позиционирование (position: fixed) — элемент позиционируется относительно окна просмотра (viewport), оставаясь на месте при прокрутке страницы.
Плавающие элементы (float) — элемент «выталкивается» влево или вправо, а последующий контент обтекает его. Это позволило создавать простые многоколоночные макеты и обтекание текстом изображений.

Медиа-запросы и типы носителей

CSS2 впервые ввела концепцию типов носителей (media types). С помощью атрибута media в теге <link> или правила @media внутри таблицы стилей можно было задавать разные стили для разных устройств вывода:

screen — для экрана компьютера;
print — для печати;
projection — для проекторов;
handheld — для портативных устройств (например, КПК);
aural — для речевых браузеров.

Это стало первым шагом к созданию адаптивного веб-дизайна.

Генерация контента и счётчики

CSS2 ввела псевдоэлементы ::before и ::after, которые позволяют вставлять генерируемый контент до или после содержимого элемента. В сочетании со свойством content это открыло возможности для автоматического добавления декоративных элементов, номеров страниц, сносок и т.д. Кроме того, была реализована система автоматических счётчиков (counters), позволяющая автоматически нумеровать заголовки, списки и другие элементы, что было особенно полезно для длинных документов.

Типографика и шрифты

CSS2 расширила возможности управления шрифтами. Были добавлены свойства text-shadow (тень текста), white-space (управление пробелами), word-spacing, letter-spacing. Также была введена поддержка загружаемых шрифтов (web fonts) через правило @font-face, хотя реализация в браузерах того времени была крайне ограниченной и нестандартной. Полноценная поддержка веб-шрифтов была реализована только в CSS3.

Таблицы и списки

CSS2 ввела специальные свойства для стилизации таблиц (border-collapse, border-spacing, empty-cells, caption-side), что позволило управлять их внешним видом без использования атрибутов HTML. Также были улучшены возможности стилизации списков: свойство list-style-image для замены маркеров на изображения, и list-style-position для управления положением маркеров.

Псевдоклассы и псевдоэлементы

Спецификация значительно расширила набор псевдоклассов. Помимо существовавших в CSS1 (:link, :visited, :active), были добавлены:

:hover — стилизация элемента при наведении курсора мыши;
:focus — стилизация элемента, получившего фокус (например, поле ввода);
:first-child — стилизация первого дочернего элемента родителя;
:lang() — стилизация в зависимости от языка содержимого.

Псевдоэлементы были расширены до ::first-letter, ::first-line, ::before, ::after.

Структура спецификации

Спецификация CSS2 состояла из 18 глав, каждая из которых посвящена определённому аспекту каскадных таблиц стилей. Основные разделы включали:

Введение — общие принципы и терминология.
Каскадирование и наследование — правила определения приоритета стилей.
Типы носителей — определение типов устройств вывода.
Селекторы — способы выбора элементов для стилизации.
Модель визуального форматирования — описание боксовой модели и потока документа.
Визуальное форматирование — подробное описание свойств display, position, float, clear.
Генерация контента — псевдоэлементы, счётчики, списки.
Цвета и фоны — свойства color, background-color, background-image.
Шрифты — свойства font-family, font-size, font-weight, @font-face.
Текст — свойства text-align, text-decoration, text-transform.
Таблицы — свойства для стилизации таблиц.
Интерфейс пользователя — псевдоклассы :hover, :focus, :active, курсоры.
Атрибуты и значения — описание типов данных (длины, проценты, URL и т.д.).
Приложение A: Пример таблицы стилей — примеры использования.
Приложение B: Список изменений относительно CSS1 — перечень отличий.
Приложение C: Список ошибок и неоднозначностей — признанные проблемы.

Проблемы и критика

Несмотря на революционность, CSS2 столкнулась с рядом серьёзных проблем, которые привели к необходимости создания CSS 2.1.

Сложность реализации. Многие нововведения, особенно система позиционирования и медиа-запросы, были сложны для реализации в браузерах конца 1990-х — начала 2000-х годов. Разные браузеры (Internet Explorer, Netscape, Opera) интерпретировали спецификацию по-разному, что приводило к многочисленным багам и кросс-браузерным проблемам.
Неоднозначности и ошибки. Спецификация содержала множество неясных формулировок, внутренних противоречий и откровенных ошибок. Например, правила вычисления ширины и высоты плавающих элементов были описаны неполно, а поведение абсолютно позиционированных элементов в некоторых сценариях было неопределённым.
Отсутствие поддержки в Internet Explorer. Браузер Internet Explorer 5 и 6, доминировавший в начале 2000-х, имел лишь частичную и некорректную поддержку CSS2. Например, поддержка position: fixed отсутствовала вплоть до IE7, а поддержка @media была неполной. Это вынуждало разработчиков использовать «хаки» и обходные пути.
Проблемы с доступностью. Некоторые нововведения, такие как автоматические счётчики и генерируемый контент, были плохо поддержаны в программах чтения с экрана, что создавало проблемы для пользователей с ограниченными возможностями.
Проблемы с медиа-запросами. Механизм типов носителей был слишком грубым. Например, не было возможности различать ширину экрана или ориентацию устройства, что стало возможным только в CSS3 с появлением медиа-запросов на основе свойств.

Наследие и влияние

Несмотря на свои недостатки, CSS2 оказала огромное влияние на развитие веб-дизайна и веб-стандартов. Она заложила основы для всех современных методов вёрстки: от многоколоночных макетов на float до сложных систем позиционирования. Многие концепции, введённые в CSS2, такие как :hover, :focus, position: fixed, @font-face, ::before и ::after, стали неотъемлемой частью современного веб-дизайна и были улучшены и расширены в последующих версиях (CSS3, CSS4). CSS2 также стала важным шагом в продвижении идеи разделения содержимого и представления, что привело к появлению стандартов веб-доступности (WCAG) и методологий вроде «прогрессивного улучшения». Исправленная версия CSS 2.1, выпущенная в 2011 году, стала фактическим стандартом, на котором базируется подавляющее большинство современных веб-сайтов.

Источники

W3C. "Cascading Style Sheets, level 2 CSS2 Specification". 12 May 1998.
W3C. "Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification". 7 June 2011.
Берт Бос, Хокон Виум Ли. "Cascading Style Sheets: Designing for the Web". Addison-Wesley, 1999.
Эрик Мейер. "CSS: The Definitive Guide". O'Reilly Media, 2004.
Дэвид Флэнаган. "JavaScript: The Definitive Guide". O'Reilly Media, 2006. (Глава о CSS и DOM).

BFOmetr — база данных и аналитика по компаниям России.

На главную BFOmetr →