Explication détaillée de l'utilisation des attributs mixtes de certains attributs avancés cachés en CSS3

-webkit-user-select et -moz-user-select

Peut-être ne souhaitez-vous souvent pas que les utilisateurs sélectionnent du texte sur votre site, que ce soit pour des raisons de droits d'auteur ou non. Habituellement, tout le monde a js pour l'implémenter. Une autre solution consiste à définir les valeurs de -webkit-user-select et -moz-user-select sur none.

Veuillez utiliser cet attribut avec prudence : étant donné que la plupart des utilisateurs sont ici pour afficher des informations qu'ils peuvent copier et stocker pour une utilisation ultérieure, cette approche n'est ni utile ni efficace. Si vous désactivez le copier-coller, les utilisateurs peuvent toujours obtenir ce qu'ils veulent en affichant le fichier source. Je ne comprends pas pourquoi cet attribut est pris en charge par webkit et gecko.

Prise en charge des navigateurs : WebKit, Gecko.

-webkit-apparition et -moz-apparence

Avez-vous déjà voulu déguiser une image en bouton radio ? Ou une zone de saisie qui ressemble à une case à cocher ? Alors maintenant, l’apparence apparaît. Même si vous ne souhaitez pas qu'un lien ressemble toujours à un bouton, voici un exemple pour vous montrer comment procéder si vous le souhaitez :

Exemple

   a {
-webkit-appearance: button;
-moz-appearance: button;
}

Prise en charge du navigateur : WebKit, Gecko.

text-align: -moz-center/-webkit-center

Ceci est un attribut (ou pour être précis, une "valeur d'attribut") L'existence de est très surprenant. Pour centrer un élément au niveau du bloc, nous le définissons généralement sur margin:0 auto. Cependant, vous pouvez désormais également définir la propriété text-align du conteneur de l'élément sur -moz-center et -webkit-center. De manière correspondante, vous pouvez également définir l'élément à gauche ou à droite en définissant -moz-left, -webkit-left ou -moz-right, -webkit-right.

Support des navigateurs : WebKit, Gecko.

-webkit-tap-highlight-color

Cet attribut n'est utilisé que sur iOS (iPhone et iPad). Lorsque vous cliquez sur un lien ou un élément cliquable défini via Javascript, il apparaîtra avec un fond gris semi-transparent. Pour réinitialiser ce comportement, vous pouvez définir -webkit-tap-highlight-color sur n'importe quelle couleur.

Pour désactiver cette mise en évidence, définissez la valeur alpha de la couleur sur 0.

Exemple : définissez la couleur de surbrillance sur 50 % de rouge transparent :

-webkit-tap-highlight-color: rgba(255,0,0,0.5);

Support navigateur : iOS (iPhone et iPad uniquement).

contour : aucun (1) Le but de la définition de ce style pour la balise a côté PC est d'annuler la ligne pointillée qui apparaît lorsque l'on clique sur la balise a. sous le navigateur IE. Les navigateurs IE7 et inférieurs ne reconnaissent pas encore cet attribut. Vous devez ajouter l'entrée hidefocus="true"(2) sur la balise a, textarea{outline:none} pour annuler le style de focus de la zone de texte par défaut sous Chrome (3). non disponible sur le terminal mobile. Cela fonctionne. Si vous souhaitez supprimer le style par défaut de la zone de texte, vous pouvez utiliser -webkit-apparence Pour annuler le style par défaut lors de la mise au point, -webkit-tap-highlight-color. J'ai vu certains fichiers de réinitialisation mobile ajouter cet attribut, mais il est en fait redondant.

webkit-owned -webkit-owned: none; //Élimine l'apparence native de la zone de saisie et du bouton Ce n'est qu'en ajoutant cet attribut sur iOS que vous pouvez personnaliser le style du bouton et de la zone de saisie. Remarque : Différents types d'entrée se comportent différemment après l'utilisation de cet attribut. Le texte et les boutons n'ont pas de style, et la radio et la case à cocher disparaissent directement.

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!