2019年の7つの驚くべき新しいCSSテクニック

公開: 2019-05-01

これは、キャリアオプションとしてWeb開発を選択する適切な時期です。 Webデザイナーと同じように、Web開発者も、新しいCSS手法を試し、CSSでできることの限界を押し上げる方法に魅了されました。

ここでは、クリエイティブなデザインに取り入れられている新しいCSSテクニックと仕様全体を見ていきます。よく説明されているCSSを使用すると、デザインのほぼすべての側面を制御できます。また、よりクリーンで一貫性のあるコードを使用して、全体的なユーザーエクスペリエンスを向上させることができます。

1.頭文字

最初の文字はCSSプロパティであり、要素の最初の文字を選択し、文字が占める行数を指定します。ほとんどの場合、それは印刷媒体や情報サイト、ニュースサイトで使用され、段落の最初の文字が残りのコンテンツよりもはるかに高くなっています。

initial-letterプロパティは、定型化されたドロップキャップを作成するために必要な行数とフォントサイズの両方を自動的に調整します。頭文字は次の値を承認します。

<number>は、負の値が受け入れられない、文字が占める行数を示します。
normalは、値をカスケードから継承でき、最初の文字にスケーリング効果が適用されていない場合に値をリセットする場合に役立ちます。
<integer>は、サイズが事前設定されている場合に文字が沈む行数を決定します。値はゼロより大きくなければなりません。値が指定されていない場合、サイズ値が複製され、最も近い正の整数にフロアされます。

::first-letter pseudo-elementを使用して、頭文字としてフォーマットされる文字を選択できます。 ::first-letter pseudo-elementは、display：inlineを持つ要素の最初の文字を選択しませんが、block、table-cell、table-caption、またはlist-itemの表示値を持つ要素に対してのみ機能します。。

[xhtml]
<！DOCTYPE html>
<html>
<頭>
<スタイル>
p {
フォントファミリー：セリフ;
フォントサイズ：20px;
margin-bottom：-15px;
}
h1 {
フォントファミリー：サンセリフ;
フォントサイズ：3.1em;
色：黒;
}
体 {
パディング：10px;
}
div {
幅：550px;
行の高さ：25px;
}
p：first-of-type：first-letter {
背景色：黒;
色：白;
フロート：左;
フォントサイズ：50px;
マージン右：10px;
マージントップ：7px;
パディング：18px;
ボックスシャドウ：0 0 10px-2px黒;
}
</ style>
</ head>
<本体>
<h1>頭文字について</ h1>
<div>
<p>真のマスターになることができるのは、彼の全力と魂を持って大義に専念する人だけです。このため、習得にはすべての人が必要です」</ p>
<p>「人間と彼の運命に対する懸念は、常にすべての技術的努力の主な関心事を形成する必要があります。図表と方程式の中でこれを決して忘れないでください」</ p>
</ div>
</ body>
</ html>
[/ xhtml]

Initial letter

2.可変フォント

可変フォントは、OpenType仕様の一部として定義された新しい機能セットを表し、フォントファイルに可変フォントと呼ばれるフォントの複数のバリエーションを1つのファイルに含めることができます。実際には、@ font-face参照を1つだけ使用してフォントファイルに含まれる変数にアクセスできます。また、可変フォントを使用すると、フォントスタイルの遷移、カスタムフォントスタイル、アニメーション化などの機能を使用できます。可変フォントを使用する利点は、使用可能なすべてのスタイル、太さ、幅にアクセスできることです。

可変フォントは、バリエーションの軸を介してバリエーションを定義し、5つの標準軸があります。

ital：italic軸は、有効または無効になっているため、動作が異なります。間にはありません。値は、フォントスタイルのCSSプロパティを使用して設定できます。また、font-synthesis：noneを導入することにより、ブラウザが誤ってバリエーション軸と合成されたイタリックを適用するのを防ぎます。
wght：フォントの太さを制御し、font-weightCSSプロパティを使用して値を設定できます。
wdth：フォントの幅を制御し、値はfont-width CSSプロパティを使用して設定できます。CSSではfont-stretchプロパティを使用して、フォント幅をパーセンテージ値で設定できます。フォントの外側の値を指定すると、エンコードされたドメインの場合、ブラウザはフォントを最も近い許容値にします。
opsz：オプティカルサイジングとは、フォントのオプティカルサイズを変更する方法を指し、CSS font-optic-sizingを使用して値を設定できます。オプティカルサイズの値は、フォントサイズに応じて自動的に適用されますが、フォントバリエーションを使用して操作できます。 -settings.font-optic-sizingを使用する場合、許可される値はautoまたはnoneであり、font-variation-settingsを使用する場合、数値が提供されます。
slnt：フォントの傾きを制御し、フォントスタイルのCSSプロパティを使用して値を設定できます。数値範囲として表現することで可変であり、その軸に沿ってフォントを変更できます。

