単純なCSSの詳細に惚れ込むと、重要ではないものの、効率性が向上する可能性がある

CSS の将来は非常に楽しみです。一方では、まったく新しいページレイアウト方法であり、他方では、クールなフィルター、色、その他の視覚効果です。これらの CSS は開発者に求められており、雑誌やブログ記事のいたるところで紹介されています。
これらの機能が CSS の華やかな側面だとしたら、セレクター、単位、関数 (メソッド) など、あまり目立たない CSS のシンプルな側面を見てみましょう。これらは面倒なものだ、とよく言いますが、私が言いたいのは、これらは素晴らしい仕事をするということであり、それを皆さんに伝えたいのです。
さて、最も効果的な控えめな CSS の詳細、つまり派手な CSS 効果に比べると目立たない詳細を見てみましょう。彼らの中には、しばらく前から存在しているが、もっと知られるべきものもあれば、新参者もいる。目立たないけれども、ささやかな方法で私たちの仕事の効率を向上させることができます。

相対単位 賢明で先見性のある開発者は、em やパーセンテージなどの相対単位をすでに使用しているため、要素の継承によりサイズを計算するために計算機を使用することの問題点を理解しています。たとえば、ページ上のフォントのグローバルサイズを設定し、相対単位を使用してページ上の他の要素を定義するのが一般的です。 CSS はおそらく次のようになります。

コードをコピー

コードは次のとおりです。

html { フォントサイズ: 10px; } p { フォントサイズ: 1.4em; }

これは、子要素に異なるフォントサイズが必要になるまで、たとえば次のタグのように正常に機能します。
猫はマットの上に座った。
スパンのフォントサイズを 1.2em に設定したい場合は、何をする必要がありますか?電卓を取り出して、1.2 を 1.4 で割って計算します。結果は次のとおりです。

コードをコピー

コードは次のとおりです。

p スパン { フォントサイズ: 0.85714em; }

この問題は EM に限ったことではありません。パーセンテージを使用してレスポンシブで流動的なレイアウトの Web サイトを作成する場合、パーセンテージはコンテナーに対して相対的になります。したがって、要素をコンテナーの 40% に定義する場合、その高さは 75%、幅は 53.33333% に設定する必要があります。
明らかに、これは不便です。

ルート関連の長さの単位 フォントサイズの定義に関する問題を修正するために、単位 rem (ルート em) を使用できるようになりました。 rem も相対単位ですが、ドキュメントのルート要素 (HTML ファイルでは html 要素) のフォントサイズである固定の基本値に対応します。前の例のように、ルート要素のフォントサイズが 10px に設定されていると仮定すると、CSS は次のように記述されます。

コードをコピー

コードは次のとおりです。

p { フォントサイズ: 1.4rem; } p span { フォントサイズ: 1.2rem; }

どちらの CSS ルールもルート要素のフォントサイズに相対的であるため、特に 10px や 12px などの単純な値を設定する場合は、コードがよりエレガントでシンプルになります。これは、rem がスケーラブルであることを除いて、px 値を使用するのと非常に似ています。
この記事で紹介した機能のうち、rem 機能は比較的互換性が高く、Opera Mobile を除く IE9 を含む先進的なブラウザでサポートできます。

ウィンドウ関連の長さの単位 rem 単位はすばらしいと思いますが、パーセンテージの問題を解決できる別の単位セットがあればさらにすばらしいでしょう。 rem に似ていますが、ドキュメントのルート要素に対する相対値ではなく、デバイスウィンドウ自体のサイズに対する相対値です。
これら 2 つの単位は vh と vw であり、ウィンドウサイズに対する高さと幅を表します。各単位の前には、パーセンテージを表す数字が付きます。

コードをコピー

コードは次のとおりです。

div { 高さ: 50vh; }

上記の例では、高さはウィンドウの高さの半分に設定されています。 1vh はウィンドウの高さのパーセンテージに相当するため、50vh はウィンドウの高さの 50% になります。
ウィンドウのサイズが変更されると、この値も変更されます。この相対パーセンテージの利点は、親コンテナーを気にする必要がないことです。親コンテナーが何であっても、10vw 要素は常にウィンドウサイズの 10% になります。
したがって、vh または vw の最小値に相当する vmin 単位があり、最近、仕様書に vmax 単位が追加されることが発表されました (ただし、この記事の投稿時点ではまだ利用できません)。
現在、IE9+、Chrome、Safari 6 がこの機能をサポートしています。

式の値 レスポンシブで流動的なレイアウトで作業している場合、混合単位の問題に遭遇することがよくあります。つまり、グリッドを設定するためにパーセンテージを使用し、余白を設定するために固定ピクセル幅を使用するという問題です。のように：

コードをコピー

コードは次のとおりです。

div { マージン: 0 20px; 幅: 33%;}

レイアウトでパディングとボーダーのみを使用している場合は、box-sizing を使用して解決できますが、マージンについては何もできません。より優れた、より柔軟なアプローチは、calc() 関数を使用して、次のように異なる単位間の数式を設定することです。

コードをコピー

コードは次のとおりです。

div { マージン: 0 20px; 幅: calc(33% - 40px);}

幅だけでなく長さの計算にも使用できます。必要に応じて、calc() 内に calc() を追加できます。
この機能は IE9+ および Firefox でサポートされています。Firefox では -moz- プレフィックスを追加する必要があります (バージョン 16 または 17 ではプレフィックスが不要になる場合があります)。Chrome と Safari でもサポートされていますが、-webkit- プレフィックスを追加する必要があります。ただし、モバイル Webkit はまだサポートされていません。

