Vsebina - CSS-triki

Anonim

contentHotel v CSS se uporablja v povezavi s psevdo-elementi ::beforein ::after. Uporablja se za dobesedno vstavljanje vsebine. Obstajajo štiri vrste vrednosti.

Vrvica

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

Nato element, kot je ta:

 Chris

Bi se upodobil takole:

Name: Chris

Lahko je tudi prazen niz, kar je pogosto vidno pri stvareh, kot je clearfix.

Števec

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

Več informacij o tem.

Slika

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

To je dobesedno slika na strani, kakršna bi bila. Lahko je tudi preliv. Ko vstavite ta način, ne morete spremeniti dimenzij slike. Sliko lahko vstavite tudi tako, da za vsebino uporabite prazen niz, ga display: blockna nek način ustvarite, določite velikost in uporabite background-image. Tako bi ga lahko znova prilagodili background-size.

Atribut

Uporabite lahko vrednosti (nize, vseeno), ki so povzete neposredno iz atributov v HTML-ju.

 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 nima "vrst" samo še, tako da ne more mimo vrednost, kot je 20px(samo strune), ampak nekega dne!

Nadomestno besedilo

Specifikacija pravi, da lahko /v sintaksi uporabite seznam za navajanje nadomestnega besedila. Na primer ...

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

Morda bi ga lahko uporabili kot ...

 

    

  • Make Bed
    • 

  • Grocery Shop
    • 

  • Sweep Driveway
    • 



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

Več informacij

Tako vstavljena vsebina v resnici ni v DOM-u, zato ima nekatere omejitve. Na primer, ne morete priložiti dogodka neposredno (samo) psevdoelementom. Prav tako je nedosledno, ali tako vstavljeno besedilo berejo bralniki zaslona (običajno je to danes) ali če ga lahko izberete (v teh dneh običajno ni).

  • Kul stvari, ki jih lahko naredijo elementi pseuedo
  • Predstavitev o psevdoelementih
  • Dokumenti MDN

Podpora za brskalnik

Ti podatki o podpori brskalnika so od Caniuse, ki vsebuje več podrobnosti. Številka pomeni, da brskalnik podpira to funkcijo v tej različici ali novejši.

Namizje

Chrome Firefox IE Rob Safari
4. 2. 9. 12. 3.1

Mobilni / tablični računalnik

Android Chrome Android Firefox Android iOS Safari
88 85 2.1 3.2

Za Opera, url()podprto samo v različici 7+.