Комментарии 11
Зачем нужно было менять такой формат:
background-color: rgb(0, 0, 0, 0.5)На такой:
background-color: rgb(0 0 0 / 50%)В чем преимущество? Теперь вместо привычных математических значений, нужно писать какие-то ребусы, к тому же только исключительно для 1 свойства — цвета.
Что нам для каждого правила теперь новый синтаксис придумывать? Ну чего останавливаться то, давайте также еще исключительно для 1 свойства opacity изменим форму написания:
Теперь давайте, вместо десятичного числа:
opactiy: 0.5Использовать следующий формат:
opactiy: eval(parseFloat("0.5_perc".replace('_perc', '')))Как здорово, не правда ли? Теперь парсеру будет интереснее парсить код, разработчикам нужно будет изучать больше правил исключений, а разработчикам браузеров поддерживать больше бесполезного кода!
Лучше бы эти разработчики добавили поддержку CSS4 attr() свойства или чего-либо подобного в свои браузеры, чем подобной чушью заниматься
Зачем нужно было менять такой формат:
background-color: rgb(0, 0, 0, 0.5)
такой формат не будет у вас работать :) нужно писать rgba для альфа канала.
Поэтому, обычно, чтобы добавить к цвету rgb(0, 0, 0) прозрачность нужно исправить это так: rgba(0, 0, 0, 0.5) тоесть в двух местах поправить. Запятые тоже иногда не удобно писать. Например для
padding: 10px 5px 5px 10px
Шестнадцатеричный код цвета состоит из шести символов.
Ну нет. На самом деле он может состоять и из 8 символов (помимо упомянутого сокращения одинаковых пар), тогда последние две цифры (не символа!) будут означать прозрачность цвета в процентах.
Т.е. это полный шестнадцатиричный аналог модели RGBA:
rgba(255, 0, 0, 0.5) = #FF000050
The format of an RGB value in hexadecimal notation is a ‘#’ immediately followed by either three or six hexadecimal characters.И явно оговорено:
Unlike RGB values, there is no hexadecimal notation for an RGBA value.
Де-факто многие браузеры поддерживают 8-символьные цвета, но это нестандартное поведение (во всяком случае, пока). Поэтому в проде это лучше не использовать, тем более в этом и нет особого смысла.
Единственный случай, когда формата hex-8 было не избежать — фильтры в IE, которыми в старые времена полифилились css-градиенты. Но это дела минувших дней.
Даже не смотря на это, вполне себе рабочий вариант: https://caniuse.com/#feat=css-rrggbbaa.
Поэтому в проде это лучше не использовать
Прод бывает разный. Для пет-проектов или сервисных ресурсов с полутора посетителями сойдёт.
тем более в этом и нет особого смысла
Наверное основное преимущество — отсутствие необходимости конвертации.
Хорошая и довольно полная статья, объединяющая знания про цветам. Особенно полезна будет для новичков, потому что лично я всё это узнавал на собственном опыте и по частям, а тут можно получить выжимку про всё и сразу. А про currentColor например я не знал, спасибо.
Единственное, нет ни слова про #RRGGBBAA, а он есть и в некоторых случаях может быть удобнее rgba
Только почему-то нет упоминания, что альфа-составляющую можно и в hex указывать. #RRGGBBAA
По поводу пробелов HSLA(150 + 50, 100%, 50% , 0.5) -- работает; а теперь надо скобки . HSLA((150 + 50) 100% 50% / 0.5). Не принципиально, но "раньше все было лучше"
я часто работаю с цветами. Только вчера столкнулся с этой проблемой. я настолько был уверен , практически на 100% , что любые арифметические операции с цветами внутри вот этих цветовых схем , они будет корректно обрабатываться . нет , я потратил несколько дней, пока понял, что это не работает . никакие операции внутри HSLA() или RGB() недействительна. Через переменные
Цвета в CSS