CSSの詳細を詳しく解説

別のフォント サイズに設定する必要がある子要素が存在するまでは、次のように記述しても問題ありません。たとえば、次のようなタグ内です:

The cat sat on the mat.

スパンのフォント サイズを 1.2em に設定したい場合、 あなたは何する必要があるの？電卓を取り出し、1.2 を 1.4 で割った値を計算します。結果は次のようになります。

p span { font-size: 0.85714em; }

この質問は em に限定されません。パーセンテージを使用してレスポンシブな流体レイアウト Web サイトを作成する場合、そのパーセンテージはコンテナーに関連しているため、要素をコンテナーの 40% として定義したい場合、その高さは 75%、幅は 75% に設定する必要があります。 53.33333% 。
明らかに、これは非常に不便です。
ルート関連の長さ単位
フォントサイズ定義の問題を修正するために、単位rem（ルートem）が使用できるようになりました。 Rem も相対単位ですが、この固定基本値はドキュメントのルート要素 (HTML ファイルでは html 要素) のフォント サイズに対応します。前の例と同じで、フォント サイズ 10px もルート要素のサイズに設定されているとすると、CSS は次のように記述すれば OK です:

p { font-size: 1.4rem; } p span { font-size: 1.2rem; }

これら 2 つの CSS ルールは、ルート要素のフォントサイズ、このようなコード 特に 10px や 12px などの単純な値を設定する場合は、よりエレガントでシンプルになります。これは、rem が拡張可能であることを除いて、px 値の使用と非常に似ています。
記事全体で紹介されている機能の中で、rem 機能は比較的互換性が高く、Opera Mobile を除く IE9 を含む高度なブラウザーでサポートできます。
ウィンドウ関連の長さの単位
レム単位は素晴らしいと思います。パーセンテージの問題を解決できる別の単位セットがあれば、さらに素晴らしいでしょう。これは rem に似ていますが、ドキュメントのルート要素を基準とするのではなく、デバイス ウィンドウ自体のサイズを基準とする点が異なります。
これら 2 つの単位は vh と vw で、ウィンドウ サイズに対する高さと幅です。各単位の前には、それが表すパーセンテージを示す数字が付いています。

p { height: 50vh; }

上記の例では、高さをウィンドウの高さの半分に設定しています。 1vh はウィンドウの高さのパーセンテージに相当するため、50vh はウィンドウの高さの 50% になります。
ウィンドウサイズが変わると、この値も変わります。パーセンテージと比較した場合の利点は、親コンテナに関係なく、10vw 要素が常にウィンドウ サイズの 10% になることです。
これに対応して、vh または vw の最小値に相当する vmin 単位があります。また、vmax 単位が仕様書に追加されることも最近発表されました (この時点ではまだリリースされていません)。記事）。
現在、IE9+、Chrome、Safari 6 がこの機能をサポートしています。
式の値
レスポンシブな流体レイアウトの Web サイトを作成している場合、単位が混在する問題 (グリッドの設定にはパーセンテージを使用しますが、マージンの設定には固定ピクセル幅を使用する) がよく発生します。例:

p { margin: 0 20px; width: 33%;}

レイアウトでパディングとボーダーのみが使用されている場合は、ボックスのサイズ変更を使用して解決できますが、マージンについては何もできません。より優れたより柔軟な方法は、calc() 関数を使用して、次のような異なる単位間の数学方程式を設定することです:

p { margin: 0 20px; width: calc(33% - 40px);}

