Turinys - CSS-gudrybės

Anonim

contentCSS turtas naudojamas kartu su pseudo-elementais ::beforeir ::after. Jis naudojamas pažodžiui įterpti turinį. Yra keturi vertybių tipai.

Stygos

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

Tada toks elementas:

 Chris

Pateiktų taip:

Name: Chris

Tai taip pat gali būti tuščia eilutė, kuri paprastai matoma tokiuose dalykuose kaip „clearfix“.

Skaitliukas

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

Daugiau informacijos apie tai.

Vaizdas

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

Pažodžiui tai yra vaizdas puslapyje, koks būtų. Tai taip pat gali būti gradientas. Atminkite, kad tokiu būdu įterpiant paveikslėlio matmenų pakeisti negalima. Taip pat galite įterpti vaizdą, naudodami tuščią turinio eilutę, kurdami ją display: blockkažkokiu būdu, dydžiu ir naudodami background-image. Tokiu būdu galėtumėte jį pakeisti background-size.

Atributas

Galite naudoti reikšmes (bet kokiu atveju eilutes), kurios paimtos iš HTML atributų.

 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 neturi "tipų" tik dar, todėl jūs negalite praeiti vertę kaip 20px(tik stygos), bet kada nors!

Alternatyvus tekstas

Specifikacija sako, /kad sintaksėje galite naudoti a , jei norite išvardyti pakaitinį tekstą. Pavyzdžiui…

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

Galbūt galėtumėte jį naudoti kaip…

 

    

  • Make Bed
    • 

  • Grocery Shop
    • 

  • Sweep Driveway
    • 



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

Daugiau informacijos

Tokiu būdu įterpto turinio iš tikrųjų nėra DOM, todėl jis turi tam tikrų apribojimų. Pavyzdžiui, negalite tiesiogiai (tik) pridėti įvykio prie pseudoelementų. Taip pat nenuoseklu, ar tokiu būdu įterptą tekstą skaito ekrano skaitytuvai (dažniausiai tai būna šiais laikais), ar galite jį pasirinkti (šiais laikais dažniausiai taip nėra).

  • Puikūs dalykai, kuriuos gali padaryti pseuedo elementai
  • Pristatymas apie pseudo elementus
  • MDN dokumentai

Naršyklės palaikymas

Šie naršyklės palaikymo duomenys yra iš „Caniuse“, kuri turi daugiau informacijos. Skaičius rodo, kad naršyklė palaiko šios ir naujesnės versijos funkciją.

Darbalaukis

„Chrome“ „Firefox“ T.Y Briauna „Safari“
4 2 9 12 3.1

Mobilusis / planšetinis kompiuteris

„Android Chrome“ „Android Firefox“ „Android“ „iOS Safari“
88 85 2.1 3.2

„Opera“, url()palaikoma tik 7 ir naujesnių versijų.