Css история создания: Краткая история создания CSS. — it-black.ru

Краткая история создания CSS. — it-black.ru

CSS (Cascading Style Sheets – каскадные таблицы стилей) – язык описания внешнего вида web-документа, созданного при помощи языка разметки (HTML).

CSS – это широкий спектр технологий, который одобрен консорциумом W3C (World Wide Web Consortium (Консорциума Всемирной Паутины)) и получил такое название, как «Web Стандарты». В 1990 г. возникла необходимость стандартизировать их в какие-то определенные единые правила, благодаря которым веб-дизайнеры и программисты проектировали бы сайты.

Концепция каскадных таблиц стилей была предложена Хоконом Виум Ли – норвежским ученым и специалистом в области информационных технологий, работавшим в то время на консорциум W3C.

17 декабря 1996 года была принята первая версия СSS как рекомендация W3C. 18 мая 1998 года принята вторая версия CSS, CSS2. 8 сентября 2009 года утверждена CSS2.1, как исправленная версия CSS2. В настоящий момент существует СSS3.

CSS1

В первой версии CSS имелась возможность задавать гарнитуру и размер шрифта, а еще изменять его стиль: обычный, курсив или полужирный. Также определять рамки, фоны, цвета текста и другие элементы страницы. Можно задавать расстояние между словами, межстрочные отступы и межсимвольный интервал. А также производить выравнивание текста, таблиц, изображений.

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

CSS2

CSS2 основана на CSS1, а также сохранила обратную совместимость с добавлением некоторых функций, а именно:

1. Возникло фиксированное, абсолютное и относительное позиционирование. С помощью чего появилась возможность управлять размещением элементов без табличной верстки по странице.
2. Для разных носителей возможность устанавливать разными стилями.
3. Для звуковых носителей появилась возможность определять громкость и голос.
4. Возможно устанавливать на нечетных и четных страницах во время печати различные элементы.
5. Расширился механизм селекторов.
6. Возможность добавлять содержимое, которое не содержится в исходном документе.

Консорциум W3C не поддерживает CSS2 и настоятельно рекомендует применять CSS2.1. CSS2.1 принята 2011 года 7 июня. Она основывается на CSS.2. Исправлены ошибки и удалены некоторые функции.

CSS3

В отличие от предыдущих версий спецификация разбита на модули, разработка и развитие которых идёт независимо. CSS3 основан на CSS2.1, дополняет существующие свойства и значения и добавляет новые.

CSS4

CSS4 разрабатывается консорциумом W3C с 29 сентября 2011 года. Модули CSS4 построены на основе CSS3 и дополняют их новыми свойствами и значениями. Все они существуют пока в виде черновиков (working draft).

История CSS

CSS – это широкий спектр технологий, который одобрен консорциумом WЗС и получил такое название, как «Web Стандарты». В 1990 г. возникла необходимость стандартизировать их в какие-то определенные единые правила, благодаря которым веб-дизайнеры и программисты проектировали бы сайты. Именно так и появились такие языки, как XHTML,  HTML 4.01 и стандарт CSS.

В самом начале 1990 года, для того, чтобы отображать веб-страницы, разные браузеры обладали своими собственными  стилями. Развитие HTML было очень быстрым и он был способен удовлетворять на тот момент все существовавшие потребности по оформлению информации, именно поэтому тогда и не получил широкого признания CSS.
И лишь Хокон Виум Ли  в 1994 году предложил для HTML  документов использование концепции  «каскадные таблицы стилей». В то далекое время браузеры имели ограничение в функционале. А в 1990 году язык HTML, который создал Тим Бернерс-Ли, полагал сделать не визуальное, а структурное отображение документов.
Один из основателей Netscape, Марк Андреесен, в 1994 году 13 октября сообщил, что доступна для тестирования от Netscape Navigator первая версия. И за три дня до проведения тестирования, норвежский программист, сейчас он является сотрудником компании Opera Software, Хокон Виум Ли публикует черновой вариант CSS. На сегодняшний день он имеет слишком мало схожего с принятыми современными стандартами, но именно тогда был заложен общий смысл.
Самым первым, кто откликнулся на такую идею, был Берт Бос. В те времена он и создал новый браузер Argo. В визуальном оформлении была возможность использовать не только язык CSS, и консорциуму WЗС предоставили около 9 стилей языков.
В ноябре 1994 года в Чикаго на Веб-конференции, как и планировалось, был предоставлен первый черновик CSS. Дебаты различного политического характера и разрешение некоторых технических вопросов продолжались в течение двух лет, но 1996 года 17 декабря W3C официально зарекомендовал CSS1.
Уровень развития первый (CSS1).
На данном этапе имеется возможность задавать гарнитуру и размер шрифта, а еще изменять его стиль: обычный, курсив или полужирный. Благодаря спецификации имеется возможность определять рамки, фоны, цвета текста и другие элементы страницы.  Можно задавать расстояние между словами, межстрочные отступы и межсимвольный интервал.  А также производить выравнивание текста, таблиц, изображений.  Имеются свойства внутренних и внешних отступов и рамок, ширины, высоты и блоков. А также входили в данную спецификацию ограниченные средства по позиционированию различных элементов, например, clear и  float.
Самый первый браузер для использования являлся Microsoft Internet Explorer 3. Вышел 1996 года в августе, он то и поддерживал новый принятый стандарт. Microsoft Internet Explorer 3 понимает отлично все свойства текста, шрифта, фона, цвета, но использование блочной модели происходило лишь частично.
Уровень развития второй(CSS2).
Рекомендация от консорциума W3C, которую приняли 1998 году 12 мая. Она основана на CSS1, а также сохранила обратную совместимость с добавлением некоторых функций, а именно:
1) Возникло фиксированное, абсолютное и относительное позиционирование. С помощью  чего  появилась возможность управлять размещением элементов без табличной верстки по странице.
2)  Для разных носителей возможность устанавливать разными стилями.
3)  Для звуковых носителей появилась возможность определять громкость и голос.
4)  Позволяет устанавливать на нечетных и четных страницах во время печати различные элементы.
5)  Расширился механизм селекторов.
6)  Возможность добавлять содержимое, которое не содержится в исходном документе.
На данный момент W3C не поддерживает CSS2 и настоятельно рекомендует применять CSS2.1.
Уровень второй, ревизия первая (CSS2.1).
Рекомендация принята 2011 года 7 июня. Она основывается на CSS.2. Исправлены ошибки и удалены некоторые функции.
Уровень третий (CSS3).
Очень сильно расширены функции. Введены нововведения, начиная от мелочей, заканчивая трансформацией, а также введение новых переменных.

.

кс соурс история
история css’

.

история css’
кс соурс история

Комментирование и размещение ссылок запрещено.

2.2. История создания CSS — Веб-проектирование

CSS — одна из широкого спектра технологий, одобренных консорциумом W3C и получивших общее название «стандарты Web». В 1990-х годах стала ясна необходимость стандартизировать Web, создать какие-то единые правила, по которым программисты и веб-дизайнеры проектировали бы сайты. Так появились языки HTML 4.01 и XHTML, и стандарт CSS.

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

Термин «каскадные таблицы стилей» был предложен Хокон Виум Ли в 1994 году. Совместно с Бертом Босом он стал развивать CSS.

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

В середине 1990-х Консорциум Всемирной паутины (W3C) стал проявлять интерес к CSS, и в декабре 1996 года была издана рекомендация CSS1.

Уровень 1 (CSS1)

Рекомендация W3C, принята 17 декабря 1996 года, откорректирована 11 января 1999 года. Среди возможностей, предоставляемых этой рекомендацией:

• Параметры шрифтов. Возможности по заданию гарнитуры и размера шрифта, а также его стиля — обычного, курсивного или полужирного.
• Цвета. Спецификация позволяет определять цвета текста, фона, рамок и других элементов страницы.
• Атрибуты текста. Возможность задавать межсимвольный интервал, расстояние между словами и высоту строки (то есть межстрочные отступы)
• Выравнивание для текста, изображений, таблиц и других элементов.
• Свойства блоков, такие как высота, ширина, внутренние (padding) и внешние (margin) отступы и рамки. Также в спецификацию входили ограниченные средства по позиционированию элементов, такие как float и clear.

Уровень 2 (CSS2)

Рекомендация W3C, принята 12 мая 1998 года. Основана на CSS1 с сохранением обратной совместимости за несколькими исключениями. Добавление к функциональности:

• Блочная вёрстка. Появились относительное, абсолютное и фиксированное позиционирование. Позволяет управлять размещением элементов по странице без табличной вёрстки.
• Типы носителей. Позволяет устанавливать разные стили для разных носителей (например монитор, принтер, КПК).
• Звуковые таблицы стилей. Определяет голос, громкость и т. д. для звуковых носителей (например для слепых посетителей сайта).
• Страничные носители. Позволяет, например, установить разные стили для элементов на чётных и нечётных страницах при печати.
• Расширенный механизм селекторов.
• Указатели.
• Генерируемое содержимое. Позволяет добавлять содержимое, которого нет в исходном документе, до или после нужного элемента.

В настоящее время W3C больше не поддерживает CSS2 и рекомендует использовать CSS2.1

Уровень 2, ревизия 1 (CSS2.1)

Рекомендация W3C, принята 7 июня 2011 года.

CSS2.1 основана на CSS2. Кроме исправления ошибок, в новой ревизии изменены некоторые части спецификации, а некоторые и вовсе удалены. Удаленные части могут быть в будущем добавлены в CSS3.

Уровень 3 (CSS3)

CSS3 taxonomy and status by Sergey Mavrody

CSS3 (англ. Cascading Style Sheets 3 — каскадные таблицы стилей третьего поколения) — активно разрабатываемая спецификация CSS. Представляет собой формальный язык, реализованный с помощью языка разметки. Самая масштабная редакция по сравнению с CSS1, CSS2 и CSS2.1. Главной особенностью CSS3 является возможность создавать анимированные элементы без использования JS, поддержка линейных и радиальных градиентов, теней, сглаживания и многое другое.

Преимущественно используется как средство описания и оформления внешнего вида веб-страниц, написанных с помощью языков разметкиHTML и XHTML, но может также применяться к любым XML-документам, например, к SVG или XUL.

Разрабатываемая версия (список всех модулей)

В отличие от предыдущих версий спецификация разбита на модули, разработка и развитие которых идёт независимо.

CSS3 основан на CSS2.1, дополняет существующие свойства и значения и добавляет новые.

Нововведения, начиная с малых, вроде закругленных углов блоков, заканчивая трансформацией (анимацией) и, возможно, введением переменных.

Уровень 4 (CSS4)

Разрабатывается W3C с 29 сентября 2011 года.

Модули CSS4 построены на основе CSS3 и дополняют их новыми свойствами и значениями. Все они существуют пока в виде черновиков (working draft).

CSS – назначение и история. Терминология и синтаксис CSS

История

CSS (Cascading Style Sheets, каскадные таблицы стилей) – язык описания внешнего вида документа, созданного с использованием языка разметки. Языком разметки может быть XML, SVG, XUL, но обычно в этой роли выступает HTML.

Цель: разделить логическую структуру документа (например, HTML-документа) и описание внешнего вида.

• разные виды одного документа (экран, принтер, голос)
• более «богатый» визуальный язык
• сам документ упрощается
• упрощается поддержка и разработка

Первое упоминание: 1994 год — Хокон Виум Ли (Håkon Wium Lie). Далее – затишье, к разработке подключается Берт Бос (Bert Bos).

1995 год – интерес со стороны W3C.

После 1995 года: развитие CSS как языка и создание стандарта. Это нужно, чтобы разработчики браузеров включали поддержку возможностей CSS в свои продукты.

Версии стандарта CSS называют уровнями (Levels):

• Уровень 1 (CSS1): в конце 1996 года.
• Уровень 2 (CSS2): май 1998 года.
• Уровень 2, ревизия 1 (CSS2.1): июнь 2011 года.
• Уровень 3 (CSS3): официально не вышел, но многие браузеры поддерживают его возможности.

Несмотря на наличие стандартов, некоторые возможности CSS (1, 2, 3) не поддерживаются вообще или поддерживаются «по-особенному» в зависимости от браузера и его версии.

Правила

