5ホットな新しいCSSの機能とそれらの使い方

Sep 13, 2025

操作方法

ページ1/2：

5つの新しいCSSの特徴：ステップ01-10

5つの新しいCSSの特徴：ステップ01-10
5つの新しいCSSの特徴：ステップ11-20

この記事では、CSSに来る5つの新しいプロパティを探索し、自分のプロジェクトで実用化する方法を見てください。私たちはAを作成するつもりです ウェブサイトのレイアウト ニュースフィードとコーナーの小さなチャットボックスを含むページの場合。より多くのCSSトリックのために、私たちの記事を違う探索を見てください CSSアニメーションの例 。全体のサイトを作成している場合は、試してみてください。 ウェブサイトビルダー そしてあなたの閲覧をするようにしてください ウェブホスティング ここでのオプション。

このチュートリアルでは、Chrome 65+またはFirefox 59+が必要です。見てみましょう Github Repoに付随するステップバイステップコードの場合。以下の機能を活用して、より良い経験を作成し、いくつかの問題を回避する。そして、あなたがチームと一緒にデザインしているのであれば、最高を活用してください クラウドストレージ 物事をまとめるために。

CSS表示モジュール（レベル3）

表示：内容;
W3Cのステータス - 働くドラフト
ブラウザのサポート

CSS条件付きルールモジュール（レベル3）

@サポート（...） {...}
W3Cのステータス - 候補勧告
参考文献： MDN Webドキュメント

CSSオーバースクロール動作モジュール（レベル1）

オーバースクロール動作：含まれています。
W3Cのステータス - 非公式
ブラウザのサポート
参考文献：あなたのスクロールを管理します

CSSセレクタモジュール（レベル4）

：焦点の中で
W3Cのステータス - 働くドラフト
ブラウザのサポート
さらに読む：MDN Webドキュメント：焦点の中で、：プレースホルダー

CSSの封じ込めモジュール（レベル1）

含める：ペイント;
W3Cのステータス - 候補勧告
ブラウザのサポート
参考文献： CSSのChrome 52に含まれています

01.ニュースフィードのHTMLを設定します

まず私達のニュースフィードのためにいくつかの超シンプルで繰り返しのマークアップを設定する必要があります。 Aを作成しましょう 。コンテナ 内側に順序付けられていないリストを持つdiv。 giveう ＆lt; ul＆gt; のクラス 。フィード 次に、それぞれのDIVを含む10のリスト項目を作成します。 。カード クラスとテキストカード1、カード2など

最後に別のものを作成します リスト項目 クラスで5~6の間ね - これは後で役立つでしょう - そして追加する ＆lt; ul＆gt; テキストカードA、カードBなどを使用して3つのリスト項目がある内側

02.スタイルニュースフィード

これは、これがニュースフィードのように見え始めるように、いくつかの迅速なスタイルを追加する必要があります。まず私達は与えることができます ＆lt; body＆gt; 微妙な灰色の背景色。それから与えます 。コンテナ 最大幅800pxとユニット マージン：0自動車; 中央に整列させる。

