Erstellen animierter, klickbarer Karten mit der: Has () relationalen Pseudoklasse

Chrome- und Safari-Browser haben die :has() Pseudo-Klasse von CSS vollständig unterstützt, die in vielen Browsern allmählich gestartet wird. Es wird oft als "übergeordneter Selektor" bezeichnet - wir können den Stil des übergeordneten Elements durch untergeordnete Selektoren auswählen und festlegen - aber :has() wird weit mehr verwendet. Eine der Verwendungen ist die Neugestaltung des klickbaren Kartenmodus, den viele Menschen häufig verwenden.

Wir werden :has() untersuchen, wie wir uns mit Linkkarten helfen können, aber zuerst ...

:has() Was ist eine Pseudoklasse?

Es gibt viele ausgezeichnete Artikel, die den Zweck von :has() erklären, aber es ist immer noch relativ neu, daher sollten wir ihn auch hier kurz vorstellen.

:has() ist eine relationale Pseudoklasse, die Teil des Arbeitsentwurfs der W3C-Auswahlstufe 4 ist. Dies ist, was Klammern sind: Übereinstimmung Elemente, die mit einem bestimmten untergeordneten Element verbunden sind (genauer gesagt, ein bestimmtes untergeordnetes Element enthält).

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

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

Sie können also verstehen, warum wir es als "übergeordnete" Selektor bezeichnen können. Wir können es aber auch in Verbindung mit anderen funktionellen Pseudoklassen verwenden, um eine spezifischere Übereinstimmung zu erhalten. Angenommen, wir möchten den Artikel keine Bilder enthält. Wir können die Beziehungsfähigkeit von mit der negativen Fähigkeit von :has() kombinieren, um dies zu erreichen: :not()

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

Aber dies ist nur der Beginn, wie wir verschiedene Funktionen kombinieren können, um mehr Funktionen mit

zu erzielen. Bevor wir das klickbare Kartenrätsel speziell lösen, schauen wir uns einige der Möglichkeiten an, mit ihnen umzugehen, ohne :has() zu verwenden. :has()

Wie gehen wir derzeit mit klickbaren Karten um

Heutzutage gibt es drei Hauptmethoden, um vollständig klickbare Karten zu erstellen, um die leistungsstarken Funktionen dieser Pseudoklasse vollständig zu verstehen.

"Link als Wrapper" -Methode

Diese Methode wird häufig verwendet. Ich benutze diese Methode nie, aber ich habe eine kurze Demo erstellt, um sie zu demonstrieren:

gibt es hier viele Probleme, insbesondere wenn es um Zugänglichkeit geht. Wenn Benutzer Ihre Website mithilfe der Rotatorfunktion durchsuchen, hören sie den vollständigen Text im Element

- Titel, Text und Link. Einige Leute möchten all dies vielleicht nicht hören. Wir können es besser machen. Beginnend mit HTML5 können wir Blockelemente in <a></a> Elementen nisten. Aber das fühlt sich für mich immer falsch an, besonders aus diesem Grund. <a></a>

Profis:

schnell implementieren
semantisch korrekt

Nachteile:

Zugänglichkeitsprobleme
Text nicht ausgewählt
Es ist sehr problematisch, die im Standard -Link verwendeten Stile zu überschreiben

JavaScript -Methode

Mit JavaScript können wir Links zu Karten anhängen, anstatt sie in Tags zu schreiben. Ich habe diese fantastische Codepen -Demo von Costdev gefunden, die im Vorgang auch den Kartentext optional macht:

Diese Methode hat viele Vorteile. Unsere Links sind bei der Fokussierung zugänglich und wir können sogar Text auswählen. Aber es gibt einige Nachteile in Bezug auf Stil. Wenn wir beispielsweise diese Karten animieren möchten, müssen wir den .card -Stil in die :hover Hauptverpackung anstelle des Links selbst hinzufügen. Wir profitieren auch nicht von der Animation, wenn der Link über die Registerkarten der Tastatur fokussiert wird.

Profis:

• Die vollständige Zugänglichkeit kann erreicht werden
• Auswahlbarer Text

Nachteile:

• JavaScript ist erforderlich
• kann nicht mit der rechten Maustaste klicken (obwohl es mit einigen zusätzlichen Skripten behoben werden kann)
• Viele Stile müssen auf der Karte selbst durchgeführt werden, was bei der Konzentration auf die Links
nicht funktioniert

::after Selektormethode

Diese Methode erfordert, dass wir die Karte auf die relative Positionierung einstellen und dann die absolute Positionierung auf dem verknüpften ::after pseudo -Selektor einstellen. Dies erfordert kein JavaScript und ist einfach zu implementieren:

