: επισκέφθηκε - CSS-Κόλπα

Anonim

Ο :visitedεπιλογέας ψευδοκλάσης μπορεί να αλλάξει μέρος του στυλ σε ένα στοιχείο συνδέσμου αγκύρωσης ( ) εάν το πρόγραμμα περιήγησης του χρήστη έχει ήδη επισκεφθεί τον σύνδεσμο. Έχει σκοπό να βοηθήσει τους χρήστες να διακρίνουν τη διαφορά μεταξύ των συνδέσμων που έχουν και δεν έχουν επισκεφτεί.

a:visited ( color: gray; )

Περιορισμοί και χρήση

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

Ως αποτέλεσμα, τα περισσότερα προγράμματα περιήγησης περιορίζουν το στυλ που μπορεί να αλλάξει σε :visitedσυνδέσμους και ποιες πληροφορίες στυλ μπορούν να αναφερθούν με τη getComputedStyleμέθοδο.

Αυτή είναι μια καλή μείωση αυτής της κατάστασης.

Αυτές είναι οι ιδιότητες που μπορούν να αλλάξουν με :visited:

  • color
  • background-color
  • border-color (και τις υπο-ιδιότητές του)
  • outline-color
  • Τα χρωματικά μέρη των fillκαι strokeιδιοτήτων

Μπορείτε να χρησιμοποιήσετε μόνο :visitedγια να αλλάξετε αυτές τις ιδιότητες εάν ο σύνδεσμος τις έχει ήδη στην κατάσταση "unvisited" ή στην :linkκατάσταση. Δεν μπορείτε να το χρησιμοποιήσετε για να προσθέσετε ιδιότητες που δεν υπάρχουν ήδη στον σύνδεσμο. Για παράδειγμα:

Μπορείτε να αλλάξετε το background-colorένα :visitedlink αν το στοιχείο σύνδεσης ήδη ένα χρώμα φόντου.

Δεν μπορείτε να προσθέσετε ένα background-colorσε έναν :visitedσύνδεσμο εάν δεν είχε χρώμα φόντου όταν ήταν "μη επισκέφθηκε" σύνδεσμος.

Συνδέστε ψευδο-τάξεις σε σειρά

Είναι επίσης χρήσιμο να γνωρίζετε ότι οι περισσότερες ψευδο-τάξεις συνδέσμων πρέπει να δηλώνονται με συγκεκριμένη σειρά. Η παραγγελία είναι:

  1. Σύνδεσμος
  2. Επισκέφτηκε
  3. Φτερουγίζω
  4. Ενεργός

Εάν συμπεριλαμβάνετε το :focusστυλ για τον σύνδεσμό σας, είναι συνηθισμένο να το προσθέσετε μεταξύ του "αιωρημένου" και του "ενεργού".

Διαδήλωση

Επέκταση :visited

Αν και το άμεσο στυλ για :visitedσυνδέσμους είναι περιορισμένο, υπάρχουν πολλοί έξυπνοι τρόποι για να επεκτείνετε τις επιλογές σας για το στυλ των συνδέσμων που επισκέπτεστε. Το 2015 υπήρξε μια μεγάλη έκταση αναρτήσεων ιστολογίου που μοιράζονταν νέες ιδέες για το στυλ των :visitedσυνδέσμων:

Επανεξέταση: Η επίσκεψη , από τον Joel Califa, δείχνει ένα παράδειγμα χρήσης localstorageσε στυλ επισκέψεων, συνδέσμων εντός τομέα.

Hacking: επισκέφθηκε , από την Una Kravets, ανοίγει :visitedτο κεφάλι του προσθέτοντας μια ετικέτα "χωρίς επίσκεψη" ως :afterπεριεχόμενο σε συνδέσμους, η οποία στη συνέχεια κρύβεται με μια εναλλαγή χρώματος φόντου μετά την επίσκεψη του συνδέσμου.

Ανεβάζοντας τα όρια των: επισκέψεων με λειτουργίες μίξης CSS , από το Stelian Firez, συνδυάζουμε ένα μικρό κόλπο HTML που αποδίδεται στο DuckDuckGo και background-blend-mode: screen;να ξεθωριάσει ένα προσαρμοσμένο εικονίδιο δίπλα σε έναν σύνδεσμο που επισκέπτεται.

Styling Επισκεπτόμενοι Σύνδεσμοι με SVG , από το Dudley Storey. Χρησιμοποιεί εικόνες SVG με fillσετ για να ταιριάζει με το χρώμα φόντου της σελίδας όταν ο σύνδεσμος βρίσκεται στην :linkκατάσταση και μετά σε άλλο χρώμα μετά τον σύνδεσμο :visited. Το σεμινάριο περιλαμβάνει επίσης μια εναλλακτική μέθοδο χρησιμοποιώντας χαρακτήρες Unicode αντί για SVG.

Σχετιζομαι με

  • :link
  • :active
  • :hover
  • :focus

Περισσότερες πληροφορίες

  • :visited στις προδιαγραφές W3C
  • :visited στο MDN

Υποστήριξη προγράμματος περιήγησης

Όλα τα προγράμματα περιήγησης το υποστηρίζουν.