Saturs - CSS-triki

Anonim

contentĪpašums CSS tiek izmantots kopā ar pseido-elementiem ::beforeun ::after. To lieto burtiski satura ievietošanai. Tam var būt četri vērtību veidi.

Stīgas

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

Tad šāds elements:

 Chris

Atveidotu šādi:

Name: Chris

Tā varētu būt arī tukša virkne, kas parasti ir redzama tādās lietās kā clearfix.

Skaitītājs

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

Plašāka informācija par to.

Attēls

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

Tas burtiski ir attēls lapā, kāds tas būtu. Tas varētu būt arī gradients. Ņemiet vērā, ka šādā veidā ievietojot, nevar mainīt attēla izmērus. Jūs varētu arī ievietot attēlu, saturam izmantojot tukšu virkni, padarot to display: blockkaut kādā veidā, pēc lieluma un izmantojot background-image. Tādā veidā jūs to varētu mainīt background-size.

Atribūts

Varat izmantot vērtības (virknes, vienalga), kas ņemtas tieši no HTML atribūtiem.

 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 nav "veidi" tikai pagaidām, lai jūs nevarat iet vērtību, piemēram, 20px(tikai stīgas), bet kādu dienu!

Alternatīvais teksts

Specifikācija saka, ka /sintaksē var izmantot a , lai uzskaitītu alternatīvu tekstu. Piemēram…

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

Varbūt jūs to varētu izmantot kā…

 

    

  • Make Bed
    • 

  • Grocery Shop
    • 

  • Sweep Driveway
    • 



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

Vairāk informācijas

Šādi ievietots saturs patiesībā nav DOM, tāpēc tam ir daži ierobežojumi. Piemēram, jūs nevarat pievienot notikumu tieši (tikai) pseidoelementiem. Nav arī pretrunīgi, vai ekrāna lasītāji lasa šādā veidā ievietotu tekstu (tas parasti notiek šajās dienās), vai arī jūs varat to atlasīt (mūsdienās tas parasti nav).

  • Foršas lietas, ko var izdarīt pseido elementi
  • Prezentācija par pseido elementiem
  • MDN dokumenti

Pārlūka atbalsts

Šie pārlūka atbalsta dati ir no Caniuse, kurai ir sīkāka informācija. Cipars norāda, ka pārlūks atbalsta šo un jaunākās versijas funkciju.

Darbvirsma

Chrome Firefox IE Mala Safari
4 2 9 12 3.1

Mobilais / planšetdators

Android Chrome Android Firefox Android iOS Safari
88 85 2.1 3.2

Operai, url()atbalsta tikai versijā 7+.