Lege content in CSS?

Door Ariën op 24-11-2014 23:33

884 views

Kan iemand vertellen wat het nut is van een lege value in een content-property in CSS?

Dit dus:


    content:"";

Ik zie het regelmatig in site gebruikt worden, en als ik het in FireBug uitschakel, dan verandert de opmaak, maar ik kan niet achterhalen waarom.

Dus wat is het praktisch nut van een lege content?

Wouter J

24-11-2014 23:54

Content wordt gebruikt bij pseudo elements (::before, ::after). Het is verplicht deze te zetten. Aangezien moderne technieken deze psuedo elementen vaak gebruiken voor iets anders dan het toevoegen van content voor of na een element, wil je graag geen content instellen. Aangezien het toch verplicht is zie je dat er vaak content:""; of content:"\200B " (zero width whitespace) gebruikt wordt.

Ariën

25-11-2014 00:03 gewijzigd op 25-11-2014 00:03

Vrij duidelijk zo.

Wouter J op 24/11/2014 23:54:13

Aangezien moderne technieken deze psuedo elementen vaak gebruiken voor iets anders dan het toevoegen van content voor of na een element, wil je graag geen content instellen.

Aan wat voor andere dingen moet ik dan denken?

E vH

25-11-2014 10:39

Denk is aan een wrapper van 960px breed.
Halverwege de pagina wil je een complete background van 50px hoog en 100% breed, ongeacht de resolutie.
De rest van de pagina blijft binnen de 960px breed.

Wouter J

25-11-2014 13:31

> Aan wat voor andere dingen moet ik dan denken?

Soms wil je iets stijlen en dan heb je een extra element nodig in je HTML. Dat is dan niet echt top, omdat je HTML dan niet meer 100% semantisch is. In zo'n geval kun je pseudo elementen gebruiken. Even snel een voorbeeldje: http://jsbin.com/wekece/1/watch?css,output

Op mijn site zijn bijvoorbeeld de borders boven elk blok met pseudo elementen gedaan en het blokje met "Note" net boven deze titel.

Reageren

Inloggen om te reageren