Таблица стилей – набор правил CSS и комментариев. Таблица выглядит как текст заданного формата и может быть сохранена в файле (с расширением .css).

• Регистр не важен (обычно – нижний).
• В тексте пробельные символы (более одного) и переводы строк игнорируются.
• Комментарии ограничивают при помощи /* и */.
• Каждое правило CSS (за исключением так называемых «at-rules») состоит из селектора и блока объявлений.
• Селектор описывает элементы документа, к которым применяются визуальные настройки.
• Селекторы могут группироваться через запятую (в таком случае блок объявлений применяется к каждому из них).
• Блок объявлений записывается в фигурных скобках и содержит одно или несколько объявлений.

Общий вид объявления следующий (есть нюансы): свойство: значение;

Пример правила CSS

p {
color: red;
/* This is a single-line comment */
text-align: center;
}

Значением свойства может быть:

• Одно значение из фиксированного набора
• Число (целое десятичное число или десятичная дробь)
• Процентная запись (число + %)
• Размер
• Цвет
• Адрес (URL)
• Строка (в одинарных или двойных кавычках)
• Временной промежуток
• Величина угла

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

Значение CSS-свойства может быть снабжено модификатором important в следующей форме: свойство: значение !important; Этот модификатор управляет приоритетом применения значения.

Единицы измерения размера:

Задание цвета:

1. Использовать имя: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow (это базовые цвета, есть ещё).
2. Использовать hex-код: #RRGGBB или #RGB (=RRGGBB)
3. Использовать функции:

• rgb(r,g,b)
• rgba(r,g,b,a)
• hsl(h,s,l)
• hsla(h,s,l,a)

Аргументы функций: десятичные числа или проценты.

Углы:

• deg (градусы, 0-360)
• rad (радианы)
• grad (градианы, 1 град.=1/100 прямого угла)
• turn (повороты, 1 поворот = 360 градусов).

Время:

• s (секунды)
• ms (миллисекунды).

В CSS адреса применяются для указания пути к файлу (пример: установка фонового изображения). Чтобы задать адрес, используется функция url(). Внутри скобок пишется относительный или абсолютный адрес, который можно задавать в необязательных одинарных или двойных кавычках.

Все о CSS 3. Стандарты, начало применения. Основы разметки

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

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

История создания

CSS — одна из широкого спектра технологий, одобренных консорциумом W3C и получивших общее название «стандарты Web»^{. В 1990-х годах стала ясна необходимость стандартизировать Web, создать какие-то единые правила, по которым программисты и веб-дизайнеры проектировали бы сайты. Так появились языки HTML 4.01 и XHTML, и стандарт CSS.}

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

Термин «каскадные таблицы стилей» был предложен Хокон Виум Ли в 1994 году. Совместно с Бертом Босом он стал развивать CSS.

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

В середине 1990-х Консорциум Всемирной паутины (W3C) стал проявлять интерес к CSS, и в декабре 1996 года была издана рекомендация CSS1.

Вёрстка

До появления CSS оформление веб-страниц осуществлялось исключительно средствами HTML, непосредственно внутри содержимого документа. Однако с появлением CSS стало возможным принципиальное разделение содержания и представления документа. За счёт этого нововведения стало возможным лёгкое применение единого стиля оформления для массы схожих документов, а также быстрое изменение этого оформления.

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

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

Недостатки:

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

История css

Термин
«каскадные таблицы стилей» был предложен
Хокон Виум Ли в 1994 году. Совместно с
Бертом Босом он стал развивать CSS.

17 декабря
1996 года была издана рекомендация CSS1.

• Параметры
  шрифтов. Возможности по заданию
  гарнитуры и размера шрифта, а также его
  стиля — обычного, курсивного или
  полужирного.

• Цвета.
  Спецификация позволяет определять
  цвета текста, фона, рамок и других
  элементов страницы.

• Атрибуты
  текста. Возможность задавать
  межсимвольный интервал, расстояние
  между словами и высоту строки (то есть
  межстрочные отступы)

• Выравниваниедля текста, изображений, таблиц и других
  элементов.

• Свойства
  блоков, такие как высота, ширина,
  внутренние (padding) и внешние (margin) отступы
  и рамки.

12 мая 1998
года принята CSS2. Построена на CSS1с
сохранением обратной совместимости.
Добавление к функциональности:

• Блочная
  вёрстка. Появились относительное,
  абсолютное и фиксированное позиционирование.
  Позволяет управлять размещением
  элементов по странице без табличной
  вёрстки.

• Типы
  носителей. Позволяет устанавливать
  разные стили для разных носителей
  (например монитор, принтер, КПК).

• Звуковые
  таблицы стилей. Определяет голос,
  громкость и т. д. для звуковых
  носителей (например для слепых посетителей
  сайта).

• Страничные
  носители. Позволяет, например,
  установить разные стили для элементов
  на чётных и нечётных страницах при
  печати.

• Расширенный
  механизм селекторов.

• Указатели.

• Генерируемое
  содержание. Позволяет установить
  текст или картинку, который будет
  отображаться до или после нужного
  элемента.

Включение css в html

Существует
целых четыре способа включения в
HTML-документ
таблицы стилей:

• Внедрение
  — позволяет задавать все правила таблицы
  стилей непосредственно в самом документе

• Встраивание
  в теги документа — позволяет изменять
  форматирование конкретных элементов
  страницы

• Импортирование
  — позволяет встраивать в документ
  таблицу стилей, расположенную на сервере

• Связывание
  — позволяет использовать одну таблицу
  стилей для форматирования многих
  страниц HTML

Включение css в html. Внедрение

Описание
стилей располагается в коде Web-странички,
внутри тега <STYLE type=»text/css»>…
</STYLE>. Тег <STYLE> размещается внутри
контейнера HEAD.

Параметр
type=»text/css» является рекомендованным
и служит для указания браузеру использовать
CSS. В этом случае описанные стили можно
использовать для элементов, располагающихся
в пределах странички.

Включение css в html. Встраивание

Описание
стиля располагается непосредственно
внутри тега элемента, который описывается.
Это делается с помощью параметра STYLE,
используемого при применении CSS с
большинством стандартных тегов HTML.
<tag >

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

Включение css в html. Импортирование

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

Cоздается
обычный текстовый файл. Чаще с расширением
CSS (mystyles.css) . C помощью языка CSS в нем
описываются необходимые стили. Этот
файл размещается на Web-сервере.

В теге
<STYLE> с помощью свойства @import можно
импортировать внешнюю таблицу стилей
в текущую стилевую таблицу.

<style
type=»text/css»>
@import url(«имя файла»)
[типы носителей];
@import «имя файла»
[типы носителей];

В качестве
типа носителя выступают различные
устройства:

• all — Все типы. Это значение используется
  по умолчанию.

• screen — Экран монитора.

• print— Печатающие устройства вроде принтера.

• aural— Речевые синтезаторы, а также программы
  для воспроизведения текста вслух. Сюда,
  например, можно отнести речевые браузеры.

• braille— Устройства, основанные на системе
  Брайля, предназначенные для слепых
  людей.

• handheld
  — Наладонные компьютеры и аналогичные
  им аппараты.

• projection — Проектор.

• tv
  — Телевизор.

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

Язык каскадных таблиц стилей CSS

Сегодня в рубрике “Языки программирования” мы хотим рассказать о языке таблиц стилей CSS. На самом деле он  не является языком программирования, так как описывает представление (внешний вид, описание), тогда как языки программирования описывают функцию. 

Всё-таки что же такое CSS? Это аббревиатура от  Cascading Style Sheets,  что в переводе означает каскадные таблицы стилей. Это язык описания внешнего вида HTML-документа, одна из базовых технологий в Интернете. 
Практически ни один сайт не обходится без CSS, поэтому HTML и CSS действуют вместе. Но все же они совершенно разные.

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

История создания:
В 1994 году Хокон Виум Ли предложил использовать CSS для стилистического оформления веб-страницы. В 1996 году была принята первая версия CSS как рекомендация W3C, а в 1998 году принята вторая версия CSS — CSS2, потом в 2009 году утверждена CSS2.1, как исправленная версия CSS2. В настоящий момент существует СSS3, она максимально расширена по сравнению с предыдущими версиями. С ее помощью можно делать эффекты теней, скругленные углы у блоков, устанавливать изображение в качестве фона и использовать их как границы. В этой версии очень удобно работать с анимацией.

Плюсы:

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

Минус:

• Большой минус CSS — разное отображение в разных браузерах. Эта  проблема особенно актуальна при использовании устаревших браузеров. 

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

CSS – это общепринятый стандарт разработки, который принимается всеми без исключения компаниями-разработчиками, что явно показывает его значимость и необходимость.

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

• Большая книга CSS3.

Автор: Дэвид Макфарланд.

C помощью технологии CSS3 можно создавать уникальные, современные оформления веб-сайтов. Но даже самый опытный веб-разработчик может не знать всех приемов применения CSS3. Прочитав в этой книге множество практических примеров, а также советов, вы перейдете на новый уровень создания сайтов с помощью HTML и CSS.

• HTML и CSS3. Веб-разработка по стандартам нового поколения.

Автор: Брайан Хоган.

Второе издание содержит обновленную информацию по использованию HTML5 и CSS3. Здесь представлена более подробная информация о средствах доступности HTML5 и описан ряд новых подходов, обходных решений и рецептов.

• Создаем динамические веб-сайты с помощью PHP, MySQL, JavaScript, CSS и HTML5.

Автор: Робин Никсон.

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

Чтобы узнать больше, следите за нашими обновлениями

Краткая история CSS до 2016 г.

Сага CSS

Сага о CSS начинается в 1994 году. Хокон Виум Ли работает в
ЦЕРН — колыбель Интернета — и Интернет начинается
будет использоваться в качестве платформы для электронных публикаций. Одно важное
часть платформы публикации отсутствует, однако: нет возможности
стилизовать документы. Например, невозможно описать
газетный макет на веб-странице. Поработав над персонализированными
презентации газет в Медиа-лаборатории Массачусетского технологического института, Хокон
увидел потребность в языке таблиц стилей для Интернета.

Таблицы стилей в браузерах были не совсем новой идеей. В
отделение структуры документа от макета документа имело
была целью HTML с момента его создания в 1990 году. Тим Бернерс-Ли
написал свой браузер / редактор NeXT таким образом, чтобы он мог
определить стиль с помощью простой таблицы стилей. Однако он не
опубликуйте синтаксис таблиц стилей, считая это важным
для каждого браузера, чтобы решить, как лучше всего отображать страницы для своих пользователей.
В 1992 году Пей Вэй разработал браузер под названием Viola, , который
имел свой собственный язык таблиц стилей.

Однако последующие браузеры предлагали своим пользователям меньше
и меньше возможностей повлиять на стиль. В 1993 году NCSA Mosaic,
вышел браузер, который сделал Интернет популярным. Stylewise,
однако это был шаг назад, потому что он позволял только своим пользователям
для изменения определенных цветов и шрифтов.

Между тем авторы веб-страниц жаловались, что у них нет
достаточно влиять на то, как выглядят их страницы. Один из первых
вопросы от автора, впервые знакомого с Интернетом, заключались в том, как менять шрифты
и цвета элементов.В то время HTML не предоставлял этого
функциональность — и это правильно. Этот отрывок из
сообщение, отправленное в список рассылки www-talk в начале 1994 г.
дает представление о напряженности между авторами и разработчиками:

Сообщение доступно в архивах по адресу http: // www. Webhistory. Org / www.lists / www-talk.1994q1 / 0648.html

На самом деле, это был для меня постоянный источник восторга по поводу
в прошлом году, чтобы постоянно рассказывать толпам (буквально) о
люди, которые хотят — пристегните себя, вот оно —
контролировать, как выглядят их документы, таким образом, чтобы
тривиально в TeX, Microsoft Word и любом другом распространенном тексте
среда обработки: «Извините, вы облажались.»

Автором сообщения был Марк Андреессен, один из
программисты, стоящие за NCSA Mosaic. Позже он стал соучредителем
Netscape, компания, стремящаяся выполнить просьбу авторов. На
13 октября 1994 года Марк Андрессен сообщил www-talk
что первая бета-версия Mozilla (которая позже превратилась в
Netscape Navigator) был доступен для тестирования. Среди новых тегов
новый поддерживаемый браузер был в центре,
и другие теги должны были появиться в ближайшее время.

