Het scheiden van content en opmaak is iets waar het web al jaren mee bezig is. CSS is daar uitermate voor geschikt.
Generated content (sinds css versie 2) maakt het mogelijk om content toe te voegen in de lay-out van een document.

CCS in combinatie met Javascript levert een bijzondere samenwerking op, waarbij het mogelijk is om voor of achter bestaande content informatie toe te voegen.

In CCS zijn daar eenvoudige pseudo-elementen aangemaakt, namelijk:

:before

:after

Onderstaand voorbeeld toont eenvoudig hoe je informatie kunt toevoegen aan een bestaande pagina.

html:

<p>webhero</p>

css:

p:before { content:”Wat een leuke informatie op”; } p:after { content:”.nl”; }

Resultaat:

 Wat een leuke informatie op webhero.nl

 

Gebruik van content binnen CSS

De property content is relevant in het toevoegen van informatie aan bestaande pagina’s. De propertie accepteert een aantal waardes, namelijk:

Waarde	Effect
none, normal	Geeft aan dat er geen actie moet plaatsvinden op de geselecteerde content
“string”	Toevoegen van tekst, gesloten in quotes (zie voorbeeld)
url()	Opgave van een externe bron (lees: plaatjes / iconen)
counter() / counters()	Voor het opvoeren van teller(s)
open-quote(), close-quote(), no-open-quote(), no-close-quote()	Mogelijkheden voor het opvoeren van aanhalingstekens
attr()	attribuut-waarde opvoeren voor betreffend element

 

 

 

 

 

 

 

Plaatjes gebruiken

De meest gebruikte functionaliteit is het toevoegen van plaatjes / iconen aan bestaande elementen.
Onderstaand voorbeeld toont hoe we een icoon toevoegen aan bestaande tekst.

html:

<p>Facebook</p>

css:

@import url(http://weloveiconfonts.com/api/?family=brandico);p:before { content: “\f301”; padding-right: 0.3em; font-family: ‘brandico’, sans-serif; font-size: 22px; }

Resultaat:

 Facebook

[green_box]Let op:

• Toegevoegde content neemt logischerwijs ook ruimte in beslag, dit kan effect hebben op de look-and-feel van de pagina
• Wil je gebruik maken van afbeeldingen etc. wees bewust dat deze ook ingeladen moeten worden en wellicht ook falen. Toegevoegde afbeeldingen ontberen alt-tags.
• Wil je gebruik maken van css3, dan zul je notatie iets wijzigen, namelijk:

::before

::after

[/green_box]