CSS prije i CSS poslije - Kako koristiti svojstvo sadržaja

contentNekretnina u CSS određuje sadržaj nekog elementa. Možda ste čuli da je to svojstvo se odnosi samo na ::beforete ::afterpseudo-elemenata. U ovom ćemo članku istražiti razne slučajeve upotrebe contentsvojstva, uključujući izvan pseudo-elemenata.

Preduvjet

Budući da je većina slučajeva korištenja za contentnekretnine uključivati pseudo-elemenata, ja bih predlažemo da se upoznate s načinom na ::beforei ::afterpseudo-elemenata rada. Evo sjajnog članka koji će vas ubrzati:

  • CSS pseudo-elementi - objašnjeni prije i poslije selektori

Prihvaćene vrijednosti

Prvo, pogledajmo sve prihvaćene vrijednosti contentsvojstva.

  • normal: Ovo je zadana vrijednost. Izračunava se nonekada se koristi s pseudo-elementima.
  • none: Pseudo-element se neće generirati.
  • : Postavlja sadržaj na navedeni niz. Ovaj niz može sadržavati Unicode izlazne sekvence. Na primjer, copyright simbol: \\000A9.
  • : Postavlja sadržaj na sliku ili gradijent pomoću url()ili linear-gradient().
  • open-quote| close-quote: Postavlja sadržaj na odgovarajući znak navodnika na koji se poziva quotessvojstvo.
  • no-open-quote| no-close-quote: Uklanja navod iz odabranog elementa, ali svejedno povećava ili smanjuje razinu gniježđenja na koju se odnosi quotessvojstvo.
  • attr(*attribute*): Postavlja sadržaj kao vrijednost niza odabranih atributa odabranih elemenata.
  • counter(): Postavlja sadržaj kao vrijednost broja counter, obično broja.

Niz

Jedan od najosnovnijih primjera bio bi korištenje dodavanja sadržaja niza prije ili poslije elementa. U ovom ćemo primjeru dodati vezu prije veze i dodati URL za vezu nakon nje.

a::before { content: "\\1F517 "; } a::after { content: " (" attr(href) ")"; } 

Primijetite razmak nakon znaka Unicode u ::beforepseudo-elementu i prije prve zagrade u ::afterpseudo-elementu. To će stvoriti razmak između njih i nadređenog elementa.

Alternativno, možete dodati paddingili marginna pseudo-elemenata za dodavanje razdvajanja.

Osnovni citati

Uz contentimovinu, možete dodati citati prije i / ili nakon elemenata. Sad u HTML-u imamo oznaku. To će također dodati citate oko njegovog sadržaja. Međutim, s contentimovinom možemo imati veću kontrolu nad provedbom.

Evo najosnovnijeg primjera dodavanja navodnika:

To možete postići i upotrebom HTML oznake . Ali možda želimo citat oblikovati drugačije. Dakle, dodajmo samo početni citat, a ne završni citat. Ajmo također oblikovati uvodni citat.

p { position: relative; font-size: 3rem; margin: 4rem; } p::before { content: open-quote; position: absolute; left: -3.5rem; top: -2rem; font-size: 8rem; color: rgba(0, 0, 0, 0.5) } 

Rezultat:

Slika koja prikazuje jedan stilizirani citat u gornjem lijevom dijelu odlomka

Napredni citati

Također možemo odrediti gdje ne želimo navodnike. Na primjer, možda citirate nekoga tko citira drugu osobu. Dakle, imali biste citate unutar citata, što čitatelja može zbuniti.

U CodePenu u nastavku koristimo HTML oznake, a zatim određujemo koje oznake ne bi trebale prikazivati ​​citate.

Na prvi pogled možda mislite da bismo trebali ukloniti oznaku tamo gdje je to potrebno. Ali specificiranjem gdje ponuda ne smije i dalje povećavati ili smanjivati ​​razinu gniježđenja na koju se poziva quotessvojstvo.

Da bismo to objasnili, moramo razumjeti quotessvojstvo. Ovo je jednostavno "niz" znakova koje treba koristiti prilikom citiranja. Evo primjera:

q { quotes: '“' '”' '‘' '’' '“' '”'; } 

To su skupovi citata. Prvi set koristit će se za najvišu razinu citata. Drugi skup koristit će se za prvi ugniježđeni citat. A treći skup koristit će se za drugi ugniježđeni citat. I tako dalje, ako bi bilo više kompleta.

