Модуль CSS Цвет Уровень 3

Аннотация

CSS (Каскадные Таблицы Стилей) является языком описания отображения HTML и XML документов на экране, бумаге, с помощью речи и т.д. В нем используются свойства, связанные с цветом и позволяющие задавать цвета текста, фона, границ и других элементов документа. Данная спецификация описывает значения цветов, свойство цвета переднего плана и свойство непрозрачности. В нее входят, как новые свойства и их значения, так и свойства из спецификации CSS, Уровень 2.

Статус данного документа

Данный раздел описывает статус данного документа на момент его публикации. Другие документы могут заменить этот документ. Список текущих публикаций W3C и последние редакции данного технического проекта могут быть найдены в указателе технических проектов W3C по адресу http://www.w3.org/TR/.

Общедоступный список рассылки www-style@w3.org  (архивная версия) предназначен и является предпочтительным местом для обсуждения данной спецификации (см. инструкции). При отправке сообщения, указывайте в теме письма текст “css3-color”, желательно, следующего вида: “[css3-color] …резюме комментария…”

Данный документ создан рабочей группой по CSS (CSS Working Group) (являющейся частью Style Activity).

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

В списке комментариев к последнему рабочему черновику данного документа описаны сделанные изменения. Комментарии, полученный для версии со статусом Кандидата в Рекомендации (черновик от 14 мая 2003), и то, как они были учтены в этом проекте могут быть найдены в комментариях. Комментарии, получены для версии со статусом Последний отзыв (черновик от 14 февраля 2003), и то, как они были учтены в этом проекте могут быть найдены в комментариях.

Доступен полный список изменений для данного документа.

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

Этот документ был разработан группой, работающей в соответствии с патентной политикой W3C от 5 февраля 2004. W3C поддерживает публичный список открытых патентов, полученных в результате деятельности группы; данная страница также включает инструкции по раскрытию патента. Основные претензии должны предоставляться в соответствии с разделом 6 Патентной Политики W3C.

Содержание

• 1. Вступление
• 2. Зависимости
• 3. Цветовые свойства
  • 3.1. Цвет: свойство ‘color’
  • 3.2. Непрозрачность: свойство ‘opacity’
• 4. Единицы определения цвета
  • 4.1. Базовые ключевые слова
  • 4.2. Числовые представления цвета
    • 4.2.1. Цвет в формате RGB
    • 4.2.2. Цвет в формате RGBA
    • 4.2.3. Ключевое слово ‘transparent’
    • 4.2.4. Цвет в формате HSL
      • 4.2.4.1. Примеры HSL
    • 4.2.5. Цвет в формате HSLA
  • 4.3. Расширенные ключевые слова
  • 4.4. Ключевое слово ‘currentColor’
  • 4.5. Системные цвета CSS
    • 4.5.1. Системные цвета CSS2
  • 4.6. Замечания об использовании цветов
• 5. Простая альфа-композиция
• 6. Образец таблицы стилей для (X)HTML
• 7. Профили
• 8. Тесты
• 9. Объявление о реализации исключенных особенностей
• 10. Благодарности
• 11. Изменения
• 12. Библиография
  • 12.1. Нормативные документы
  • 12.2. Справочная литература
• Указатель
• Указатель свойств

1. Вступление

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

Данный модуль описывает CSS свойства, которые позволяют указывать цвета переднего плана и непрозрачность элементов. Так же в данном модуле детально описывается тип значения <цвет>.

Здесь описаны не только цветовые свойства и их значения, уже определенные в спецификациях CSS1 и CSS2, а также новые свойства и значения.

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

Данная спецификация является результатом объединения соответствующих частей из следующих Рекомендаций и Рабочих Черновиков, с добавлением некоторых новых функций:

• HTML 4.01 [HTML401]
• CSS 2.0 [CSS2]
• SVG 1.0 [SVG10]
• Пользовательский интерфейс для CSS3 (16 февраль 2000) [CSS3UI]

2. Зависимости

Дополнительная терминология дана в разделе Определения [CSS21]. Примеры фрагментов и исходного кода документов даны с использованием синтаксиса языков разметки XML [XML10] или HTML [HTML401].

3. Цветовые свойства

3.1. Цвет: свойство ‘color’

