Pseudo-classes - les bases

(adapté de "HTML5 & CSS3 pour le monde réel" par Alexis Goldstein, Louis Lazaris et Estelle Weyl)

Points de base

CSS La pseudo-classe est utilisée pour définir l'état spécial d'un élément, y compris la structure, les opérations utilisateur, l'entrée et les pseudo-classes négatives. Ils peuvent styliser des éléments en fonction de l'emplacement de l'élément dans l'arborescence de documents, l'interaction utilisateur, l'état de l'élément de formulaire ou les éléments qui ne correspondent pas à un sélecteur particulier.

Certaines pseudo-classes peuvent avoir des problèmes de sécurité, tels que :visited pseudo-classes, qui peuvent être utilisés par un attaquant pour vérifier l'historique de la navigation de l'utilisateur. Les navigateurs modernes limitent les styles qui peuvent être appliqués à :visited pour éviter ce problème. Pour améliorer l'accessibilité, il est recommandé d'ajouter :hover où :focus est inclus, car tous les visiteurs n'utilisent pas la souris pour parcourir le site Web.

Alors que la plupart des navigateurs modernes prennent en charge toutes les pseudo-classes CSS, certains navigateurs plus âgés peuvent ne pas prendre en charge certaines pseudo-classes, telles que :nth-child() et :nth-last-child(). Les bibliothèques JavaScript comme Selevizr peuvent être utilisées pour localiser ces pseudo-classes dans les navigateurs manquant de support tels que Internet Explorer.

css pseudo-classe

Vous connaissez peut-être déjà certaines pseudo-classes d'interaction utilisateur, à savoir :link, :visited, :hover, :active, :focus et

.

Conseils importants: points clés

:visited :visited La pseudo-classe peut avoir des problèmes de sécurité, de sorte que le navigateur ne prend pas en charge l'application de toutes les propriétés CSS sur le lien visité. Sans ces restrictions, un site Web malveillant peut vérifier si l'utilisateur a visité un site Web ou une banque populaire pour le style des liens visités (par exemple, une image d'arrière-plan unique à chaque application de liaison visité). Cela permet à un attaquant de visualiser l'historique de la navigation de l'utilisateur sans autorisation. Par conséquent, les navigateurs modernes limitent les styles qui peuvent être appliqués à :hover. La spécification permet explicitement ces modifications, indiquant que les agents utilisateur (UAS) peuvent traiter tous les liens comme des liens non atteints, ou implémenter d'autres mesures pour protéger la confidentialité des utilisateurs tout en présentant différentes façons d'accès et des liens non atteints. Pour améliorer l'accessibilité, ajoutez :focus où :hover est inclus, car tous les visiteurs n'utilisent pas la souris pour parcourir votre site Web. :focus peut être appliqué à n'importe quel élément de la page, pas seulement des liens et des contrôles de formulaire. :active et tabindex sont liés aux liens, aux contrôles de formulaire, aux éléments de contenu modifiables et à tout élément avec des attributs

.

Bien que vous puissiez utiliser ces pseudo-classes de base depuis un certain temps, il existe de nombreuses autres pseudo-classes disponibles. Certaines de ces pseudo-classes sont autour de la spécification depuis des années, mais n'étaient pas soutenues (ou généralement comprises) jusqu'à ce que les navigateurs commencent à soutenir de nouvelles propriétés de formulaire HTML5 qui les rendent plus pertinentes. La pseudo-classe suivante correspond aux éléments basés sur les attributs, les interactions utilisateur et l'état de contrôle du formulaire:

• :enabled: élément d'interface utilisateur activé, essentiellement tout contrôle de formulaire qui prend en charge l'attribut disabled mais n'applique actuellement pas cet attribut.
• :disabled: Au lieu de cela, l'élément d'interface utilisateur désactivé: tout contrôle de formulaire qui prend en charge l'attribut disabled et a actuellement cet attribut appliqué.
• :checked: un bouton radio ou une case à cocher qui a été sélectionnée ou cochée.
• :indeterminate: L'élément de forme qui n'est ni sélectionné ni non sélectionné. Par exemple, si vous cochez la case Sélectionnez la case pour sélectionner un ensemble de cases à cocher, puis désélectionnez certaines mais pas toutes les cases à cocher dans le groupe, vous pouvez définir Sélectionnez tout dans un état incertain (en utilisant JavaScript) pour indiquer qu'il n'est ni l'un ni l'autre de sélectionné ni incontrôlé.
• :target: Ce sélecteur sélectionne l'élément cible du point d'ancrage dans la page actuellement active. Cela semble plus compliqué qu'il ne l'est réellement: vous savez déjà que vous pouvez créer un lien vers une ancre dans la page en utilisant le caractère # avant l'ID de la cible. Par exemple, vous pouvez avoir un lien "Skip to Content" dans votre page, et après avoir cliqué sur ce lien, il sautera à un élément avec "Contenu" ID. Cela modifie l'URL dans la barre d'adresse en thispage.html#content, et le sélecteur :target correspond désormais à l'élément du document avec le "contenu" d'ID. C'est comme si vous incluiez temporairement le sélecteur #content. Nous disons "temporaire" car une fois que l'utilisateur clique sur un autre point d'ancrage, :target correspondra à la nouvelle cible.
• :default: appliqué à un ou plusieurs éléments d'interface utilisateur qui sont des valeurs par défaut dans un ensemble d'éléments similaires. Par exemple, si un bouton radio dans un ensemble de boutons radio avec le même nom est sélectionné lorsque la page est chargée, elle continuera de correspondre à :default après un autre bouton radio du groupe avec le même nom sélectionné. De même, la case à cocher qui a été sélectionnée lorsque le chargement de la page continuera de correspondre à :default après avoir été sans contrôle.
• :valid: Éléments valides en fonction du type, du modèle ou d'autres propriétés d'entrée (comme nous l'avons discuté au chapitre 4).
• :invalid: Éléments et éléments requis vides qui ne peuvent pas répondre aux exigences des définitions de type ou d'attribut de modèle.
• :in-range: Éléments avec des limites de plage et des valeurs dans ces limites. Par exemple, cela s'applique aux types d'entrée à date / heure, numéro et plage avec les propriétés min et max. Lorsque la valeur est nul, elle est :in-range.
• :out-of-range: Antonym de :in-range: un élément dont la valeur dépasse sa limite de plage. Les valeurs manquantes ne sont pas dans la plage car elles sont vides.
• :required: Le contrôle de formulaire avec l'ensemble d'attribut :required.
• :optional: Tous les contrôles de formulaire sans :required Attributs.
• :read-only: L'élément de l'utilisateur ne peut pas modifier son contenu. La plupart d'entre eux sont des éléments à l'exception des éléments avec l'ensemble d'attribut contenteditable et le champ de formulaire.
• :read-write: L'utilisateur peut modifier des éléments de son contenu, tels que le composant contenteditable et les champs d'entrée écrivains.

Dans les navigateurs qui prennent en charge les propriétés dans leurs contrôles de forme, la prise en charge du navigateur pour ces propriétés est complète; IE8 et les versions antérieures ne prennent pas en charge required, pattern, :valid et :invalid. La bonne nouvelle est que IE9 prend en charge ces sélecteurs, mais pas les sélecteurs d'interface utilisateur. IE10 et IE11 Prise en charge :checked, :enabled et :disabled, mais ne supportez pas :target, :indeterminate, :required, :optional, :default, :in-range ou :out-of-range. Bien que l'assistance fasse encore défaut, les bibliothèques JavaScript comme Selevizr peuvent aider à localiser ces pseudo-classes dans Internet Explorer. :read-only :read-write

FAQS pour les pseudo-classes CSS (FAQ)

(La partie FAQ est omise ici car la longueur est trop longue et ne correspond pas à l'objectif pseudo-original. Certaines FAQ peuvent être détenus sélectivement ou réécrits au besoin et restent cohérents avec la signification d'origine.)

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!