Оригинал
В сети.

За три дня до того, как Netscape объявила о доступности своего нового
браузер, Håkon опубликовал первый проект
Каскадные таблицы стилей HTML предложение. За кулисами,
Дэйв Рэггетт (главный архитектор HTML 3.0) поощрял
выпуск проекта, чтобы выйти перед предстоящим Mosaic и
конференция Web в Чикаго. Дэйв понял, что HTML
никогда не превратится в язык описания страниц и
что нужен более специализированный механизм, чтобы удовлетворить
требования от авторов.Хотя первая версия
документ был незрелым, он давал полезную основу для обсуждения.

Браузер Argo был частью проекта по созданию Интернета
доступный для ученых-гуманитариев. Он показал плагины
(который он назвал апплетов ) до того, как Netscape добавила их. Видеть
Потоковая передача
Таблица стилей Предложение и Арго: краткое изложение
особенности .

Среди тех, кто откликнулся на первый черновик CSS, был
Берт Бос.В то время он был
создание Argo, настраиваемого браузера с таблицами стилей,
и он решил объединить усилия с Хоконом. Оба из двух
предложения выглядят иначе, чем современные CSS, но это несложно
распознать исходные концепции.

Одной из особенностей языка стиля Арго было то, что он
достаточно общий, чтобы применяться к другим языкам разметки в дополнение к
HTML. Это также стало целью дизайна в CSS, и HTML был
вскоре убрали из названия спецификации.Арго также имел
другие расширенные функции, которые не вошли в CSS1, в
в частности, селекторы атрибутов и сгенерированный текст. Обе функции
пришлось ждать CSS2.

Сообщение Роберта Райша для www-talk находится по адресу http: // www. Webhistory. Org / www.lists / www-talk.1993q2 / 0445.html

Каскадные таблицы стилей был не единственным предложенным стилем
язык в то время. Был язык Пей Вэй из альта
браузер и около 10 других предложений для языков таблиц стилей
были отправлены на www-talk и www-html рассылки
списки.Затем был DSSSL, сложный стиль и трансформация.
язык, разрабатываемый ISO для печати документов SGML.
Предположительно, DSSSL можно применить и к HTML. Но в CSS было
одна особенность, которая отличала его от всех остальных: потребовалось
учтите, что в Интернете стиль документа не может быть
разработан либо автором, либо читателем самостоятельно, но это
их желания должны были быть объединены, или каскадно, каким-то образом;
и, собственно, не просто пожелания читателя и автора, а
также возможности устройства отображения и браузера.

Как и планировалось, первоначальное предложение CSS было представлено в Интернете.
конференция в Чикаго в ноябре 1994 года.
День разработчика вызвал много дискуссий. Во-первых, концепция
баланс между предпочтениями автора и пользователя был необычным. А
На фиктивном снимке экрана был показан слайдер с меткой пользователь
с одной стороны и автор с другой. Регулируя
слайдер, пользователь мог изменить сочетание своих предпочтений и
те из автора.Во-вторых, некоторые воспринимали CSS как
слишком прост для задачи, для которой он был разработан. Они утверждали, что
стилей документов, мощь полноценного языка программирования была
нужный. CSS пошел в совершенно противоположном направлении, подчеркнув
из простого декларативного формата.

WWW3, третья конференция из серии WWW, состоялась
10–14 апреля 1995 г., Дармштадт, Германия

На следующей конференции WWW в апреле 1995 г. был представлен CSS.
опять таки.И Берт, и Хокон были там (на самом деле, это был
они впервые встретились лично), и на этот раз они также могли показать
реализации. Берт представил поддержку таблиц стилей в
Арго и Хокон показали версию браузера Arena, которая
был изменен для поддержки CSS. Арена была написана Дэйвом
Рэггетт как испытательный полигон для новых идей, и одной из них был стиль
листы. То, что начиналось как технические презентации, закончилось
политические дискуссии о балансе автор-читатель.Представители стороны автора утверждали, что автор
в конечном итоге должен был отвечать за определение того, как документы
представлен. Например, утверждалось, что могут быть законные
требования к тому, как должны быть напечатаны предупреждающие этикетки и пользователю
не должно иметь возможности уменьшать размер шрифта для таких предупреждений. В
другая сторона, к которой принадлежат Берт и Хокон, утверждала, что
пользователь, чьи глаза и уши в конечном итоге должны расшифровать
презентации, следует отдавать последнее слово при конфликтах
возникают.

Чтобы подписаться на список рассылки или выполнить поиск в архивах, посетите http://lists.w3.org/ Archives / Public / www-style

Вне политических баталий продолжались технические работы.
Список рассылки в стиле www был создан в мае 1995 г.
обсуждения там часто влияли на развитие
Спецификации CSS. Почти 10 лет спустя их было более
16000 сообщений в архивах списка рассылки. А через 20
лет более 80 000!

Хокон Виум Ли, 12 декабря 1995 г.

В 1995 г. Консорциум World Wide Web (W3C) также стал
оперативный.Компании быстро присоединялись к Консорциуму
и организация была создана. Мастер-классы по разным
темы оказались успешным способом для членов и сотрудников W3C
встретиться и обсудить будущее техническое развитие. Поэтому было
решил, что следует организовать еще один семинар, на этот раз с
таблицы стилей в качестве темы. Технический персонал W3C, работающий над
таблицы стилей (а именно Håkon и Bert) теперь располагались в
София-Антиполис на юге Франции, где W3C открыла свой
Европейский сайт.Южная Франция — не самое худшее место для приманки
участников семинара, но потому что многие из потенциальных
участники были в США, было решено провести семинар
в Париже, который лучше обслуживается международными рейсами. В
семинар был также экспериментом, чтобы увидеть, возможно ли это для W3C
для организации мероприятий за пределами США. Действительно, это оказалось
возможно, и семинар стал важной вехой в обеспечении стиля
листы заняли свое законное место в Сети. Среди участников было
Томас Рирдон из Microsoft, заявивший о поддержке CSS в
предстоящие версии Internet Explorer.Берт Бос, 12 декабря 1995 г.

В конце 1995 г. W3C учредила Редакционный совет по HTML.
(HTML ERB) для ратификации будущих спецификаций HTML. Потому что стиль
листы были в сфере интересов членов
новая группа, спецификация CSS была принята в качестве рабочего элемента с
цель превратить его в Рекомендацию W3C. Среди участников
из HTML ERB был Лу Монтулли из Netscape. После Microsoft
сигнализировал, что он добавляет поддержку CSS в свой браузер, это было
также важно, чтобы Netscape был на борту.В противном случае мы могли бы увидеть
Интернет расходится в разные стороны из-за того, что браузеры поддерживают
разные спецификации. Битвы внутри HTML ERB были
долго и упорно, но CSS уровня 1 наконец превратился в W3C
Рекомендация от декабря 1996 г.

В феврале 1997 года у CSS появилась собственная рабочая группа внутри W3C и
новая группа приступила к работе над функциями, которые не были в CSS1.
адрес. Группу возглавил Крис Лилли, шотландец.
принят на работу в W3C из Манчестерского университета.CSS
уровень 2 стал Рекомендацией в мае 1998 г. С тех пор
группа параллельно работала над новыми модулями CSS и исправлениями для
CSS 2.

В рабочую группу W3C входят члены (около 15 в 1999 г., около 115
в 2016 г.), делегированные компаниями и организациями
которые являются членами W3C. Они приезжают со всего мира, поэтому
встреч обычно проходят по телефону и длятся около часа
каждую неделю. Примерно четыре раза в год они встречаются где-нибудь в
Мир.

Браузеры

Сага о CSS не будет полной без раздела о браузерах. Было
если бы не браузеры, CSS оставался бы высоким
предложение, представляющее только академический интерес. Первый коммерческий браузер
для поддержки CSS был Microsoft Internet Explorer 3, который был
выпущен в августе 1996 года. На тот момент спецификация CSS1 содержала
еще не стали Рекомендацией W3C и обсуждения в рамках
HTML ERB должен был привести к изменениям, которые разработчики Microsoft привели
Крис Уилсон, не мог предвидеть.IE3 надежно поддерживает большинство
свойства цвета, фона, шрифта и текста, но не
реализовать большую часть коробочной модели.

Следующим браузером, объявившим о поддержке CSS, был Netscape.
Навигатор, версия 4.0. С момента своего создания Netscape
скептически относился к таблицам стилей, и первая компания
реализация оказалась вялой попыткой остановить
Microsoft от претензий на соответствие стандартам, чем
Netscape. Реализация Netscape поддерживает широкий спектр
особенности — например, плавающие элементы — но
Разработчики Netscape не успели полностью протестировать все
функции, которые предположительно поддерживаются.В результате так много
Свойства CSS нельзя использовать в Navigator 4.

Netscape внутренне реализовал CSS путем перевода правил CSS.
во фрагменты JavaScript, которые затем запускались вместе с другими
скрипты. Компания также решила позволить разработчикам писать JSSS,
тем самым полностью обходя CSS. Если JSSS был успешным,
У Web было бы на одну таблицу стилей больше, чем необходимо. Этот,
К счастью для CSS, оказалось, что это не так.

Тем временем Microsoft продолжала свои усилия по замене Netscape
с трона господствующих браузеров.В Internet Explorer 4
механизм отображения браузера, который, среди прочего,
отвечающий за рендеринг CSS, был заменен модулем с кодовым названием
Трезубец. Trident снял многие ограничения в IE3,
но также имел свой набор ограничений и ошибок. Microsoft
был подвергнут давлению со стороны Проекта веб-стандартов (WaSP), который
опубликовал IE’s Top 10 CSS Problems в ноябре 1998 г. (см.
Рисунок 1).

Рисунок 1. Браузер треков проекта WaSP
соответствие Рекомендациям W3C.Один из первых их отзывов
была поддержка CSS в Microsoft Internet Explorer.

Последующие версии Internet Explorer значительно
улучшена поддержка CSS.

Рис. 2. Рендеринг на маленьком экране Opera
преобразует страницы в столбцы.

Третьим браузером, который отважился на CSS, был Opera. Браузер
из небольшой норвежской компании попала в заголовки газет в 1998 году, будучи
крошечный (он помещается на дискету!) и настраивается, поддерживая большинство
функции, присутствующие в более крупных предложениях от Microsoft и
Netscape.Opera 3.5 была выпущена в ноябре 1998 года и
поддерживает большую часть CSS1. Разработчики Opera (а именно Гейр
Иварсой) также нашел время для тестирования реализации CSS.
перед отправкой, что является новинкой в ​​этом бизнесе. Хокон,
был настолько впечатлен технологиями Opera, что присоединился к
в 1999 году занимала должность технического директора. Один из важных рынков для браузеров Opera
это мобильные телефоны. Переформатируя страницы, чтобы они поместились на маленьком экране
( @media здесь пригодится), Интернет был
освобождается с рабочего стола (см. рисунок 2).

Люди в Netscape отреагировали на растущую конкуренцию
с новаторским для того времени ходом: они опубликовали источник
код для браузера. С общедоступным исходным кодом любой мог
проверять внутреннее устройство своего продукта, улучшать его и делать
конкурирующие браузеры на основе. Большая часть кода, включая
Реализация CSS была прекращена вскоре после выпуска, и
проект Mozilla был сформирован для построения нового поколения
браузер.CSS был в важной спецификации для обработки и
волонтеры потратили бесчисленное количество часов, чтобы убедиться, что страницы
отображаются в соответствии со спецификацией. Несколько браузеров
были основаны на коде Mozilla, включая Galeon и Firefox.

Apple часто считают пионером технологий, но долгое время
время, он не тратил много ресурсов на веб-браузеры. Apple ушла
это Microsoft, чтобы создать браузер для своих машин, и Интернет
Explorer для Mac на самом деле лучше поддерживает CSS, чем
Версия браузера для Windows.В 2003 году Microsoft прекратила выпуск
поддержка Mac и Apple анонсировали новый браузер под названием
Safari. Safari не совсем новый — он основан на
браузер Konqueror с открытым исходным кодом, который был разработан для KDE
система работает под управлением Linux.