またもたらしましょう 。カード 白い背景、パディングとマージンの10倍、ついにA 最小身長 300px - これは私達にページをスクロール可能にするのに十分なことを与えるべきです。最後に、FlexBox Magicを上に振りかけます 。フィード アイテムをうまくいくようにするために、1行あたり2枚のカードで。

 .feed {
表示：Flex;
フレックスラップ：ラップ;
}
.feed li {
フレックス：1 0 50％。

03.レイアウトの問題を修正しました

リストを下にスクロールした場合、ネストされたリストのカードは、カードA-Cのカードがレイアウトの問題を引き起こしていることに気付くでしょう。理想的には、彼らがカードの残りの部分と一緒に流れ込むのが好きですが、それらはすべて1ブロックで一緒に動けなくなっています。その理由は、Flexコンテナを使用して作成されたものです。 表示：Flex. - その即時の子供たち（すなわちリスト項目）をフレックスアイテムにするだけです。

今、通常これを修正する唯一の方法はマークアップを変更することですが、あなたがその贅沢を持っていないふりをしましょう。おそらくNewsfeedマークアップはサードパーティのスクリプトによって生成されます。または、reskinしようとしているだけであるレガシコードです。だからどうやってこれを修正できますか？

出来事 表示：内容 。この小さな1つのライナーは、それがそこにいないかのように要素を振る舞うようにします。それでも要素の子孫が表示されますが、要素自体はレイアウトに影響しません。

私たちはマークアップを変更することはできないふりをしているので（このステップのために）私たちはこれについて少し賢くなることができ、そして 。カード フレックス項目を要素し、リストマークアップをほとんど無視します。

最初に既存のものを削除します .FEED LI クラスと使い方 表示：内容 両方のための ＆lt; ul＆gt; そして ＆lt; li＆gt; 要素：

 .FEED UL、
.feed li {
表示：内容;

今、あなたは順番にカードが流れているのを見るべきですが、サイジングを失いました。 Flexプロパティを追加することで修正してください 。カード 代わりに：

 .card {
フレックス：1 0 40％。

Ta-Da！私たちのカードは現在、彼らの構造的な順序付きリストマークアップが存在しないかのようにFlexBoxの不思議を使用しています。

サイドノートとして、なぜ疑問に思うかもしれません フレックスベース 値は40％に設定されています。これは 。カード クラスにはマージンがあり、使用時の幅計算に含まれていません。 ボックスサイジング：ボーダーボックス 。これを回避するためには、セットする必要があります フレックスベース 必要な点でラッピングをトリガするのに十分高い高さには、フレックスボックスが自動的に残りのスペースを埋めます。

04.機能クエリを探索します

しかし 表示：内容 まさに私たちが必要とするものは、まだW3Cでの作業下のステータスでのみです。そしてChromeサポートでは、2018年3月にリリースされたバージョン65にのみ到着しました。信じられないほどFirefoxは2015年4月からサポートを受けました！

DevToolsでスタイルを無効にした場合、私たちの変更がレイアウトを少し混乱させたことがわかります。 表示：内容 適用されません。それで、私たちはこれについて何をすることができますか？次の新機能の時間 - 機能クエリ。

これらの作業はメディアクエリと同じように機能しますが、プロパティと値の式がサポートされている場合は、BrowserをBrowserに尋ねることができます。もしそうであれば、クエリ内に含まれているスタイルが適用されます。今、私たちを動きましょう 表示：内容 機能クエリへのスタイル。

 @Supports（表示：内容）{
.feed ul、
.feed li {
  表示：内容;
}
.card {
  フレックス：1 0 40％。
}

05.クリーナーの結果に「じゃない」を使用してください

通常、この種のプログレッシブエンハンスメントシナリオでは、新しいスタイルを追加するためにクエリを使用しますが、フォールバックレイアウトに必要な元のスタイルのいくつかを無効にする必要があります。

ただし、機能クエリのサポートがかなり良い（IEを無視した場合）機能クエリを実際に使用したいと判断することができます。 じゃあ オペレーター。それはあなたが期待できるように動作します、それで私達は私達のオリジナルを再適用することができます フレックス リスト項目の場合 表示：内容 サポートされていません。

 @Supportsではありません（表示：内容）{
.feed li {
  フレックス：1 0 50％。
}

内側に じゃあ クエリ私たちはいくつかのスタイルを追加することができますねアイテムは基本的に使用していたものを使用していたものを再適用します 表示：内容 。

 FEED LI.NESTED {
フレックスベース：100％。
}
feed li.NESTED UL {
 表示：Flex;
 フレックスラップ：ラップ;

06.それをさらに一歩踏み出す

機能クエリの可能性がすでに表示されますが、本当にクールなことは、3つの利用可能な演算子を使用して式を組み合わせることができるということです。 そして 、 または そして じゃあ 。おそらく私たちはまたチェックすることができます 表示：Flex. フロートベースのフォールバックをサポートしてから追加します。

私たちはここでそれをするつもりはありませんが、私たちが最初に2つの機能クエリを変更した場合

 @Supports（表示：FLEX）と（表示：内容）{
...
}
@Supports（ディスプレイ：FLEX）と（表示されていません（表示：内容））{
...

ボーナスとして、カスタムプロパティのサポートをテストすることもできます。

 @Supports（ -  foo：緑）{
...

07.チャットボックスを追加します

今、私たちは整って美しいニュースフィードを持っています、画面の右下に固定されている小さなチャットボックスを追加しましょう。メッセージの一覧とユーザーが自分のメッセージを入力するためのテキストフィールドが必要です。開口部の直後にこのブロックを追加してください ＆lt; body＆gt; 鬼ごっこ：

 DIVクラス= "チャット"＆gt。

08.チャットボックスをスタイル

それが半分に見えるようにすばやくいくつかのスタイリングを追加する時間。

 .chat {
 背景：#fff;
 境界：10pxソリッド＃000;
 下：0;
 フォントサイズ：10px;
 位置：固定
 右：0;
 幅：300px;
 Z指数：10;
}
.Messages {
 ボーダーボトム：5ピキスのソリッド＃000;
 オーバーフロー：自動;
 パディング：10px;
 最大高さ：300ピクセル。
}
.Message {
 背景：＃000;
 境界線：5ピクセル;
 カラー：#FFF;
 マージン：0 20％10px 0;
 パディング：10px;
}
.Messages Li：Last-Child .Message {
 マージン底：0;
}
.input {
 国境：なし
 表示ブロック;
 パディング：10px;
 幅：100％。

09.スクロールチェーン

うまくいけば今、あなたはあなたのニュースフィードの上に座っているメッセージのスクロール可能なリストを持つ少しチャットボックスを持っています。すごい。しかし、あなたが入れ子になった地域の中にスクロールしたときに何が起こるのか気づいたことがありますか？それを試してみてください。メッセージの最後までずっとスクロールし、その代わりにページ自体がスクロールを開始するのを見ます。これはスクロールチェーンと呼ばれます。

私たちの例では大したことではありませんが、場合によってはそうかもしれません。モジュールやコンテキストメニュー内にスクロール可能な領域を作成する際に、この機能を回避する必要があります。

ダーティー修正はを設定することです ＆lt; body＆gt; に オーバーフロー：hidden. しかし、これをすべて修正する素敵で光沢のある新しいCSSプロパティがあり、それは単純なワンライナーです。こんにちはに言う閉塞。 3つの可能な値があります。

オート - デフォルトでは、スクロールチェーンが可能になります
含む - スクロールチェーンを無効にします
なし - スクロール連鎖やその他のオーバースクロール効果を無効にします（例えば、ラバーバンドリング）

略語を使うことができます閉塞または私達は特定の方向をターゲットとすることができます オーバースクロール行動X. （または又は - ）。それを私たちに追加しましょう .Messages. クラス：

。。
...
オーバースクロール動作 -  y：含まれています。
...

これで再度スクロールを試してみて、コンテンツの終わりに達するとページのスクロールに影響を与えなくなることがわかります。

PWAにプルツーリフレッシュ機能を実装したい場合は、ニュースフィードをリフレッシュするには、この施設もかなり便利です。 Android用のChromeなどのブラウザは、自動的に自分自身を追加し、現在までにアクセスできなくなり、パフォーマンスに影響を与える非パッシブハンドラを使用してイベントをキャンセルすることはできません。

今、あなたはただ追加する必要があります オーバークローロールの動作：含まれています ビューポート含有要素、おそらくおそらく ＆lt; body＆gt; または ＆lt; html＆gt; 。

この施設はW3C規格ではなく、Web Incubatorコミュニティグループ（WICG）による提案ではないことが注目に値します。普及した、安定した成熟したWICGの提案は、後の段階でW3Cワーキンググループへの移行について考慮されます。

10.使用していないときはチャットボックスを折りたたみます

現時点では、チャットボックスがかなりのスペースを占めています。それと対話していない限り、それは少し気を散らすことです。幸いなことに私たちは少しCSSマジックでこれについて何かをすることができます。

しかし、まず最初に私たちは既存のスタイルをわずかに修正する必要があります。デフォルトでは、チャットボックスを折りたたむことができますので、削減する必要があります。 マックスハイト の価値 .Messages. クラス。私たちはそこにいる間、私たちはまたに遷移することができます マックスハイト プロパティ：

。。
 ...
 最大高さ：25px;
遷移：最大高さ500ms。

次のページ：ステップ11-20の新しいCSS機能の探索を続ける

現在のページ： 5つの新しいCSSの特徴：ステップ01-10

次のページ 5つの新しいCSSの特徴：ステップ11-20

5ホットな新しいCSSの機能とそれらの使い方

01.ニュースフィードのHTMLを設定します

02.スタイルニュースフィード

03.レイアウトの問題を修正しました

04.機能クエリを探索します

05.クリーナーの結果に「じゃない」を使用してください

06.それをさらに一歩踏み出す

07.チャットボックスを追加します

08.チャットボックスをスタイル

09.スクロールチェーン

10.使用していないときはチャットボックスを折りたたみます

操作方法 - 最も人気のある記事

Photoshop

音声制御UIを構築する

グリーンクッキングアニメーションプラットフォームから始めましょう

5分以内に人をスキャンする方法

信じられないファンタジービーストを設計する方法

サブスタンスデザイナーのタイル材料を作成する

キースホット付き溶岩ランプを作成する方法

毛皮の毛皮のペットの肖像画

カテゴリ