@ font-faceでの可変フォントの使用– Webで可変フォントを使用する場合、これには、可変フォントファイルを示す@ font-faceルールの定義が含まれます。可変フォントを見つけることができる2つのリンクがあります：axis-praxis.orgとv -fonts.com。

[xhtml]
<！DOCTYPE html>
<html>
<頭>
<title>可変フォントについて</ title>
</ head>
<スタイル>
@ font-face {
font-family： 'Avenir Next Variable';
src：url（ 'https://cdn.rawgit.com/Monotype/Monotype_prototype_variable_fonts/f8067a0e/AvenirNext/AvenirNext_Variable.ttf'）format（ 'truetype'）;
}
html {
font-family： 'Avenir Next Variable'、sans-serif;
}
p {
font-variation-settings： 'wght' 630、 'wdth' 88;
}
</ style>
<本体>
<h1>可変フォントについて</ h1>
<h2>可変フォントについて</ h2>
<p>
「どんな知的な愚か者も物事をより大きく、より複雑にすることができます…それは天才のタッチを必要とします–そして反対の方向に動くために多くの勇気が必要です。」
</ p>
</ body>
</ html>
[/ xhtml]

Variablefonts

3.論理プロパティと値

論理プロパティと値は、論理方向とディメンションマッピングを介して外観を制御できるようにする論理プロパティと値を導入するCSSモジュールです。論理プロパティと値は、ブロックやインラインなどの用語を使用して、それらが流れる方向を説明します。論理プロパティと値の仕様は、論理関係における物理値のマッピングを特徴づけます。

インラインディメンション–使用される書き込みのタイプでテキスト行が書き込まれるディメンションです。したがって、ランダムな英語のドキュメントでは、テキストは左から右に水平になり、別のアラビア語のドキュメントでは、書き込みも水平になりますが、右から左になります。日本語のドキュメントを考慮すると、インラインディメンションは垂直になります。書き込みモードは垂直に実行されます。

ブロックの寸法–ページにブロックが表示される順序に対応します。英語とアラビア語では垂直方向に実行されますが、垂直方向の書き込みモードでは水平方向に実行されます。

[xhtml]
<！DOCTYPE html>
<html>
<頭>
<スタイル>
html {
フォント：20px Sans-serif;
}
体 {
パディング：25px;
背景色：淡黄色;
色：黒;
}
。箱 {
ボーダー：4pxソリッドブラック;
border-radius：20px;
パディング：20px;
マージン：12px;
}
。一 {
ブロックサイズ：100px;
インラインサイズ：200px;
}
。2 {
高さ：100px;
幅：200px;
}
</ style>
</ head>
<本体>
</ div>
<div id = "container">
<div class = "box one">
私のブロックサイズは100ピクセル、インラインサイズは200ピクセルです。
</ div>
<div class = "box two">
私の身長は100ピクセル、幅は200ピクセルです。
</ div>
</ div>
</ body>
</ html>
[/ xhtml]

Logical properties and values

4.スクロールスナップ

scroll-snap-type CSSプロパティは、アタッチメントポイントがスクロールコンテナに適用される剛性を決定します。つまり、ユーザーがスクロールを終了した後、ビューポートを特定の要素または場所にロックします。これは、画像ギャラリーを表示するための優れた方法です。以前はJavaScriptで使用できましたが、新しいCSSスクロールスナップモジュールのおかげで、CSSで効果を制御できます。スクロールスナップは、コンテナ内の親/コンテナ要素と子を定義することで実行されます。コンテナ内で定義されたルール。Scroll-snap-typeプロパティは、コンテナ要素に適用される最も重要なプロパティです。スクロールスナップ軸x、y、ブロック、インライン、またはその両方を定義し、スクロールスナップの厳密性なし、近接、または必須を定義します。

[xhtml]
<！DOCTYPE html>
<html>
<頭>
<スタイル>
html、body、.C {
高さ：50％;
}
.C {
表示：フレックス;
align-items：center;
justify-content：space-between;
フレックスフロー：列nowrap;
font-family：arial;
}
。容器 {
表示：フレックス;
フレックス：なし;
オーバーフロー：自動
}
.container.x {
幅：70％;
高さ：150px;
フレックスフロー：行nowrap;
}
.container.y {
幅：256px;
高さ：256px;
フレックスフロー：列nowrap;
}
.y.mandatory-scroll-snapping {
scroll-snap-type：y必須;
}
.x.proximity-scroll-snapping {
スクロールスナップタイプ：x近接;
}
.container> div {
text-align：center;
scroll-snap-align：center;
フレックス：なし;
}
.x.container> div {
行の高さ：128px;
フォントサイズ：64px;
幅：100％;
高さ：128px;
}
.y.container> div {
行の高さ：256px;
フォントサイズ：128px;
幅：256px;
高さ：256px;
}
.y.container> div：{
行の高さ：1.4;
フォントサイズ：80px;
}
.container> div：{
背景色：白;
}
.container> div：{
背景色：白;
}
</ style>
</ head>
<本体>
<div class = "。C">
<div class = "container x required-scroll-snapping" dir = "ltr">
<div>スクロールスナップ</ div>
<div> 2 </ div>
<div> 3 </ div>
<div> 4 </ div>
</ div>
<div class = "container y required-scroll-snapping" dir = "ltr">
<div> ScroppSnappingについて</ div>
<div> 2 </ div>
<div> 3 </ div>
<div> 4 </ div>
</ div>
</ div>
</ body>
</ html>
[/ xhtml]