Тантек Челик — редактор CSS 2.1.
спецификации и долгое время он был сотрудником Microsoft.
Его усилия в компании привели к очень хорошей поддержке
CSS в Internet Explorer для MacIntosh.К сожалению,
код не был перенесен на платформу Windows.

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

Всем, кто показывает , эту страницу лучше всего просматривать в браузере.
Ярлык X на веб-странице, кажется, жаждет плохих старых
дней, до появления Интернета, когда у вас было очень мало шансов прочитать
документ, написанный на другом компьютере, другом текстовом редакторе,
или другая сеть.
— Тим Бернерс-Ли в
Обзор технологий, июль 1996 г.

Помимо браузеров

Сага CSS касается не только веб-браузеров. Многие люди снаружи
из тех немногих, которые программируют веб-браузеры,
вклад в CSS за последние годы.

Набор тестов CSS1 стал важной вехой в развитии CSS.
и W3C.
Когда вышли первые две реализации CSS, которые могли быть
сравнив, мы поняли, что возникла проблема. Вы не могли ожидать
таблица стилей, протестированная только в одном браузере, работает в другом
браузер.Чтобы исправить ситуацию, Эрик Мейер — с помощью
от множества других добровольцев — разработали набор тестов
что разработчики будут проверять, пока еще есть время
исправить проблемы. Тодд Фарнер создал тест с кислотой в
Октябрь 1998 г.,
стал непростой задачей. См. Рисунок 3.

Рисунок 3. Кислотный тест.

Индексная точка Брайана CSS все еще доступна по адресу http: // www. Blooberry. Com / indexdot / css / index.html

.

Когда доступен набор тестов, кто-то должен провести тестирование.Брайан Уилсон проделал замечательную работу по тестированию CSS.
реализации и размещение результатов в Интернете.

Следует также упомянуть о работе Жерара последних лет.
Талбот и Джеффри Снеддон в официальном тестовом пакете CSS. И из
курс Питера Линсса, чей сервер Shepherd очень помогает в
просмотр существующих тестов, их запуск и создание отчетов о
полученные результаты.

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

Веб-сайт программы форматирования Prince: http: // www. Yeslogic. Com

Интернет слишком долго находится в ловушке рабочего стола. Делая это
доступный на мобильных телефонах — один важный выход. Майкл Дэй
и Сюэхун Лю показали нам еще один выход: принц
форматтер преобразует документы HTML и XML в PDF и полностью
на основе CSS.Этот продукт позволил Хокону и Берту отказаться от
традиционные текстовые процессоры и используют веб-стандарты. Их книга была полностью написана на HTML.
и CSS.

Веб-шрифты

CSS уровня 2 содержал функцию под названием Web Fonts ,
то есть возможность встраивать шрифты в веб-документ. Идея была
что дизайнер, которому нужен конкретный шрифт, может предоставить
шрифт вместе с таблицей стилей. За десять лет только
Браузер Microsoft Internet Explorer реализовал эту функцию.(Netscape на короткий период реализовал альтернативу, которая
не использовал CSS, был не так хорош и, вероятно, был незаконным во многих
стран, потому что это немного изменило внешний вид каждого шрифта.)

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

Во-вторых, Microsoft и Monotype разработали формат под названием
EOT (Embedded OpenType), который содержал внутри шрифтов
имена (URL-адреса) документов, которые могут быть отображены с их помощью.Это позволило сделать шрифт EOT доступным в Интернете вместе с
документ, потому что теперь его нельзя было использовать ни для каких других
документ. Но формат был проприетарным, и никто, кроме
Microsoft могла это использовать.

Все изменилось в начале 2008 года. К тому времени их было намного больше.
бесплатные шрифты, то есть шрифты, разработчики которых разрешили их использование
распространяется бесплатно в сети. Поэтому Хокон начал лоббировать
производители браузеров наконец-то внедрили веб-шрифты (для шрифтов в
стандартные форматы TrueType и OpenType), и Берт спросил у Microsoft
если они не могли открыть EOT, чтобы другие могли его реализовать,
тоже.В мае Microsoft и Monotype представили EOT в W3C.
по бесплатной лицензии. И браузеры начали внедрять
поддержка загрузки шрифтов TrueType и OpenType.

Однако после дальнейшего обсуждения большинство производителей браузеров решили
не внедрять EOT, а попросить W3C разработать новый формат шрифта
вместо. Причина в том, что они предпочли использовать gzip.
алгоритм сжатия (который уже использовался для HTTP) скорее
чем добавить новый код для алгоритма MicroType Express, используемого EOT.

Этим новым форматом стал WOFF.
Вместо того, чтобы вставлять URL-адрес документа в шрифт, он полагается на
функция HTTP (заголовок origin ), которая позволяет передавать
доменная часть URL-адреса документа: менее точна, чем полный URL-адрес,
но все еще достаточно хорош для большинства создателей шрифтов.

В конце концов, однако, WOFF все же принял части MicroType от EOT.
Экспресс-алгоритм и новый алгоритм сжатия (Brotli),
потому что он обеспечивает лучшее сжатие, чем gzip.

Веб-шрифты стали очень популярными. Бесплатные шрифты используются напрямую
в формате TrueType или OpenType, в котором они были сделаны. Меньше
бесплатные шрифты используют форматы WOFF и EOT.

Примеры служб шрифтов: Библиотека шрифтов, Adobe Edge Web.
Шрифты, Typekit (сейчас
принадлежит Adobe), Шрифт
Белка, Google
Шрифты, WebType и Type Network.

Теперь есть онлайн-сервисы, где вы можете найти и скачать
шрифты (как бесплатные, так и платные).А некоторые даже предлагают провести
шрифты на своих серверах. В некоторых случаях даже бесплатно. (Что значит
они обеспечивают пропускную способность, но взамен собирают статистику по
использование шрифта).

Новые направления: книги и графические интерфейсы

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

Например, с лета 2010 г. по лето 2016 г., французский
издатель Hachette Livre
продал пятьдесят миллионов книг, сделанных с помощью CSS.(Данные предоставлены Дэйвом
Крамер.)

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

Электронные книги также используют CSS, что требует еще других функций. EPUB — это
наиболее широко используемый формат для электронных книг. Он был разработан
по IDPF . IDPF и W3C в настоящее время (декабрь 2016 г.)
процесс слияния их операций.Следующая версия EPUB должна
затем сделать в W3C и разработать функции CSS для книг
и электронные книги будет проще.

Разработка программ ( приложений ), использующих графические
пользовательские интерфейсы, сделанные из HTML и CSS, также предъявляют новые требования
на CSS. Некоторые из последних модулей CSS имеют дело с макетом пользователя.
интерфейсы, а не документы. Хотя: поскольку они являются частью
тот же CSS, ничто не запрещает их использовать и для документов, если
часть документа имеет структуру разметки, которая позволяет
Это.

Со временем в некоторых браузерах и других реализациях
исчезли, и были созданы новые. Сейчас также
языки, производные от CSS для других целей, кроме стилизации
документы. Вероятно, первый язык, который использовал синтаксис CSS.
(но не модель каскадирования и наследования) была STTS Дэниела Глазмана. Это было в 1998 году. С тех пор другие
появились. Три, которые в настоящее время используются, — это Qt Style
Таблицы для стилизации виджетов в наборе инструментов Qt GUI, таблицы стилей JavaFX, которые делают то же самое для пользовательского интерфейса JavaFX.
виджеты Java и MapCSS для
описание стиля карт.

Сложно подсчитать, насколько широко используется CSS, но количество
HTML-страниц, на которых , а не , используют CSS, вероятно, не более
чем несколько процентов. Многие люди зарабатывают на жизнь дизайнерами CSS.
или из конференций CSS. И количество книг, написанных по CSS
больше не может быть подсчитано.

Когда-нибудь CSS будет заменен чем-нибудь другим. Но прежде
что CSS успеет отпраздновать свое 21-летие…

Взгляд на историю CSS

Когда вы думаете о HTML и CSS, вы, вероятно, представляете их как комплексную сделку.Но в течение многих лет после того, как Тим Бернерс-Ли впервые создал всемирную паутину в 1989 году, такого понятия, как CSS, не существовало. Первоначальный план для Интернета не предлагал вообще никакого стиля для веб-сайта.

В архивах списка рассылки WWW похоронен печально известный пост. Он был написан Марком Андреессеном в 1994 году, который впоследствии стал соавтором браузеров Mosaic и Netscape. В своем сообщении Андреессен отметил, что, поскольку не существует способа стилизовать веб-сайт с помощью HTML, единственное, что он мог сказать веб-разработчикам, когда его спросили о визуальном дизайне, было: s orry you are in a онлайн. ”

10 лет спустя CSS был на пути к полному принятию новым воодушевленным веб-сообществом. * Что случилось по дороге? *

Поиск языка стиля

Было много идей относительно того, как теоретически может быть устроена сеть. Однако это просто не было приоритетом для Бернерса-Ли, потому что его работодатели в ЦЕРНе в основном интересовались Интернетом как цифровым справочником сотрудников. Вместо этого мы получили несколько конкурирующих языков для верстки веб-страниц от разработчиков всего сообщества, в первую очередь от Pei-Yaun Wei, Andreesen и Håkon Wium Lie.

Take Pei-Yuan Wei, который создал графический браузер ViolaWWW в 1991 году. Он включил свой собственный язык таблиц стилей прямо в свой браузер с конечной целью превратить этот язык в официальный стандарт для Интернета. Он так и не дошел до этого, но дал столь необходимое вдохновение для других потенциальных спецификаций.

ViolaWWW после выпуска

Тем временем Андреессен применил другой подход в своем браузере Netscape Navigator. Вместо того, чтобы создавать отдельный язык, посвященный стилю веб-сайта, он просто расширил HTML, включив в него нестандартные презентационные теги HTML, которые можно было бы использовать для разработки веб-страниц.К сожалению, вскоре веб-страницы потеряли всю семантическую ценность и стали выглядеть так:

  
  
  Это может быть какой-то шрифт, разбитый на столбцы  
  

Программисты быстро сообразили, что такой подход долго не продержится. Было много идей для альтернатив. Как RRP, язык таблиц стилей, который предпочитает сокращения и краткость, или PSL96, язык, который фактически допускает функции и условные операторы.Если вам интересно, как выглядят эти языки, Зак Блум написал отличное подробное описание нескольких конкурирующих предложений.

Но идея, которая привлекла всеобщее внимание, была впервые предложена Хоконом Виум Ли в октябре 1994 года. Она называлась каскадными таблицами стилей, или просто CSS.

Почему мы используем CSS

CSS выделялся своей простотой, особенно по сравнению с некоторыми из его первых конкурентов.

  window.margin.left = 2 см
font.family = раз
h2.font.size = 24pt 30%  

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

Однако

CSS был уникальным в своем роде. Это позволило стилям каскадироваться. Это прямо в названии. Каскадные таблицы стилей . Каскад означает, что стили могут наследовать и перезаписывать другие стили, которые были ранее объявлены, следуя довольно сложной иерархии, известной как специфичность. Однако прорыв состоял в том, что он позволял использовать несколько таблиц стилей на одной странице.

Видите это процентное значение выше? На самом деле это очень важный момент.Ли считал, что и пользователи, и дизайнеры будут определять стили в отдельных таблицах стилей. Таким образом, браузер может действовать как своего рода посредник между ними и согласовывать различия для отображения страницы. Этот процент показывает, насколько сильно эта таблица стилей владеет свойством. Чем меньше владелец, тем больше вероятность его перезаписи пользователями. Когда Ли впервые продемонстрировал CSS, он даже продемонстрировал слайдер, который позволял ему переключаться между стилями, определяемыми пользователем, и стилями, определяемыми разработчиком, в браузере.

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

Вскоре после того, как Ли опубликовал свое первоначальное предложение, он нашел партнера в лице Берта Боса. Бос создал браузер Argo, а в процессе — свой собственный язык таблиц стилей, части которого в конечном итоге перешли в CSS.Они начали разрабатывать более подробную спецификацию, в конце концов обратившись за помощью к недавно созданной рабочей группе HTML в W3C.

На это ушло несколько лет, но к концу 1996 года приведенный выше пример изменился.

  html {
  поле слева: 2 см;
  семейство шрифтов: "Times", serif;
}

