CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

2020年のWebデザインのための最新のCSSプロパティとAPI

開発者がJavaScriptとCSSを組み合わせてWebサイトをカスタマイズできるように、新しいCSSプロパティが開発され、人気のあるブラウザーをサポートするようになりました。これらのいくつかを以下に示します-

フォーカス-範囲内

要素内のフォーカスアクセシビリティを解決することを目的としています

スクロールスナップ

これにより、ネイティブのスクロールと減速が可能になります

@media（prefers- *）

ユーザーのデバイス設定に応じてページのUIとUXの両方を設定できるため、より高いレベルのパーソナライズが可能になります。

*ライトレベル、強制色、配色、コントラスト、動きの減少、透明度の低下を示すことができます

位置：粘着性

UIをビューポート内に維持するため。

標準レイアウトを使用するための論理プロパティ

要素内および要素の周囲に動的な方向間隔を設定できます。

ギャッププロパティ

このプロパティは、flexboxで使用できるようになりました。ギャップは、各子要素に独自の間隔を持たせるのではなく、コンテナが間隔を所有するように設定します。

backfrop-filter

要素の背後にあるスタイルを便利に設定するため。

CSS Houdini API

開発者がカスタムCSSをどのように読んで理解したいかをブラウザに伝える機能を提供する低レベルAPI。 CSSオブジェクトモデルは、開発者がより使いやすい方法でアクセスできるようになりました。 Layout API、Paint API、Parser API、Properties＆Values API、AnimationWorklet、Typed OM、FontMetricsAPIがこれに該当します。

アスペクト比

メディアの寸法を維持する

サイズ

1つの属性で高さと幅を設定する

min（）、max（）、clamp（）

CSSプロパティに制約を設定する

ディスプレイ：アウターインナー

より適切な要素のための2つの価値のある構文

list-style-type

リストにカスタムスタイルを追加する

CSSモジュール

JavaScriptを使用して、ローカルファイルまたはリモートファイルから特定のモジュールを要求できるようになりました

CSSリージョン

エリアをコンテンツで埋める

CSSサブグリッド

CSSグリッドでマイクロレイアウトを使用してマイクロレイアウトを作成するのに役立ちます。

例

次の例は、これらのプロパティの一部を示しています-

<!DOCTYPE html>
<html>
<head>
<style>
* {
   margin: 2%;
   text-align: center;
}
:is(header, main, footer) span:after {
   content: " Awesome!";
   box-shadow: inset 0 0 8px lightgreen;
   font-size: 1.2em;
   font-family: Calibri;
}
:-webkit-any(header, div, section) span:after {
   content: " Awesome!";
   box-shadow: inset 0 0 8px lightgreen;
   font-size: 1.2em;
   font-family: Calibri;
}
:-moz-any(header, div, section) span:after {
   content: " Awesome!";
   box-shadow: inset 0 0 8px lightgreen;
   font-size: 1.2em;
   font-family: Calibri;
}
:matches(header, div, section) span:after {
   content: " Awesome!";
   box-shadow: inset 0 0 8px lightgreen;
   font-size: 1.2em;
   font-family: Calibri;
}
</style>
</head>
<body>
<header>
<span>:is() operator is</span>
</header>
<div>
<span>DEMO</span>
<span>Alt + F4</span>
<span>Enter</span>
</div>
<section>
<span>Howzit?</span>
</section>
</body>
</html>

出力

これにより、次の結果が生成されます-

2020年のWebデザインのための最新のCSSプロパティとAPI

例

<html>
<head>
<style>
#parent {
   margin: 8%;
   background-image: url("https://images.unsplash.com/photo-1611081352477- 9f1477ec09ae?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&ixlib=rb1.2.1&q=80&w=400");
   padding: 2%;
   width: 200px;
   height: 200px;
   box-shadow: 0 0 20px rgba(100,0,40,0.8);
}
h2 {
   margin-top: 20vh;
   backdrop-filter: invert(1);
}
</style>
</head>
<body>
<div id="parent">
<div>
<h2>Watch this cool effect</h2>
</div>
</div>
</body>

出力

これにより、次の結果が生成されます-

2020年のWebデザインのための最新のCSSプロパティとAPI


  1. フォーム入力フィールドのあまり知られていないCSSプロパティ

    CSSのcaret-color、pointer-events、およびtab-sizeは、フォーム入力フィールドのあまり知られていないプロパティの一部です。 caret-colorプロパティを使用すると、点滅するカレットの色を指定できますが、pointer-eventsを使用すると、ユーザーが要素を見つけられないようにすることができます。最後に、tab-sizeは、tabが使用する空白の量を設定します。 次の例は、これらのプロパティの一部を示しています。 例 <!DOCTYPE html> <html> <head> <style> body {

  2. 最新のAndroid9および10アップデート用のUI/UXを設計する方法

    Googleはこの9月に最新のAndroid10をリリースしました。これは、最新の最もプレミアムな携帯電話のほんの一握りでしか利用できませんが、多くの携帯電話メーカーは、近いうちに最新の携帯電話のいくつかでAndroid10を展開する予定です。未来。 同様の読み物：グラフィックデザインに最適なコンピューター Android 10は、システム全体のダークモードなど、いくつかのアップデートとクールな機能をもたらしましたが、実際のUIアップデートの邪魔になるものはほとんどありませんでした。 Googleは非常にうまく機能するため、マテリアルデザインにこだわっています。そのため、このガイドは以前の