Стиль style = "color: #FFF;" сделать как # F0F0F0 или #FFFFFF?

При определении цветов с использованием "сокращенного hexidecimal" (style="color: #FFF;") существует ли определенный способ расширения сокращения? (style="color: #F0F0F0;" или style="color: #FFFFFF;")

Все ли браузеры используют один и тот же метод расширения? Это поведение по спецификации (если да, то где оно определено)? Может ли метод расширения, возможно, отличаться между CSS 1/2/3?

Я заметил, что "большинство браузеров" расширяются до #FFFFFF.

Есть ли другие места (вне HTML/CSS), где это сокращенное обозначение разрешено, но метод расширения отличается?

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

Ответы

Ответ 1

CSS 2.1 (http://www.w3.org/TR/CSS2/syndata.html#value-def-color):

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

Слова из CSS 1, CSS 3 одинаковы. проект CSS 4 говорят похожие вещи.

Internet Explorer и Firefox docs state тот же метод.

В качестве практического примера, пожалуйста, ознакомьтесь с этим фрагментом, который содержит 3 <div> стилей

div { width: 100px; height: 100px;  }
<div style="background-color:#f0f0f0;">#f0f0f0</div>
<div style="background-color:#fff;">#fff</div>
<div style="background-color:#ffffff;">#ffffff</div>

Ответ 2

спецификация CSS2 раздел 4.3.6 Цвета:

Цветовая модель 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) и удаляет любые зависимости от глубины цвета дисплея.

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

Ответ 3

Тестирование на IE8, Firefox 3.6 и бета-версии Google Chrome 5.0, все три браузера повторяют шестую цифру:

  • 000 производит 000000
  • FFF производит FFFFFF
  • 876 производит 887766

... и т.д.

Ответ 4

Я чувствую, что должен поощрять людей не делать этого, так как это эквивалентно тому, что вы говорите кому-то, что хотите 15 чего-то, а затем ожидаете, что они появятся с 255. Какой грубый и странный способ сократить 0xFFFFFF. Это для меня "веб-дизайн" веб-дизайна.

Ответ 5

Я не знал, что браузер не расширяет #FFF до #FFFFFF. Мне было бы интересно узнать, что, по вашему мнению, нет - или вы имеете в виду, что некоторые продолжают показывать #FFF?

Однако, как я понял, #FFF является допустимым сокращением, а # F0 также (действительно) расширяется до # F0F0F0.

Это может представлять интерес http://www.websiteoptimization.com/speed/tweak/hex/