h2 {
  размер шрифта: 24 пикселя;
}  

Прибыло

CSS.

Проблемы с браузерами

В то время как CSS был всего лишь черновиком, Netscape настаивал на презентационных HTML-элементах, таких как multicol , layer и ужасный тег blink .Internet Explorer, с другой стороны, решил частично включать CSS. Но их поддержка была неоднозначной и порой неверной. Это означает, что к началу августа, после пяти лет использования CSS в качестве официальной рекомендации, все еще не было браузеров с полной поддержкой CSS.

Этот пришел из какого-то странного места.

Когда Тантек Челик присоединился к Internet Explorer для Macintosh в 1997 году, его команда была довольно небольшой. Год спустя он был назначен ведущим разработчиком движка рендеринга одновременно с сокращением его команды вдвое.Большая часть внимания Microsoft (по очевидным причинам) была сосредоточена на версии Internet Explorer для Windows, а команда Macintosh была предоставлена ​​своим собственным устройствам. Итак Начиная с разработки версии 5 в 2000 году, Челик и его команда решили сосредоточить свое внимание там, где никто другой, а именно на поддержке CSS.

Команде потребовалось два года, чтобы закончить версию 5. В течение этого времени Челик часто разговаривал с членами W3C и веб-дизайнерами, используя их браузер. По мере того, как каждая деталь вставлялась на место, команда IE-for-Mac проверяла по всем направлениям, что у них все получается правильно.Наконец, в марте 2002 года они выпустили Internet Explorer 5 для Macintosh. Первый браузер с полной поддержкой CSS Level 1.

Переключение Doctype

Но помните, что версия Internet Explorer для Windows добавила CSS в свой браузер с большим количеством ошибок и сложной коробочной моделью, которая описывает способ вычисления и последующего отображения элементов. Internet Explorer включил такие атрибуты, как граница и отступ внутри общей ширины и высоты элемента. Но IE5 для Mac и официальная спецификация CSS требовали, чтобы эти значения были добавлены к ширине и высоте.Если вы когда-нибудь играли с размером коробки , вы точно знаете разницу.

Челик знал, что для того, чтобы CSS работал, эти различия необходимо устранить. Его решение пришло после разговора со сторонником стандартов Тоддом Фарнером. Это называется переключением типа документа, и работает он следующим образом.

Все мы знаем doctypes. Они находятся в самом верху наших HTML-документов.

А в старину они выглядели так:

Это пример документа, соответствующего стандартам. Решающим моментом является // W3C // DTD HTML 4.0 // EN . Когда веб-дизайнер добавил это на свою страницу, браузер будет знать, что страница должна отображаться в «стандартном режиме», и CSS будет соответствовать спецификации. Если тип документа отсутствовал или использовался устаревший, браузер переключался в «режим причуд» и отображал объекты в соответствии со старой блочной моделью и со старыми ошибками.Некоторые дизайнеры даже намеренно решили перевести свой сайт в режим причуд, чтобы вернуть старую (и неправильную) коробочную модель.

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

Взломанная модель коробки

Осталось выяснить еще кое-что. Переключение Doctype нормально работало в современных браузерах на старых веб-сайтах, но блочная модель все еще была ненадежной в старых браузерах (особенно в Internet Explorer) для новых веб-сайтов .Откройте для себя Box Model Hack, хитрый трюк от Челика, который воспользовался преимуществом малоиспользуемого атрибута CSS под названием voice-family , чтобы обмануть браузеры и разрешить несколько значений ширины и высоты в одном классе. Челик проинструктировал авторов сначала указать ширину их старой модели коробки, затем закрыть тег в небольшом хаке с голосовым семейством , а затем шириной их новой модели коробки. Примерно так:

  div.content {
  ширина: 400 пикселей;
  voice-family: ""} "";
  голос-семья: наследование;
  ширина: 300 пикселей;
}  

Voice-family не распознавался в старых версиях браузеров, но принимал строку в качестве своего определения.Таким образом, добавив дополнительные } старые браузеры просто закроют правило CSS, прежде чем когда-либо достигнут этой второй ширины. Это было просто и эффективно, и многие дизайнеры быстро начали экспериментировать с новыми стандартами.

Пионеры проектирования на основе стандартов

Internet Explorer 6 был выпущен в 2001 году. В конечном итоге он стал главной проблемой для веб-разработчиков во всем мире, но на самом деле он поставлялся с довольно впечатляющей поддержкой CSS и стандартов.Не говоря уже о ее рыночной доле, составляющей около 80%.

Сцена подготовлена, детали поставлены на свои места. CSS был готов к производству. Теперь людям просто нужно было его использовать.

За 10 лет, когда Интернет стремительно приближался к повсеместному распространению без согласованного или стандартного языка стилей, дизайнеры не перестали проектировать. Нисколько. Вместо этого они полагались на накопившееся количество взломов браузера, макетов на основе таблиц и встроенных файлов Flash, чтобы добавить стиль, когда HTML не мог. Соответствующий стандартам дизайн на основе CSS был новой территорией.Интернету нужны были пионеры, которые проложили бы путь вперед.

То, что они получили, было двумя серьезными модификациями всего через несколько месяцев. За первым из Wired последовал ESPN .

Дуглас Боуман отвечал за команду веб-дизайнеров журнала Wired . В 2002 году Боуман и его команда огляделись и увидели, что ни один крупный сайт не использует CSS в своем дизайне. Боумен чувствовал себя почти обязанным веб-сообществу, которое обратилось к Wired в поисках примеров передового опыта по изменению дизайна своего сайта с использованием новейших, соответствующих стандартам HTML и CSS.Он подтолкнул свою команду к тому, чтобы все снести и переделать с нуля. В сентябре 2002 года они осуществили это и начали свой редизайн. Сайт даже проверен.

ESPN выпустили свой сайт всего несколько месяцев спустя, используя многие из тех же методов в еще большем масштабе. Эти сайты сделали большую ставку на CSS, технологию, которая, как некоторые думали, может оказаться недолговечной. Но в значительной степени это окупилось. Если вы откажетесь от любого из разработчиков, работавших над этим редизайном, они дадут вам подробный список основных преимуществ.Более производительные, быстрые изменения дизайна, более легкие в использовании и, прежде всего, полезные для Интернета. Вначале Wired даже меняли цвет ежедневно.

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

Сад дзен CSS и семантическая сеть

В следующем году, в 2003 году, Джеффри Зельдман опубликовал свою книгу « Designing with Web Standards », которая стала своего рода справочником для веб-дизайнеров, желающих перейти на дизайн, основанный на стандартах. Он положил начало наследию техник и приемов CSS, которые помогли веб-дизайнерам представить, на что способен CSS. Год спустя Дэйв Ши запустил CSS Zen Garden, который побудил дизайнеров взять простую HTML-страницу и оформить ее по-другому, используя только CSS.Сайт стал витриной последних советов и уловок и во многом убедил людей, что пришло время для стандартов.

Медленно, но верно набирала обороты. CSS продвинутый, и добавлены новые атрибуты. Браузеры фактически поспешили внедрить новейшие стандарты, а дизайнеры и разработчики добавили в свой репертуар новые приемы. И со временем CSS стал нормой. Как будто это было все время.

Нравится изучать историю веб-поиска? У Джея Хоффмана есть еженедельный информационный бюллетень «История Интернета», на который вы можете подписаться здесь.

История CSS, краткий обзор

CSS — одна из трех краеугольных технологий, используемых в Интернете (две другие — это HTML и JavaScript). CSS означает каскадные таблицы стилей — на самом деле подсказки заключаются в словах «каскадный» и «стиль», где каскадирование описывает способ, которым один стиль может каскадироваться от одного к другому.

Одним из многих преимуществ CSS является то, что в одном документе HTML можно использовать более одного стиля.

CSS используется как способ определения того, как код HTML будет выглядеть на веб-сайте.В то время как HTML (язык гипертекстовой разметки) используется для создания контента, включая письменный текст, CSS изменяет внешний вид веб-страницы.

Итак, в зависимости от данных, которые они хотят отображать, разработчик может выбрать страницу с вкладками, расположенными в верхней части страницы или сбоку.

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

Возможно, лучший способ описать, что делает CSS, — это объяснить, что бы страница хотела, если бы на ней не использовался CSS.

Без CSS веб-страницы просты и далеко не вдохновляют. Слова прокручиваются по всей странице и их трудно читать. Но до CSS именно так выглядели веб-страницы.

Введение CSS частично отвечает за то, как сегодня выглядит и ощущается Интернет. И, несмотря на то, что он далек от создания и, следовательно, завершения, это постоянно развивающийся язык.

Зачем нам нужен CSS?

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

Использование CSS позволяет пользователю указать;

• Шрифты
• Цвет текста и ссылок
• Использовать цвета для фона текста
• Где и как выглядят и размещаются блоки внутри содержимого
• И… CSS также улучшает доступность для пользователей, эффективность, гибкость и обеспечивает совместимость с браузерами.

Кто изобрел CSS?

Согласно Википедии, рождение CSS в значительной степени связано с норвежцем Хоконом Виум Ли, который еще в 1994 году стремился создать универсальную стандартизованную таблицу стилей для Всемирной паутины.

Первым сайтом, на котором Ли опробовал CSS, был веб-браузер Arena. С момента своего первого создания Lie продолжал создавать версии CSS1, CSS2 и RFC 2318 вместе с Тимом Бернерс-Ли и Робертом Кайо. В первое десятилетие своего существования (1994–2004 гг.) CSS во всех его спецификациях стал установленным веб-стандартом, сильно влияющим на внешний вид и доступность всемирной паутины, какой мы ее знаем сегодня.CSS3 был выпущен в 1999 году.

Веб-стандарты — тема, которая близка Лие. С момента появления CSS он обратился к крупным игрокам в сфере технологий, таким как Microsoft и другие браузеры, с просьбой поддержать общие веб-стандарты и продолжает разрабатывать использование CSS для веб-печати и разбивки на страницы на экранах.

В чем разница между CSS1, CSS2 и CSS3?

CSS (1996) позволяет пользователю выбирать стиль и размер шрифта, а также изменять цвет текста и фона.

CSS2 (1998) имеет возможности, которые позволяют пользователю разрабатывать макет страницы.

CSS3 (1999) позволяет пользователю создавать презентации из документов и выбирать из более широкого диапазона шрифтов, включая шрифты Google и Typecast. Уникально CSS3 позволяет пользователю включать закругленные границы и использовать несколько столбцов. CSS3 считается более простым в использовании (по сравнению с CSS2), потому что он имеет разные модули

А как насчет CSS4?

Рабочая группа W3C (w3.org), группа, которая обсуждает все технические аспекты развития CSS и отвечает на запросы из общедоступного списка рассылки, постоянно работает над улучшениями в CSS. Вместо того, чтобы создавать совершенно новую версию под названием CSS4, похоже, что w3.org добавляет новые, более мелкие компоненты к существующим версиям CSS через расширения. Но прежде чем мы спросим, ​​где находится CSS4, стоит отметить, что многие утверждают, что CSS3 не существует. Вместо этого CSS 3 и 4 — это скорее термины, используемые для определения любых обновлений, которые произошли после CSS2 (и поэтому официально называются CSS2.1). Таким образом, CSS4 появился, но он никогда не будет называться CSS4.

Конечно, возможности CSS безграничны, поэтому они постоянно развиваются. CSS-Tricks, сайт, который, среди прочего, освещает истории о развитии CSS, регулярно поощряет своих читателей расширять и экспериментировать с CSS. Например, в одной истории рассказывается о том, какие забавные / полезные вещи можно попробовать с помощью универсального селектора (*). Например, использование рамки на веб-страницах или переходов для прокачки сайта WordPress.

Как вы изучаете CSS?

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

Наконец, где бы мы были без CSS?

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

Эволюция CSS за 3 десятилетия

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

CSS был и будет доминировать в оформлении веб-сайтов

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

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

Родилась звезда

Быстро назад в 1990 году. HTML был изобретен Бернерсом-Ли для создания электронных страниц, которые отображаются во всемирной паутине, каждая страница содержит серию соединений с другими страницами, называемых гиперссылками.

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