フォントライブラリから部分的なフォントを読み込む 優れたパフォーマンスは常に重要です。特に、市場にはさまざまなモバイルデバイスが存在するため、接続速度に違いや不確実性が生じます。ページの読み込みを高速化する 1 つの方法は、外部ファイルの数を減らすことです。この目的のために、@font-face の新しい属性 unicode-range が作成されます。
この属性は unicode-range であり、エンコードされたフォントのパラメータ範囲を表します。外部ファイルを読み込む場合、フォントライブラリ全体ではなく、使用されているフォントのみが読み込まれます。次のコードは、foo.ttf フォントライブラリから 3 つのフォントのみをロードする方法を示しています。

コードをコピー

コードは次のとおりです。

@font-face {フォントファミリ: foo;src: url('foo.ttf');unicode 範囲: U+31-33;}

これは、フォントアイコンを使用するページで特に便利です。テストしたところ、unicode-range を使用するとフォントファイルの読み込み時間が平均 0.85 秒短縮されることがわかりました。これは決して小さな値ではありません。もちろん、そうは思わないかもしれません。
このプロパティは現在、IE9+ および Webkit ブラウザー (Chrome や Safari など) で動作します。

新しい疑似クラス 単位と値はどちらも活用する価値がありますが、セレクターと疑似クラスの方が興味深いです。たとえ少数のブラウザしかサポートしていなくても、よく開発されたセレクターパターンのアイデアに興奮しています。スティーブ・ジョブズの名言を引用します。「たとえ誰も中が見えなくても、フェンスの内側を外側と同じくらい美しくしなさい。なぜなら、あなたは内側に何があるか知っているから。」
:nth-of-type() を初めて使用したとき、それはまるで自分の思考の束縛から解放されたような画期的な出来事でした。はい、ちょっと誇張してしまいました。しかし、新しい CSS 疑似クラスの中には、興奮する価値のあるものもあります。

否定疑似クラス :not() 疑似クラスの利点は、実際に試してみるまでわからないでしょう。パラメータ付きの :not() は単なる通常のセレクターであり、複合セレクターではありません。要素のグループとセレクター not() は、このパラメータを満たす要素が除外されることを意味します。ちょっと複雑そうですね。しかし、実際は非常に簡単です。
前提: 最後の行を除く、項目リストの奇数行を選択します。以前の場合は、次のように記述する必要があります。

コードをコピー

コードは次のとおりです。

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

ここで、否定疑似クラスのパラメータとして :last-child を設定すると、最後の要素を除外できるようになり、コードが 1 行節約され、より簡潔で保守しやすくなります。

コードをコピー

コードは次のとおりです。

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

否定疑似クラスは大したことではないように思えるかもしれませんし、それを使わなくても済むかもしれませんが、それでも便利です。私は Webkit ベースのプロジェクトでこれを使用しましたが、その利点は明らかです。正直に言うと、これは私のお気に入りの疑似クラスの 1 つです。
はい、お気に入りの疑似クラスがあります。
この記事で説明した機能のうち、否定疑似クラスは最も互換性が高く、IE9+ 以降のブラウザーでサポートされています (ブラウザーベンダープレフィックスは不要)。 jQuery に詳しい方なら、おそらく慣れているでしょう。jQuery は、同様の not() メソッドとともにバージョン 1.0 から存在しています。

「適用対象」疑似クラス
:matches() 疑似クラスは、通常のセレクター、複合セレクター、コンマ区切りのリスト、またはセレクターの任意の組み合わせを引数として受け取ることができます。素晴らしい！しかし、何ができるのでしょうか?
:matches() 疑似クラスの最も強力な点は、複数のセレクターを集約できることです。たとえば、親コンテナー内の複数の異なる子コンテナー内の p 要素を選択するには、その前に、次のようにコードを記述します。

コードをコピー

コードは次のとおりです。

.home ヘッダー p、.home フッター p、.home アサイド p {color: #F00;}

:matches() 疑似クラスを使用すると、共通ポイントを抽出し、コードの量を削減できます。この例では、セレクターの共通点は home で始まり p で終わることです。そのため、:matches() を使用してその間のすべての要素をグループ化できます。ちょっと混乱していますか？コードを見れば理解できるでしょう:

コードをコピー

コードは次のとおりです。

.home :matches(ヘッダー、フッター、アサイド) p { color: #F00; }

これは実際には CSS4 (正確には CSS セレクターレベル 4) の一部であり、仕様書には同様の構文 (コンマ区切りの複合セレクター) が :not() 疑似クラスにも適用されることも記載されています。興奮した！
現在、:matches() は Chrome および Safari ブラウザで動作しますが、-webkit- というプレフィックスを付ける必要があります。Firefox でもサポートされていますが、古い方法 (any() と記述し、-moz- というプレフィックスを付ける必要があります) で記述する必要があります。

これらのシンプルな CSS の詳細が気に入りますか?
この記事で説明した機能の最も優れた点は、些細なセレクターから複雑なセレクター、レスポンシブな Web サイトを構築するという新たな課題に至るまで、実際の問題を解決できることです。実際、私はあらゆる機能が、最も平凡なプロジェクトでも使用されることを期待しています。
フィルターなどの新機能は直感的で派手かもしれませんが、私はむしろ奥深くに隠された実用的な小技を発見したいと思っています。
積極的な探索の過程で、それぞれの機能があなたのキャリアをよりスムーズにすることができます。これについて考えてみると、面倒に感じることはありません。

<<: docker pruneコマンドは、あまり使用されないデータを定期的にクリーンアップするために使用できます。

>>: JavaScript フロー制御 (ループ)