Scriptorama.nl

Header image showing a keyboard, mouse, laptop and books on design patterns

Voorstel voor CSS Variables

Geplaatst in: CSS op 04.09.08 door Mathieu Kooiman

Een van de dingen die mist in CSS is toch wel de mogelijkheid om variabelen te hebben. Sure, met Search & Replace kom je een heel eind maar een naam als logoKleurOranje is toch een stukje duidelijker dan #FF6600. Daarbij is het handig dat als je het wilt wijzigen, je het maar op 1 plek zou hoeven te doen.

Daniel Glazman (de ontwikkelaar van NVU) en David Hyatt, een van de hoofdontwikkelaars op Apple Safari (en dus WebKit) hebben gister een eerste voorstel voor CSS Variables als uitbreiding op de CSS 2.1 standaard gepubliceerd:

Since the release of CSS Level 2 Recommendation ten years ago in may 1998, the Web authors' community has been requesting a way of defining variables in CSS. Variables allow to define stylesheet-wide values identified by a token and usable in all CSS declarations. If a value is often used in a stylesheet - a common example is the value of the color or background-color properties - it's then easy to update the whole stylesheet statically or dynamically modifying just one variable instead of modifying all style rules applying the property/value pair.

Het voorstel dat ze doen introduceert 2 nieuwe soorten CSS regels. Een @variables blok om variabelen in te definieren en een var() functie om de variabelen weer mee uit te lezen:

PLAIN TEXT
CSS:
  1. @variables {
  2.   CorporateLogoBGColor: #fe8d12;
  3. }
  4.  
  5. div.logoContainer {
  6.   background-color: var(CorporateLogoBGColor);
  7. }

Het idee is dat variabelen over verschillende stylesheets binnen 1 pagina bruikbaar zijn maar dat variabelen gedefinieerd in verschillende media-selectors (print/screen/etc) wel op zichzelf staan.

Ben benieuwd of we dit binnen afzienbare tijd in browsers mogen verwelkomen!

Misschien ook interessant:

Reageer ook!

Het klinkt in ieder geval veelbelovend.

Door MartenNo Gravatar op 04.09.08 @ 7:42 am | Permalink

Vet, al ben ik bang dat het pas bij IE10 geïmplementeerd gaat worden, mocht dit voorstel er ooit door komen.

Door Joost van VelzenNo Gravatar op 04.09.08 @ 8:13 am | Permalink

Dat is zeker handig. :)

Maar is het ook voor andere dingen dan kleuren wel handig?
En wat als je een kleuren variabele in een width property gooit?

Maar ik ben zeker benieuwd!

Door daniëlpuntNo Gravatar op 04.09.08 @ 8:15 am | Permalink

Ook al zou het pas in IE10 geïmplementeerd worden, het is natuurlijk ontzettend makkelijk om dit server-sided te parsen voordat je het naar de browser stuurt.

Door Tom-EricNo Gravatar op 04.09.08 @ 8:55 am | Permalink

Dan maak je toch iets met PHP die de CSS files verwerkt :)

Ruby On Rails heeft dit al, en ik ben van plan het in de volgende versie mijn Framework te gaan ondersteunen.

Probleem zal worden met DW, omdat de CSS volgens hem niet geldig is kan je het nog niet gebruiken zonder dat hij moeilijk gaat doen...

Door Sebastiaan StokNo Gravatar op 04.09.08 @ 8:59 am | Permalink

Graag! PHP stuff @ http://www.wait-till-i.com/2005/02/11/css-constants/ en http://www.shauninman.com/archive/2005/08/09/css_constants

Door Michel de LangeNo Gravatar op 04.09.08 @ 9:16 am | Permalink

@Joost: Wie weet, MS kan dit soort dingen aangrijpen om more-appealing te zijn voor developers.

@daniel: De variabele heeft geen context, je kunt elke waarde aan zo'n CSS variabele toekennen en vervolgens gebruiken.

@Sebastian: Het is nu al inderdaad mogelijk, en voor nu is het de enige oplossing, maar waarom de server belasten met iets als de browser het zou kunnen?

Door Mathieu KooimanNo Gravatar op 04.09.08 @ 10:23 am | Permalink