CSS (Каскадные таблицы стилей) был впервые предложен Хоконом Виум Ли 10 октября 1994 года во время работы с Тимом Бернерсом-Ли в ЦЕРНе, а остальное уже история. В то время CSS был не единственным языком стилизации, но сам элемент каскадирования и последовательности разработки отличал его от остальных.

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

  html {
  семейство шрифтов: без засечек;
  размер шрифта: 1,2 бэр;
  font-weight: 400;
  высота строки: 1,7;
}

тело {
  размер коробки: рамка-рамка;
  цвет фона: белый;
  дисплей: блок;
  маржа: 0;
}  

Что делает CSS особенным

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

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

Встроенный CSS относится к CSS, находящемуся в файле HTML, находящемся в заголовке документа между тегами стиля. Встраивание CSS просто означает помещение вашего CSS в файл HTML вместо внешнего файла CSS.

Некоторые из преимуществ использования CSS:

• Легче поддерживать и обновлять
• Больше единообразия в дизайне
• Дополнительные параметры форматирования
• Облегченный код
• Более быстрое время загрузки
• Преимущества поисковой оптимизации
• Простота представления разных стилей разным зрителям
• Повышенная доступность

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

Один из трех мушкетеров

CSS является одним из основных языков открытого Интернета и стандартизирован для веб-браузеров в соответствии со спецификацией W3C.

CSS вместе с HTML и JavaScript являются тремя краеугольными камнями открытого Интернета: HTML определяет структуру веб-сайта, CSS придает ему внешний вид, JavaScript обеспечивает интерактивность и анимацию.

Первым коммерческим браузером, поддерживающим CSS, был Microsoft Internet Explorer 3, выпущенный в августе 1996 года.Следующим браузером, объявившим о поддержке CSS, был Netscape Navigator версии 4.0. Третьим браузером, который отважился на CSS, был Opera.

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

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

CSS за годы

CSS-функций контролируются и разрабатываются W3C на протяжении многих лет по множеству спецификаций. CSS имеет различные профили и уровни:

Профили

обычно представляют собой подмножество одного или нескольких уровней CSS, созданных для конкретного устройства или пользовательского интерфейса. На данный момент существуют профили для мобильных устройств, принтеров и телевизоров. Профили не следует путать с типами мультимедиа, которые были добавлены в CSS 2.

CSS 1 был выпущен в 1996 году и переиздан с исправлениями в 1999 году.CSS 2 появился в 1998 году и построен на CSS 1. CSS 2 добавляет поддержку различных средств вывода.

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

CSS теперь имеет более 60 модулей, которые определяют различные возможности, некоторые из которых уже являются частью стандарта, некоторые все еще находятся в разработке.Термин CSS3 относится ко всему, что опубликовано после CSS 2.1, единой интегрированной спецификации CSS4 не существует.

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

Текущее состояние CSS

Рабочая группа CSS создает и определяет спецификации CSS. Этим спецификациям назначаются уровни зрелости по мере их прохождения в процессе проектирования.

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

История CSS за последние пару лет — это история невероятной гибкости и адаптируемости.CSS может быть несовершенным, но ему все же удалось согласовать плавный переход на множество новых устройств, контекстов, режимов взаимодействия и требований доступности.

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

Инструменты макета

— одна из областей, в которых за последние годы произошло больше всего изменений.Сначала на сцену вышел FlexBox, а затем появился CSS Grid как наиболее многозначный и выразительный способ работы с макетами CSS.

Долгое время писать CSS было достаточно просто: добавьте расширение .css к вашему файлу, откройте текстовый редактор и начните печатать. Но с годами CSS разработал собственную экосистему технологий, от препроцессоров, таких как Sass и Less, до методологий, таких как BEM и Atomic CSS, и до более поздних разработок, таких как CSS-in-JS.

В то время как БЭМ здесь опережает всех, Atomic CSS также начинает завоевывать позиции благодаря своей совершенно новой философии, основанной на служебных классах.

CSS-in-JS — одно из самых значительных достижений в мире CSS за последние несколько лет. Точно так же, как препроцессоры обошли CSS, чтобы представить свой собственный набор новых функций более десяти лет назад, библиотеки CSS-in-JS используют возможности JavaScript, чтобы прокладывать свой собственный путь, не дожидаясь, пока CSS наверстает упущенное.

Проблемы CSS в масштабе

CSS

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

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

Давайте посмотрим на некоторые отмеченные проблемы с CSS в масштабе:

• Отсутствие встроенных пространств имен — Любые языки программирования, не имеющие встроенных пространств имен, будут иметь проблемы с масштабированием, и CSS, очевидно, является одной из них. Глобальное пространство имен было разработано как основная функция CSS для обеспечения переносимости и каскадирования.Это ДНК CSS, CSS-in-JS исправлен очень хорошо, когда инструменты сборки могут автоматически перехватывать и генерировать области видимости.

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

• Неизбежное повторение самого себя — Отсутствие переменных, поэтому мы должны повторять цвета повсюду.Отсутствие вложенности, поэтому нам приходится повторять огромные блоки CSS повсюду. Короче говоря, CSS нарушает живое дерьмо из принципа DRY.

• Застрял в прошлом — Три краеугольных камня HTML, CSS, JavaScript не должны разрушать Интернет; Поддержание обратной и прямой совместимости является приоритетом номер один при разработке новых функций. Несмотря на то, что мы можем вводить новые функции, но мы не можем полностью отказаться от плохих решений прошлого, скорость принятия и поддержка браузеров слишком важны, чтобы произвести революцию в языке.

• Устойчивость к статическому анализу — Как мы можем применить к CSS некоторый статический анализ, такой как удаление мертвого кода и минификация? мы не можем! глобальный характер и каскадные стили из встроенных, внутренних и внешних источников делают невозможным выполнение таких видов оптимизации.

• Недетерминированное разрешение для человека — В соответствии с тем, как работает css, стили объединяются из нескольких источников (встроенные, внутренние, внешние таблицы стилей) и источников (пользовательский агент, пользователь, автор,! Important,…), проходя через расчет специфичности, наследование и неисполнение обязательств.Этот сложный процесс предназначен не для человека, а для машины.

Современный Интернет развивается очень быстро, динамично и на более высоком уровне абстракции. Люди больше не создают веб-сайты с использованием ванильного HTML, CSS, JavaScript, это возможно, но слишком медленно и упускает слишком много готовых оптимизаций, обеспечиваемых фреймворками и инструментами.

Как CSS может удовлетворить несовместимые требования простоты (со стороны разработчиков), гибкости (со стороны дизайнеров) и отзывчивости (со стороны пользователей)? Он не может сам по себе, ему нужны более абстрактные инструменты и методы высокого уровня, такие как CSS-in-JS, препроцессоры, чтобы приблизить его к языку программирования.

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

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

Расцвет CSS — История Интернета

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

В первые дни Интернета существовал только HTML.Это позволило разработчикам создавать структурированные веб-сайты, но мало что могло сделать с точки зрения дизайна и стиля. Было предложено множество решений, но каскадные таблицы стилей (CSS), разработанные Хоконом Виум Ли еще в 1994 году, вышли на первое место. В предлагаемой спецификации HTML по-прежнему будет способом разметки веб-сайтов, но CSS был языком, описывающим, как эти страницы должны выглядеть. С помощью CSS веб-дизайнеры могли добавлять пользовательские шрифты, цвета, макеты и уникальный дизайн на свои веб-страницы.

Но CSS начался довольно скалисто, и я обещаю рассказать об этом в другой раз. Тем не менее, в 1997 году он стал официальной рекомендацией W3C и начал проникать в Netscape Navigator и Internet Explorer 4, доминирующие браузеры того времени.

Проблема была в том, что эти реализации были немного разбросаны, скажем, . Сайты, которые в IE выглядели одинаково, в Netscape Navigator могли выглядеть совершенно иначе, и наоборот, потому что свойства CSS выполнялись по-разному.

Были некоторые, кто не согласился с этим. Эрик Мейер, например, начал тестировать несоответствия CSS и создавать диаграммы поддержки, которыми свободно делился в своем блоге. Эти диаграммы покажут, какие свойства CSS поддерживаются в каждом браузере, в качестве справочной информации для других разработчиков. Примерно в то же время был основан проект веб-стандартов (WaSP) с целью продвижения веб-стандартов, согласованности и взаимодействия между браузерами. Несколько членов, в том числе Мейер, создали ветвь WaSP, известную как Комитет действий CSS.Возможно, вы не слышали это имя, потому что они назвали себя CSS Samurai. Вместе Самураи опубликовали отчеты о проблемах CSS в браузерах и начали их распространять.

Один из этих участников, Тодд Фарнер, зажег нашу первую искру.

Фарнер решил, что пришло время буквально протестировать браузеры. Он создал простую веб-страницу, которую назвал «Box Acid Test». Сама страница была довольно простой. При правильной визуализации страница содержала ряд разноцветных прямоугольников (как предполагает ее тезка).

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

Вначале все браузеры давали сбой. Но в том-то и дело. Box Acid Test дал разработчикам краткую справочную информацию о том, что и где поддерживалось, а разработчикам браузеров — пример для дальнейшего развития.CSS Samurai также использовал Box Acid Test, чтобы проверить, какой прогресс был достигнут. Они даже опубликовали результаты теста в мрачных отчетах, таких как «10 главных проблем CSS в IE», чтобы побудить браузеры внести изменения. Усилие, которое в конечном итоге сработало. Постепенно CSS становится широко и постоянно поддерживается в браузерах. Потребность в CSS Samurai исчезла, и в конце концов они разошлись.

The Box Acid Test сделал свое дело, подтолкнув браузеры в правильном направлении.В последующие годы CSS стал для веб-разработчиков надежным инструментом для создания уникальных, ярких и надежных дизайнов.

Если бы они только использовали это.

В годы хаоса смешанной поддержки браузеров CSS стал довольно непопулярным среди веб-дизайнеров. Вместо этого создатели веб-сайтов опирались на таблицы данных HTML (или разделительные гифки), которые позволяли им размечать объекты с точными размерами. Это не обязательно вина разработчиков. Другого выбора просто не было. Когда-то использование CSS , а не было лучшей практикой.Так было до тех пор, пока Дэйв Ши не осветил путь вперед.

Ши был веб-разработчиком. Он был уверен в CSS. Он тоже знал, в чем проблема. В сети просто не хватало примеров. Конечно, некоторые начали экспериментировать, например, Дуг Боуман в амбициозном редизайне Wired , созданном полностью с помощью CSS. Но других было не так уж и много. Поэтому Ши решил, что он покажет вместо того, чтобы сказать.

В мае 2003 года Ши создал CSS Zen Garden. Сад на самом деле представлял собой собрание веб-страниц.У каждой веб-страницы было , ровно того же HTML и содержимого. Единственное отличие заключалось в CSS. Первые 5 экземпляров были созданы самим Ши. И с помощью всего лишь нескольких настроек CSS эти страницы стали невероятно разными.

Следующим шагом Ши было запросить у публики собственные материалы.

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

Идея прижилась. Люди использовали Zen Garden, чтобы показать своим начальникам и клиентам, на что способен CSS. Дизайнеры и разработчики позаимствовали методы и код из примеров. Было много хаков (некоторые из них были довольно забавными!), Но они дополняли веб-стандарты, а не боролись с ними.

И, что самое главное, CSS наконец-то стал заслуживающим доверия.

Узнайте свою историю

Два раза в месяц рассылка об истории Интернета, невероятных людях, создавших его, а также обо всех веб-сайтах, коде и браузерах, о которых вы никогда не слышали.

Поделитесь этим на
Facebook,
Твиттер,
Reddit или
Карман

Введение в язык программирования HTML / CSS

Введение в язык программирования HTML / CSS

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

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

HTML и CSS — это два разных языка. Считается лучшей практикой не смешивать их. Хотя можно определить CSS внутри документа HTML, это в первую очередь подрывает преимущества использования отдельного языка стилей.

Вместо этого файлы HTML должны представлять только само содержимое, а файлы CSS всегда должны отображать внешний вид этого содержимого.

История HTML / CSS

Изначально в 1990 году HTML предназначался только для создания структуры текстовых документов. У него была концепция нескольких уровней заголовков и основного текста, но не более того.