Scroll snapping

5.グリッドレベル2とサブグリッド

レベル2仕様には、レベル1のすべてといくつかの新機能が含まれています。グリッド仕様のレベル2は、CSSグリッドのサブグリッド機能を作成します。次の行では、現在、エディターのグリッドレベル2のドラフトで詳しく説明されているサブグリッド機能について説明します。したがって、を使用するとグリッドを作成できます。グリッドレイアウトオプション、グリッド要素は、display：gridを設定することでグリッドコンテナに変換できます。次の例では、グリッドの3列のトラックを含むアイテムがあり、3列のトラックを持つコンテナグリッドであり、これらは、親のトラックと一致しません。

[xhtml]
<！DOCTYPE html>
<html>
<頭>
<title> CSSグリッドレベル2–サブグリッド</ title>
</ head>
<スタイル>
体 {
マージン：20px;
}
。一 {
背景色：黒;
色：白;
border-radius：20px;
パディング：20px;
フォントサイズ：120％;
}
.A .one {
背景色：ライトグレー;
}
.GRID {
表示：グリッド;
グリッドギャップ：10px;
grid-template-columns：3fr 1.5fr 2fr 1fr 1fr 2fr;
背景色：白;
色：黒;
マージン：1.5em 0;
}
.A {
パディング：0;
グリッドギャップ：15px;
グリッド-列：自動/スパン4;
表示：グリッド;
grid-template-columns：3fr 1.5fr 1.5fr;
}
</ style>
<本体>
<div class = "GRID">
<div class = "one 1"> 1 </ div>
<div class = "one 2"> 2 </ div>
<div class = "one 3"> 3 </ div>
<div class = "one 4"> 4 </ div>
<div class = "one 5"> 5 </ div>
<div class = "one 6"> 6 </ div>
<div class = "one 7"> 7 </ div>
<div class = "one 8"> 8 </ div>
<div class = "one A">
<div class = "one 9"> 9 </ div>
<div class = "one 10"> 10 </ div>
<div class = "one 11"> 11 </ div>
<div class = "one 12"> 12 </ div>
<div class = "one 13"> 13 </ div>
<div class = "one 14"> 14 </ div>
</ div>
<div class = "one 15"> 15 </ div>
<div class = "one 16"> 16 </ div>
<div class = "one 17"> 17 </ div>
<div class = "one 18"> 18 </ div>
<div class = "one 19"> 19 </ div>
<div class = "one 20"> 20 </ div>
</ div>
</ body>
</ html>
[/ xhtml]

Grid level 2 and subgrid

オープンソースプロジェクトであるため、CSSグループで作業がどのように進化しているかをGitHubで確認できます。ブラウザの仕様と実装の開発は循環的なプロセスです。したがって、このサブグリッド機能がどのように進行しているか、および新しいブラウザー実装について見ることができます。

6.CSSを使用してブラウザサポートをテストする

CSSは、新機能に対するブラウザのサポートをテストする方法を開発しました。基本的に、ブラウザが特定のCSS機能を受け入れるかどうかを確認するために質問をします。このようにして、新しい機能を安全かつ簡潔に使用できるようにします。新しいCSS機能を使用する場合は、ブラウザがその機能をサポートしているかどうかを確認する必要があります。この行では、caniuse.comのデータを参照することをお勧めします。あなたはあなたの場所のデータをインポートすることができます。

Use CSS to test browser support

@supports CSSを使用すると、CSS機能のブラウザーサポートに依存する宣言を指定できます。これは機能クエリと呼ばれます。このルールは、コードの先頭に記述することも、他の条件付きグループat-rule内にネストすることもできます。

[css]
@supports（表示：グリッド）{
div {
表示：グリッド;
}
}
[/ css]

7.メディアクエリの構文の改善–レベル4

メディアクエリレベル4仕様には、高さや幅などの範囲タイプを持つ機能を使用してメディアクエリを作成するための構文のいくつかの改善が含まれています。

例として、幅にmax-functionalityを使用します

[css]
@media（最大幅：20em）
[/ css]

min-とmax-を使用して、2つのランダムな値の間の幅を試すことができます。

[css]
@media（最小幅：20em）および（最大幅：35em）
[/ css]

理解を深めるために、上記の例では、幅が20em以上で、35em以下であると言います。

結論

Webサイトの開発者は、新しいCSS手法を認識し、将来のプロジェクトに適用する必要があります。彼らは彼らの仕事の基準を上げ、顧客は改善されたウェブサイトの見た目に満足するでしょう。