Web サイトのユーザビリティの重要な指標は速度、より正確には、訪問者のブラウザ ウィンドウにページが表示される速さです。 Web サーバーの速度、訪問者のインターネット接続、ブラウザがダウンロードする必要があるファイルのサイズなど、速度に影響を与える要因は数多くあります。サーバーと接続の速度を制御することはできませんが、Web サイトの Web ページを構成するファイルのサイズは制御できます。
Web サイトを高速化するために、Web ビルダーは定期的に Web サイト上のすべての画像ファイルを圧縮して最適化しますが、多くの場合、ファイル サイズを数パーセント削減するために画質を犠牲にします。 CSS スタイル シートはプレーン テキスト ファイルであり、画像に比べて比較的小さいため、Web ビルダーが CSS スタイル シート ファイルのサイズを削減する措置を検討することはほとんどありません。ただし、CSS の略語やその他の簡単なテクニックを使用すると、スタイル シートのサイズを大幅に削減できます。私自身のスタイルシートの非公式のアドホック テストでは、ファイル サイズを約 25 ～ 50% 削減しました。
CSS の略語プロパティを使用します。
CSS 短縮プロパティは、関連するプロパティの複数のセットを置き換えるために使用される特殊なプロパティ名です。たとえば、padding プロパティは、padding-top、padding-right、padding-bottom、padding-left の短縮形です。
短縮プロパティを使用すると、複数のプロパティ/属性のペアを CSS スタイルシートの 1 行のコードに圧縮できます。たとえば、次のコードを考えてみましょう。
.sample1 {
マージントップ: 15px;
マージン右: 20px;
マージン-ボトム: 12px;
マージン左: 24px;
パディングトップ: 5px;
パディング右: 10px;
パディングボトム: 4px;
パディング左: 8px;
ボーダー上部の幅: 細い;
ボーダートップスタイル: ソリッド;
ボーダートップカラー: #000000;
}
これをいくつかの略語プロパティに置き換えると、コードを次のように減らすことができます。この 2 つの実際の効果はまったく同じです。
.sample1 {
マージン: 15 ピクセル 20 ピクセル 12 ピクセル 24 ピクセル;
パディング: 5px 10px 4px 8px;
ボーダートップ: 薄いソリッド #000000;
}
省略されたプロパティには複数のプロパティもあり、それぞれが省略されたプロパティに結合される通常のプロパティに対応することに注意してください。プロパティは空白で区切られます。
マージン プロパティの線形測定など、プロパティが同様の値を持つ場合、省略されたプロパティに続くプロパティの順序が重要です。属性の順序は上部から始まり (上部の境界線は空白)、ボックスの周りを時計回りに続けます。
略語プロパティのすべてのプロパティが同じである場合は、単一のプロパティをリストし、それを前に 4 回コピーするだけです。したがって、次の 2 つのプロパティは同等です。
マージン: 5 ピクセル 5 ピクセル 5 ピクセル 5 ピクセル;
マージン: 5px;
同様に、境界マージンまたは間隔プロパティに続く 2 つのプロパティを使用して、上/下および右/左のプロパティのペアを表すことができます。
マージン: 5 ピクセル 10 ピクセル 5 ピクセル 10 ピクセル;
マージン: 5px 10px;
属性が異なる値である場合、属性の順序は重要ではありません。したがって、境界線の色、境界線のスタイル、境界線の幅などのプロパティは、任意の順序でアウトライン プロパティの後に続けることができます。属性を無視することは、対応する一般プロパティをスタイル ルールから省略することと同じです。
CSS 略語プロパティのリスト
以下は、CSS の省略されたプロパティと、それらが表す一般的なプロパティのリストです。
背景：背景添付、背景色、背景画像、背景位置、背景リピート
枠線: 枠線の色、枠線のスタイル、枠線の幅
border-bottom (下枠): 下枠の色、下枠のスタイル、下枠の幅
border-left (左ボーダー): 左ボーダーの色、左ボーダーのスタイル、左ボーダーの幅
border-right (右ボーダー): 右ボーダーの色、右ボーダーのスタイル、右ボーダーの幅
border-top (上枠): 上枠の色、上枠のスタイル、上枠の幅
キュー（音キュー）：プレキュー、ポストキュー
フォント: フォント、フォント サイズ、フォント スタイル、フォントの太さ、フォント バリアント、行の高さ、フォント サイズの調整、フォントの伸縮
list-style: リスト スタイルの画像、リスト スタイルの位置、リスト スタイルの種類
マージン（空白）：上マージン、右マージン、下マージン、左マージン
アウトライン: アウトラインの色、アウトラインのスタイル、アウトラインの幅
パディング: 上部ギャップ、右ギャップ、下部ギャップ、左ギャップ
一時停止 (一時停止): 後に一時停止、前に一時停止、空白を減らす
CSS スタイルシートのサイズを削減するもう 1 つの方法は、ドキュメントから不要な空白の大部分を削除することです。言い換えれば、各ルール ブレークを 1 行のコードに入れます。つまり、最初にコードに挿入されていた改行とインデントを削除して、各プロパティ/属性を別の行に分離します。
たとえば、次のコード例は内容が同じですが、2 番目のコード例はより洗練されています。
h1 {
フォントサイズ: x-large;
フォントの太さ: 太字;
色: #FF0000;
}
h1 {フォントサイズ: x-large; フォントの太さ: 太字;
コメントの削除
CSS コードからコメントを削除することも、ファイル サイズを削減する方法です。コメントはコードを読むのには役立ちますが、ブラウザが Web ページを生成するのには役立ちません。多くの Web ビルダーは、コードのすべての行、または少なくともすべてのルール ステートメントにコメントを付けることに慣れています。ほとんどの CSS プロパティは読みやすく理解しやすいため、CSS スタイルシートではこのような寛大なコメントが必要になることはほとんどありません。クラス、ID、その他のセレクターに意味のある名前を使用すると、コードを読みやすく保守しやすい状態に保ちながら、ほとんどのコメントを削除できます。
h1 { /* 見出し 1 のスタイル*/
font-size: x-large; /* x-large サイズ */
font-weight: 太字 /* 太字 */
色: #FF0000; /* 赤 */
}
短縮プロパティを使用し、無駄な空白を削除し、コメントを省略すると、CSS スタイル シート ファイルのサイズを大幅に削減できます。これにより、Web サイトの高速化という全体的な目標に対して、小さいながらも顕著に貢献する可能性があります。