Sisu - CSS-trikid

Anonim

contentVara CSS kasutatakse koos pseudo-elemente ::beforeja ::after. Seda kasutatakse sõna otseses mõttes sisu sisestamiseks. Sellel võib olla neli väärtustüüpi.

String

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

Siis selline element:

 Chris

Esitatakse järgmiselt:

Name: Chris

See võib olla ka tühi string, mida tavaliselt näeb sellistes asjades nagu clearfix.

Loendur

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

Lisateavet selle kohta.

Pilt

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

See on sõna otseses mõttes pilt lehel nagu oleks. See võib olla ka gradient. Pange tähele, et sellisel viisil sisestamisel ei saa pildi mõõtmeid muuta. Võite lisada ka pildi, kasutades sisuks tühja stringi, tehes selle display: blockmingil viisil, suuruse järgi ja kasutades background-image. Nii saaksite selle suurust muuta background-size.

Atribuut

Võite kasutada väärtusi (stringe igal juhul), mis võetakse otse HTML-i atribuutidest.

 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()Funktsioon ei ole "tüüpi" lihtsalt veel, et sa ei liigu väärtus nagu 20px(ainult stringe), kuid ühel päeval!

Alternatiivne tekst

Spetsifikatsioon ütleb, et /alternatiivse teksti loetlemiseks võite kasutada süntaksis tähist a . Näiteks…

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

Võib-olla saaksite seda kasutada nagu…

 

    

  • Make Bed
    • 

  • Grocery Shop
    • 

  • Sweep Driveway
    • 



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

Rohkem informatsiooni

Sel viisil sisestatud sisu pole tegelikult DOM-is, seega on sellel mõned piirangud. Näiteks ei saa te sündmust otse (ainult) pseudoelementidele lisada. Samuti pole vastuoluline, kas ekraanilugejad loevad sel viisil sisestatud teksti või mitte (tavaliselt on see tänapäeval) või kas saate selle valida (tänapäeval see tavaliselt nii ei ole).

  • Lahedad asjad, mida pseuedo elemendid suudavad
  • Ettekanne pseudoelementide kohta
  • MDN-i dokumendid

Brauseri tugi

Need brauseri tugiandmed pärinevad Caniuse'ilt, millel on üksikasjalikum teave. Number näitab, et brauser toetab selle versiooni ja uuemat funktsiooni.

Töölaud

Chrome Firefox IE Edge Safari
4 2 9 12 3.1

Mobiil / tahvelarvuti

Android Chrome Android Firefox Android iOS-i Safari
88 85 2.1 3.2

Opera puhul, url()toetatud ainult versioonis 7+.