webdevqa.jp.net

CSSで6桁のカラーコードではなく3桁のカラーコードを使用する方法

最近、CSSファイルを調べて、6桁の16進コードをすべて単純な3桁のコードに切り替えました(たとえば、#FDFEFF#FFFに短縮されました)。これは以前とまったく同じ色をレンダリングします。パーツ間の中間はかなり役に立たないようで、それらを削除するとCSSファイルに300バイト全体が保存されました。

使用するバージョンは重要ですか? 3桁のコードのみを使用するWebサイトで実行することはほとんどありません(または、使用するWebサイトで実行することはありません)。 6桁のコードに対して3桁のコードを使用することは完全に有効ですか、それとも完全な6桁のコードを使用することになっていますか?

57
animuson

3桁のコードは略記で、#123#112233と同じです。あなたが与える例では、#FDFEFFを(効果的に)#FFFFFFと交換しました。これは元の色に近いですが、明らかに正確ではありません。

どのバージョンを使用するかは「問題」ではありませんが、3桁のカラーコードを使用すると、色合いの選択肢が少し少なくなります。 300バイトを節約するだけの価値があると思う場合は、3桁のコードを使用してください。ただし、低帯域幅の状況を想定して設計している場合を除き、300バイトではそれほど節約できません。

85
Chris

速記は吸う!使用しないでください。維持するのが難しく、不必要なバリエーションを作成します。色の値を検索して置換するとき( "ああ、今私は考慮に入れる必要があります#FFFFFFおよびwhiteおよび#FFF ")。

サイズを節約しても、保守性を失うほどの価値はありません。ミニファクションと圧縮を使用して、帯域幅を節約します。

26
Pekka 웃

バイトを節約したい場合は、CSSミニフィケーション手法を使用した方が良い

12
Carlos Muñoz

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
user1505432

「3桁」バージョンで必要な色が生成される場合は、好きなだけ使用できます。間違いではありません。

3
Jan Hančič

私はいつも速記を使います。最大の利点は、コードを簡単に覚えられることです。

あなたはまだ16を持っています3 = 4,096色から選択できます。

ただし、略式のカラーコードで300バイトを保存すると、CSSで100色が不鮮明になります。あなたのページが非常に多様であるか、すべての虹と花でない限り、それは多くのように思われます。体系的なCSSが得意かもしれませんが、必要のないCSSルールをよく目にします。例:祖父母と1つの例外要素にルールを設定することで置き換えることができた多くの子要素に同じルールを設定している場合。

3
agiopnl

それは本当ですが、この変換は一般的ではありません:

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

そのため、各16進数を「2倍」にします。そのため、同じ色ではありません。ただし、違いはわずかであるため、同じように見える可能性があります。この場合、キャリブレーションされたカラーワークフローが役立ちます。

2
GorillaPatch

ショートハンド色を使用するか通常の16進色を使用するかは関係ないため、必要に応じて変換してください。

それらを削除すると、CSSファイルに300バイト全体が保存されました

うわー、完全な300バイト! :D、皮肉ftw

問題は、特に平均インターネット速度が向上しているため、css、javascriptなどの300バイトをすべて圧縮、圧縮、結合する場合を除きます。

楽しむ!

0
Ben Everard