8最先端のCSS機能（およびそれらの使用方法）

CSSは絶えず進化しており、仕様をWebデザイナのツールセットにさらに強力な武器にするために、刺激的な新機能が追加されました。

CSSグリッドは、前に見られなかった新しいレベルにレイアウトを取ります。メディアクエリは、新しいアクセシビリティプロパティでレベルを移動します。可変フォントは、Scroll SnappingがJavaScriptの必要性を排除します。私たちのクールをチェックしてください CSSアニメーション 例を見るための例を確認してください。または、コードなしでサイトを構築するにはこれらを試してください ウェブサイトのビルダー 。

クリエイティブに対応する人のために、Photoshopスタイルのデザイン効果を導入するためのユニークなレイアウトやブレンドモードとフィルタのホストのためのCSSシェイプがあります。最新のビルドのこれらの必須機能を使用する方法を調べるには、「読み」を参照してください。しかし、覚えておいて、複雑なウェブサイトはあなたが必要なことを意味します ウェブホスティング あなたのニーズをサポートできるサービス。

01.カスタムプロパティ

SASSのようなプリプロセッサを使用するか、実際にJavaScriptのようなプログラミング言語を使用している場合は、必ずしも変数の概念に精通している - コード全体を通して再利用に定義されている値。カスタムプロパティは、プリプロセッサを必要とせずに、私たちのCSSでこれを行うことを可能にします。変数は、ルートレベル（グローバル変数の作成）またはセレクタ内でスコープされています。その後、構文を使用して呼び出すことができます var（ - > - myvariableName）。 たとえば、呼び出された変数を設定することができます --primaryColor. このような：

 / *ルート要素の（グローバル