Это свойство определяет цвет текста элемента. Дополнительно, это свойство используется чтобы косвенно установить значение ключевого слова (currentColor) для любых других свойств, которые принимают цветовые значения. Если ключевое слово ‘currentColor’ используется, чтобы установить цвет непосредственно для свойства ‘color’, то оно трактуется как наследование цвета ‘color: inherit’.

 Есть различные способы назначить цвет лайм:

em { color: lime }               /* ключевое слово */
em { color: rgb(0,255,0) }       /* RGB в диапазоне 0-255   */

<цвет>

Единицы значения цвета определены в следующем разделе.

3.2. Непрозрачность: свойство ‘opacity’

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

<альфа-значение>

Синтаксически является значением типа <целое число>. Параметр непрозрачности равномерно применяется ко всему объекту. Любые значения вне диапазона от 0.0 (полностью прозрачно) до 1.0 (полностью непрозрачно) будут ужаты до данного диапазона. Если объект является контейнером для других элементов, тогда эффект будет таким же, как если бы содержимое элемента было совмещено с текущим фоном, используя маску, каждый пиксель который принимает значение <альфа-значение>.

Поскольку элемент с непрозрачностью меньше чем 1 состоит из единого закадрового изображения, содержание вне этого элемента не может быть помещено между слоев внутри данного элемента (с учетом порядка вдоль оси z). По этим причинам, реализации должны создавать новый последовательный контекст для любого элемента с прозрачностью меньшей чем 1. Если элемент с непрозрачностью меньшей чем 1 не позиционирован по оси z, реализация должна нарисовать слой, который создается, в родительском контексте, в том же порядок размещения, который использовался бы, если элемент был расположен с параметрами ‘z-index: 0’ и ‘opacity: 1’. Если элемент с непрозрачностью меньшей чем 1 позиционирован по оси z, то свойство ‘z-index’ применяется как описано в [CSS21], за исключением того, что значение ‘auto’ трактуется как ‘0’, поскольку всегда создается новый контекст. См. раздел 9.9 и Приложение E [CSS21] для более детальной информации по многослойному выводу и упорядоваченью в контексте. К SVG элементам, правила описанные в данном параграфе, не применяются, поскольку SVG имеют свою собственную модель отображения ([SVG11], Глава 3).

4. Единицы определения цвета

Тип <Цвет> может быть представлен как ключевым словом, так и численным значением.

4.1. Базовые названия цветов

Список основных ключевых слов, используемых для определения цвета включает следующие названия: aqua (морская волна), black (черный), blue (синий), fuchsia (фуксия), gray (серый), green (зеленый), lime (лайм), maroon (темно-бордовый), navy (темно-синий), olive (оливковый), purple (фиолетовый), red (красный), silver (серебряный), teal (зеленовато-голубой), white (белый), и yellow (желтый). Написание названий цветов регистронезависимо.

body {color: black; background: white }
h1 { color: maroon }
h2 { color: olive }

4.2. Численные значения для определения цвета

4.2.1. Значения цвета в формате RGB

При числовом задании цвета можеть использоваться цветовая модель RGB. Во всех следующих примерах указывается один и тот же цвет:

em { color: #f00 }              /* #rgb */
em { color: #ff0000 }           /* #rrggbb */
em { color: rgb(255,0,0) }
em { color: rgb(100%, 0%, 0%) }

Формат RGB значения в шестнадцатеричной записи начинается с символа ‘#’ непосредственно за которым следует три или шесть шестнадцатеричных цифр. Трех цифирная запись RGB (#rgb) преобразуется в последовательность из шести цифр (#rrggbb) путем дублирования цифр, а не добавления нулей. Например, #fb0 расширяется до #ffbb00. Это гарантирует то, что белый цвет (#ffffff) может быть представлен в сокращенной записи (#fff) и исчезает любая зависимость от глубины цвета дисплея.

Формат RGB значения в функциональной записи начинается с подстроки ‘rgb(’ непосредственно за которой следует список из трех, разделенных запятыми, вещественных значений (или целочисленных, или процентных) непосредственно за которым следует символ ‘)’. Целочисленное значение 255 соответствует 100%, и F или FF в шестнадцатеричной записи: rgb(255,255,255) = rgb(100%,100%,100%) = #FFF. Допускается использование пробелов вокруг численных значений.

Все RGB цвета представлены в пространстве цвета sRGB (см. [SRGB]). Хотя пользовательские агенты могут представлять цвета с разной точностью, но использование пространства sRGB дает возможность однозначного определения цвета, соотносимого с международным стандартом (см. [COLORIMETRY]).

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

em { color: rgb(255,0,0) }       /* целочисленный диапазон 0 - 255 */
em { color: rgb(300,0,0) }       /* урезанно до rgb(255,0,0) */
em { color: rgb(255,-10,0) }     /* урезанно до rgb(255,0,0) */
em { color: rgb(110%, 0%, 0%) }  /* урезанно до rgb(100%,0%,0%) */

Другие устройства, например, такие как принтеры, имеют гамму цветов отличную от пространства цвета sRGB; некоторые цвета, находящиеся за пределами диапазон 0..255 sRGB будут отображаться (в рамках цветового диапазона устройства), в то время как другие цвета из диапазона 0..255 sRGB будут лежать за пределами цветовой гаммы устройства, и поэтому будут усечены.

4.2.2. Значения цвета в формате RGBA

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

em { color: rgb(255,0,0) }      /* целочисленный диапазон 0 - 255 */
em { color: rgba(255,0,0,1)     /* тоже, но с явно указанной непрозрачностью 1 */
em { color: rgb(100%,0%,0%) }   /* процентный диапазон 0.0% - 100.0% */
em { color: rgba(100%,0%,0%,1) } /* тоже, но с явно указанной непрозрачностью 1 */

В отличии от значений в формате RGB, значение цвета в формате RGBA не имеет шестнадцатеричной записи.

Формат RGBA значения в функциональной записи начинается с подстроки ‘rgba(’ непосредственно за которой следует список из трех разделенных запятыми вещественных значений (или целочисленных, или процентных) , за которым следует <альфа-значение>, за которыми следует символ ‘)’. Целочисленное значение 255 соответствует 100%, rgba(255,255,255,0.8) = rgba(100%,100%,100%,0.8). Допускается использование пробелов вокруг численных значений.

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

Следующие примера показывают возможные эффекты, которые можно достичь с использованием rgba() записи:

p { color: rgba(0,0,255,0.5) }        /* полупрозрачный синий */
p { color: rgba(100%, 50%, 0%, 0.1) } /* почти прозрачный оранжевый */

Примечание. Если значения в формате RGBA не поддерживаются пользовательским агентами, то эти значения должны считаться неопознанными с учетом правил разбора CSS ([CSS21], Глава 4). RGBA значения не должны представляться просто как RGB значения, с проигнорированным значением непрозрачности.

4.2.3. Ключевое слово ‘transparent’

В CSS1 представлено значение ‘transparent’ для свойства background-color (цвет фона). В CSS2 возможно использовать значение ‘transparent’ так же и для определения свойства border-color (цвет рамки). Open eBook(tm) Publication Structure 1.0.1 [OEB101] расширяет свойство ‘color’ чтобы использовать ключевое слово ‘transparent’. В CSS3 расширено определение значение цвета так, чтобы включать ключевое слово ‘transparent’, чтобы позволить использовать его во всех свойствах, которые могут принимать значения <цвет>. Это упрощает определение этих свойств в CSS3.

transparent

Полностью прозрачный. Данное ключевое слово может быть использовано в качестве сокращенной записи для прозрачного черного, вычисленным значением которого является rgba(0,0,0,0).

4.2.4. Значение цвета в формате HSL

CSS3 добавляет численные оттенок-насыщенность-светлость (HSL) цвета в качестве дополнения к численным RGB цветам. Было отмечено, что RGB цвета имеют следующие ограничения:

• RGB формат аппаратно-ориентирован: этот формат отражает использование устройств с ЭЛТ (электронно-лучевой трубкой)
• RGB запись не является интуитивным понятным. Возможно выучить как использовать формат RGB, но на самом деле, только путем трансляции оттенков, насыщенности и светлости, или чего-то аналогичного в RGB.

Есть и другие возможные цветовые схемы. Некоторыми преимуществами формата HSL является то, что он симметричен относительно свойств светлоты и темноты, и существует тривиальный алгоритм перевода HSL в RGB.

HSL цвета кодируются как триплеты (оттенок, насыщенность, яркость). Оттенок представлен как угол в цветовом круге (представление радуги в качестве круга). Так как этот угол обычно измеряется в градусах, эта величина подразумевается в CSS; но синтаксически, дано только <число>. По определению, red(красный цвет)=0=360, и другие цвета распределены по кругу, поэтому зеленый=120, синий=240, и т.д. Так как данная величина угол, из этого вытекает что -120=240 и 480=120. Одна возможность для реализации - это нормализация значения угла x в диапазоне [0,360) (т.е. от 0 градусов, включительно, до 360 градусов, исключая само значение 360), которая вычисляется по формуле (((x mod 360) + 360) mod 360). Насыщенность и светлость представлена процентами. 100% это полная насыщенность, а 0% это оттенок серого. Светлость в 0% соответствует черному, светлость в 100% соответствует белому, и светлость в 50% - “нормальная”.

Так, например:

* { color: hsl(0, 100%, 50%) }   /* красный */
* { color: hsl(120, 100%, 50%) } /* лайм */
* { color: hsl(120, 100%, 25%) } /* темно-зеленый */
* { color: hsl(120, 100%, 75%) } /* светло-зеленый */
* { color: hsl(120, 75%, 75%) }  /* пастельный зеленый, и т.д. */

Преимущество модели цвета HSL над RGB это то, что она намного интуитивно понятнее: вы можете угадывать цвета, которые вы хотите использовать, а потом немного корректировать и подстраивать их. Кроме того, проще создавать наборы соответствующего цвета (путем варьирования светлости/темнотв и насыщенности при неизменяемом оттенке )

Если насыщенность меньше 0%, в реализации это значение должно обрезаться до 0%. Если итоговое значение находится вне цветового диапазона устройства, в реализации оно должно сжиматься до досутпной цветовой гаммы. Это урезание должно, по возможности, сохранять значение оттенока, если это возможно, а в остальном неопределенно. (Другими словами, данное отсечение отличается от применения правил отсечения для формата цветов RGB, после применение следующего алгоритма перевода HSL в RGB.)

Алгоритм конвертации HSL в RGB простой (здесь алгоритм представлен в формате ABC [ABC] и он использовался для генерации последующих таблиц.) В этих алгоритмах, предполагается что все три значения (H, S и L) нормализованны в диапазон 0..1:

    HOW TO RETURN hsl.to.rgb(h, s, l):
       SELECT:
	  l<=0.5: PUT l*(s+1) IN m2
	  ELSE: PUT l+s-l*s IN m2
       PUT l*2-m2 IN m1
       PUT hue.to.rgb(m1, m2, h+1/3) IN r
       PUT hue.to.rgb(m1, m2, h    ) IN g
       PUT hue.to.rgb(m1, m2, h-1/3) IN b
       RETURN (r, g, b)

    HOW TO RETURN hue.to.rgb(m1, m2, h):
       IF h<0: PUT h+1 IN h
       IF h>1: PUT h-1 IN h
       IF h*6<1: RETURN m1+(m2-m1)*h*6
       IF h*2<1: RETURN m2
       IF h*3<2: RETURN m1+(m2-m1)*(2/3-h)*6
       RETURN m1

4.2.4.1. Примеры HSL

Далее для каждой таблицы установлено одно значение оттенка. Двенадцать цветов с одинаковым между ними расстоянием (т.е. с интервалом в 30°) выбраны из цветового круга: красный, желтый, зеленый, голубой, синий, пурпурный, со всеми промежуточными цветами (последний это цвет между пурпурным и красным).

Ось X в каждой таблице представлена насыщенностью (100%, 75%, 50%, 25%, 0%).

Ось Y представляет светлоту. где 50% - “нормальная”.

4.2.5. Значение цвета в формате HSLA

Так же как для функциональной записи ‘rgb()’ существует копия с альфа-каналом ‘rgba()’, так и функциональная запись ‘hsl()’ имеет аналогичную запись ‘hsla()’ с альфа-каналом. Для пояснений смотри раздел простая альфа-композиция. Во всех следующих примерах указывается один и тот же цвет:

em { color: hsl(120, 100%, 50%) }     /* зеленый */
em { color: hsla(120, 100%, 50%, 1) } /* тоже с явно указанной непрозрачностью 1 */

Значения цвета в формате HSLA в функциональной записи начинается с подстроки ‘hsla(’ непосредственно за которой следуют значения оттенка в градусах, насыщенности и светлости в процентах, а так же значение альфа-канала <альфа-значение>, и завершающая скобка ‘)’. Допускается  использование символов пустого пространства вокруг числовых значений.

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

Следующие примеры показывают возможные эффекты, которые можно достичь с использованием hsla() нотации:

p { color: hsla(240, 100%, 50%, 0.5) } /* полу-прозрачный голубой цвет */
p { color: hsla(30, 100%, 50%, 0.1) }  /* практически полностью прозрачный оранжевый */

4.3. Расширенные названия цветов

В следующей таблице представлен список цветов X11 [X11COLORS],  поддерживающийся популярными браузерами с дополнением вариаций написания серого (gray/grey) из спецификации SVG 1.0. Итоговый список является точно таким же как и список ключевых слов названий цветов SVG 1.0. Эта спецификация расширяет свое определение за стандарт SVG. Два образца цветов слева иллюстрируют установки цвета фона в ячейки таблицы двумя путями: в первой колонке цвет установлен с использование имений цвета, а во второй колонке используется соответствующее значение в числовом формате.

4.4. Ключевое слово ‘currentColor’

В спецификациях CSS1 и CSS2 значение по-умолчанию для свойства ‘border-color’ (цвет рамки) определено как значение свойства ‘color’, но не определено соответствующего ключевого слова. Данное упущение было учтено в стандарте SVG, и поэтому в SVG 1.0 представлено значение ‘currentColor’ для свойств ‘fill’, ‘stroke’, ‘stop-color’, ‘flood-color’, и ‘lighting-color’. В CSS3 значение цвета расширено так, чтобы включить ключевое слово ‘currentColor’ и позволить его использовать со всеми свойствами, которые принимают значение типа <цвет>. Это упрощает определение этих свойств в CSS3.

currentColor

Значение свойства ‘color’. Вычисляемое значение ключевого слова ‘currentColor’ соответствует вычисляемому значению свойства ‘color’. Если ключевое слово ‘currentColor’ само используется для установки значения свойства ‘color’, то оно интерпретируется как ‘color: inherit’.

4.5. Системные цвета CSS

4.5.1. Системные цвета CSS2

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

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

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

ActiveBorder

Цвет границы активного окна.

ActiveCaption

Цвет заголовка активного окна.

AppWorkspace

Цвет фона многооконного интерфейса.

Background

Цвет фона рабочего стола.

ButtonFace

Цвет фона лицевой стороны трехмерного элемента.

ButtonHighlight

Цвет границы трехмерного элемента, расположенной вблизи от источника света.

ButtonShadow

Цвет границы трехмерного элемента, расположенной вдали от источника света.

ButtonText

Цвет текста кнопки.

CaptionText

Цвет текста заголовка окна, элементов управления размерами, и стрелочных блоках полосы прокрутки.

GrayText

Цвет отключенного (недоступного) текста. Если текущий драйвер дисплея не поддерживает насыщенно-серый цвет, для этого цвета устанавливается значение #000.

Highlight

Цвет выбранных элементов.

HighlightText

Цвет текста выбранных элементов.

InactiveBorder

Цвет границы неактивного окна.

InactiveCaption

Цвет заголовка неактивного окна.

InactiveCaptionText

Цвет текста неактивного заголовка.

InfoBackground

Цвет фона всплывающих подсказок.

InfoText

Цвет текста всплывающих подсказок.

Menu

Цвет фона меню.

MenuText

Цвет текста меню.

Scrollbar

Цвет полосы прокрутки.

ThreeDDarkShadow

Цвет темной (в целом внешняя) из двух границ, стоящих вдали от источника света для трехмерных элементов, у которых появляется эффект 3-D из-за двух концентрических слоев, окружающих рамку.

ThreeDFace

Цвет фона "лицевой" стороны трехмерных элементов, у которых появляется из-за двух концентрических слоев, окружающих рамку.

ThreeDHighlight

Цвет светлой (в целом внешняя) из двух границ, стоящих перед источником света для трехмерных элементов, у которых появляется эффект 3-D из-за двух концентрических слоев, окружающих рамку.

ThreeDLightShadow

Цвет темной (в целом внутренняя) из двух границ, стоящих перед источником света для трехмерных элементов, у которых появляется эффект 3-D из-за двух концентрических слоев, окружающих рамку.

ThreeDShadow

Цвет светлой (в целом внутренняя) из двух границ, стоящих вдали от источника света для трехмерных элементов, у которых появляется эффект 3-D из-за двух концентрических слоев, окружающих рамку.

Window

Цвет фона окна.

WindowFrame

Цвет рамки окна.

WindowText

Цвет текста окна.

p { color: WindowText; background-color: Window }

Примечание. Системные цвета CSS2 являются устаревшими и нежелательными к использованию в пользу свойства ‘appearance’ модуля CSS3 UI. Если вы хотите эмулировать внешний вид связанных с пользовательским интерфейсом элементов или управляющих элементов, пожалуйста, используйте свойство ‘appearance’ вместо того чтобы, имитировать эти элементы на основе сочетания системных цветов.

4.6. Замечания об использовании цветов

Хотя цвета могут существенно расширить объем информации в документе и сделать их более читаемыми, пожалуйста, учитывайте рекомендации в руководстве W3C Web Content Accessibility Guidelines [WCAG20], когда используете цвета в ваших документах

• 1.4.1 Использование цвета: Цвет не используется только в качестве визуальных средств передачи информации, указания действия, запроса ответа, или для выделений визуальных элементов

5. Простая альфа-композиция

Во время отрисовки, реализация должна отрабатывать альфа смешивание с учетом правил описанных в Разделе 14.2 Смешивание по альфа каналу в спецификации [SVG11]. (Если свойства ‘color-interpolation’ и ‘color-rendering’, упомянутые в спецификации не применяются или не реализованы, то реализация должна действовать так, как будто они имеют свои значения по-умолчанию.)

6. Образец таблицы стилей для (X)HTML

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

html {
	color: black;
	background: white;
}


/* цвета, традиционно, используемые пользовательскими агентами для гиперссылок */
:link    { color: blue; }
:visited { color: purple; }

/* default focus outline */
:focus {
	outline: 1px dotted;  /* или 1px dotted invert */
}

7. Профили

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

Не нормативные примеры:

8. Тесты

Был разработан набор тестов для модуля CSS Цвет, хотя в дальнейшем еще тесты могут быть добавлены. Данный набор тестов предназначен для проверки соответствия пользовательских агентов основам спецификации. Этот тестовый набор не претендует на исчерпывающую полноту и не охватывает все возможные числовые значения цветов. Данные тесты доступны по адресу http://www.w3.org/Style/CSS/Test/CSS3/Color/current/.

9. Объявление о реализации исключенных особенностей

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

• Цветовые профили ICC: свойство ‘color-profile’
• Свойство ‘rendering-intent’
• Правило ‘@color-profile’
• Системный цвет ‘flavor’

10. Благодарности

Благодарим Brad Pettit как за описания цветовых профилей, так и за их реализацию. Спасибо Steven Pemberton за его описание цветов в формате HSL. Особую благодарность за обратную связь выражаем Marc Attinasi, Bert Bos, Joe Clark, fantasai, Patrick Garies, Tony Graham, Ian Hickson, Susan Lesch, Alex LeDonne, Cameron McCormack, Krzysztof Maczyński, Chris Moschini, Chris Murphy, Christoph Päper, David Perrell, Jacob Refstrup, Dave Singer, Jonathan Stanley, Andrew Thompson, Russ Weakley, Etan Wexler, David Woolley, Boris Zbarsky, Steve Zilles, подгруппе XSL FO рабочей группы XSL, и всему остальному сообществу www-style. А так же благодарим Chris Lilley за то, что являлся постоянным экспертом CSS Цвет.

11. Изменения

Данный документ отличается от предыдущей версии Предлагаемые Рекомендации, от 28 октября 2010, в следующем: дата, статус и стиль документа обновлены до Рекомендации W3C, обновлен список ссылок, и больше никаких существенных изменений не внесено.

12. Библиография

12.1. Нормативные документы

[COLORIMETRY]

Colorimetry, Third Edition. CIE 15:2004. ISBN 978-3-901906-33-6

[CSS21]

Bert Bos; et al. Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification. 7 June 2011. W3C Recommendation. URL: http://www.w3.org/TR/2011/REC-CSS2-20110607

[SRGB]

Multimedia systems and equipment - Colour measurement and management - Part 2-1: Colour management - Default RGB colour space - sRGB. IEC 61966-2-1 (1999-10) ISBN: 2-8318-4989-6 - ICS codes: 33.160.60, 37.080 - TC 100 - 51 pp. as amended by Amendment A1:2003. URL: http://www.colour.org/tc8-05/Docs/colorspace/61966-2-1.pdf

[SVG11]

Jon Ferraiolo et al. Scalable Vector Graphics (SVG) 1.1. 14 January 2003. W3C Recommendation. URL: http://www.w3.org/TR/2003/REC-SVG11-20030114/

12.2. Справочная литература

[ABC]

Leo Geurts; Lambert Meertens; Steven Pemberton. The ABC Programmer's Handbook. Prentice-Hall. ISBN: 0-13-000027-2. URL: http://www.cwi.nl/~steven/abc

[CSS2]

Ian Jacobs; et al. Cascading Style Sheets, level 2 (CSS2) Specification. 11 April 2008. W3C Recommendation. URL: http://www.w3.org/TR/2008/REC-CSS2-20080411

[CSS3UI]

Tantek Çelik. CSS3 Basic User Interface Module. 11 May 2004. W3C Candidate Recommendation. (Work in progress.) URL: http://www.w3.org/TR/2004/CR-css3-ui-20040511

[HTML401]

David Raggett; Ian Jacobs; Arnaud Le Hors. HTML 4.01 Specification. 24 December 1999. W3C Recommendation. URL: http://www.w3.org/TR/1999/REC-html401-19991224

[OEB101]

Open eBook(tm) Publication Structure 1.0.1. Open eBook Forum(tm). 02 July 2001. URL: http://www.openebook.org/oebps/oebps1.0.1/download/oeb101-xhtml.htm

[SVG10]

Jon Ferraiolo. Scalable Vector Graphics (SVG) 1.0 Specification. 4 September 2001. W3C Recommendation. URL: http://www.w3.org/TR/2001/REC-SVG-20010904

[WCAG20]

Michael Cooper; et al. Web Content Accessibility Guidelines (WCAG) 2.0. 11 December 2008. W3C Recommendation. URL: http://www.w3.org/TR/2008/REC-WCAG20-20081211

[X11COLORS]

X11 Color Names URL: http://en.wikipedia.org/wiki/X11_color_names

[XML10]

C. M. Sperberg-McQueen; et al. Extensible Markup Language (XML) 1.0 (Fifth Edition). 26 November 2008. W3C Recommendation. URL: http://www.w3.org/TR/2008/REC-xml-20081126/

Указатель

• ActiveBorder, 4.5.1.
• ActiveCaption, 4.5.1.
• aliceblue, 4.3.
• <альфа-значение>, 3.2., 4.2.2., 4.2.5.
• antiquewhite, 4.3.
• appearance, 4.5.1.
• AppWorkspace, 4.5.1.
• aqua, 4.1., 4.3.
• aquamarine, 4.3.
• azure, 4.3.
• Background, 4.5.1.
• beige, 4.3.
• bisque, 4.3.
• black, 4.1., 4.3.
• blanchedalmond, 4.3.
• blue, 4.1., 4.3.
• blueviolet, 4.3.
• brown, 4.3.
• burlywood, 4.3.
• ButtonFace, 4.5.1.
• ButtonHighlight, 4.5.1.
• ButtonShadow, 4.5.1.
• ButtonText, 4.5.1.
• cadetblue, 4.3.
• CaptionText, 4.5.1.
• chartreuse, 4.3.
• chocolate, 4.3.
• color, 3.1.
• <цвет>, 3.1., 4.
• color-interpolation, 5.
• color-rendering, 5.
• compositing, 5.
• coral, 4.3.
• cornflowerblue, 4.3.
• cornsilk, 4.3.
• crimson, 4.3.
• currentColor, 4.4., 3.1., 3.1., 3.1.
• cyan, 4.3.
• darkblue, 4.3.
• darkcyan, 4.3.
• darkgoldenrod, 4.3.
• darkgray, 4.3.
• darkgreen, 4.3.
• darkgrey, 4.3.
• darkkhaki, 4.3.
• darkmagenta, 4.3.
• darkolivegreen, 4.3.
• darkorange, 4.3.
• darkorchid, 4.3.
• darkred, 4.3.
• darksalmon, 4.3.
• darkseagreen, 4.3.
• darkslateblue, 4.3.
• darkslategray, 4.3.
• darkslategrey, 4.3.
• darkturquoise, 4.3.
• darkviolet, 4.3.
• deeppink, 4.3.
• deepskyblue, 4.3.
• dimgray, 4.3.
• dimgrey, 4.3.
• dodgerblue, 4.3.
• firebrick, 4.3.
• floralwhite, 4.3.
• forestgreen, 4.3.
• fuchsia, 4.1., 4.3.
• gainsboro, 4.3.
• ghostwhite, 4.3.
• gold, 4.3.
• goldenrod, 4.3.
• gray, 4.1., 4.3.
• GrayText, 4.5.1.
• green, 4.1., 4.3.
• greenyellow, 4.3.
• grey, 4.3.
• Highlight, 4.5.1.
• HighlightText, 4.5.1.
• honeydew, 4.3.
• hotpink, 4.3.
• hsl(), 4.2.4.
• hsla(), 4.2.5.
• InactiveBorder, 4.5.1.
• InactiveCaption, 4.5.1.
• InactiveCaptionText, 4.5.1.
• indianred, 4.3.
• indigo, 4.3.
• InfoBackground, 4.5.1.
• InfoText, 4.5.1.
• ivory, 4.3.
• khaki, 4.3.
• lavender, 4.3.
• lavenderblush, 4.3.
• lawngreen, 4.3.
• lemonchiffon, 4.3.
• lightblue, 4.3.
• lightcoral, 4.3.
• lightcyan, 4.3.
• lightgoldenrodyellow, 4.3.
• lightgray, 4.3.
• lightgreen, 4.3.
• lightgrey, 4.3.
• lightpink, 4.3.
• lightsalmon, 4.3.
• lightseagreen, 4.3.
• lightskyblue, 4.3.
• lightslategray, 4.3.
• lightslategrey, 4.3.
• lightsteelblue, 4.3.
• lightyellow, 4.3.
• lime, 4.1., 4.3.
• limegreen, 4.3.
• linen, 4.3.
• magenta, 4.3.
• maroon, 4.1., 4.3.
• mediumaquamarine, 4.3.
• mediumblue, 4.3.
• mediumorchid, 4.3.
• mediumpurple, 4.3.
• mediumseagreen, 4.3.
• mediumslateblue, 4.3.
• mediumspringgreen, 4.3.
• mediumturquoise, 4.3.
• mediumvioletred, 4.3.
• Menu, 4.5.1.
• MenuText, 4.5.1.
• midnightblue, 4.3.
• mintcream, 4.3.
• mistyrose, 4.3.
• moccasin, 4.3.
• navajowhite, 4.3.
• navy, 4.1., 4.3.
• oldlace, 4.3.
• olive, 4.1., 4.3.
• olivedrab, 4.3.
• opacity, 3.2.
• orange, 4.3.
• orangered, 4.3.
• orchid, 4.3.
• palegoldenrod, 4.3.
• palegreen, 4.3.
• paleturquoise, 4.3.
• palevioletred, 4.3.
• papayawhip, 4.3.
• peachpuff, 4.3.
• peru, 4.3.
• pink, 4.3.
• plum, 4.3.
• powderblue, 4.3.
• purple, 4.1., 4.3.
• red, 4.1., 4.3.
• #rgb, 4.2.1.
• rgb(), 4.2.1.
• rgba(), 4.2.2.
• rosybrown, 4.3.
• royalblue, 4.3.
• #rrggbb, 4.2.1.
• saddlebrown, 4.3.
• salmon, 4.3.
• sandybrown, 4.3.
• Scrollbar, 4.5.1.
• seagreen, 4.3.
• seashell, 4.3.
• sienna, 4.3.
• silver, 4.1., 4.3.
• skyblue, 4.3.
• slateblue, 4.3.
• slategray, 4.3.
• slategrey, 4.3.
• snow, 4.3.
• springgreen, 4.3.
• sRGB, 4.2.1., 4.1.
• steelblue, 4.3.
• system colors, 4.5.1.
• tan, 4.3.
• teal, 4.1., 4.3.
• thistle, 4.3.
• ThreeDDarkShadow, 4.5.1.
• ThreeDFace, 4.5.1.
• ThreeDHighlight, 4.5.1.
• ThreeDLightShadow, 4.5.1.
• ThreeDShadow, 4.5.1.
• tomato, 4.3.
• transparent, 4.2.3., 3.1.
• turquoise, 4.3.
• violet, 4.3.
• wheat, 4.3.
• white, 4.1., 4.3.
• whitesmoke, 4.3.
• Window, 4.5.1.
• WindowFrame, 4.5.1.
• WindowText, 4.5.1.
• yellow, 4.1., 4.3.
• yellowgreen, 4.3.

Указатель свойств