Sad kad razumijemo quotessvojstvo, mogu objasniti kako funkcioniraju no-open-quotei no-close-quotesvojstva.

Za svaku razinu citata možemo dodijeliti različite skupove znakova koji će se koristiti za citate. Određivanjem gdje ponuda ne smije i dalje povećavati ili smanjivati ​​razinu gniježđenja na koju se odnosi quotessvojstvo.

Pogledajte primjer u nastavku. Vidjet ćete da se preskače druga razina citata.

Atributi

Atributi se mogu koristiti za prosljeđivanje sadržaja iz HTML-a u contentsvojstvo CSS . To smo zapravo koristili već u primjeru veze, gdje smo koristili hrefatribut za uključivanje URL-a kao dijela našeg sadržaja.

Savršen slučaj upotrebe za ovo je opis. Možete dodati titleatribut elementu u HTML-u da biste imali jednostavan, ugrađeni opis pri prelasku mišem. Ali da bismo to prilagodili, možemo koristiti atribut podataka na našoj HTML oznaci, a zatim upotrijebiti contentsvojstvo za dodavanje opisa.

U ovom primjeru koristimo atribut data-tooltipiz našeg HTML elementa za prosljeđivanje vrijednosti u naš opis. Za pokazivač opisa, postavili smo contentna "", kao što contentje potrebno za generiranje ::beforeili ::afterpseudo-elementa.

Brojači

counter()CSS funkcija vraća string koji predstavlja trenutnu vrijednost pod nazivom pulta. U sljedećem primjeru imamo poredani popis kojem ćemo dodati sadržaj pomoću a counter.


    
    ol { counter-reset: exampleCounter; } li { counter-increment: exampleCounter; } li::after { content: "[" counter(exampleCounter) "] == [" counter(exampleCounter, upper-roman) "]"; } 

    Bez previše dubinske counterfunkcije, prvo moramo pokrenuti brojač na olelementu. To možemo imenovati kako god želimo. Tada kažemo brojaču da se poveća na svakom lielementu. I na kraju, možemo postaviti contentod li::after.

    Evo rezultata:

    Poredani popis

    Ovim biste mogli prilagoditi sadržaj unutar svake stavke popisa koji treba odgovarajući broj. Ili biste ovo mogli upotrijebiti za prilagodbu same stavke popisa. Na primjer, možete ukloniti zadanu numeraciju i implementirati prilagođeni sustav numeriranja.

    Slike

    Uz contentsvojstvo se mogu koristiti slike i gradijenti . Ovo je prilično jednostavno. Evo primjera koji koristi oboje:

    Radi pristupačnosti postoji i mogućnost dodavanja zamjenskog teksta za sliku. Ova značajka ipak nije u potpunosti podržana.

    content: url(//unsplash.it/200/200) / "Alternative Text Here"; 
    Napomena: Ovo nije podržano u Firefoxu, IE i Safariju. Također, gradijent ne radi u Firefoxu.

    Izvan pseudo elemenata

    Tako je! contentSvojstvo možete koristiti izvan pseudo-elemenata ::beforei ::after. Iako je njegova upotreba ograničena i nije u potpunosti kompatibilna u svim preglednicima.

    Najkompatibilniji slučaj korištenja bila bi zamjena elementa.

     codeSTACKr 
    #replace { content: url(""); width: 100%; } 
    Napomena: Zamjena nije podržana u IE.

    Zaključak

    Većinu puta ćete vidjeti content: ""pronađene u ::beforei ::afterpseudo-elementima. Ali contentsvojstvo ima mnogo korisnih aplikacija.

    Po mom mišljenju najbolja je upotreba za ažuriranje skupnih elemenata. Ako želite dodati ikonu prije svake veze na vašoj web lokaciji, bilo bi je puno lakše dodati kroz contentsvojstvo nego dodati u svaki element u HTML dokumentu.

    Hvala na čitanju!

    Hvala vam što ste pročitali ovaj članak. Nadamo se da vam je pomogao da bolje razumijete kako contentsvojstvo funkcionira u CSS-u.

    Jesse Hall (codeSTACKr)Ja sam Jesse iz Teksasa. Pogledajte moj drugi sadržaj i javite mi kako vam mogu pomoći na vašem putu da postanete web programer.

    • Pretplatite se na moj YouTube
    • Reci zdravo! Instagram | Cvrkut
    • Prijavite se za moj bilten