HTML 2.0 был выпущен в апреле 1994 года и одобрен W3C в качестве стандарта в сентябре 1995 года, и он принес изображения.Разработчикам было предоставлено очень мало контроля над отображением изображений. Фактически, теги изображений поддерживали только два атрибута: один для источника изображения (предоставляющий URL-адрес, из которого изображение может быть загружено) и один для альтернативного текста (сообщение, которое будет показано пользователю, если изображение не может быть отображено для некоторая причина).

HTML 3.0, выпущенный в ноябре 1993 года, добавил таблицы. Они предназначались только для использования для представления «табличных данных», то есть данных, которые по своей природе являются двумерными.

Однако намерения W3C (консорциума World Wide Web, организации, ответственной за публикацию веб-стандартов) были проигнорированы разработчиками. Создатели веб-сайтов быстро взяли на вооружение таблицы как средство управления компоновкой страницы. Действительно, таблицы обеспечивали почти такой же уровень контроля, что и традиционные издатели.

HTML 3.2, опубликованный 5 мая 1996 г. и рекомендованный в качестве стандарта в январе 1997 г., представил такие элементы дизайна, как шрифты, цвета и элементы фона.Эта разработка ознаменовала рождение современного веб-дизайнера. Внезапно веб-страницы перестали быть посвящены только содержанию, и представление стало королем.

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

Некоторые проприетарные теги стали частью будущих стандартов HTML, но многие этого не сделали.Примеры включают тег Netscape и тег в Internet Explorer.

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

W3C наконец придумал лучший способ. Они вернутся к корням Интернета, завершив отделение содержания от его представления. Процесс начался в декабре 1996 года с выпуска спецификации CSS уровня 1.

CSS был детищем Хокона Виума Ли. Затем Ли работал с Тимом Бернерс-Ли, создателем HTML, а позже стал техническим директором Opera Software.Предложение Ли было одним из многих предложений о таблицах стилей, сделанных в то время, но его предложения и предложения Берта Боса больше всего повлияли на то, что мы теперь знаем как CSS.

Корни таблиц стилей восходят к SGML, предшественнику XML, который изначально вдохновлял HTML. Однако ни одна из существующих технологий, таких как DSSSL или FOSI, не была достаточно гибкой для динамической, модульной природы всемирной паутины. Это было желание позволить стилю документа охватывать несколько файлов, что привело к каскадной природе CSS, когда один стиль мог каскадироваться на нескольких листах.

Первоначально создание и стандартизация CSS входила в компетенцию редакционного совета W3C по HTML (ERB), но со временем он стал настолько влиятельным, что в начале 1997 года был сформирован его собственный комитет, рабочая группа CSS под председательством Криса Лилли.

Лучшие книги по HTML / CSS

HTML / CSS необходим для обучения программированию. В Интернете есть множество учебных пособий по HTML, в которых вы можете получить доступ и изучить кодирование HTML. С помощью справочных ресурсов html вы легко можете стать ниндзя HTML.Но истинное знание приходит из книг, в которых подробно обсуждаются многие концепции. Мы перечислили ниже три категории книг. Это начальный, средний и продвинутый уровни. Посмотрите их прямо сейчас!

• HTML и CSS: проектирование и создание веб-сайтов

  by Jon Duckett

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

• HTML5 и CSS3 All-in-One для чайников

  по Энди Харрис

  HTML5 и CSS3 — важные инструменты для создания динамических веб-сайтов, а также обновления и расширенные функции, которые могут сделать ваши веб-сайты еще более эффективными и уникальными. В этом дружелюбном комплексном руководстве содержится все, что вам нужно знать о каждой из этих технологий и их последних версиях, чтобы вы могли использовать их вместе.Основываясь на самых популярных форматах первых двух редакций, эта новая редакция учит вас основам HTML5 и CSS3, а затем представляет способы их использования с JavaScript, MySQL и Ajax для создания работающих веб-сайтов.

• HTML и CSS для начинающих с HTML5

  by Mark A Lassoff

  Нет веб-сайта — будь то WhiteHouse.gov, IBM.com или сайт местной средней школы — это не написано в HTML.Если вы занимаетесь веб-разработкой любого уровня — от редактирования страниц на сайте WordPress до создания оригинальных страниц с нуля, понимание и умение кодировать в HTML и CSS может дать вам уровень контроля и власти над вашими проектами, которые вы я никогда раньше не испытывал.

• Расширенный профессиональный веб-дизайн: методы и шаблоны

  по Клинт Эккер

  Расширенный профессиональный веб-дизайн: методы и шаблоны (CSS и XHTML) — это книга, обязательная для продвинутых дизайнеров, которые хотят расширить свою навыки и улучшить качество своих дизайнов.Изучение технологии CSS и постоянное совершенствование навыков проектирования и разработки становится все более важным для каждого веб-дизайнера на современном рынке.

• Pro Шаблоны дизайна CSS и HTML

  по Майкл Бауэрс

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

• Освоение интегрированного HTML и CSS

  by Вирджиния ДеБолт

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

Проекты HTML / CSS

Есть масса проектов HTML / CSS. Любой веб-сайт, который вы открываете, использует оба элемента, и нет возможности убежать от технологии. Ниже приведены некоторые из замечательных веб-сайтов, построенных с использованием HTML / CSS.

HTML / CSS-конференции

В мире проводится множество HTML / CSS-конференций. Большинство конференций посвящены одной технологии, это может быть HTML или CSS.

• HTML5DevConf

  HTML5DevConf — ведущая конференция HTML5.Он проходит в Сан-Франциско один раз в год.

• CSS Day

  CSS Day — двухдневная конференция, посвященная как HTML, так и CSS.

• WebDevCon

  WebDevCon принадлежит Amazon. Он ориентирован на интерфейсные технологии, включая HTML и CSS.

• HTML5 Days

  HTML5 Days — немецкая конференция HTML5.

• DevNexus

  DevNexus — конференция для профессиональных разработчиков. Он ориентирован на веб-разработку.

История CSS Grid от ее создателей — отдельный список

17 октября браузер Microsoft Edge представил свою реализацию CSS Grid.Это важный этап по ряду причин. Во-первых, это означает, что все основные браузеры теперь поддерживают этот невероятный инструмент компоновки. Во-вторых, это означает, что все основные браузеры развернули свои реализации за один год (!), Что является потрясающим примером успеха стандартов и кросс-браузерного сотрудничества. Но в-третьих, и это, пожалуй, самое интересное, он замыкает цикл процесса, над созданием которого ушло более 20 лет.

Продолжение статьи ниже

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

По словам доктора Берта Боса, который создавал CSS вместе с Хоконом Виумом Ли, сеточные макеты были у него в голове уже довольно давно.

«CSS начинался как нечто очень простое, — вспоминал Бос. «В то время это был просто способ создать представление документа на очень простом маленьком экране. Двадцать лет назад экраны были очень маленькими. Итак, когда мы увидели, что можем создавать таблицы стилей для документов, мы подумали: Ну, а что еще мы можем сделать теперь, когда у нас есть система для создания таблиц стилей? ”

Глядя на то, что книги и журналы делали с макетом, было для них большим вдохновением.

«Независимо от содержимого на каждой странице, он имеет определенный макет», — сказал Бос. «Номера страниц есть в определенных местах. И изображения всегда выравниваются по определенным сторонам — слева, справа или по центру. Мы хотели это запечатлеть ».

Поначалу производители браузеров сочли эту идею «слишком сложной» для реализации, но концепции компоновки сетки продолжали появляться. В 1996 году Бос, Ли и Дэйв Рэггетт разработали модель компоновки «на основе рамы». Затем, в 2005 году, Bos выпустила модуль Advanced Layout Module, который позже превратился в модуль Template Layout.Несмотря на энтузиазм сообщества веб-дизайнеров по поводу этих концепций, ни одна из них так и не появилась в браузере.

Еще раз с чувством # section3

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

Фил Купп был назначен ответственным за команду пользовательского интерфейса, которой было поручено переосмыслить Microsoft Intune, служебную программу для управления компьютером.Купп был большим поклонником Silverlight, надстройки для браузера, в которой использовались надежные инструменты компоновки из Windows Presentation Foundation, и изначально планировал пойти по этому пути при создании нового Intune. Однако так случилось, что Microsoft находилась на стадии планирования Windows 8 и собиралась разрешить создание приложений с использованием веб-технологий. Узнав об этом, Купп хотел последовать его примеру с Intune, но быстро понял, что Интернет отчаянно нуждается в лучших вариантах компоновки.

Он присоединился к новой команде, чтобы сосредоточиться на переносе в Интернет некоторых из богатых вариантов макета, которые существовали в Silverlight, например макета сетки.Интересно, что люди из этой новой команды уже заметили необходимость. В то время многие разработчики приложений сосредотачивались на iPhone и iPad, что требовало от дизайнеров учитывать только два разных фиксированных размера холста (четыре, если рассматривать портретную и альбомную ориентацию). Windows должна была поддерживать множество экранов разных размеров, разрешений и форм-факторов. Да, и окна с изменяемым размером. Короче говоря, Microsoft отчаянно нуждался в надежном и гибком инструменте компоновки для Интернета, если Интернет собирался стать вариантом для разработки собственных приложений в Windows.

После интенсивной работы с различными командами в Microsoft над составлением проекта спецификации, Купп и его команда в 2011 году отправили реализацию макета сетки за префиксом поставщика -ms- в Internet Explorer 10. , который они представили W3C в 2012 году.

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

Горстка дальновидных веб-дизайнеров и разработчиков — в основном среди них Рэйчел Эндрю, приглашенный эксперт W3C — начала возиться.

«Сначала я наткнулся на CSS Grid на семинаре, который проводил Берт Бос по французскому языку. И я действительно не говорю по-французски, но я смотрел слайды и пытался следить за ними, — вспоминал Эндрю. «Я видел, как он демонстрировал… спецификацию макета шаблона.Я думаю, он действительно говорил об этом с точки зрения печати и использования этого материала для создания макетов для печати, но как только я это увидел, я подумал: Нет, мы хотим это для Интернета. Это то, что нам действительно нужно, и возможность его правильно разложить. И поэтому я начал копаться в этом, выяснять, что он делал, и строить некоторые примеры ».

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

Черновик спецификации, который Купп представил W3C и который его команда представила в IE10, не является спецификацией Grid Layout, которая у нас есть сегодня. Это был шаг в правильном направлении, но он далек от совершенства.

«Та [представленная Филом Куппом] была очень трековой системой», — вспоминает Элика Этемад, приглашенный эксперт W3C и редактор модуля CSS Grid Layout. «Была только числовая система адресации, не было имен строк, [не было] шаблонов, ничего подобного.Но у него был алгоритм компоновки, который они… были уверены, что он будет работать, потому что они делали его экспериментальные реализации ».

«Первоначальная сетка, которую придумал Берт [Бос]… на самом деле была причиной того, что я присоединился к рабочей группе CSS», — вспоминает Таб Аткинс из Google, еще один редактор модуля CSS Grid Layout. «В то время я изучал все ужасные приемы создания макета и видел возможность просто написать макет моей страницы в CSS и просто иметь все это, вроде как, работать было потрясающе.А затем, увидев черновик от Фила Куппа … и увидев, что все это правильно изложено и с хорошим алгоритмом, я понял, что это то, что действительно может существовать сейчас ».

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

«Вы можете [четко указать] размер элемента сетки», — пояснил Этемад. «Но вы также можете сказать: — это размер, который занимает ваш контент .И это было то, что нам нужно, чтобы двигаться вперед ».

Однако черновик спецификации не был настолько доступным, как того хотели многие в рабочей группе CSS. Таким образом, группа попыталась привнести идеи из некоторых из своих более ранних исследований.

«Что нам действительно понравилось в предложении Берта [Боса], так это то, что у него был очень элегантный интерфейс, который позволял легко выражать макеты таким образом, чтобы вы могли их интуитивно видеть», — сказал Этемад. «Это похоже на художественный формат ASCII для создания шаблона, и вы можете поместить [его] в свой код, например, ширину столбцов и высоту строк.Вы можете встроить их в такую ​​же диаграмму ASCII, что значительно упростило бы просмотр того, что вы делаете ».

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

