Περιεχόμενο - CSS-Κόλπα

Anonim

Η contentιδιότητα στο CSS χρησιμοποιείται σε συνδυασμό με τα ψευδο-στοιχεία ::beforeκαι ::after. Χρησιμοποιείται για την εισαγωγή κυριολεκτικά περιεχομένου. Υπάρχουν τέσσερις τύποι τιμών που μπορεί να έχει.

Σειρά

.name::before ( content: "Name: "; )

Τότε ένα στοιχείο σαν αυτό:

 Chris

Θα έδινε έτσι:

Name: Chris

Θα μπορούσε επίσης να είναι μια κενή συμβολοσειρά, η οποία εμφανίζεται συνήθως σε πράγματα όπως το Clearfix.

Μετρητής

div::before ( content: counter(my-counter); )

Περισσότερες πληροφορίες σχετικά με αυτό.

Εικόνα

div::before ( content: url(image.jpg.webp); )

Αυτή είναι κυριολεκτικά μια εικόνα στη σελίδα όπως θα ήταν. Θα μπορούσε επίσης να είναι μια κλίση. Σημειώστε ότι δεν μπορείτε να αλλάξετε τις διαστάσεις της εικόνας όταν εισαγάγετε με αυτόν τον τρόπο. Θα μπορούσατε επίσης να εισαγάγετε μια εικόνα χρησιμοποιώντας μια κενή συμβολοσειρά για το περιεχόμενο, κάνοντάς την display: blockμε κάποιο τρόπο, το μέγεθος και χρησιμοποιώντας background-image. Με αυτόν τον τρόπο θα μπορούσατε να το αλλάξετε μέγεθος background-size.

Χαρακτηριστικό

Μπορείτε να χρησιμοποιήσετε τιμές (συμβολοσειρές, ούτως ή άλλως) που λαμβάνονται απευθείας από τα χαρακτηριστικά του HTML.

 60 
(data-visual-label)::before ( content: attr(data-visual-label) ": "; ) /* Classic print trick! Show URLs! */ @media (print) ( a(href)::after ( content: " (" attr(href) ") "; /* you could combine a url() in here even if you wanted */ ) )

Η attr()συνάρτηση δεν έχει "τύπους" ακόμα, οπότε δεν μπορείτε να περάσετε μια τιμή όπως 20px(απλά χορδές), αλλά κάποια μέρα!

Εναλλακτικό κείμενο

Η προδιαγραφή λέει ότι μπορείτε να χρησιμοποιήσετε ένα /στη σύνταξη για να εμφανίσετε εναλλακτικό κείμενο. Για παράδειγμα…

.el::before ( content: "⭐️" / "Alternate Text for that star"; content: "→" / ""; /* Visual only, don't read. */ )

Ίσως θα μπορούσατε να το χρησιμοποιήσετε όπως…

 

    

  • Make Bed
    • 

  • Grocery Shop
    • 

  • Sweep Driveway
    • 



(data-alt-pseudo="Completed")::before ( content: "✅"; /* fallback */ content: "✅" / attr(data-alt-pseudo); )

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

Το περιεχόμενο που εισάγεται με αυτόν τον τρόπο δεν είναι πραγματικά στο DOM, επομένως έχει ορισμένους περιορισμούς. Για παράδειγμα, δεν μπορείτε να επισυνάψετε ένα συμβάν απευθείας (μόνο) σε ψευδο-στοιχεία. Είναι επίσης ασυνεπές εάν το κείμενο που εισάγεται με αυτόν τον τρόπο διαβάζεται από αναγνώστες οθόνης (συνήθως είναι αυτές τις μέρες) ή αν μπορείτε να το επιλέξετε (συνήθως δεν είναι αυτές τις μέρες).

  • Εντυπωσιακά πράγματα που μπορούν να κάνουν τα στοιχεία ψευδο
  • Παρουσίαση για ψευδο στοιχεία
  • Έγγραφα MDN

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

Αυτά τα δεδομένα υποστήριξης του προγράμματος περιήγησης προέρχονται από την Caniuse, η οποία έχει περισσότερες λεπτομέρειες. Ένας αριθμός υποδεικνύει ότι το πρόγραμμα περιήγησης υποστηρίζει τη λειτουργία σε αυτήν την έκδοση και νεότερη.

Επιφάνεια εργασίας

Χρώμιο Firefox ΙΕ Ακρη Σαφάρι
4 2 9 12 3.1

Κινητό / Tablet

Android Chrome Android Firefox Android iOS Safari
88 85 2.1 3.2

Για το Opera, url()υποστηρίζεται μόνο στην έκδοση 7+.