De eerste vraag die in je opkomt is waarschijnlijk “waarom zou je dit willen?”. Normaal gesproken zou het niet nodig moeten zijn om hoofdletters te maken met CSS. Er zijn echter situaties denkbaar waarbij dit wel nodig is.
In ons geval liepen wij tegen het probleem aan dat één van onze klanten een website heeft waarbij alle titels volledig in hoofdletters zijn geschreven. Echter kwamen zij vele maanden later met het verzoek om dit aan te passen waarbij de titels alleen nog beginnen met een hoofdletter. Normaal gesproken een kwestie van de titels even beetpakken en wijzigen waar nodig. Klein probleempje in dit geval is dat de website multilingual is opgezet waarbij alles in drievoud moet worden aangepast. Dat maakt de klus al snel een stuk vervelender en vooral tijdrovend!
En daar komt een leuke CSS truc om de hoek kijken d.m.v. pseudo class:
In de volgende stappen zie je hoe je de pseudo class kunt toepassen:
- Stap 1 is om de titel lowercase te maken (text-transform:lowercase;)
- Stap 2 is om alleen de eerste letter van de titel in kapitalen te tonen door te targeten op ::first-letter (text-transform:uppercase;)
- In sommige gevallen kan het zijn dat je het desbetreffende element display:inline-block; moet meegeven
Hoe dit eruit ziet in de CSS:
Laat het duidelijk zijn, 9 van de 10 keer zal de bovenstaande fix niet nodig zijn en is ook niet volledig bulletproof. Zie het dan ook als een “leuk weetje”!
Neem contact met ons op om te kijken wat ons development team nog meer te bieden heeft.
