it-swarm.com.ru

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

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

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

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

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

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

61
Dolph

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

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

Формулировки CSS 1 , CSS совпадают. CSS 4 черновик говорят похожие вещи.

Документы Internet Explorer и Firefox используют один и тот же метод.

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

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.

76
kennytm

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

18
Brian R. Bondy

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

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

...и так далее.

7
Kevin Ivarsen

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

1
Jaryn

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

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

Это может быть интересно http://www.websiteoptimization.com/speed/Tweak/hex/

0
grimorde