Как использовать 3-значные цветовые коды, а не 6-значные цветовые коды в CSS?

Недавно я просмотрел свой файл CSS и переключил все шестизначные шестнадцатеричные коды на простые 3-значные коды (например, мой #FDFEFF сократился до #FFF). Он отображает в значительной степени тот же цвет, что и раньше, мне кажется, что между частями довольно бесполезно, и удаление их спасло мне всего 300 байт в моем файле CSS.

Неважно, какую версию вы используете? Я редко когда-либо сталкивался с веб-сайтами, использующими только 3-значные коды (или, я думаю, я просто никогда не сталкиваюсь с теми, которые делают). Допустимо ли использование трехзначных кодов над 6-значными кодами, или мы должны использовать полные 6-значные коды?

Ответ 1

3-значные коды являются сокращенными, #123 совпадает с #112233. В приведенном ниже примере вы эффективно заменили #FDFEFF на #FFFFFF, который близок к исходному цвету, но, очевидно, не точно.

Это не "вопрос", какая версия, которую вы используете, как таковая, но трехзначные цветовые коды означает, что у вас есть немного меньше выбора в оттенках. Если вы считаете, что экономия 300 байт стоит того, то идите и используйте 3-значные коды, но если вы не планируете для ситуации с низкой пропускной способностью, то эти 300 байт на самом деле не будут вам очень экономно.

Ответ 2

Сокращение отстой! Не используйте его. Сложнее поддерживать и создавать ненужные вариации, например. при поиске и замене значения цвета ( "oh, теперь я должен принимать во внимание #FFFFFF и white и #FFF" ).

То, что вы сохраняете в размере, никогда не стоит того, что вы теряете в ремонтопригодности. Используйте minifaction и compression, чтобы сохранить пропускную способность.

Ответ 3

Если вы хотите сохранить байты, вам лучше использовать методы минимизации CSS

Ответ 4

Если вы используете это в таблице в IE 7 8 или 9 (к сожалению, это актуально на дату ответа)

http://www.w3schools.com/html/tryit.asp?filename=tryhtml_tables

6-значные коды работают нормально, но 3-значные коды отображаются как черные

<table border="1" bgcolor="#ff0000">  vs.    <table border="1" bgcolor="#ff0">

Ответ 5

Если "3-значные" версии дают нужный вам цвет, вы можете использовать его столько, сколько хотите. Это, конечно, не так.

Ответ 6

Это верно, но это преобразование не является общим:

#FFF == #FFFFFF
#CCC == #CCCCCC

Итак, что он делает, это "удваивает" каждую шестнадцатеричную цифру. Так что это не тот же цвет. Тем не менее, возможно, что он выглядит одинаково, потому что разница - это минута. В этом случае может помочь калиброванный цветной рабочий процесс.

Ответ 7

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

У вас еще есть 16 ³= 4 096 цветов на выбор, должно быть достаточно.

Однако, если вы сохраняете 300 байтов в сокращенных цветовых кодах, это означает, что у вас есть 100 цветов, уменьшенных в вашем CSS. Если ваша страница не очень разнообразна, или все радуги и цветы, это кажется очень много. Возможно, вы хорошо разбираетесь в систематическом CSS, но я часто вижу ненужные правила css. EX: если вы устанавливаете одно и то же правило для многих дочерних элементов, которые могли быть заменены установкой правила для дедушки и дедушки и в одном элементе исключения.

Ответ 8

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

удаление их спасло мне всего 300 байт в моем файле CSS

Ничего себе, всего 300 байт!: D, сарказм ftw

Дело в том, что если вы не собираетесь минимизировать, сжимать и комбинировать все ваши css, javascript и т.д. 300 байтов едва ли стоит беспокоиться, особенно по мере увеличения средней скорости интернета.

Удачи!