CSSを最適化する方法

最適化方法: 1. コメントを簡素化する; 2. カラー コードを簡素化する; 3. 複数行の属性ではなく単一行の属性を使用する、つまり省略された属性を使用する; 4. 値が次の場合は単位を省略する0; 5. 複数の要素の属性を同時に設定する; 6. 空白と改行を削除する; 7. 有効期限を設定し、GZip を使用する。

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

CSS コードを最適化すると、Web ページが占めるバイト数が減り、ブラウザが同じ条件で CSS コードをダウンロードする時間が短縮され、Web ページを開く速度が向上します。では、CSSコードを最適化するにはどうすればよいでしょうか? CSS コードを最適化するためのヒントをいくつか紹介します。

CSS コードを最適化するためのヒント

1. コメントを簡略化する

多くの状況状況によっては、特に C/Java やその他の言語開発作業に従事してきたプログラマーは、次のような複数行のコメントを書きたがる場合があります。

もちろん、コンパイル言語ではそのようなコメントに問題はありません。しかし、CSS では、CSS ファイルのサイズが大幅に増加するため、次のように単純化する必要があります:

これにより、読みやすさを維持しながらファイル サイズが削減されます。実際、CSS ファイルの実際に公開されたバージョンでは、これらのコメントを完全に削除できます。

2. カラー コードを簡素化する

CSS では、16 進数のカラー コードを扱うことがよくあります。次の「標準フォーム」を書くことに慣れているかもしれません:

color: #ffffff;
color: #ff88ff;

実際、この記述方法は CSS で簡略化でき、次のように書くことができます:

color: #fff;
color: #f8f;

3 , 複数行の属性ではなく単一行の属性を使用します。つまり、省略された属性を使用します。

CSS では、margin/padding/font/border などの属性は、複数行の属性の代わりに 1 行で設定できます。多くの行、例:

padding-top: 10px;
padding-bottom: 10px;
padding-left: 0;
padding-right: 0;

次のように記述できます:

padding: 10px 0 10px 0;

順序は上、右、下、左です。もちろん、マージン属性とパディング属性については、左と右/上と下の値が同じである場合は、より簡単に書くことができます。たとえば、上記の例は次のように書くことができます。

padding: 10px 0;

上の場合、 Bottom、Left、Right は同じであり、次のように書くこともできます。

padding: 10px;

他の省略方法については、インターネット上の情報を参照してください。もちろん、CSS を書く過程で学ぶために、TopStyle というソフトウェアを使用することをお勧めします。このソフトウェアは、具体的なヒントを提供します。

(学習ビデオ共有: css ビデオ チュートリアル )

4. 値が 0 の場合、単位は省略できます

例:

padding: 0;

5. 複数の要素の属性を同時に設定します

例。例:

h1 {
margin: 0;
padding: 0;
}
h2 {
margin: 0;
padding: 0;
}
h3 {
margin: 0;
padding: 0;
}

より良い書き方は次のようになります:

h1,h2,h3 {
margin: 0;
padding: 0;
}

6. 空白と改行を削除します

This非常に目立たない操作ですが、これは開発段階を終えたインターネット上で適用される CSS に対して行うべきもので、少なくともすべての Google アプリケーションはこのように行われます。たとえば、

h1 {
margin: 0;
padding: 0;
}
blockquote {
background-color: #ffcccc;
}

は次のように処理されます:

h1{margin:0;padding:0;}
blockquote{background:#fcc;}

実際、CSS ファイルには改行は必要ありません。ただし、コードを読みやすくするために、各要素を 1 行に記述することをお勧めします。現在、開発プロセスに影響を与えないように、同様のことを行うためのツールが利用可能です。

7. 有効期限を設定し、GZip を使用します。

条件が許せば、CSS ファイルの有効期限を設定し、GZip での送信を有効にする必要があります。 CSS ファイル。前者を設定すると、一般的なブラウザで CSS ファイルをキャッシュできるため、ロードが実行されるたびにファイルを読み取る必要がなくなり、プロセスが大幅に高速化され、同時にトラフィック消費も削減されます。 GZip を有効にすると、CSS ファイルが想像を絶する程度に圧縮される可能性があり、現在一般的なブラウザのほとんどが GZip をサポートしています。

プログラミング関連の知識について詳しくは、プログラミング ビデオをご覧ください。 ！

以上がCSSを最適化する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。