ホームページ  >  記事  >  ウェブフロントエンド  >  css3には判定文はありますか?

css3には判定文はありますか?

WBOY
WBOYオリジナル
2022-03-29 16:34:573837ブラウズ

css3には判定文があり、その判定文は「@supports(実行条件){実装するcss文}」です;「@supports」はcss3で新たに導入されたルールの1つです。主に条件を渡すために使用されます。 現在のブラウザーが特定の CSS 属性をサポートしているかどうかを判断し、特定のスタイル (CSS 機能検出) をロードします。

css3には判定文はありますか?

このチュートリアルの動作環境: Windows 10 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

css3 には判定ステートメントがありますか?

css3 には判定ステートメントがあります。

@supports は、CSS3 の新しく導入されたルールの 1 つで、主に、現在のブラウザーが特定の CSS プロパティをサポートしているかどうかを検出し、特定のスタイルを読み込むために使用されます (CSS 機能の検出)。

CSS 機能検出とは、現在のブラウザが特定の機能をサポートしているかどうかを、さまざまなブラウザ端末の条件によって判断することです。 CSS 機能検出を使用すると、現在の機能をサポートするブラウザ環境で新しいテクノロジーを使用でき、サポートされていない場合には特定のフォールバック メカニズムを作成できます。

次に、css3@supports の使用方法を見て、@supports が CSS 機能を検出する方法を紹介します。

css3@supports の使用法

CSS@supports は、CSS 構文を通じて機能検出を実装し、内部 CSS ブロックに条件付き判断ステートメントを記述することができます。機能テストに合格した場合に実装するステートメントと、機能テストが失敗した場合に実装する CSS ステートメントです。

基本構文:

  //如果通过了条件
 
  @supports(运行条件){
 
  /*应用规则---想要实现的css语句*/
 
  }
 
  //如果没有通过条件
 
  @supportsnot(运行的条件){
 
  /*应用规则---想要实现的css语句*/
 
  }

簡単な例を見てみましょう:

@supports (display:flex) {
  section { display: flex }
  ...
}

上記のコードは、ブラウザが「display:flex」属性をサポートしている場合、次のことを意味します。 「section」要素の「display:flex」スタイル。

@supports は、さまざまな論理演算子と組み合わせたり、さまざまな構文ルールを使用したりすることもできます。次に、@supports の構文ルールと使用法の詳細を調整してみましょう。

(学習ビデオ共有: css ビデオ チュートリアル)

以上がcss3には判定文はありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。