Explication détaillée de l'utilisation de user-select en CSS3

Explication détaillée de l'utilisation de user-select en CSS3

L'attribut user-select est un nouvel attribut en CSS3, qui est utilisé pour définir si l'utilisateur peut sélectionner du texte. Il peut être utilisé pour tous les éléments à l'exception des éléments de remplacement. Ce qui suit est une description de l'utilisation principale et des précautions de la sélection par l'utilisateur. Pour plus d'informations, veuillez vous référer à la description du document CSS3 suivant.

(1) Syntaxe

sélection de l'utilisateur :aucun texte | tout élément

Valeur par défaut :texte

Portée applicable :Tous les éléments sauf les éléments de remplacement

(2) Description de la valeur

aucun :Le texte ne peut pas être sélectionné

texte :Le texte peut être sélectionné

tout : Lorsque tout le contenu est pris dans son ensemble peuvent être sélectionnés. Si vous double-cliquez ou cliquez sur un élément enfant dans le contexte, la partie sélectionnée sera l'élément ancêtre le plus élevé remontant à l'élément enfant.

Élément :Le texte peut être sélectionné, mais la plage de sélection est limitée par la limite de l'élément

(3) Prise en charge du navigateur

La figure suivante répertorie le niveau de support de chaque navigateur lorsque la valeur est none|text|all ; lorsque la valeur est element, la plupart des navigateurs ne le prennent pas en charge, il n'est donc pas répertorié.

(4) Description

1.IE6-9 ne prend pas en charge cet attribut, mais prend en charge son utilisation de l'attribut Tag onselectstart="return false;" pour obtenir l'effet de user-select:none Safari et Chrome également ; prend en charge cet attribut de balise ;

2. Cet attribut n'est pas pris en charge avant Opera12.5, mais comme IE6-9, il prend également en charge l'utilisation d'attributs de marque privée. unselectable ="on" pour obtenir l'effet de user-select:none ; une autre valeur de unselectable est off ; 3 .Sauf pour

Chrome et

Safari, dans les autres navigateurs, si le texte est défini sur -ms-user-select:none; , l'utilisateur Vous ne pourrez pas commencer à sélectionner du texte dans ce bloc de texte. Cependant, si l'utilisateur commence à sélectionner du texte dans une autre zone de la page, il peut toujours continuer à sélectionner la zone de texte en définissant le texte sur -ms-user-select ; >4. La fonctionnalité de script correspondante est userSelect

(5) Exemple

code CSS :

html code :

.box{
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

                                                   

<p class="box" onselectstart="return false;" unselectable="on">
    这是测试数据
</p>

Dans l'explication détaillée de User-SELECT en CSS3,

Les attributs User-SELECT sont de nouveaux attributs de CSS3, qui sont utilisés pour définir si l'utilisateur peut choisir le texte chinois. Il peut être utilisé pour tous les éléments à l'exception des éléments de remplacement. Ce qui suit est une description de l'utilisation principale et des précautions de la sélection par l'utilisateur. Pour plus d'informations, veuillez vous référer à la description du document CSS3 suivant.

Lien de référence : http://www.php.cn/

(1) Syntaxe

sélection de l'utilisateur :

aucun | texte | tous les éléments

Valeur par défaut : texte

Portée applicable : Tous les éléments sauf les éléments de remplacement

(2) Description de la valeur

aucun :

Le texte ne peut pas être sélectionné

texte :Le texte peut être sélectionné

tout : peut être sélectionné lorsque tout le contenu est pris dans son ensemble. Si vous double-cliquez ou cliquez sur un élément enfant dans le contexte, la partie sélectionnée sera l'élément ancêtre le plus élevé remontant à l'élément enfant.

Élément :Le texte peut être sélectionné, mais la plage de sélection est limitée par la limite de l'élément

(3) Prise en charge du navigateur

La figure suivante répertorie le niveau de support de chaque navigateur lorsque la valeur est none|text|all ; lorsque la valeur est element, la plupart des navigateurs ne le prennent pas en charge, il n'est donc pas répertorié.

(4) Description

1.

IE6-9

n'est pas pris en charge Cet attribut prend en charge l'utilisation des attributs de balise

onselectstart="return false;"

pour obtenir l'effet de user-select:none Safari et ; ChromeCet attribut de balise est également pris en charge  ;

2. Cet attribut n'est toujours pas pris en charge jusqu'à Opera12.5, mais comme IE6-9, il prend également en charge l'utilisation d'attributs de balises privées unselectable="on " pour obtenir l'effet de user-select:none; une autre valeur de non sélectionnable est off;

3. Sauf En plus de Chrome et Safari, dans d'autres navigateurs, si le texte est défini sur -ms-user-select:none;, l'utilisateur ne pouvoir commencer à sélectionner du texte dans le bloc. Cependant, si l'utilisateur commence à sélectionner du texte dans une autre zone de la page, il peut toujours continuer à sélectionner la zone de texte en définissant le texte sur -ms-user-select ; >

4. La fonctionnalité de script correspondante est

userSelect

(5) Exemple

code CSS :

.box{
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

html code :

<p class="box" onselectstart="return false;" unselectable="on">
    这是测试数据
</p>

Pour des explications plus détaillées sur l'utilisation de user-select en CSS3, veuillez faire attention au site Web PHP chinois pour les articles connexes !