Heim  >  Artikel  >  Web-Frontend  >  Eine Einführung in die Feature-Abfragefunktion von CSS3

Eine Einführung in die Feature-Abfragefunktion von CSS3

巴扎黑
巴扎黑Original
2017-08-07 14:40:271964Durchsuche

Dies ist eine neue CSS-Funktion, die 2017 verstanden und erlernt werden muss. Angesichts der Komplexität realer Browser hätte diese Funktion vor anderen neuen Funktionen veröffentlicht werden müssen.

Wir wissen bereits, wie man Media Query verwendet, um die Bildschirmgröße zu erkennen und so ein responsives Interface-Design zu erreichen.

Mit der Funktionsabfrage wird abgefragt, ob der Benutzeragent (z. B. ein Desktop-Browser) eine bestimmte CSS3-Funktion unterstützt. Zusätzlich zum IE wurde diese Funktion auch von anderen Browsern unterstützt.

Syntaxformat


@supports <supports-condition> {
  <group-rule-body>
}

Feature-Abfrage verwendet @unterstützt Regeln (ähnlich wie bei der Medienabfrage @media verwenden beide ein @ Symbolpräfix: at-rule), diese CSS-Regel ermöglicht es uns, CSS-Stile in bedingte Blöcke zu schreiben, sodass sie nur angewendet werden, wenn der aktuelle Benutzeragent ein bestimmtes CSS-Eigenschaft-Wert-Paar unterstützt.

Als einfaches Beispiel: Wenn wir einen Stil für einen Browser definieren möchten, der die Flexbox-Funktion unterstützt, können wir ihn so schreiben:


@supports ( display: flex ) {
    .foo { display: flex; }
}

Ähnlich wie bei Medienabfrageregeln können Sie einige logische Operatoren (z. B. und, oder und nicht) verwenden und die Verkettung unterstützen:


@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 */
}

Verwendungsbeispiele

Animationseigenschaften erkennen:


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

Benutzerdefinierte Attribute erkennen:


@supports (--foo: green) {
  body {
    color: green;
  }
}

Spezifikationsstatus

befindet sich immer noch im Status „Kandidatenempfehlung“ (CR), Spezifikationslink: CSS Conditional Rules Module Level 3.

Browser Kompatibilität

Desktop:

Mobil:

Das obige ist der detaillierte Inhalt vonEine Einführung in die Feature-Abfragefunktion von CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn