Comment utiliser les sélecteurs CSS3 - Mannequins

Vidéo: [#15] Comment utiliser les sélecteurs basiques | HTML5/CSS3 & ses frameworks pour les débutants 2025

Mi-2010, les concepteurs et les développeurs web se réjouissaient alors que CSS3 commençait à faire son chemin. Depuis lors, le support du navigateur pour CSS3 n'a cessé d'augmenter et de s'améliorer, même si CSS3 n'est pas encore officiellement une norme W3C.

En fait, le seul inconvénient (si vous voulez l'appeler ainsi) de l'utilisation de ces sélecteurs est qu'il est parfois nécessaire d'ajouter des préfixes spécifiques à votre CSS pour que tous les styles CSS3 apparaissent correctement dans les anciennes versions des navigateurs les plus populaires.

Par exemple, si tous les navigateurs prenaient en charge le sélecteur de colonnes CSS3, il suffirait de spécifier une seule déclaration de colonne dans votre style:

div {columns: 100px 3;} < Cependant, comme ce sélecteur n'est pas supporté de la même manière par tous les navigateurs populaires, il est préférable d'écrire d'abord votre déclaration CSS3, puis directement en dessous des déclarations en double avec des préfixes spécifiques au navigateur. Notez comment les commentaires CSS sont ajoutés au CSS pour identifier les navigateurs associés à chaque préfixe:

div {colonnes: 100px 3;

-webkit- colonnes: 100px 3; / * Safari et Chrome * / -moz- colonnes: 100px 3; / * Firefox * / } Voici une liste des préfixes CSS3 par navigateur:

Navigateur

Préfixe	Internet Explorer
-ms-	Firefox > -moz-
Google Chrome	-webkit-
Safari	-webkit-
Opera	-o- ou -xv-
	Pour une liste à jour de la prise en charge du navigateur pour toutes les propriétés CSS3, consultez le tableau de w3schools. com.