Δημιουργία κινούμενων καρτών με δυνατότητα κλικ με την :has() Σχεσιακή ψευδο-κλάση PlatoBlockchain Data Intelligence. Κάθετη αναζήτηση. Ολα συμπεριλαμβάνονται.

Δημιουργία κινούμενων καρτών με δυνατότητα κλικ με τη σχεσιακή ψευδοκλάση :has().

Χρονική σήμανση: 25 Οκτωβρίου 2022 10:15 π.μ.

Το CSS :has() ψευδοκλάση κυκλοφορεί σε πολλά προγράμματα περιήγησης με Chrome και Safari το υποστηρίζει ήδη πλήρως. Συχνά αναφέρεται ως "ο γονικός επιλογέας" - όπως στο, μπορούμε να επιλέξουμε στυλ ένα γονικό στοιχείο από έναν θυγατρικό επιλογέα - αλλά υπάρχουν πολλά περισσότερα που :has() μπορεί να μας βοηθήσει να λύσουμε. Ένα από αυτά τα πράγματα είναι η επανεφεύρεση του μοτίβου καρτών με δυνατότητα κλικ σε πολλούς από εμάς αρέσει να χρησιμοποιούν κατά καιρούς.

Θα ρίξουμε μια ματιά στο πώς :has() μπορεί να μας βοηθήσει να χειριστούμε συνδεδεμένες κάρτες, αλλά πρώτα…

Τι είναι αυτό :has() ψευδοτάξη;

Υπάρχει ήδη ένα δέσμη of εξαιρετική δημοσιεύσεις που επιπλέει τριγύρω που κάνουν εξαιρετική δουλειά εξηγώντας τι :has() είναι και σε τι χρησιμεύει, αλλά είναι ακόμα αρκετά νέο που θα πρέπει να πούμε λίγα λόγια γι 'αυτό και εδώ.

:has() είναι μια σχεσιακή ψευδοκλάση που είναι μέρος του W3C Selectors Level 4 λειτουργικό προσχέδιο. Αυτό είναι το ζητούμενο στις παρενθέσεις: αντιστοίχιση στοιχείων που σχετίζονται με — ή, ακριβέστερα, περιέχουν — ορισμένα θυγατρικά στοιχεία.

/* Matches an article element that contains an image element */
article:has(img) { }

/* Matches an article element with an image contained immediately within it */
article:has(> img) { }

Έτσι, μπορείτε να δείτε γιατί ίσως θέλουμε να τον ονομάσουμε επιλογέα "γονέα". Αλλά μπορούμε επίσης να το συνδυάσουμε με άλλες λειτουργικές ψευδοκλάσεις για να γίνουμε πιο συγκεκριμένοι. Ας πούμε ότι θέλουμε να διαμορφώσουμε στυλ σε άρθρα που το κάνουν δεν περιέχει οποιεσδήποτε εικόνες. Μπορούμε να συνδυάσουμε τις σχεσιακές δυνάμεις του :has() με τις αρνητικές δυνάμεις του :not() Να κάνω αυτό:

/* Matches an article without images  */
article:not(:has(img)) { }

Αλλά αυτή είναι μόνο η αρχή για το πώς μπορούμε να συνδυάσουμε δυνάμεις για να κάνουμε περισσότερα :has(). Πριν στραφούμε συγκεκριμένα στην επίλυση του γρίφου της κάρτας με δυνατότητα κλικ, ας δούμε μερικούς τρόπους με τους οποίους προσεγγίζουμε αυτήν τη στιγμή χωρίς να χρησιμοποιούμε :has().

Πώς χειριζόμαστε αυτήν τη στιγμή τις κάρτες με δυνατότητα κλικ

Υπάρχουν τρεις βασικές προσεγγίσεις σχετικά με τον τρόπο με τον οποίο οι άνθρωποι δημιουργούν μια κάρτα με πλήρη κλικ στις μέρες μας και για να κατανοήσουμε πλήρως τη δύναμη αυτής της ψευδο-κλάσης, είναι ωραίο να κάνουμε μια μικρή στρογγυλοποίηση.