可変）* /
：ルート{
 -  -primaryColor：＃F45942;
}
/ *セレクタにスコープ* /
。my-component {
 -  -primaryColor：＃4171F4;

これで、その変数をプロパティ値として使用できます。

 H1 {
色：var（--primaryColor）;

カスタムプロパティは継承されています。これには非常に有用な影響があります。そのうちの1つがテーマをしています。上記の例を取ります：私達はグローバル変数を定義することができます（＃F45942 - 明るいオレンジ色の赤）。 --primaryColor. ルートレベルでは、この変数を使用するすべてのインスタンスは、値が赤になります。しかし、別の値（＃4171F4 - ミディアムブルー）のセレクタ内で同じ変数を再定義しています。だから私たちが使うすべてのインスタンスのために --primaryColor. そのセレクタ内では、計算値は青になります。

デフォルト設定

変数のスカッピングは素晴らしい機能ですが、機会にあなたを捕まえるかもしれません！まだ定義されていない変数を使用しようとすると、結果の値は、カスケードをさらに定義した変数ではなく、ブラウザのデフォルト、または継承された値になります。場合によっては、デフォルト値を設定することが適切かもしれません。

 H1 {
色：var（ -  -primaryColor、Blue）;

カスタムプロパティはプリプロセッサ変数とどのように異なるのですか？

カスタムプロパティは、いくつかの重要な方法でプリプロセッサ変数と異なります。プリプロセッサ変数は、コードがブラウザに送信される前にコンパイルされます。ブラウザは、値が変数であることを見たことがない、それは最終結果だけを見るだけです。カスタムプロパティはブラウザで計算されます。モダンな開発者ツールでそれらを調べて、変数を変更して解決された値を見てください。それらは動的変数です。つまり、それらの値はCSS内、または実行時にJavaScriptで変更できます。

プリプロセッサ変数とは異なり、カスタムプロパティはセレクタ名、プロパティキー、またはメディアクエリ宣言内で使用することはできません - CSSプロパティ値のみ。 CSSプリプロセッサーはまだたくさんの利点を持っているので、それらがもう少しの間に突き出ているのを見る可能性がありますが、彼らはより頻繁にカスタムプロパティと組み合わせて使用​​されるでしょう。

02.フィーチャクエリ

機能クエリは、ブラウザがCSSファイル内で特定のCSSプロパティ値の組み合わせをサポートするかどうかをテストする方法です。彼らは、Modernizrのような特徴検出ライブラリの必要性を事実上削除します。構文はメディアクエリと似ています.AT-Ruleを使用します。 @supports. プロパティ値のペアを続けて、ブラウザが指定された条件を満たしている場合に実行されるコードを折り返します。

機能クエリは最新のブラウザではよくサポートされていますが、比較的新しく、1つの "Gotcha"は、サポートをテストすることができる一部のブラウザが機能クエリ自体をサポートしない可能性があります。これを処理するための最良の方法は、最初にフォールバックスタイルを提供することです（フィーチャクエリの外側）、その内部のブラウザをサポートするための機能強化をラップします。 @supports. ルール。

注意してください、機能クエリは控えめに使用する必要があります。 CSSの素晴らしい機能の1つは、ブラウザが理解できないプロパティまたは値を単に無視することです。視覚的なバグを引き起こす可能性がある場合は、機能クエリを採用することが最善です。そうしないと、たくさんの追加の作業を促してください。

機能クエリの使用方法

単一のプロパティ値のサポートをテストするには、まずフォールバックを提供できます。この例では、グリッドレイアウトをサポートしていないブラウザのFlexBoxのフォールバックを提供しています。

 .my  -  component {
表示：グリッド;
}
@Supports（ディスプレイ：グリッド）{
。my-component {
表示：Flex;
}

03.メディアクエリ

ビューポートの幅と高さを検出するためにメディアクエリを使用してメディアの種類（最も一般的にはスクリーンまたは印刷）を検出することに慣れているでしょう。レベル5のメディアクエリの指定は、いくつかのブラウザですでにサポートされているいくつかの新しいメディア機能を（オプションで）テストするためのいくつかの新しいメディア機能をもたらします。これらはアクセシビリティに大きな利益をもたらします。

前庭の障害を持つユーザー、そして運動酔いに苦しんでいる人は、アニメーションや視差スクロール効果など、多くの動きを持つWebページに感謝することはできません。縮小モーションメディアクエリを使用して、縮小モーションの代替案をオプトアウトするユーザーを提供できます。

 .my要素{
アニメーション：500msの容易さを揺り動かします5。
}
@media（Prefers-Dhened-Motion：Drefice）{
.my要素{
アニメーション：なし
}

Webサイトが代替暗いテーマを提供するためにますます人気があるようになりつつあります。 prefers-colors-schemeを使用すると、ユーザーがシステム全体の好みを設定したかどうか（キーワードの暗く、光、または非優先）を設定し、それに応じて適切な配色を示します。

 / *メディアクエリ02 * /
体 {
背景：線形勾配（TO）
下、＃b5faff、＃ffe2b4）;
}
@media（Prefers-Color-Scheme：Dark）{
体 {
カラー：白。
背景：線形勾配（TO）
下、＃0C1338、＃3E3599）;
}

04.変数フォント

一般に、私たちが同じ家族のさまざまなフォントをWebページに含めたい場合は、同じ数のフォントファイルをロードする必要があります。ロードするフォントファイルが多いほど、パフォーマンスに影響を与えると、ページに追加される重みが増えます。そのため、通常、最大3つまたは4つのフォントファイルをロードするのは通常（パフォーマンス予算に応じて）。

変数フォントはそれをすべて変更します。彼らは私たちがフォントファミリ全体のために単一のフォントファイルをロードすることを可能にします。このファイルは通常単一のフォントより大きくなりますが、さまざまな重みやスタイルを利用したい場合は、変数フォントがより優れたソリューションです。フォント家族全体を購入した場合は、安全に隠すことを忘れないでください。 クラウドストレージ だからあなたはあなたのファイルを失うことはありません！

バリエーション軸

それだけでなく、変数フォントを使用すると、私たちはフォント重みの小さなサブセットに限定されません。通常のフォントを使用する場合、利用可能なフォントの重みは100の倍数で与えられます。通常、400は、異なるファミリをもたらします。変数フォントは変動軸を持ち、これは私達にフォント重みのようなプロパティの範囲の値を提供します。フォントは1から900の軸を持つかもしれません、それは私達に900の異なる重みへのアクセスを提供します！

変動軸は単なる重量に限定されない。可変フォントは、X高さ、傾斜、セリフ長さ、およびコントラストのための異なる軸を持つことができます（ほんの数例を選択するには） - 単一のフォントファイルが私たちに何百も、または何千ものバリエーションにアクセスすることができることを意味します。私たちはこれらのプロパティをアニメートすることさえでき、いくつかの本当にクールな効果を得ることができます。マンディマイケル（ https://codepen.io/mandymichael. この制限を本当にテストするクリエイティブデモの全体的な負荷を持っています。

変数フォントのブラウザサポートはかなり良いです。多くのフォントファウンドライは、今すぐ使用を開始できる新しい変数フォントを積極的に開発しています - 特により完全に機能しているフォントファミリのためのものです。変数フォントで再生を始めようとしたばかりの場合は、変数フォントプレイグラウンドサイトが多数あります。

変数フォントを使用したい場合は、最新のオペレーティングシステムを使用していることを確認する必要があります - 古いOSSでは動作しません。

フォントバリエーション - 設定

私達はフォントの体重を簡単に変えることができますが フォント - ウェイト CSSプロパティ、 フォントバリエーション - 設定 フォントの異なるバリエーション軸にフルアクセスできる新しいプロパティです。これらには、登録軸とカスタム軸の両方が含まれます。

登録軸

さまざまなCSSプロパティに対応する5つの異なる登録軸があります。これらのそれぞれは、「軸タグ」として知られているものを持っています。登録軸は次のとおりです。 w （フォントウェイト）、 wdth. （フォントストレッチ）、 sl sl （フォントスタイル：斜め/角度）、 イタリア （フォントスタイル：イタリック）、 opsz （フォント光学サイジング）。 CSSプロパティまたはでこれらの軸にアクセスできます。 フォントバリエーション - 設定 。

これらの軸は必ずしもすべての変数フォントに含まれるわけではありません（一部または2軸は1つか2つの場合にしか持てません）が、最も一般的なものになる可能性があります。

カスタム軸

カスタム軸は、フォントデザイナーによって含まれているオーダーメイドの軸であり、まったく何かになる可能性があります。それらは、（例えば）X高さ、X高さ、さらには回転のように、より創造的なものでさえも含めることができます。

両方のタイプの軸は4文字のタグとして表現する必要があります。登録軸は小文字でなければなりませんが、カスタム軸は大文字です。どちらもfont-variation-settingsプロパティで組み合わせることができます。 font-variation-settingsはアニメート可能で、いくつかの非常にクールなUIエフェクトを可能にすることができます。アイコンフォントを使用して、非常に興味深い実験が生まれました。

05.グラフィカル効果

PhotoshopやIllustratorのようなデザインツールに精通している場合は、ブレンドモードと画像に異なるエフェクトを作成するために使用できる方法に注意してください。ブレンドモードの動作方法は、数式を使用して2つ以上のレイヤを一緒にブレンドして各ピクセルの結果の値を計算することです。レイヤーは何でも - 画像、グラデーション、または平らな色です。いくつかのブレンドモードは、暗くなる結果（例えば、層の画素値に乗じる）、いくつかのより軽いもの（例えばスクリーンおよびオーバーレイ）を生成する。しかし、それらを使用するために数学を理解する必要はありません。異なるブレンドモードで遊ぶことは、さまざまな層と組み合わされたときにそれらのどれが望ましい結果を生み出すのに良い感触を与えることができます。

CSSのプロパティを使って ミックスブレンドモード そして バックグラウンドブレンドモード 、ブラウザでPhotoshopのような画像効果を達成できます。どちらのプロパティも同じ値を取りますが、わずかに異なる動作をします。

バックグラウンドブレンドモード

バックグラウンドブレンドモード ターゲティングしている要素の背景レイヤーを一緒にブレンドします。私たちの要素は背景画像、色、勾配を持つことができ、それらはすべて前景のコンテンツに影響を与えずに互いにブレンドされるでしょう。に複数の値を指定できます バックグラウンドブレンドモード 、それぞれの背景レイヤに1つ。

 .my要素{
背景：URL（#MyURL）、
線形勾配（45deg、RGBA（65,68、
244,1）、RGBA（203,66,244,0.5）））
RGBA（244,65,106,1）。
背景サイズ：カバー。
背景 - ブレンドモード：画面、
かける;

ミックスブレンドモード

ミックスブレンドモード フォアグラウンドとバックグラウンドコンテンツや疑似要素を含む、要素がその親とその兄弟とブレンドする方法に影響します。重なった擬似要素（::前後）をブレンドすることによって、いくつかの興味深い創造的効果を達成することができる。

 .my要素{
背景：RGB（244,65,106）。
ミックスブレンドモード：乗算。

CSSフィルタ

CSSフィルタを使用して、 フィルタ プロパティとフィルタ機能値ブレンドモードとは異なり、それらはターゲット化している要素に直接グラフィカル効果を適用し、要素に複数のフィルタが適用されることがあります。

グレースケールに変換します

ブレンドモードに頼る以上の制御程度のコントロールを持つ要素の色を操作できます。フィルタは画像をグレースケールに変換し、明るさ、コントラスト、彩度を調整し、要素をぼかし、またはドロップシャドウを追加します。彼らはまたアニメーション化することができ、そしてホバー効果をもっと見栄えがよくなります。

SVGフィルタ

CSSフィルタは実際にはSVGフィルタの単純化されたバージョンです。 CSS フィルタ 財産はAを取ります URL（） 機能を使用すると、SVGフィルタへのURLを渡すことができます。 SVGフィルタは非常に強力であり、いくつかの信じられないほどのイメージ効果を可能にします - しかし、それらはCSSフィルタ機能よりもはるかに複雑です。あなたがあなた自身のカスタムSVGフィルターをコーディングするためのダイビングに興味があるなら、Sara Soueidanはコドロップの素晴らしい記事シリーズを持っています。記事の記事をチェックしてください https://tympanus.net/codrops/2019/01/15/svg-filters-101/

クリッピングとマスキング：長方形を超えて

私たちはWeb上のボックスに対処するために使用されますが、すべてが長方形でなければならないわけではありません！クリッピングとマスキングは同じコインの2つの側面であり、背景がスルーするように要素のさまざまな部分を隠して表示するためのさまざまな方法です。これは私達に私達のデザインに興味深く創造的な形を紹介する力を与えます。

クリップパス

the クリップパス（） プロパティは、パスを定義することによって要素を「切り取る」ことを可能にします。基本的な形状関数がいくつかかります。 inset（）、circle（）、ellipse（）、またはpolygon（） これにより、パスを定義するためにXY座標のペアを使用してより複雑な切り欠き形状を作ります。あるいは、我々はまたSVGパスを使用して渡すことができます 道（） 関数、または使用してください URL（） SVGパスIDを提供する。

経路の中にはありません

要素をクリッピングすると、定義したパスの外側にすべてをクリップしますが、要素自体はまだ長方形です。クリップパスの境界から伸びているコンテンツがある場合は、切り取られます - 形状の内側に折り返されません。

マスク画像

マスク画像 画像（SVGまたは透明PNG）またはグラデーションをマスクとして、画像の一部を表示および非表示にすることができます。 unl クリップパス マスクソースがパスである必要がないので、マスキングを使用して画像にテクスチャを追加することができます - 透明度の度合いを可能にします。

06. CSS形状

CSSシェイプの仕様では、浮遊幾何学的図形の周囲にテキストを折り返し、いくつかの興味深い雑誌のようなレイアウトを作成できます。これを使用して可能になります 形状外 財産。に似ている クリップパス 、このプロパティを基本的な形状関数に与えることができます circle（）、ellipse（）、inset（）、polygon（） または、SVGパスへのURL、そして実際には2つの作業は非常によく調和しています！ 形状外 テキストを効果的に包みますが、フローティング要素には影響しません。テキストがイメージまたはフロートオブジェクトの周りを折り返しているように見えてほしい場合は、同じ値を使用できます。 クリップパス 。使用する 形状 形状経路とそれを包むコンテンツの間に空白を追加する。見てみましょう ＆amp; n n CSSの形状をどのように使用してテキストを中央イメージの周囲にラップするかを確認するサイト。

FirefoxにはAがあります シェイプパスエディタ Dev Toolsパネル内では、複雑な形状を処理するのに特に便利です。ただし、注意して使用してください。テキストの段落の前端を包むことは芸術的な効果に最適ですが、ユーザーエクスペリエンスには必ずしも素晴らしいとは限りません。複雑なギザギザ形状は、テキストのブロックを読みにくくすることができます。重要なコンテンツの場合は、明確にしてください。

07.スナップをスクロールします

多くのWebサイトは、JavaScriptライブラリを利用して、ユーザーがスクロールするにつれてコンテンツの「Snaps」のスリック、ネイティブアプリのようなスクロール体験を提供します。今、スクロールスナップ仕様では、CSSファイル内でこの権利を実行できます - あなたのページを吸い込むために重いJSモジュールにインポートする必要がありません！

スクロールスナップを実装するには、スクロールコンテナとして機能する要素が必要です。コンテナの直接の子は、スナップされるポイントを決定し、スナップ領域内でさまざまな方法で整列させることができます。

別の新しいCSSプロパティ値と組み合わせると、スクロールスナップはさらに効果的です。 位置：スティッキー 。この位置値は、そのコンテナ内でスクロールしながら、JavaScriptで以前に可能な別の動作を指定して、要素を指定された位置にスティックします。このスクロールスナップを位置付けてチェックアウトします。 スティッキーとInterSectionObServerの例 。

08. CSSグリッドとレイアウト

フロントエンド開発者は、最近最近のFlexboxが使用可能なツールを使用してハッキングされたレイアウトを持っています。これは、多くの最近のグリッドシステムが使用されています。しかしFlexboxは厳格なグリッドを構築するために設計されていませんでした - その目的は柔軟性です！

CSSグリッドは、2次元レイアウト用に設計されている最初の仕様です。これにより、レイアウトの構築や行軸と列軸の両方に項目を配置することができます。グリッドで応答的なレイアウトを構築することはCalc（）を必要とせず、負のマージンでハッキングします。秘密の武器はFRユニットです - グリッド専用の新しいユニットです。 FRユニットは、利用可能なスペースの割合としてグリッドトラック（行と列）をサイズします。それはあらゆる固定トラック、gutter、およびコンテンツを考慮に入れる、それに応じて残りのスペースを配布します。 Jen Simmonsは、グリッドがUSHERの新しいWebレイアウトの新しい時代を説明するために「組み込み型Webデザイン」という用語を造りました。

CSSグリッドの使い方

グリッドには、グリッドに設定されている表示プロパティ値がグリッドに設定されている要素が必要です.Gridコンテナとして機能します。グリッドコンテナの直接の子は、グリッドに配置できる項目です。私たちは特性を使います グリッドテンプレート列 そして グリッドテンプレート列 グリッドのトラック（行と列）を定義する 列ギャップ そして 列隙 gutters（トラック間のギャップ）を定義する。

グリッド{
表示：グリッド;
grid-template-columns：report（4,1fr）;
grid-template-rows：repeat（4,200px）;
ギャップ：20px;

私たちはを使っています 繰り返す（） Longhandの代替として、コードをより簡潔にする機能（例えば、 グリッドテンプレート列：1fr 1fr 1fr 1fr ）。この例では短距離を使用しています ギャップ ために 列隙 そして 列ギャップ 。

上記のコードは、FRユニットを使用して、各100ピクセルの高さ、および4つの列トラック、4列トラックを与えます。

これがグリッドトラックを作成する唯一の方法ではないことに注目する価値があります。暗黙のトラックは、グリッド項目を配置することによっても作成できます。グリッドを使用している場合は、グリッドを使用しているのであれば、これについて少し読むことは便利です。

グリッド行番号を参照することで、グリッド上にアイテムを配置できます。これは各トラック間に座る数値行です。ここでは、短距離を使用しています グリッド列 そして グリッド列 ために グリッド列始動 、 グリッド列終了 、 グリッド行スタート そして グリッド列終了 。これらは、そのアイテムが各軸上で開始して終了する必要があるブラウザに指示します。

 .Item {
グリッド列：1/4;
グリッド行：2;

グリッドは私達にアイテムを配置するためのさまざまな方法で私達に提供されます：我々は代わりに私達のグリッド線を命名することができます：

グリッド{
表示：グリッド;
グリッドテンプレート列：[イメージスタート] 1FR
 1fr 1fr [image-start] 1fr;
グリッドテンプレート行：200ピクセル[イメージスタート]
 200px 200px [image-end] 200px;
ギャップ：20px;

あるいは、 グリッドテンプレートエリア プロパティは、テキストでグリッドレイアウトを「描く」ことを可能にします。

グリッド{
表示：グリッド;
grid-template-columns：report（4,1fr）;
grid-template-rows：repeat（4,200px）;
ギャップ：20px;
グリッドテンプレート - エリア：
'。 。 。 。」
「画像画像画像」
「画像画像画像」
'。 。 。 。

これらの方法のどちらかを使用して、グリッド項目を配置するときに対応するグリッド領域を参照することができます。

 .Image {
グリッドエリア：画像;

この記事はもともとCreative Web Design Magazineで公開されました ウェブデザイナー 。 今問題290を購入してください。

• 2019年に10件のCSSフレームワーク
• CSSを使用してSVGにアニメーションを追加する方法
• 2019年に賢く働くのを助けるための52ウェブデザインツール