Do style = "color: #FFF;"сделать как # F0F0F0 или #FFFFFF? - PullRequest
Новая
       4

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

60 голосов
/ 24 мая 2010

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

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

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

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

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

Ответы [ 5 ]

75 голосов
/ 24 мая 2010

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 используют один и тот же метод.

В качестве практического примера, пожалуйста, посмотрите этот фрагмент, который содержит 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>

В Mac OS X 10.6 все Firefox 3.6, Opera 10.10, Safari 4 отображаются #fff как #ffffff.

Behavior in different browsers

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

17 голосов
/ 24 мая 2010

Спецификация 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, можно предположить, что он будет работать таким же образом на ваших веб-сайтах и ​​в веб-приложениях.

6 голосов
/ 24 мая 2010

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

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

... и пр.

1 голос
/ 07 февраля 2014

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

1 голос
/ 24 мая 2010

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

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

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

...