Kennelijk door een programmeur voorgesteld.
Ik zou zelf iets voorstellen in de lijn van zoals css er uit ziet.
Dus een of ander teken voor de definitie dat ooo bij het gebruik gebruikt wordt. En waarom dan niet ons bekende dollarteken.

$LogoKleur{#129386}

.logoblok{color:$LogoKleur}

Of is dat teken al gereserveerd of al vrij beschikbaar voor namen?

Door ChrisNo Gravatar op 04.09.08 @ 12:39 pm | Permalink

@chris: dit is juist enorm in de lijn van CSS:

Je definieert variabelen blokken vrijwel hetzelfde als een media blok:

PLAIN TEXT
CSS:
  1. @media print {
  2.   BODY { font-size: 10pt }
  3. }
  4.  
  5. // vs
  6.  
  7. @variables {
  8.   logoFG: #FF6600;
  9. }

En je leest variabelen uit met een soort 'functie', op dezelfde manier dat je deze al gebruikt om URLs op te geven:

PLAIN TEXT
CSS:
  1. background-image: url(../logos/scriptorama.gif);
  2.  
  3. //vs
  4.  
  5. color: var(logoFG);

Een dollar teken is slechts bij enkele talen (o.a. PHP, Perl) een indicatie van een variabele, dus dat zou niet voor iedereen logisch zijn :)

Door Mathieu KooimanNo Gravatar op 04.09.08 @ 3:32 pm | Permalink

@Tom-Eric,

Mee eens, maar dat kan nu ook al. Het gaat er juist over dat dit in de CSS zelf staat. Mijn punt is dus meer: als het pas in IE10 wordt doorgevoerd, kunnen wij de komende x jaar tot IE10 uitkomt + 2 jaar totdat iedereen hem ook daadwerkelijk heeft hier nog geen gebruik van maken.

Door Joost van VelzenNo Gravatar op 04.09.08 @ 5:26 pm | Permalink

(verder blijft het natuurlijk speculeren of dit pas in IE10 wordt geïmplementeerd)

Door Joost van VelzenNo Gravatar op 04.09.08 @ 5:27 pm | Permalink

Tom-Eric heeft wel een goed punt denk ik. Als het al zover komt dat Firefox, Opera, Safari, etc dit zouden gaan ondersteunen en IE niet. Dan kan je het nog altijd serverside parsen maar wel op dezelfde manier opbouwen.

Door AlexanderNo Gravatar op 04.09.08 @ 6:02 pm | Permalink

"@Sebastian: Het is nu al inderdaad mogelijk, en voor nu is het de enige oplossing, maar waarom de server belasten met iets als de browser het zou kunnen?"

Caching ;)
Zo wie zo worden de CSS nu al ge minifyd en met CSSTidy netjes gemaakt (optimised) als dat gedaan is doet hij ze cachen en pas bijwerken als het bron bestand veranderd is de cache bijwerken!

Werkt als een trein, en met mijn framework krijg ik nu een A (100) bij Yslow :D

Door Sebastiaan StokNo Gravatar op 04.10.08 @ 9:18 am | Permalink

Zou zeker een goede aanvulling zijn zeker ook met betrekking tot variable paths etc.

En idd het is een oplossing om er gewoon met PHP een CSS bestand te laten genereren. Maar het CSS is dan voor de gebruiker nooit te bereiken... Caching is nu idd de netste oplossing.

Door Evert HarmelingNo Gravatar op 04.15.08 @ 12:11 pm | Permalink

[...] het voorstel van David Glazman en David Hyatt voor CSS variabelen, heeft David Hyatt met enkele collega's van Apple nog 3 voorstellen tot uitbreiding van CSS [...]

Door Scriptorama.nl » Meer CSS voorstellen: Transitions, Transforms en Animation op 04.22.08 @ 8:08 pm | Permalink

Er is toch ook niks mis met;

a {
text-decoration: none;
color: ;
}

Gaat al jaren goed

Door MarkNo Gravatar op 05.06.08 @ 10:44 am | Permalink

RSS feed for comments on this post.
Leave a comment
Line and paragraph breaks automatic, e-mail address never displayed, HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>