これを使用して、必要に応じて幅だけでなく長さの計算も行うことができます。 calc() の中に calc() を追加できます。
この機能は IE9+ と Firefox の両方でサポートされています。Firefox は -moz- プレフィックスを追加する必要があります (バージョン 16 または 17 ではプレフィックスを追加する必要がない可能性があります)。ただし、- を追加する必要があります。 Webkit- プレフィックス。ただし、モバイル Webkit はまだサポートしていません。
フォント ライブラリからいくつかのフォントをロードします
優れたパフォーマンスが重要な場合が多く、特に市販のさまざまなモバイル デバイスでは、接続速度の違いや不確実性が生じ、この重要性がさらに反映されます。ページの読み込みを高速化する方法の 1 つは、外部ファイルの数を減らすことです。この目的のために、@font-face の新しい属性である unicode-range が生まれました。
この属性はunicode-range（エンコード範囲）で、エンコードフォントのパラメータ範囲を表します。外部ファイルをロードする場合、フォント ライブラリ全体ではなく、使用されているフォントのみがロードされます。以下のコードは、foo.ttf フォント ライブラリから 3 つのフォントのみをロードする方法を示しています。

@font-face {font-family: foo;src: url(‘foo.ttf’);unicode-range: U+31-33;}

　　这点对于使用字体图标的页面尤其有用。我测试过，使用unicode-range，加载字体文件的时间平均减少了0.85秒，也不是小数目了。当然，你可能不会这么想。 
　　这个属性，目前可以在IE9+、Webkit浏览器（如Chrome和Safari）中运行。 
新的伪类 
　　单位和值都应该好好利用，但是，让我更兴奋的是选择器和伪类。完善的选择器模式，即使只有少数浏览器支持，都让我兴奋不已。引用乔布斯的话：你要把栅栏的里面修得和外面一样漂亮，即使别人看不到里面——因为你自己知道。 
　　我第一次使用:nth-of-type()的时候，简直是一次突破，就像我冲出了思想的桎梏。好吧，我有些夸张了。但有些新的CSS伪类，确实值得狂热一番。 
否定伪类 
　　你大概不知道 :not() 伪类的好，除非你亲自实践一番。带有参数的 :not() 其实就是普通的选择器——不是复合选择器。一组元素加上选择器 :not()，表示满足这个参数的元素会被排除出去。听起来有些复杂吧？但是实际上非常简单。 
　　假设：要对项目列表的奇数行进行选择，但是最后一行除外。如果是以前，需要这样写： 

li { color: #00F; } li:nth-child(odd) { color: #F00; } li:last-child { color: #00F; }

　　现在，通过设定:last-child作为否定伪类的参数，就可以把最后一个元素排除，这样少了一行代码，从而更加的简洁和易维护。 

li { color: #00F; } li:nth-child(odd):not(:last-child) { color: #F00; }

　　否定伪类看起来并没有什么惊人之处，你可以不用它，但是它还是挺实用的。我曾经把它用在基于Webkit的项目当中，优势还是挺明显的。说实话，它是我最喜欢的伪类之一。 
　　是的，我有最喜欢的伪类。 
　　在本文提到的特性当中，否定伪类是兼容性最好的，它被IE9+和高级浏览器支持（不需要加浏览器产商前缀）。如果你熟悉jQuery，你可能习惯用它——版本1.0开始就有了，以及相似的not()方法。 
“适用于”伪类 
　　:matches() 伪类可以用普通的选择器、复合选择器、逗号隔开的列表或任何的选择器组合作为参数。太棒了！但是，它能做什么？ 
　　:matches() 伪类最强大的地方就是聚合多行选择器。例如，要选择父容器里面其中几个不同子容器里面的p元素，在这之前，代码或许会写成这样： 

.home header p,.home footer p,.home aside p {color: #F00;}

　　有了:matches()伪类，就可以把共同点提取出来，缩减代码量。该例子里面，选择器的共同点是以home为起点、以p为终点，所以可以用:matches()把中间的所有元素集合起来。是不是有些困惑？看看代码就明白了： 

.home :matches(header,footer,aside) p { color: #F00; }

　　这其实是CSS4的一部分（确切地说，是CSS选择器第四等级），这份规范文档还提到将会有类似的语法（以逗号隔开的复合选择器）应用于:not()伪类。兴奋ing！ 
　　目前，:matches()可以在Chrome和Safari浏览器中运行，但是要加上前缀-webkit-，Firefox也支持，但是要按照旧的写法:any()，同时要加上-moz-前缀。 

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