Google Chrome ondersteunt nu ook CSS-variabelen

Google heeft ondersteuning voor CSS-variabelen toegevoegd aan de nieuwste versie van de Chrome-browser. Voor de gemiddelde bezoeker is dit geen spannend nieuws maar voor alle webontwikkelaars wel. Met ondersteuning voor CSS-variabelen wordt het wel heel makkelijk om straks de kleuren van een website aan te passen.

Het goede nieuws is dat CSS-variabelen steeds breder ondersteunt worden door de verschillende browsers, het slechte nieuws is dat een aantal prominente browsers nog niet zover zijn. De nieuwste versie van de Safari-browser op iOS en Mac OS X biedt ondersteuning voor CSS-variabelen, net als Mozilla’s Firefox en nu dus ook de Chrome-browser. Browsers die CSS-variabelen nog niet ondersteunen zijn de Android-browser, Chrome voor Android, Internet Explorer en Microsoft Edge.

Op Android zal het niet lang meer duren voordat de feature ook daar beschikbaar komt, maar wanneer Microsoft de webstandaard voor CSS-variabelen gaat implementeren is nog onduidelijk. Daar zullen we nog even geduld voor moeten hebben, net als brede beschikbaarheid van de feature.

Op dit moment is het zo dat als een webontwikkelaar een kleur wil vervangen in een website hij op zoek moet naar alle vermeldingen van de kleur in een stylesheet en deze 1 voor 1 moet vervangen. Met CSS-variabelen kan de kleur worden gedefineerd in een variabele en kan die variabele door de hele stylesheet worden gebruikt, veel makkelijker en efficiënter. In Chrome 49 is nu ondersteuning toegevoegd hiervoor.

Ontwikkelaars kunnen boven in de stylesheet de kleur definiëren, bijvoorbeeld –primary-color: #000 en dan in de stylesheet color: var(–primary-color); toepassen. Voor de webontwikkelaars is het te hopen dat Microsoft snel volgt met ondersteuning in Internet Explorer en MIcrosoft Edge.