合理化された CSS による Web ページのファイル サイズの制御

K 単位で測定される Web ページ ファイルのサイズは、今日の帯域幅にとって実際には重要ではありませんが、K 単位で測定される Web ページ ファイルを最小限に効率化する方法は、依然として Web デザイナーが考慮すべき問題の 1 つです。

誰もが知っているように、Web ページ全体の構造や機能に影響を与えることなく、Web ページ ファイルは小さいほど良いのです。Web ページ ファイルが小さいほど、ブラウザによる Web ページの解釈時間が短縮され、通常の訪問者は、 Web ページがゆっくりと表示されるのを待つことのイライラは、帯域幅が狭くインターネット速度が遅いユーザーにとってはさらに顕著です。想像してみてください。Web サイトを開いたときに、サイト全体がすぐに目の前に表示されるようにしたいと思いませんか?それとも、ブラウザーによってサイト全体が少しずつ解釈されるのを 10 秒以上、あるいは数分かけて観察することを好みますか?

テーブル レイアウトの時代には、ページ上のテーブルとともにコードが無数に繰り返され、Web ページ ファイル全体が非常に肥大化し、コードの可読性も最小限に抑えられ、ブラウザの解釈時間も自然に低下しました。たくさん増えた。 Table レイアウトが DIV+CSS レイアウトに置き換えられてから、すべてが大幅に改善され、Table を元の位置に戻してデータを表示できるようになり、レイアウトは DIV+CSS に任せられるため、コードの可読性と再利用性が向上しました。 DIV+CSS のさらに重要な点は、Web ページ ファイルのパフォーマンスと構造を区別することで、パフォーマンスのために Web ページ ファイル全体の構造を変更する必要がなくなります。

DIV+CSS レイアウト方法により、以前のテーブル レイアウトの肥大化したコードが最小限に抑えられましたが、Web デザイナーにとって、Web ページ ファイルのサイズを最小限に制御する方法は、常に検討し追求する価値のある問題です。

次のコード部分を見てください。

このような CSS コードは構造が非常に明確で、非常に読みやすいですが、このようなコードは合理化されていないため、最もオリジナルな CSS コードであることを意味します。以下の単純化されたコードを見てみましょう。 :

CSS には複合属性という用語があります。これは、たとえば、上記の「margin-top; margin-right; margin-bottom; margin-left;」を 1 つの「margin-left」に統合できることを意味します。 " プロパティを作成し、それにパラメータを指定します。

これにより、元の CSS コードに基づいてコードをさらに合理化できます。また、こうして書かれた構成も合理的であり、読みやすさも同様に強い。しかし、極限まで合理化するにはこれでは不十分です。この CSS コードの構造を明確にするために、スペースや改行などのスペースを占めるものを使用します。これらのスペースを占めるものを削除するとどうなるでしょうか。