Scriptorama.nl

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

WebKit implementeert CSS variabelen

Geplaatst in: Browsers, CSS op 06.25.08 door Mathieu Kooiman

CSS3.info weet te melden, voordat er ook maar enige melding is gemaakt op WebKit's eigen weblog Surfing Safari, dat WebKit in recente nightly builds de eerder voorgestelde CSS variabelen ook daadwerkelijk implementeert.

Aangezien de CSS variabelen specificatie nog niet aangenomen is als standaard heeft WebKit - zoals vereist door de CSS standaard - alle nieuw geintroduceerde elementen geprefixed met haar naam.

PLAIN TEXT
CSS:
  1. @-webkit-variables {
  2.    logo-foreground: #FFF;
  3.    logo-background: navy;
  4.  
  5.    logo-font: Verdana, sans-serif;
  6. }
  7.  
  8. div#logo {
  9.   font-family: -webkit-var(logo-font);
  10.   background-color: -webkit-var(logo-background);
  11.   color: -webkit-var(logo-foreground);
  12. }

De implementatie is niet alleen in CSS. Javascript toegang tot de CSS regels is uiteraard ook uitgebreid met de nodige nieuwe functies voor CSS variabelen:

PLAIN TEXT
JAVASCRIPT:
  1. /* Haal alle variabele waarden */
  2. var variables = document.styleSheets[0].cssRules[0].variables;
  3. for (var i = 0; i <variables.length; i++)
  4. {
  5.     var result = variables.getVariableValue(variables[i]);
  6.     alert(result);
  7. }
  8.  
  9. /* Wijzig een waarde */
  10. document.styleSheets[0].cssRules[0].variables.setVariable("logo-background", "green");
  11.  
  12. /* Verwijder een waarde */
  13. document.styleSheets[0].cssRules[0].variables.removeVariable("logo-font");

Als je CSS Variabelen wil proberen, kun je, als Safari hebt geinstalleerd (op Windows of MacOSX) een WebKit nightly downloaden. Je kunt de WebKit Nightly dan gewoon naast je huidige Safari installatie gebruiken.

Misschien ook interessant:

Reageer ook!

Very nice :)

Ik zal het thuis eens proberen :)

Door MartenNo Gravatar op 06.25.08 @ 12:12 pm | Permalink

Duidelijk nog een beta. De code zorgt continue voor een crash van webkit

Door SvenNo Gravatar op 06.25.08 @ 12:23 pm | Permalink

@Sven: het is uiteraard nog geen productiewaardige release. De nightly builds, de naam zegt het al, worden elke nacht (ws. hier overdag:) ) vanaf de huidige ontwikkelbranche gebakken. Het is heel goed mogelijk dat daar nog de nodige fouten in zitten.

Overigens werkte alle voorbeelden die ik aanhaal bij mij op OSX vanochtend wel zonder crashen.

Door Mathieu KooimanNo Gravatar op 06.25.08 @ 12:49 pm | Permalink

Ideaal! Op deze manier helemaal geen extra CSS meer nodig voor meerdere stijlen, en door ze met JS toegankelijk te maken en ze zelfs te kunnen manipuleren is het helemaal handig!

Alleen jammer dat het nog even gaat duren voordat Microsoft met IE12 komt, eerder verwacht ik het niet xD

Door JoostNo Gravatar op 06.25.08 @ 11:20 pm | 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>