CSS の最適化手法のためのコード共有の一般的な例

よく使われる CSS の最適化をご存知ですか? ここで経験を積んで共有していきます。

1. CSS の略語を使用する

略語を使用すると、CSS ファイルのサイズが小さくなり、読みやすくなります。 CSS 略語の主なルールについては、ここでは説明しませんので「一般的な CSS 略語構文の概要」を参照してください。

2. 値が 0 でない場合は、単位を明確に定義します

CSS 初心者によくある間違いは、サイズの単位を定義することです。 HTML では width=100 と記述するだけで済みますが、CSS では width:100px width:100em のように正確な単位を指定する必要があります。単位を定義しない場合の例外は、行の高さと 0 の値の 2 つだけです。また、他の値の後には単位を付ける必要があります。値と単位の間にスペースを入れないように注意してください。

3. 大文字と小文字の区別

XHTML で CSS を使用する場合、CSS で定義された要素名は大文字と小文字が区別されます。このエラーを回避するには、すべての定義名に小文字を使用することをお勧めします。

class と id の値は、HTML と XHTML でも大文字と小文字が区別されます。大文字と小文字を混合して使用する必要がある場合は、CSS での定義が XHTML のタグと一致していることを注意深く確認してください。

4.classやidの前に要素の修飾を解除する

IDはページ内で一意であり、ページ内で使用できるため、要素のclassやidを定義する記述をする場合は、前の要素の修飾を省略できます。何度も使います。要素を修飾することは意味がありません。例:

div#content { /* declarations */ }
fieldset.details { /* declarations */ }

は

#content { /* declarations */ }
.details { /* declarations */ }

と書くことができ、バイトを節約できます。

5. デフォルト値

通常、padding のデフォルト値は 0 で、background-color のデフォルト値は透明です。ただし、デフォルト値はブラウザによって異なる場合があります。競合が心配な場合は、次のように、スタイル シートの先頭ですべての要素のマージンとパディングの値を 0 として定義できます:

* {
margin:0;
padding:0;
}

6. 継承可能な値を繰り返し定義する必要はありません。

CSSでは子要素が自動で継承 親要素で定義した色やフォントなどの属性値を、繰り返し定義することなく子要素に直接引き継ぐことができます。ただし、ブラウザーがいくつかのデフォルト値で定義をオーバーライドする可能性があることに注意してください。

7. 最も近い最初の原則

同じ要素の定義が複数ある場合、最も近い（最小レベルの）定義が優先されます。たとえば、CSS ファイルに次のようなコードがあります。これらの 2 つの定義では、class が p に近いため、class=update が使用されます。詳細については、W3C の「セレクターの特異性の計算」を参照してください。

8. 複数のクラス定義

1 つのタグで同時に複数のクラスを定義できます。例: まず 2 つのスタイルを定義します。最初のスタイルの背景は #666、2 番目のスタイルの境界線は 10 ピクセルです。

Update: Lorem ipsum dolor set

ページ コードでは、次のように

を呼び出すことができます。最終的な表示効果は、この div に #666 の背景と 10 ピクセルの境界線の両方が含まれることです。はい、これは可能です、試してみてください。

9. 子孫セレクターを使用する

CSS 初心者は、子孫セレクターの使用が効率に影響を与える原因の 1 つであることを知りません。サブセレクターは、多くのクラス定義を保存するのに役立ちます。次のコードを見てみましょう:

p {
margin:1em 0;
font-size:1em;
color:#333;
}
.update {
font-weight:bold;
color:#600;
}

このコードの CSS 定義は次のとおりです:

.one{width:200px;background:#666;}
.two{border:10px solid #F00;}

スタイル定義は次のとおりです:

Item 1
>
Item 1
Item 1

サブセレクターを使用すると、コードと CSS がより簡潔で読みやすくなります。

10. 背景画像のパスに引用符を追加する必要はありません

引用符は必要ないため、バイト数を節約するために、背景画像のパスに引用符を追加しないことをお勧めします。例:

div#subnav ul { /* Some styling */ }
div#subnav ul li.subnavitem { /* Some styling */ }
div#subnav ul li.subnavitem a.subnavitem { /* Some styling */ }
div#subnav ul li.subnavitemselected { /* Some styling */ }
div#subnav ul li.subnavitemselected a.subnavitemselected { /* Some styling */ }

は

#subnav { /* Some styling */ }
#subnav li { /* Some styling */ }
#subnav a { /* Some styling */ }
#subnav .sel { /* Some styling */ }
#subnav .sel a { /* Some styling */ }

と記述できます。引用符を追加すると、ブラウザー エラーが発生します。

11. グループ セレクター

一部の要素タイプ、クラス、または ID に共通の属性がある場合、グループ セレクターを使用して、複数の繰り返し定義を避けることができます。これにより、かなりのバイトを節約できます。

例: すべてのタイトルのフォント、色、マージンを定義するには、次のように記述できます:

background:url(images/***.gif) #333;

使用時に独立したスタイルを定義する必要がある個々の要素がある場合は、新しい定義を追加して古い定義を上書きできます。例:

background:url(images/***.gif) #333;

12. リンク スタイルを正しい順序で指定します

CSS を使用してリンクの複数の状態スタイルを定義する場合、正しい順序は次のとおりです。 :訪問済み :ホバー :アクティブ。抽出された最初の文字は LVHA で、LoVe HAte (嫌いが好き) として覚えられます。なぜそのように定義されているのでしょうか? Eric Meyer の「Link Specificity」を参照してください。

ユーザーがキーボードを使用して制御する必要があり、現在のリンクのフォーカスを知る必要がある場合は、:focus 属性を定義することもできます。 :focus 属性の効果は、フォーカスされた要素に :hover 効果を表示する場合は、次のように記述する位置によって異なります。ホバー効果を使用するには、:hover の後に :focus を置きます。

13. float をクリアする

非常に一般的な CSS の問題は、float を配置して使用するときに、下のレイヤーがフローティング レイヤーで覆われているか、レイヤー内にネストされているサブレイヤーが外側のレイヤーの範囲を超えていることです。

通常的解决办法是在浮动层后面添加一个额外元素，例如一个div或者一个br，并且定义它的样式为clear: both。这个办法有一点牵强，幸运的是还有一个好办法可以解决，参看这篇文章《How To Clear Floats Without Structural Markup》(注：本站将尽快翻译此文)。

上面2种方法可以很好解决浮动超出的问题，但是如果当你真的需要对层或者层里的对象进行clear的时候怎么办?一种简单的方法就是用overflow属性，这个方法最初的发表在《Simple Clearing of Floats》，又在《Clearance》和《Super simple clearing floats》中被广泛讨论。

上面那一种clear方法更适合你，要看具体的情况，这里不再展开论述。另外关于float的应用，一些优秀的文章已经说得很清楚，推荐你阅读：《Floatutorial》、《Containing Floats》和《Float Layouts》

十四.横向居中(centering)

这是一个简单的技巧，但是值得再说一遍，因为我看见太多的新手问题都是问这个：CSS如何横向居中?你需要定义元素的宽，并且定义横向的margin，如果你的布局包含在一个层(容器)中，就象这样：

你可以这样定义使它横向居中：

#wrap {
width:760px; /* 修改为你的层的宽度 */
margin:0 auto;
}

但是IE5/Win不能正确显示这个定义，我们采用一个非常有用的技巧来解决：用text-align属性。就象这样：

body {
text-align:center;
}
#wrap {
width:760px; /* 修改为你的层的宽度 */
margin:0 auto;
text-align:left;
}

第一个body的text-align:center; 规则定义IE5/Win中body的所有元素居中(其他浏览器只是将文字居中) ，第二个text-align:left;是将#warp中的文字居左。

十五.导入(Import)和隐藏CSS

因为老版本浏览器不支持CSS，一个通常的做法是使用@import技巧来把CSS隐藏起来。例如：

@import url(main.css);

然而，这个方法对IE4不起作用，这让我很是头疼了一阵子。后来我用这样的写法：

@import main.css;

这样就可以在IE4中也隐藏CSS了，呵呵，还节省了5个字节呢。想了解@import语法的详细说明，可以看这里《centricle’s css filter chart》

十六.针对IE的优化

有些时候，你需要对IE浏览器的bug定义一些特别的规则，这里有太多的CSS技巧(hacks)，我只使用其中的两种方法，不管微软在即将发布的IE7 beta版里是否更好的支持CSS，这两种方法都是最安全的。

1.注释的方法

(a)在IE中隐藏一个CSS定义，你可以使用子选择器(child selector):

html>body p {
/* 定义内容 */
}

(b)下面这个写法只有IE浏览器可以理解(对其他浏览器都隐藏)

* html p {
/* declarations */
}

(c)还有些时候，你希望IE/Win有效而IE/Mac隐藏，你可以使用反斜线技巧：

/* */
* html p {
declarations
}
/* */

2.条件注释(conditional comments)的方法

另外一种方法，我认为比CSS　Hacks更加经得起考验就是采用微软的私有属性条件注释(conditional comments)。用这个方法你可以给IE单独定义一些样式，而不影响主样式表的定义。就象这样：

十七.调试技巧：层有多大?

当调试CSS发生错误，你就要象排版工人，逐行分析CSS代码。我通常在出问题的层上定义一个背景颜色，这样就能很明显看到层占据多大空间。有些人建议用 border，一般情况也是可以的，但问题是，有时候border 会增加元素的尺寸，border-top和boeder-bottom会破坏纵向margin的值，所以使用background更加安全些。

另外一个经常出问题的属性是outline。outline看起来象boeder，但不会影响元素的尺寸或者位置。只有少数浏览器支持outline属性，我所知道的只有Safari、OmniWeb、和Opera。

十八.CSS代码书写样式

在写CSS代码的时候，对于缩进、断行、空格，每个人有每个人的书写习惯

以上がCSS の最適化手法のためのコード共有の一般的な例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。