Generated content
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 { |
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]
Geef een reactie
Je moet inloggen om een reactie te kunnen plaatsen.