CSS3の特徴クエリ機能の紹介

巴扎黑
リリース: 2017-08-07 14:40:27
オリジナル
1962 人が閲覧しました

これは、2017 年に理解して学習する必要がある新しい CSS 機能です。実際のブラウザーの複雑さを考慮すると、この機能は他の新機能よりも先にリリースされるべきでした。

メディア クエリを使用して画面サイズを検出し、応答性の高いインターフェイス デザインを実現する方法はすでに知っています。

機能クエリは、ユーザー エージェント (デスクトップ ブラウザなど) が特定の CSS3 機能をサポートしているかどうかをクエリするために使用されます。この機能は、IE を除く他のブラウザでサポートされています。

文法形式


@supports <supports-condition> {
  <group-rule-body>
}
ログイン後にコピー

フィーチャークエリは @supports ルールを使用します (メディアクエリ @media と同様に、両方とも @ 記号プレフィックス: at-rule を使用します)。この CSS ルールにより、条件ブロックに CSS スタイルを記述することができます。 、これは、現在のユーザー エージェントが特定の CSS プロパティと値のペアをサポートしている場合にのみ適用されます。

簡単な例として、フレックスボックス機能をサポートするブラウザのスタイルを定義したい場合は、次のように記述できます:


@supports ( display: flex ) {
    .foo { display: flex; }
}
ログイン後にコピー

同様に、メディアクエリルールと同様に、いくつかのロジック演算子を使用できます。 (and、or、not など)、連鎖をサポートします:


@supports (display: table-cell) and (display: list-item) {
    … /* your styles */
}
 
@supports not ((text-align-last:justify) or (-moz-text-align-last:justify) ){
    … /* 不支持justify时,用这里的代码来模拟text-align-last:justify */
}
ログイン後にコピー

使用例

アニメーション プロパティの検出:


@supports (animation-name: test) {
    … /* 当UA支持无前缀animations特性时的特定样式 */
    @keyframes { /* @supports 作为一个CSS条件组at-rule,可以包含其他at-rules */
      …    
    }
}
ログイン後にコピー

カスタム属性の検出:


@supports (--foo: green) {
  body {
    color: green;
  }
}
ログイン後にコピー

仕様状況

はまだ推奨候補 CR (Candidate Recommendation) ステータスにあります。仕様リンク: CSS Conditional Rules Module Level 3。

ブラウザ互換性

デスクトップ システム:

モバイル デバイス:

以上がCSS3の特徴クエリ機能の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!