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

Question

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

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

Answer 1

Трехзначные коды являются сокращенными, #123 совпадает с #112233.В приведенном вами примере вы (фактически) поменялись местами #FDFEFF на #FFFFFF, что близко к исходному цвету, но, очевидно, не точно.Как таковой, но трехзначные цветовые коды означают, что у вас есть немного меньше выбора в оттенках.Если вы чувствуете, что экономия 300 байтов того стоит, тогда используйте 3-значные коды, но если вы не планируете ситуацию с низкой пропускной способностью, эти 300 байтов на самом деле не спасут вас.

Answer 2

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

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

Answer 3

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

• http://en.wikipedia.org/wiki/Minification_(programming)
• http://developer.yahoo.com/yui/compressor/
• http://www.minifycss.com/

Answer 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">

Answer 5

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

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

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

Answer 6

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

Answer 7

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

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

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

Answer 8

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

удаление их сэкономило мне целых 300 байт в моем файле CSS

Ого, целых 300 байт!: D, сарказм ftw

Дело в том, что если вы не собираетесь минимизировать, сжать и объединить все ваши CSS, Javascript и т. Д., То вряд ли стоит беспокоиться о 300 байтах, тем более что средняя скорость интернета увеличивается.1009 *

Веселись!