Sadržaj - CSS-trikovi

Anonim

contentNekretnina u CSS se koristi u sprezi s pseudo-elemenata ::beforei ::after. Koristi se za doslovno umetanje sadržaja. Postoje četiri vrste vrijednosti koje može imati.

Niz

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

Zatim element poput ovog:

 Chris

Renderirao bi se ovako:

Name: Chris

To bi mogao biti i prazan niz, što se obično vidi u stvarima poput clearfix-a.

Brojač

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

Više informacija o tome.

Slika

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

Ovo je doslovno slika na stranici kakva bi bila. To bi mogao biti i gradijent. Na ovaj način ne možete promijeniti dimenzije slike. Sliku biste mogli umetnuti i tako što ćete za sadržaj koristiti prazan niz, napraviti ga display: blockna neki način, odrediti veličinu i upotrijebiti background-image. Na taj biste ga način mogli promijeniti background-size.

Atribut

U svakom slučaju možete koristiti vrijednosti (nizove) preuzete iz atributa u HTML-u.

 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()Funkcija nema „tipa” samo još, tako da ne mogu proći vrijednost kao 20px(samo žice), ali jednog dana!

Alternativni tekst

Specifikacija kaže da /u sintaksi možete koristiti zamjenski tekst. Na primjer…

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

Možda biste ga mogli koristiti poput ...

 

    

  • Make Bed
    • 

  • Grocery Shop
    • 

  • Sweep Driveway
    • 



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

Više informacija

Sadržaj umetnut na ovaj način zapravo nije u DOM-u, tako da ima određena ograničenja. Na primjer, ne možete događaj pridružiti izravno (samo) pseudo-elementima. Također je nedosljedno čita li zaslon čitač na ovaj način (obično je to danas) ili možete li ga odabrati (to obično nisu ovih dana).

  • Cool stvari koje pseuedo elementi mogu učiniti
  • Prezentacija o pseudo elementima
  • MDN dokumenti

Podrška preglednika

Podaci o podršci preglednika potječu iz tvrtke Caniuse, koja sadrži više detalja. Broj označava da preglednik podržava značajku u toj verziji i novijoj.

Radna površina

Krom Firefox IE Rub Safari
4 2 9 12 3.1

Mobitel / tablet

Android Chrome Android Firefox Android iOS Safari
88 85 2.1 3.2

Za Opera, url()podržano samo u verziji 7+.