Hier gibt es einige Nachteile, insbesondere wenn es um die Auswahl von Text geht. Sie können nicht in der Lage sein, Text auszuwählen, es sei denn, Sie liefern einen höheren Z-Index im Kartenkörper. Wenn Sie dies tun, sollten Sie sich jedoch bewusst, dass das Klicken auf den Text Ihren Link nicht aktiviert. Ob Sie ausgewählbarer Text möchten, liegt bei Ihnen. Ich denke, dies könnte ein UX -Problem sein, aber es hängt vom Anwendungsfall ab. Der Text ist immer noch über einen Bildschirmleser zugänglich, aber mein Hauptproblem bei diesem Ansatz ist die mangelnde Animationsmöglichkeiten.

Profis:

• einfach zu implementieren
• zugängliche Links, kein redundanter Text
• betrieben, wenn Sie
schweben und fokussieren

Nachteile:

• Text nicht ausgewählt
• Sie können den Link nur animieren, da dies das Element ist, das Sie schweben.

Eine neue Methode: Verwenden Sie ::after in Kombination mit :has()

Jetzt, da wir vorhandene Methoden für klickbare Karten identifiziert haben, möchte ich zeigen, wie Sie dem Mix :has() hinzufügen, um die meisten dieser Mängel zu lösen.

Lassen Sie uns diesen Ansatz in der Methode, die wir zuletzt mit ::after im Link -Element gesehen haben, aufbauen. Wir können dort :has() tatsächlich verwenden, um die Animationsbeschränkungen der Methode zu überwinden.

Beginnen wir mit dem Marker:

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

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

Um es einfach zu halten, werde ich Elemente direkt in CSS positionieren, anstatt Klassen zu verwenden.

Für diese Demo werden wir der Karte Bildskalierung und Schatten hinzufügen, um die Links so zu schweben und zu animieren, damit der Pfeil die Textfarbe der Links ändert. Um den Vorgang zu vereinfachen, werden wir der Karte einige benutzerdefinierte Eigenschaften hinzufügen. Dies ist der Grundstil:

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

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

Sehr gut! Wir haben die anfängliche Skalierung (--img-scale: 1.001), die anfängliche Farbe des Kartentitels (--title-color: black) und einige zusätzliche Eigenschaften hinzugefügt, mit denen der Pfeil aus dem Link auftaucht. Wir setzen auch den leeren Zustand der box-shadow -DEklaration, um ihn später zu beleben. Dies legt die Grundlage für die anklickbaren Karten fest, die wir jetzt erstellen müssen. Fügen wir also einige Resets und Stile hinzu, indem Sie diese benutzerdefinierten Eigenschaften zu den Elementen hinzufügen, die wir animieren möchten:

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

Lassen Sie uns benutzerfreundlich sein und eine Klasse hinzufügen, die im Bildschirmleser hinter dem Link versteckt ist:

<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>

Unsere Karten sehen an, schön auszusehen. Es ist Zeit, etwas Magie hinzuzufügen. Mit der :has() Pseudo-Klasse können wir nun überprüfen, ob unser Link schwebt oder fokussiert ist, dann unsere benutzerdefinierten Eigenschaften aktualisieren und box-shadow hinzufügen. Mit dieser kleinen Menge an CSS -Code werden unsere Karten wirklich zum Leben erweckt:

/* 卡片元素 */
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;
}

Haben Sie den obigen Inhalt gesehen? Wenn nun irgendwelche Kinderelemente in der Karte schwebten oder fokussiert sind, erhalten wir aktualisierte Stile. Auch wenn das Link -Element das einzige Element ist, das in der Klickkartenmethode einen Schwebe- oder Fokusstatus enthalten kann, können wir es verwenden, um das übergeordnete Element zu übereinstimmen und die Transformation anzuwenden. Das war's. Ein weiterer leistungsstarker Anwendungsfall für Selektoren. Wir können nicht nur das übergeordnete Element übereinstimmen, indem wir andere Elemente als Parameter deklarieren, sondern auch Pseudoklasse verwenden, um den Stil des übergeordneten Elements zu übereinstimmen und festzulegen. ::after

Profis: :has()

zugänglich

Anime kann eingestellt werden

• kein JavaScript erforderlich
• Verwenden Sie im richtigen Element
• :hover Nachteile:

Text ist nicht einfach zu wählen.

Browserunterstützung beschränkt sich auf Chrome und Safari (in Firefox wird es hinter dem Logo unterstützt).

Dies ist eine Demonstration mit dieser Technik. Möglicherweise bemerken Sie einen zusätzlichen Wrapper um die Karte, aber dies sind nur einige der Versuche, die ich bei der Verwendung von Containeranfragen unternommen habe. Dies ist nur eines der anderen großartigen Funktionen, die in allen großen Browsern gestartet werden.
Haben Sie einige andere Beispiele, die Sie teilen möchten? Der Kommentarbereich ist sehr willkommen zu anderen Lösungen oder Ideen.

Das obige ist der detaillierte Inhalt vonErstellen animierter, klickbarer Karten mit der: Has () relationalen Pseudoklasse. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!