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

Автор: Александр Головко и Татьяна Шкабко Дата публикации: 27.10.2010

Каскадные таблицы стилей (CSS) — это мощный механизм, позволяющий описать правила оформления HTML документа, отделить их от содержания. CSS, как прогрессивная и востребованная технология, проходит долгий путь развития и усовершенствования.

Давай посмотрим, как все начиналось! Для начала включим машину времени и окунемся ненадолго в прошлое.

Историческая справка

1967 год

Китай объявляет об успешном испытании своей первой водородной бомбы. Впервые в космосе произведена автоматическая стыковка кораблей. Проведена первая в истории медицины операция по пересадке сердца. Завершается строительство Останкинской телебашни, в то время самого высокого здания в мире.

Вильям Тьюнниклифф (William W. Tunnicliffe) обнародовал идею использовать языки разметки в компьютерной обработке текстов. Его концепция GenCod впервые позволила решить важнейшую задачу, отделить содержимое документа от его внешнего вида.

1973 год

Убийство президента Альенде и приход к власти Пиночета. Подписание Парижского соглашения о прекращении войны и восстановлении мира во Вьетнаме.

Чарльз Голдфарб (англ. Charles Goldfarb) представляет язык GML (Generalized Markup Language — обобщенный язык разметки)

1986 год

Авария на Чернобыльской АЭС. Американский зонд «Вояджер-2» достиг окрестностей Урана. Майк Тайсон впервые стал чемпионом мира по боксу.

Организацией ISO был опубликован как международный стандарт язык SGML (Standard Generalized Markup Language — стандартный обобщенный язык разметки). Этот язык является прямым предком HTML.

1991 год

Распался СССР. Вооружённые силы США, Великобритании и других стран начали военную операцию в Ираке «Буря в пустыне». Михаэль Шумахер дебютировал в гонках «Формула-1».

Тимоти Джон Бернерс-Ли (Timothy John Berners-Lee) использовал синтаксис SGML для создания HTML.

1994 год

Нельсон Мандела становиться президентом ЮАР. Зарегистрирован национальный домен верхнего уровня для России — .ru. Тим Бернерс-Ли основал Консорциум Всемирной паутины (W3C). Была образована немецкая рок-группа Rammstein.

Хокон Виум Ли (норв. Håkon Wium Lie) предложил концепцию каскадных таблиц стилей.

Тим Бернерс-Ли Хокон Виум Ли
Тим Бернерс-Ли. Учёный, изобретатель URI, URL, HTTP, HTML, изобретатель Всемирной паутины (совместно с Робертом Кайо) и действующий глава Консорциума Всемирной паутины Хокон Виум Ли. Учёный, специалист в области информатики, предложивший каскадные таблицы стилей (CSS).

Обзорная история CSS

Первая версия CSS1 была принята как рекомендация W3C 17 декабря 1996 года. Она предоставляет пользователю следующие возможности:

  • управление способом отображения элемента на странице;
  • возможность для элемента задать и запретить обтекание текстом;
  • управление размерами элемента;
  • управление внешними и внутренними отступами элемента;
  • управление вертикальным выравниванием в табличных блоках;
  • управление границами элемента: задавать стиль границы, цвет границы и ее ширину;
  • управление форматированием нумерованных и ненумерованных списков: можно задать тип маркера, возможность обтекания маркера текстом, а также применить в качестве маркера ненумерованного списка изображение;
  • возможность задавать цвет текста и цвет фона элемента;
  • возможность задавать в качестве фона элемента изображения, а также позиционирование и повторение этого изображения в фоне;
  • управление параметрами шрифта: название шрифта, размер, курсив и жирность;
  • управление свойствами текста: выравнивание, отступ первой строки, оформление (подчеркивание, курсив и т.д.). Также предусмотрена возможность изменения регистра текста;
  • управление междустрочным интервалом, а также расстоянием между словами и между буквами.

12 мая 1998 года была принята как рекомендация W3C вторая версия CSS2. В CSS2 дополнительно предоставляются следующие возможности:

  • задавать направление текста в элементе (слева направо или справа налево);
  • управлять позиционированием элемента на странице;
  • задавать видимую область элемента и обрезать все остальное;
  • управлять отображением контента, который выходит за пределы размеров элемента;
  • генерировать контент до и после элемента, в том числе и автоматическая нумерация;
  • управлять внешним видом курсора;
  • управлять положением элементов по оси z (т.е. возможность располагать один элемент поверх другого);
  • показывать вместо элемента пустое место;
  • задавать минимально возможные и максимально возможные размеры элемента;
  • указывать расстояние между ячейками таблицы, либо схлопывать их;
  • управлять обводкой элемента: задавать ее толщину, тип и цвет;
  • указать тип и цвет для каждой границы элемента отдельно;
  • задавать фиксированные размеры элементам таблицы;
  • управлять внешним видом кавычек, в которые оборачиваются цитаты;
  • задавать таблицы стилей для не визуальных носителей: управлять контентом при печати, а также задавать звуковое оформление контента (силу, громкость голоса, длину пауз и т.д. ) для голосовых браузеров.

8 сентября 2009 года была утверждена CSS2.1. Эта версия формировалась в течение более 10-ти лет. Создание CSS2.1 — это попытка привести спецификацию в соответствие со сложившимися реалиями:

  • исправлен ряд ошибок CSS2;
  • изменились некоторые моменты, реализация которых в подавляющем большинстве браузеров отличается от спецификации CSS2;
  • убрали особенности CSS2, которые, в силу того, что не были реализованы, были отвергнуты CSS сообществом;
  • удалили фрагменты CSS2, которые будут устаревшими в CSS3;
  • добавили некоторые новые значения свойств.

Будущее, которое стало реальностью

На момент написания статьи активно разрабатывается спецификация CSS3. Возможности, которые сулит нам CSS3 значительно превосходят предыдущие версии. Это и анимация, которая ранее ложилась на плечи скриптов, и различные скругления, тени, множественные фоны и прочие вещи, для реализации которых в CSS2 приходилось прилагать значительные усилия.

Самое приятное, что частично мощь CSS3 можно использовать уже сейчас. Смотри, например, статьи Тень для блока без использования картинок, Градиент: CSS3 против CSS2 + картинка, Тень для текста (кроссбраузерное решение), Вертикальный текст на CSS.

Не стоит забывать, что мы живем на пороге перемен, когда в дверь уже громко стучат HTML5 и CSS3. Нужно обязательно выделять время, чтобы освоить то новое, что они нам несут!