«Когда мы изначально думали о CSS Grid, мы думали об этом в модели, ориентированной на приложения», — вспоминает Россен Атанасов из Microsoft, который также является редактором спецификации.«Но в сетке нет ничего нового. Я имею в виду, что grid здесь очень давно. И этот традиционный тип сетки всегда был основан на линиях. И мы как бы игнорировали строки. Когда мы поняли, что можем объединить две реализации — сторону приложения и сторону типографики Grid — это лично для меня был один из тех моментов aha , которые действительно вдохновили меня продолжить работу над Grid ».

Итак, рабочая группа CSS начала дорабатывать предложение Microsoft, чтобы включить эти идеи.Конечный результат позволяет вам думать о сеточных системах с точки зрения треков, линий, шаблонов или даже всех трех сразу.

Конечно, добраться туда было непросто.

Как вы, наверное, догадались, согласование трех разных идей — предложения Microsoft, расширенного макета Bos и добавления линий сетки Линсса — не было простым вырезанием и вставкой; нужно было проработать множество сложных аспектов и крайних случаев.

«Я думаю, что некоторые из хитрых вещей вначале [были] в том, чтобы взять все различные аспекты… трех предложений, которые мы пытались объединить, и придумали систему, которая была достаточно последовательной, чтобы изящно принять весь этот вклад», — сказал Этемад.

Некоторые идеи просто не могли быть реализованы на первом этапе CSS-сетки. Концепция Bos, например, позволяла любому произвольному потомку сетки располагаться так, как если бы он был дочерним элементом сетки. Эту функцию часто называют «подсеткой», и она не подходит для CSS Grid Layout 1.0.

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

Точно так же было два варианта обработки содержимого, отображаемого на линии сетки. С одной стороны, вы можете позволить самой сетке иметь дорожки фиксированного размера и настраивать конечную линию сетки, на которую будет отображаться переполненный контент, в зависимости от того, насколько он переполнен.В качестве альтернативы вы можете позволить дорожке расти, чтобы содержать контент, чтобы он заканчивался на предопределенной линии сетки. И то, и другое было недопустимо, так как это могло создать круговую зависимость, поэтому группа решила отложить идею привязки к сетке.

В конечном счете, многие из этих изменений и исправлений были сделаны в свете трех основных целей Рабочей группы CSS для этой спецификации. Это должно быть:

1. Powerful: Они хотели, чтобы CSS Grid позволял дизайнерам выражать свои желания таким образом, чтобы «упрощать простые вещи, а сложные — возможными», как выразился Etemad;
2. Надежный: Они хотели убедиться, что не будет пробелов, которые могут привести к распаду макета, препятствовать прокрутке или вызвать случайное исчезновение содержимого;
3. и Производительность: Если алгоритм не был достаточно быстрым для элегантной обработки реальных ситуаций, таких как изменение размера браузера и загрузка динамического контента, они знали, что это вызовет разочарование для конечных пользователей.

«Вот почему разработка новой системы макетов для CSS занимает много времени», — сказал Этемад. «Это требует много времени, много усилий и много любви от людей, которые над этим работают».

Там, где резина встречается с дорогой # section6

Прежде чем потенциальная рекомендация (также известная как окончательный проект) может стать предлагаемой рекомендацией (то, что мы в разговорной речи называем «стандартом»), W3C должен увидеть по крайней мере две независимые, совместимые реализации. Microsoft реализовала свой проект предложения, но с тех пор спецификация сильно изменилась.Вдобавок к этому они хотели, чтобы другие браузеры взяли на себя эстафету, прежде чем они приложат больше инженерных усилий для его обновления. Почему? Что ж, они немного постеснялись после того, что случилось с другим многообещающим предложением компоновки: CSS Regions.

CSS Regions предлагает способ перемещения контента через ряд предопределенных «регионов» на странице, что позволяет создавать действительно сложные макеты. Microsoft выпустила реализацию CSS Regions на раннем этапе после префикса в IE 10. Патч также обеспечил поддержку Regions в WebKit.Safari отправил его, как и Chrome (который в то время все еще работал под капотом WebKit). Но затем Google отказался от этого в Chrome. Firefox выступил против спецификации и так и не реализовал ее. Так что идея в настоящее время находится в подвешенном состоянии. Даже Safari откажется от экспериментальной поддержки CSS Regions в следующем выпуске. Достаточно сказать, что Microsoft хотела быть уверенной, что Grid не постигнет участь Regions, прежде чем направить на это больше инженерных ресурсов.

«У нас были разработчики, которые сразу сказали:« Ого, это здорово, мы обязательно должны это сделать », — вспоминает Атанасов из Grid.«Но [это] одно … сказать:« Да, это здорово, мы должны это сделать », а затем есть следующий шаг, когда он добавляет ресурсы и платит разработчикам, чтобы они фактически реализовали это».

«Было желание со стороны других разработчиков — один из редакторов спецификаций — из Google — но все еще не решались продвигать код», — вспоминает Грег Уитворт из Microsoft, член рабочей группы CSS. «И… код доставки — вот что важно».

При интересном повороте событий медиа-компания Bloomberg наняла Igalia, консалтинговую компанию с открытым исходным кодом, для реализации CSS Grid для Blink и WebKit.

«Еще в 2013 году… [с нами] связались [Bloomberg]… потому что у них были очень специфические потребности в определении и использовании структур, подобных сетке», — вспоминает Серджио Вильяр Сенин, инженер-программист и партнер в Igalia. «[В] они в основном просили нас помочь в разработке спецификации макета CSS Grid, а также [] реализовать ее для [Blink и WebKit]».

«[Работа Игалии] очень помогла, потому что тогда разработчики [могли] увидеть в ней, возможно, что-то, что они действительно могут использовать при разработке своих сайтов», — добавил Уитворт.
Но даже с двумя готовыми реализациями некоторые люди все еще беспокоились, что эта функция не найдет себе опоры. В конце концов, только то, что движок рендеринга является открытым исходным кодом, не означает, что его управляющие принимают каждый патч. И даже если они это сделают, как это произошло с CSS Regions, нет никакой гарантии, что эта функция останется. К счастью, большое количество дизайнеров и разработчиков начали увлекаться Grid и начали оказывать давление на поставщиков браузеров, чтобы те реализовали его.

«С CSS Grid произошел поворотный сдвиг», — сказал Уитворт.«Начиная с прихода Рэйчел Эндрю и создания тонны демонстраций и восхищений вокруг CSS Grid с Grid by Example, начиная с того, чтобы действительно отстаивать его и показывать веб-разработчикам, на что он способен и какие проблемы он решает».

«Затем, немного позже, Джен Симмонс [дизайнер-адвокат в Mozilla] создала нечто под названием Labs, где она разместила в Интернете множество демонстраций, которые она создала для CSS Grid, и, опять же, продолжила этот импульс и эту волну энтузиазм по поводу CSS Grid среди веб-разработчиков в сообществе.”

Сетка поддерживает как традиционные, так и (как показано здесь) нетрадиционные макеты. Это пример макета сетки из лаборатории Джен Симмонс, показанный в Edge 16. Если вы хотите, чтобы он работал в Edge, но не работает под Windows, вы также можете просмотреть его в BrowserStack (требуется учетная запись).

Благодаря таким лидерам мнений, как Эндрюс и Симмонс, активно демонстрирующим мощь и универсальность CSS Grid, сообщество веб-дизайнеров стало еще более взволнованным. Они начали экспериментировать на таких сайтах, как CodePen, делясь своими идеями и развивая навыки верстки Grid.Мы не часто думаем об этом, но энтузиазм разработчиков может укрепить или похоронить спецификацию.

«Мы можем написать спецификацию, мы можем реализовать что-то, но если разработчик не пользуется спросом или не использует функции, то на самом деле не имеет значения, сколько мы будем с этим делать», — сказал Уитворт.

К сожалению, с такими амбициозными спецификациями, как Grid, стоимость внедрения часто может удерживать поставщика браузеров от принятия на себя обязательств. Без реализации браузера, позволяющего разработчикам возиться и экспериментировать, сложно вызвать энтузиазм.Без энтузиазма разработчиков производители браузеров не хотят тратить деньги на то, чтобы увидеть, набирает ли идея популярность. Я уверен, что вы видите проблему здесь. Фактически, это отчасти и обрекло регионы — производительность мобильных чипсетов была еще одной причиной, по крайней мере, на данный момент.

К счастью, Bloomberg охотно сыграл роль благодетеля и сдвинул дело с мертвой точки для этого нового воплощения CSS Grid. Итак, с его помощью Google в январе 2017 года внедрил реализацию CSS Grid в Chromium 56 для Android.Он выпустил свою реализацию Chrome в начале марта, всего через два дня после того, как Mozilla выпустила собственную реализацию в Firefox. Еще до окончания месяца Opera и Safari также предоставили поддержку CSS Grid.

По иронии судьбы, последней компанией, выпустившей CSS Grid, была Microsoft. Но ранее на этой неделе он выпустил свою реализацию в Edge.

«С функциями на веб-платформе… вы ждете сладкого места», — сказал Уитворт незадолго до выпуска Grid в Edge. «Вам нужна надежная спецификация, вам нужен интерес со стороны разработчиков, и вам нужен огромный спрос со стороны веб-разработчиков.Конец 2016 — начало 2017 года были этой золотой серединой. Все это случилось. Мы обновили нашу реализацию и очень рады ее выпустить ».

«Я не припомню, чтобы когда-либо поставлялась такая функция, как CSS Grid. Каждый крупный браузер будет поставлять его в течение одного года, и он будет совместимым, потому что мы… внедряли [его] с помощью флагов, тестировали его, вносили будущие изменения с помощью флагов, а затем, когда он был признан стабильным, все браузеры теперь поставляют его изначально ».

«Поскольку все поставляются примерно в одно и то же время, — сказал Аткинс, — [Grid] переходит от интересной идеи, с которой можно поиграться, к чему-то, что вы просто используете в качестве единственного метода компоновки, не беспокоясь о невероятно быстрых откатах.… [Это было] быстрее, чем я ожидал, все это сработает ».

Что означает сетка для CSS # section7

Поскольку поддержка Grid больше не рассматривается, мы можем (и должны) начать использовать этот удивительный инструмент. Одна из проблем, с которой сталкиваются многие из нас, старожилов, которые работали с CSS почти два десятилетия, заключается в том, что CSS Grid требует совершенно нового взгляда на макет.

«Это не просто прикрепление полей и свойств к каждому отдельному элементу и их размещение», — сказал Бос.«[Y] Теперь у вас может быть другая модель, модель, в которой вы сначала начинаете с макета, а затем вставляете в него различные элементы».

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

«CSS Grid берет на себя все те сложные вещи, которые нам приходилось делать для [создания] базовых макетов, и делает их совершенно ненужными», — сказал Этемад. «Вы можете общаться с движком CSS напрямую [-] вы сами, без переводчика-посредника».

CSS Grid предлагает много возможностей, с которыми многие из нас только начинают осознавать.Будет интересно посмотреть, куда мы пойдем дальше.

«Я думаю, это изменит ситуацию», — сказал Этемад. «Это вернет CSS к тому, чем он был задуман, а именно к языку стилей и макетов, который убирает всю эту логику с разметки и позволяет четко разделить контент и стиль, которые мы пытались получить от начало.»

«Я очень рад за будущее верстки CSS», — сказал Уитворт. «CSS Grid — это еще не конец; на самом деле это только начало.В IE 10… [мы добавили] области CSS, а также исключения CSS. Я думаю, что по мере того, как веб-дизайнеры начинают все больше и больше использовать CSS Grid, они поймут , почему мы отправили все три вместе. И, возможно, мы сможем продолжить то, что мы сделали с CSS Grid, и продолжить улучшать эти спецификации. Получите желание поставщика реализовать и их. Заинтересуйте сообщество и продвигайте макет в Интернете еще больше ».

«Я думаю, что теперь у нас есть Grid, имеет смысл иметь исключения», — сказал Эндрю.«Это дает нам возможность разместить что-то в [сетке] и обернуть его текстом, и у нас нет другого способа сделать это.

Добавить комментарий Отменить ответ

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Комментарий *

Имя *

Email *

Сайт