Αυτή η προσέγγιση είναι κάτι που χρησιμοποιείται αρκετά συχνά. Δεν χρησιμοποιώ ποτέ αυτήν την προσέγγιση, αλλά δημιούργησα μια γρήγορη επίδειξη για να την αποδείξω:

Υπάρχουν πολλές ανησυχίες εδώ, ειδικά όσον αφορά την προσβασιμότητα. Όταν οι χρήστες περιηγούνται στον ιστότοπό σας χρησιμοποιώντας τη λειτουργία του ρότορα, θα ακούσουν το πλήρες κείμενο μέσα σε αυτό στοιχείο — η επικεφαλίδα, το κείμενο και ο σύνδεσμος. Κάποιος μπορεί να μην θέλει να σταθεί σε όλα αυτά. Μπορούμε καλύτερα. Από την HTML5, μπορούμε να τοποθετήσουμε μπλοκ στοιχεία μέσα σε ένα στοιχείο. Αλλά ποτέ δεν μου φαίνεται σωστό, ειδικά για αυτόν τον λόγο.

Πλεονεκτήματα:

  • Γρήγορη εφαρμογή
  • Σημασιολογικά σωστό

Μειονεκτήματα:

  • Ανησυχίες για την προσβασιμότητα
  • Το κείμενο δεν είναι επιλέξιμο
  • Πολλή ταλαιπωρία για την αντικατάσταση στυλ που χρησιμοποιήσατε στους προεπιλεγμένους συνδέσμους σας

Η μέθοδος JavaScript

Χρησιμοποιώντας JavaScript, μπορούμε να επισυνάψουμε έναν σύνδεσμο στην κάρτα μας αντί να τον γράψουμε στη σήμανση. Βρήκα αυτό το υπέροχο demo του CodePen από costdev ο οποίος έκανε επίσης το κείμενο της κάρτας επιλέξιμο στη διαδικασία:

Αυτή η προσέγγιση έχει πολλά οφέλη. Οι σύνδεσμοί μας είναι προσβάσιμοι με εστίαση και μπορούμε ακόμη και να επιλέξουμε κείμενο. Αλλά υπάρχουν ορισμένα μειονεκτήματα όσον αφορά το στυλ. Αν θέλουμε να κάνουμε κίνηση σε αυτές τις κάρτες, για παράδειγμα, θα πρέπει να προσθέσουμε :hover στυλ στο κύριο μας .card περιτύλιγμα αντί για τον ίδιο τον σύνδεσμο. Επίσης, δεν θα επωφεληθούμε από τα κινούμενα σχέδια όταν οι σύνδεσμοι εστιάζονται από την καρτέλα πληκτρολογίου.

Πλεονεκτήματα:

  • Μπορεί να γίνει τέλεια προσβάσιμο
  • Δυνατότητα επιλογής κειμένου

Μειονεκτήματα:

  • Απαιτεί JavaScript
  • Το δεξί κλικ δεν είναι δυνατό (αν και θα μπορούσε να διορθωθεί με κάποιο επιπλέον σενάριο)
  • Θα απαιτήσει πολύ στυλ στην ίδια την κάρτα που δεν θα λειτουργούσε κατά την εστίαση του συνδέσμου

Η ::after προσέγγιση επιλογής

Αυτή η μέθοδος απαιτεί να ορίσουμε την κάρτα με σχετική τοποθέτηση και, στη συνέχεια, να ορίσουμε την απόλυτη θέση στους συνδέσμους ::after ψευδοεπιλογέας ενός συνδέσμου. Αυτό δεν απαιτεί JavaScript και είναι αρκετά εύκολο να εφαρμοστεί:

Υπάρχουν μερικά μειονεκτήματα εδώ, ειδικά όταν πρόκειται για την επιλογή κειμένου. Εάν δεν παρέχετε υψηλότερο δείκτη z στο σώμα της κάρτας σας, δεν θα μπορείτε να επιλέξετε κείμενο, αλλά εάν το κάνετε, προειδοποιηθείτε ότι κάνοντας κλικ στο κείμενο δεν θα ενεργοποιηθεί ο σύνδεσμός σας. Το αν θέλετε ή όχι κείμενο με δυνατότητα επιλογής εξαρτάται από εσάς. Νομίζω ότι μπορεί να είναι θέμα UX, αλλά εξαρτάται από την περίπτωση χρήσης. Το κείμενο εξακολουθεί να είναι προσβάσιμο στους αναγνώστες οθόνης, αλλά το κύριο πρόβλημά μου με τη μέθοδο είναι η έλλειψη δυνατοτήτων κινούμενης εικόνας.

Πλεονεκτήματα:

  • Εύκολο στην εφαρμογή
  • Προσβάσιμος σύνδεσμος χωρίς φουσκωμένο κείμενο
  • Λειτουργεί με αιώρηση και εστίαση

Μειονεκτήματα:

  • Το κείμενο δεν είναι επιλέξιμο
  • Μπορείτε να κάνετε μόνο κίνηση του συνδέσμου, καθώς αυτό είναι το στοιχείο που τοποθετείτε τον δείκτη του ποντικιού.

Μια νέα προσέγγιση: Χρήση ::after με :has()

Τώρα που καθιερώσαμε τις υπάρχουσες προσεγγίσεις για κάρτες με δυνατότητα κλικ, θέλω να δείξω πόσο εισαγωγικές :has() στο μείγμα επιλύει τις περισσότερες από αυτές τις ελλείψεις.

Στην πραγματικότητα, ας βασίσουμε αυτή την προσέγγιση στην τελευταία που εξετάσαμε να χρησιμοποιήσουμε ::after στο στοιχείο σύνδεσης. Μπορούμε πραγματικά να χρησιμοποιήσουμε :has() εκεί για να ξεπεραστούν οι περιορισμοί κινούμενης εικόνας αυτής της προσέγγισης.

Ας ξεκινήσουμε με τη σήμανση:


  Fluffy gray and white tabby kitten snuggled up in a ball.
  

    
Some Heading

    
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.

Θα κρατήσω τα πράγματα όσο πιο απλά γίνεται στοχεύοντας στοιχεία στο CSS αντί για κλάσεις.

Για αυτήν την επίδειξη, θα προσθέσουμε ένα ζουμ και μια σκιά εικόνας στην κάρτα κατά την αιώρηση και θα κάνουμε κίνηση του συνδέσμου με ένα βέλος που εμφανίζεται και ενώ αλλάζουμε το χρώμα του κειμένου του συνδέσμου. Για να το κάνουμε αυτό εύκολο, θα προσθέσουμε ορισμένες προσαρμοσμένες ιδιότητες που έχουν εύρος στην κάρτα μας. Εδώ είναι το βασικό στυλ:

/* The card element */
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: #fff;
  transform-origin: center;
  transition: all 0.4s ease-in-out;
  overflow: hidden;
}
/* The link's ::after pseudo */
article a::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline: 0;
  cursor: pointer;
}

Μεγάλος! Προσθέσαμε μια αρχική κλίμακα για την εικόνα (--img-scale: 1.001), το αρχικό χρώμα της επικεφαλίδας της κάρτας (--title-color: black) και μερικές επιπλέον ιδιότητες που θα χρησιμοποιήσουμε για να κάνουμε το βέλος μας να βγει από τον σύνδεσμο. Έχουμε επίσης ορίσει μια κενή κατάσταση του box-shadow δήλωση για να το ζωντανέψει αργότερα. Αυτό ρυθμίζει αυτό που χρειαζόμαστε για την κάρτα με δυνατότητα κλικ αυτήν τη στιγμή, οπότε ας προσθέσουμε μερικές επαναφορές και στυλ σε αυτήν προσθέτοντας αυτές τις προσαρμοσμένες ιδιότητες στα στοιχεία που θέλουμε να κάνουμε κίνηση:

article h2 {
  margin: 0 0 18px 0;
  font-family: "Bebas Neue", cursive;
  font-size: 1.9rem;
  letter-spacing: 0.06em;
  color: var(--title-color);
  transition: color 0.3s ease-out;
}
article figure {
  margin: 0;
  padding: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
article img {
  max-width: 100%;
  transform-origin: center;
  transform: scale(var(--img-scale));
  transition: transform 0.4s ease-in-out;
}
article a {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: #28666e;
}
article a:focus {
  outline: 1px dotted #28666e;
}
article a .icon {
  min-width: 24px;
  width: 24px;
  height: 24px;
  margin-left: 5px;
  transform: translateX(var(--link-icon-translate));
  opacity: var(--link-icon-opacity);
  transition: all 0.3s;
}

.article-body {
  padding: 24px;
}

Ας είμαστε ευγενικοί με τους ανθρώπους και ας προσθέσουμε επίσης ένα τάξη αναγνώστη οθόνης κρυμμένο πίσω από τον σύνδεσμο:

.sr-only:not(:focus):not(:active) {
  clip: rect(0 0 0 0); 
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap; 
  width: 1px;
}

Η κάρτα μας έχει αρχίσει να φαίνεται πολύ γλυκιά. Ήρθε η ώρα να προσθέσετε λίγη μαγεία σε αυτό. Με το :has() ψευδοκλάση, μπορούμε τώρα να ελέγξουμε αν ο σύνδεσμός μας είναι τοποθετημένος ή εστιασμένος, στη συνέχεια ενημερώσουμε τις προσαρμοσμένες ιδιότητές μας και προσθέσουμε ένα box-shadow. Με αυτό το μικρό κομμάτι CSS η κάρτα μας ζωντανεύει πραγματικά:

/* Matches an article element that contains a hover or focus state */
article:has(:hover, :focus) {
  --img-scale: 1.1;
  --title-color: #28666e;
  --link-icon-translate: 0;
  --link-icon-opacity: 1;

  box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
}

Δείτε τι υπάρχει εκεί πάνω; Τώρα έχουμε τα ενημερωμένα στυλ if κάθε Το παιδικό στοιχείο στην κάρτα τοποθετείται ή εστιάζεται. Και παρόλο που το στοιχείο σύνδεσης είναι το μόνο πράγμα που μπορεί να περιέχει κατάσταση αιώρησης ή εστίασης στο ::after Η προσέγγιση κάρτας με δυνατότητα κλικ, μπορούμε να τη χρησιμοποιήσουμε για να ταιριάξουμε το γονικό στοιχείο και να εφαρμόσουμε τις μεταβάσεις.

Και εκεί το έχετε. Άλλη μια ισχυρή περίπτωση χρήσης για το :has() εκλέκτορας. Όχι μόνο μπορούμε να αντιστοιχίσουμε ένα γονικό στοιχείο δηλώνοντας άλλα στοιχεία ως ορίσματα, αλλά μπορούμε να ταιριάξουμε και χρήση ψευδών για αντιστοίχιση και στυλ γονέων επίσης.

Πλεονεκτήματα:

  • Προσιτό
  • Ζωντανό
  • Δεν απαιτείται JavaScript
  • μπορείτε να χρησιμοποιήσετε :hover στο σωστό στοιχείο

Μειονεκτήματα:

  • Το κείμενο δεν επιλέγεται εύκολα.
  • Η υποστήριξη του προγράμματος περιήγησης περιορίζεται στο Chrome και το Safari (υποστηρίζεται στον Firefox πίσω από μια σημαία).

Εδώ είναι ένα demo που χρησιμοποιεί αυτή την τεχνική. Μπορεί να παρατηρήσετε ένα επιπλέον περιτύλιγμα γύρω από την κάρτα, αλλά μόνο εγώ παίζω με αυτό ερωτήματα κοντέινερ, που είναι μόνο ένα από εκείνα τα άλλα φανταστικά πράγματα που κυκλοφορούν σε όλα τα μεγάλα προγράμματα περιήγησης.

Πήρα κάποια άλλα παραδείγματα θέλετε να μοιραστείτε; Άλλες λύσεις ή ιδέες είναι περισσότερο από ευπρόσδεκτες στην ενότητα σχολίων.

Σφραγίδα ώρας:

Περισσότερα από Κόλπα CSS