CSS Color Module Level 4, вероятно, будет поддерживать 4-х и 8-значное шестнадцатеричное обозначение RGBA!
Три недели назад (18 декабря 2014 года) проект редактора 4-го уровня цветового модуля CSS был представлен рабочей группе CSS W3C. Хотя в государстве , которое является в значительной степени подвержены изменению, текущая версия документа следует , что в несколько ближайшем будущем CSS будет поддерживать как 4 и 8-значный шестнадцатеричный RGBA обозначения.
Примечание: в следующей цитате вырезаны не относящиеся к делу куски, и к моменту прочтения вы, возможно, сильно изменили источник (как уже упоминалось выше, это черновик редактора, а не окончательный документ).
Если что-то сильно изменилось, пожалуйста, оставьте комментарий, дайте мне знать, чтобы я мог обновить этот ответ!
§ 4.2. Шестнадцатеричные обозначения RGB: #RRGGBB
Синтаксис a <hex-color>
представляет собой <hash-token>
токен , значение которого состоит из 3, 4, 6 или 8 шестнадцатеричных цифр . Другими словами, шестнадцатеричный цвет записывается как хеш-символ «#», за которым следует некоторое количество цифр 0-9
или букв a-f
(регистр букв не имеет значения - #00ff00
идентичен #00FF00
).
8 цифр
Первые 6 цифр интерпретируются идентично 6-значной записи. Последняя пара цифр, интерпретируемая как шестнадцатеричное число, указывает альфа-канал цвета, где 00
представляет полностью прозрачный цвет и ff
представляет полностью непрозрачный цвет.
Пример 3
Другими словами, #0000ffcc
представляет тот же цвет, что и rgba(0, 0, 100%, 80%)
(слегка прозрачный синий).
4 цифры
Это более короткий вариант 8-значной записи, «расширенный» так же, как и 3-значная запись. Первая цифра, интерпретируемая как шестнадцатеричное число, указывает красный канал цвета, где 0
представляет минимальное значение и f
представляет максимум. Следующие три цифры представляют зеленый, синий и альфа-канал соответственно.
Что это значит для будущего CSS-цветов?
Это означает, что, предполагая, что это не полностью удалено из документа уровня 4, мы скоро сможем определить наши цвета RGBA (или цвета HSLA, если вы один из тех парней) в шестнадцатеричном формате в браузерах, которые поддерживают Color Синтаксис модуля уровня 4.
пример
elem {
background: rgb(0, 0, 0); /* RGB notation (no alpha). */
background: #000; /* 3-digit hexadecimal notation (no alpha). */
background: #000000; /* 6-digit hexadecimal notation (no alpha). */
background: rgba(0, 0, 0, 1.0); /* RGBA notation. */
/* The new 4 and 8-digit hexadecimal notation. */
background: #0000; /* 4-digit hexadecimal notation. */
background: #00000000; /* 8-digit hexadecimal notation. */
}
Когда я смогу использовать это в своих продуктах для клиентов?
Все шутки в стороне: в настоящее время это только начало 2015 года, поэтому они не будут поддерживаться ни в одном браузере в течение достаточно долгого времени - даже если ваш продукт предназначен только для работы в самых современных браузерах, которые вы, вероятно, не увидеть это в действии в производственном браузере в ближайшее время.
Просмотр текущей поддержки браузера для цветовой нотации #RRGGBBAA
Тем не менее, то, как работает CSS, означает, что мы действительно можем начать использовать их сегодня! Если вы действительно хотите начать использовать их прямо сейчас, пока вы добавляете запасной вариант, любые не поддерживающие браузеры будут просто игнорировать новые свойства, пока они не будут признаны действительными:
figure {
margin: 0;
padding: 4px;
/* Fall back (...to browsers which don't support alpha transparency). */
background: #FEFE7F;
color: #3F3FFE;
/* Current 'modern' browser support. */
background: rgba(255, 255, 0, 0.5);
color: rgba(0, 0, 255, 0.75);
/* Fall... foward? */
background: #ffff007F; /* Or, less accurately, #ff08 */
color: #0000ffbe; /* Or #00fc */
}
<figure>Hello, world!</figure>
До тех пор , пока вы читаете этот ответ на браузер , который поддерживает background
и color
свойства в CSS, то <figure>
элемент в результате приведенного выше фрагмента кода будет выглядеть очень похоже на это:
Используя самую последнюю версию Chrome для Windows (v39.0.2171) для проверки нашего <figure>
элемента, мы увидим следующее:
6-значное шестнадцатеричное отступление переопределяется rgba()
значениями, а наши 8-значные шестнадцатеричные значения игнорируются, поскольку в настоящее время они считаются недействительными синтаксическим анализатором Chrome CSS. Как только наш браузер поддерживает эти 8-значные значения, они переопределяют rgba()
их.
ОБНОВЛЕНИЕ 2018-07-04: Firefox, Chrome и Safari поддерживают эту нотацию, Edge все еще отсутствует, но, вероятно, последует ( https://caniuse.com/#feat=css-rrggbbaa ).
rgb(0xff,\x80,#44)
изумительно представление восьмеричной , кажется, йорк немногоrgb(0100, 0200,0300)
будет#4080C0