CSS Level 2

CSS Level 2 — это спецификация каскадных таблиц стилей (CSS), опубликованная Консорциумом Всемирной паутины (W3C) в качестве рекомендации в мае 1998 года. Она стала вторым поколением стандарта CSS, значительно расширив возможности предыдущей версии CSS1 за счёт добавления поддержки позиционирования элементов, типографики, псевдоэлементов и медиатипов. CSS2 заложила основу для современного веб-дизайна, позволив разработчикам отделять структуру документа (HTML) от его визуального представления более гибко и предсказуемо.

История

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

После выхода CSS1 в декабре 1996 года веб-сообщество столкнулось с ограничениями: браузеры того времени (Netscape Navigator 4, Internet Explorer 4) реализовывали CSS неполно и с ошибками, а сама спецификация не охватывала такие важные задачи, как управление макетом страницы, работа с многостраничными носителями и точное позиционирование элементов. Работа над CSS2 началась в 1997 году под руководством Криса Лилли (Chris Lilley) и Берт Бос (Bert Bos). Целью было создание стабильного стандарта, который бы учитывал как потребности дизайнеров, так и технические ограничения браузеров.

Ключевые нововведения

CSS2 ввела ряд фундаментальных концепций, которые отсутствовали в CSS1 и стали стандартом де-факто для веб-дизайна в 2000-е годы.

Позиционирование

Одним из главных нововведений стали типы позиционирования элементов:

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

Эти механизмы позволили создавать многослойные макеты, выпадающие меню и элементы, «прилипающие» к краям экрана.

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

CSS2 расширила возможности управления шрифтами:

Свойство font-family теперь поддерживало универсальные семейства (serif, sans-serif, monospace, cursive, fantasy).
Добавлены font-style (italic, oblique), font-variant (small-caps), font-weight (числовые значения от 100 до 900).
Введено свойство @font-face для загрузки пользовательских шрифтов, хотя его реализация в браузерах того времени была крайне ограниченной (полноценная поддержка появилась только в CSS3).

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

CSS2 ввела псевдоэлементы ::before и ::after (изначально с одним двоеточием :before и :after), которые позволяют вставлять контент до или после содержимого элемента без изменения HTML-разметки. Также были добавлены псевдоклассы для ссылок (:link, :visited, :hover, :active, :focus), что сделало возможным создание интерактивных состояний кнопок и ссылок.

Медиатипы

В CSS2 появилась возможность применять разные стили в зависимости от типа носителя. Основные медиатипы:

screen — для экранов мониторов.
print — для печати.
handheld — для портативных устройств (позже вытеснен медиа-запросами).
aural — для речевых браузеров.

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

Таблицы стилей

CSS2 впервые стандартизировала работу с таблицами через CSS, описав свойства display: table, table-row, table-cell и другие. Это дало возможность создавать табличную вёрстку без использования HTML-тегов <table>, что было важно для семантической разметки.

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

Спецификация CSS2 состояла из 18 разделов (главы), охватывающих все аспекты языка. Основные разделы включали:

Глава 1: Введение — обзор языка и его возможностей.
Глава 2: Синтаксис и базовые типы данных — правила записи селекторов, значений и единиц измерения.
Глава 3: Селекторы — описание всех типов селекторов (классы, ID, атрибуты, псевдоклассы).
Глава 4: Назначение свойств — каскадирование, наследование, специфичность.
Глава 5: Блочная модель — описание полей (margin), границ (border), отступов (padding) и содержимого.
Глава 6: Позиционирование — все типы позиционирования.
Глава 7: Визуальное форматирование — работа с плавающими элементами (float), переполнением (overflow) и видимостью.
Глава 8: Свойства шрифтов — подробное описание всех типографических свойств.
Глава 9: Свойства цвета и фона — color, background-color, background-image.
Глава 10: Медиатипы — правила для разных носителей.
Глава 11: Таблицы — CSS-модель для таблиц.
Глава 12: Пользовательские интерфейсы — свойства для элементов форм (cursor, outline).
Глава 13: Аудио — для речевых браузеров (позже исключена из CSS 2.1).

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

Несмотря на инновационность, CSS2 столкнулась с серьёзными проблемами на практике:

Неполная поддержка браузерами. Internet Explorer 5 и 6, Netscape 6 и ранние версии Firefox реализовывали CSS2 с ошибками. Например, IE6 не поддерживал фиксированное позиционирование, а его реализация блочной модели (box model) отличалась от спецификации.
Сложность и избыточность. Некоторые возможности, такие как @font-face и медиатип aural, были реализованы лишь частично и оставались невостребованными.
Конфликт с блочной моделью. Разница в интерпретации блочной модели между браузерами (особенно IE) привела к массовому использованию «хаков» и обходных путей, что усложнило разработку.

Эти проблемы стали причиной долгой работы над CSS 2.1, которая устранила неоднозначности и удалила неподдерживаемые функции. CSS 2.1 стала фактическим стандартом для веб-дизайна в 2010-х годах, пока её не вытеснили модули CSS3.

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

CSS Level 2 сыграла ключевую роль в эволюции веб-дизайна. Она:

Ввела концепцию позиционирования, что позволило создавать сложные макеты без использования таблиц и фреймов.
Стандартизировала псевдоэлементы и псевдоклассы, которые стали основой для интерактивных интерфейсов.
Заложила основы адаптивного дизайна через медиатипы (позже развитые в медиа-запросы CSS3).
Определила блочную модель, которая остаётся центральной в CSS до сих пор.

Многие свойства и принципы, введённые в CSS2, остаются актуальными в современных спецификациях CSS3 и CSS4. Например, position: fixed используется для создания «липких» панелей навигации, а ::before и ::after — для декоративных элементов и иконок без дополнительной разметки.

Интересные факты

Официальный логотип CSS2 представлял собой стилизованную букву «C» с цифрой «2» внутри, что символизировало преемственность от CSS1.
В CSS2 впервые появилось свойство z-index, управляющее порядком наложения слоёв, что стало важным для создания всплывающих окон и модальных диалогов.
Медиатип handheld так и не получил широкого распространения из-за отсутствия поддержки в мобильных браузерах того времени (например, Opera Mini и ранние версии iPhone OS).
Спецификация CSS2 содержала около 120 свойств, из которых более 30 были удалены или изменены в CSS 2.1.

Источники

W3C. «Cascading Style Sheets, level 2: CSS2 Specification». Рекомендация W3C, 12 мая 1998.
W3C. «Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification». Рекомендация W3C, 7 июня 2011.
Крис Лилли, Берт Бос. «CSS2: The Definitive Guide». O'Reilly Media, 2004.
Стивен Чампион. «CSS2: A Practical Guide to Cascading Style Sheets». New Riders, 1999.

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

На главную BFOmetr →