Création de cartes animées et cliquables avec la classe pseudo relationnelle: a ()

Les navigateurs Chrome et Safari ont entièrement pris en charge le :has() pseudo-classe de CSS, qui est progressivement lancé dans de nombreux navigateurs. Il est souvent appelé un "sélecteur parent" - nous pouvons sélectionner et définir le style de l'élément parent via des sélecteurs d'enfants - mais :has() est utilisé beaucoup plus que cela. L'une des utilisations consiste à repenser le mode de carte cliquable que de nombreuses personnes utilisent souvent.

nous explorerons :has() comment nous aider avec les cartes de liaison, mais d'abord ...

:has() Qu'est-ce qu'une pseudo-classe?

Il existe de nombreux excellents articles qui expliquent le but de :has() bien, mais il est encore relativement nouveau, nous devons donc également le présenter brièvement ici.

:has() est une pseudo-classe relationnelle qui fait partie du projet de travail du niveau 4 du sélecteur W3C. C'est à cela que servent les supports: correspondre aux éléments associés à un élément enfant spécifique (plus précisément, contenant un élément enfant spécifique).

<code>/* 匹配包含图像元素的article元素 */
article:has(img) { }

/* 匹配article元素，其内部直接包含图像 */
article:has(> img) { }</code>

afin que vous puissiez comprendre pourquoi nous pourrions l'appeler un sélecteur "parent". Mais nous pouvons également l'utiliser en conjonction avec d'autres pseudo-classes fonctionnelles pour obtenir une correspondance plus spécifique. Supposons que nous voulons coiffer l'article ne contient aucune image. Nous pouvons combiner la capacité relationnelle de avec la capacité négative de :has() à y parvenir: :not()

<code>/* 匹配不包含图像的article元素 */
article:not(:has(img)) { }</code>

Mais ce n'est que le début de la façon dont nous pouvons combiner diverses capacités pour atteindre plus de fonctions en utilisant

. Avant de résoudre spécifiquement le puzzle de la carte cliquable, jetons un coup d'œil à certaines des façons de les traiter sans utiliser :has(). :has()

Comment traitons-nous actuellement avec les cartes cliquables

De nos jours, il existe trois façons principales pour les gens de créer des cartes entièrement cliquables.

"lien as en wrapper" Method

Cette méthode est souvent utilisée. Je n'utilise jamais cette méthode, mais j'ai créé une démo rapide pour le démontrer:

Il y a beaucoup de problèmes ici, surtout en ce qui concerne l'accessibilité. Lorsque les utilisateurs parcourent votre site Web à l'aide de la fonction Rotator, ils entendent le texte intégral dans l'élément

- Titre, texte et lien. Certaines personnes peuvent ne pas vouloir écouter tout cela. Nous pouvons faire mieux. En commençant par HTML5, nous pouvons nicher des éléments de blocage dans les éléments <a></a>. Mais cela me semble toujours mal, surtout pour cette raison. <a></a>

PROS:

implémenter rapidement
sémantique correct

Inconvénients:

Problèmes d'accessibilité
texte non sélectionnable
Il est très difficile de remplacer les styles utilisés dans le lien par défaut

Méthode JavaScript

Avec JavaScript, nous pouvons joindre des liens vers des cartes au lieu de les écrire dans des balises. J'ai trouvé cette impressionnante démo de codepen par Costdev, qui rend également le texte de la carte en option dans le processus:

Cette méthode présente de nombreux avantages. Nos liens sont accessibles lorsqu'ils sont focalisés et nous pouvons même sélectionner du texte. Mais il y a des inconvénients en termes de style. Par exemple, si nous voulons animer ces cartes, nous devons ajouter le style .card dans l'emballage principal :hover au lieu du lien lui-même. Nous ne bénéficions pas non plus de l'animation lorsque le lien est focalisé via les touches d'onglet clavier.

PROS:

• Une accessibilité complète peut être atteinte
• Texte sélectionnable

Inconvénients:

• javascript est requis
• ne peut pas cliquer avec le bouton droit (bien qu'il puisse être corrigé avec certains scripts supplémentaires)
• Beaucoup de styles doivent être effectués sur la carte elle-même, ce qui ne fonctionne pas lors de la concentration sur les liens

::after Méthode du sélecteur

Cette méthode nous oblige à définir la carte sur un positionnement relatif, puis à définir le positionnement absolu sur le sélecteur pseudo lié ::after. Cela ne nécessite aucun javascript et est facile à implémenter:

Il y a des inconvénients ici, surtout quand il s'agit de sélectionner du texte. Vous ne pourrez pas sélectionner le texte à moins que vous ne fournissiez un indice Z plus élevé sur le corps de la carte, mais si vous le faites, sachez que cliquer sur le texte n'activera pas votre lien. Que vous souhaitiez un texte sélectionnable dépend de vous. Je pense que cela pourrait être un problème UX, mais cela dépend du cas d'utilisation. Le texte est toujours accessible via un lecteur d'écran, mais mon principal problème avec cette approche est le manque de possibilités d'animation.

PROS:

• facile à implémenter
• Liens accessibles, pas de texte redondant
• affecté lors de la volonté et de la concentration

Inconvénients:

• texte non sélectionnable
• Vous ne pouvez animer le lien que car c'est l'élément que vous planez.

Une nouvelle méthode: utilisez ::after en combinaison avec :has()

Maintenant que nous avons identifié des méthodes existantes pour les cartes cliquables, je voudrais montrer comment ajouter :has() au mix pour résoudre la plupart de ces lacunes.

En fait, basons cette approche sur la méthode que nous avons vue pour la dernière fois en utilisant ::after sur l'élément de liaison. Nous pouvons réellement utiliser :has() là-bas pour surmonter les limitations d'animation de la méthode.

Commençons par le marqueur:

<code>/* 匹配包含图像元素的article元素 */
article:has(img) { }

/* 匹配article元素，其内部直接包含图像 */
article:has(> img) { }</code>

Pour rester simple, je positionnerai les éléments directement dans CSS, au lieu d'utiliser des classes.

Pour cette démo, nous ajouterons la mise à l'échelle de l'image et les ombres à la carte pour planer et animer les liens afin que la flèche apparaisse et modifie la couleur du texte des liens. Pour simplifier les opérations, nous ajouterons des propriétés personnalisées dans la carte. C'est le style de base:

<code>/* 匹配包含图像元素的article元素 */
article:has(img) { }

/* 匹配article元素，其内部直接包含图像 */
article:has(> img) { }</code>

Très bien! Nous avons ajouté la mise à l'échelle initiale (--img-scale: 1.001), la couleur initiale du titre de la carte (--title-color: black) et certaines propriétés supplémentaires que nous utiliserons pour faire apparaître la flèche à partir du lien. Nous avons également défini l'état vide de la déclaration box-shadow pour l'avoir animé plus tard. Cela définit la base des cartes cliquables que nous devons créer maintenant, alors ajoutons quelques réinitialisations et styles en ajoutant ces propriétés personnalisées aux éléments que nous voulons animer:

<code>/* 匹配不包含图像的article元素 */
article:not(:has(img)) { }</code>

Soyons conviviaux et ajoutons une classe cachée dans le lecteur d'écran derrière le lien:

<img src="/static/imghwm/default1.png" data-src="https://img.php.cn/" class="lazy" alt="Creating Animated, Clickable Cards With the :has() Relational Pseudo Class "><div clas="article-body">
    <h2>Some Heading</h2>
    <p>Curabitur convallis ac quam vitae laoreet. Nulla mauris ante, euismod sed lacus sit amet, congue bibendum eros. Etiam mattis lobortis porta. Vestibulum ultrices iaculis enim imperdiet egestas.</p>
    <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">
      Read more
       <svg fill="currentColor" viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" fill-rule="evenodd"></path></svg></a>
  </div>

Nos cartes commencent à être belles. Il est temps d'y ajouter de la magie. En utilisant la pseudo-classe :has(), nous pouvons maintenant vérifier si notre lien est en plané ou ciblé, puis à mettre à jour nos propriétés personnalisées et ajouter box-shadow. Avec cette petite quantité de code CSS, nos cartes sont vraiment à la vie:

/* 卡片元素 */
article {
  --img-scale: 1.001;
  --title-color: black;
  --link-icon-translate: -20px;
  --link-icon-opacity: 0;

  position: relative;
  border-radius: 16px;
  box-shadow: none;
  background: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bfff;
  transform-origin: center;
  transition: all 0.4s ease-in-out;
  overflow: hidden;
}
/* 链接的::after伪元素 */
article a::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline: 0;
  cursor: pointer;
}

Avez-vous vu le contenu ci-dessus? Maintenant, si des éléments d'enfants de la carte sont planés ou concentrés, nous obtiendrons des styles mis à jour. Même si l'élément de liaison est le seul élément qui peut contenir un état de survol ou de mise au point dans la méthode de la carte cliquable, nous pouvons l'utiliser pour correspondre à l'élément parent et appliquer la transformation. ::after c'est tout. Un autre cas d'utilisation puissant pour les sélecteurs. Nous pouvons non seulement faire correspondre l'élément parent en déclarant d'autres éléments comme paramètres, mais aussi utiliser des pseudo-classes pour correspondre et définir le style de l'élément parent.

:has() PROS:

accessible

L'anime peut être défini
pas de javascript requis
Utiliser sur l'élément correct
• :hover
Inconvénients:

Le texte n'est pas facile à choisir.

Le support du navigateur est limité à Chrome et Safari (dans Firefox, il est pris en charge derrière le logo).
• Il s'agit d'une démonstration utilisant cette technique. Vous remarquerez peut-être un emballage supplémentaire autour de la carte, mais ce ne sont que quelques-unes des tentatives que j'ai faites lors de l'utilisation de requêtes de conteneur, qui n'est que l'une des autres grandes fonctionnalités qui sont lancées dans tous les principaux navigateurs.

Avez-vous d'autres exemples que vous souhaitez partager? La section des commentaires est la bienvenue dans d'autres solutions ou idées.

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!