CSS3 contient-il des déclarations de jugement ?

Il y a une instruction de jugement dans CSS3. L'instruction de jugement est "@supports (condition d'exécution) {l'instruction CSS que vous souhaitez implémenter}" "@supports" est l'une des règles nouvellement introduites dans CSS3, qui est principalement utilisée. pour juger le navigateur actuel à travers des conditions S'il faut prendre en charge un certain attribut CSS et charger des styles spécifiques, c'est-à-dire la détection des fonctionnalités CSS.

L'environnement d'exploitation de ce tutoriel : système Windows 10, version CSS3&&HTML5, ordinateur Dell G3.

Est-ce que CSS3 a des déclarations de jugement ?

Il y a des déclarations de jugement en CSS3.

@supports est l'une des règles nouvellement introduites de CSS3. Elle est principalement utilisée pour détecter si le navigateur actuel prend en charge une certaine propriété CSS et charger des styles spécifiques, c'est-à-dire la détection des fonctionnalités CSS.

La détection des fonctionnalités CSS consiste à déterminer si le navigateur actuel prend en charge une certaine fonctionnalité via des conditions pour différents terminaux de navigateur. Grâce à la détection des fonctionnalités CSS, nous pouvons utiliser de nouvelles technologies dans les environnements de navigateur qui prennent en charge les fonctionnalités actuelles et mettre en place certains mécanismes de secours si elles ne sont pas prises en charge.

　Voyons maintenant comment css3@supports est utilisé et présentons comment @supports détecte les fonctionnalités CSS.

Utilisation de css3@supports

CSS@supports peut implémenter la détection de fonctionnalités via la syntaxe CSS et écrire des instructions de jugement conditionnel dans le bloc CSS interne : l'instruction CSS que vous souhaitez implémenter si la détection de fonctionnalité réussit, si la détection de fonctionnalité L'instruction CSS que vous souhaitez implémenter si elle n'est pas transmise.

　Syntaxe de base :

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

Regardons un exemple simple :

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

La signification du code ci-dessus est : si le navigateur prend en charge l'attribut "display:flex", alors utilisez "display:" sur l'élément "section" "flexible".

@supports peut également être combiné avec différents opérateurs logiques et avoir des règles grammaticales différentes. Affinons ensuite les règles grammaticales de @supports et ses détails d'utilisation.

(Partage de vidéos d'apprentissage : Tutoriel vidéo CSS)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!