WebKit experimenteert verder met CSS variabelen
Een tijdje geleden heb ik al eens geschreven over het CSS variabelen voorstel dat David Hyatt en Daniel Glazman hebben geschreven om een lang openstaand punt in CSS eens aan te pakken. Sindsdien is het op de officiële kanalen wat stil, maar dat betekent niet dat er niet gewerkt wordt!
Even een kleine geheugen opfrisser. CSS variabelen stellen je in staat om veel terugkerende waarden, denk aan bijvoorbeeld aan verschillende soorten fonts, of juist het kleurenpalet van je website te definiëren als een soort variabelen, waarna je deze variabelen kunt gebruiken in je CSS declaraties:
-
@-webkit-variables {
-
logo-foreground: #FFF;
-
logo-background: navy;
-
-
logo-font: Verdana, sans-serif;
-
}
-
-
div#logo {
-
font-family: -webkit-var(logo-font);
-
background-color: -webkit-var(logo-background);
-
color: -webkit-var(logo-foreground);
-
}
Dit is natuurlijk ietwat beperkend, het zijn eenmalige waarden die je kunt hergebruiken. Handig, maar het kan handiger. Daarom hebben de WebKit developers nu ook experimentele ondersteuning toegevoegd voor het toewijzen van een heel blok van meerdere CSS definities aan een CSS variabele:
-
@-webkit-variables {
-
heading-styles {
-
color: white;
-
font-weight: bold;
-
font-family: Trebuchet;
-
}
-
-
text-settings {
-
line-height: 1.2em;
-
letter-spacing: 2px;
-
color: black;
-
}
-
-
paragraph-bg: #ff6900;
-
}
-
-
-
h1 {
-
-webkit-var(heading-styles);
-
-webkit-var(text-settings);
-
font-size: 1.4em;
-
}
-
-
h2 {
-
-webkit-var(heading-styles);
-
font-size: 1.3em;
-
}
-
-
p {
-
-webkit-var(text-settings);
-
background-color: -webkit-var(paragraph-bg);
-
}
Ik zeg experimenteel, want de WebKit developers zijn momenteel verschillende syntax-soorten aan het uitproberen zijn om zo - samen met de CSS WG - te kijken wat werkt en wat niet werkt. Op dit moment bevat WebKit namelijk ook ondersteuning voor de volgende schrijfwijze:
-
@-webkit-define {
-
navigation {
-
color: black;
-
text-decoration: none;
-
}
-
}
-
-
div.body ul a {
-
=navigation=;
-
font-size: 1.2em;
-
}
-
-
div.sidebar ul a {
-
=navigation=;
-
font-size: 0.9em;
-
}
Deze notatie stapt in elk geval af van de ietwat onduidelijke term CSS variabelen door -webkit-define te gebruiken ipv. -webkit-variables. Hoewel je de waarde van een CSS 'variabele' kunt wijzigen via Javascript is zo'n definitie op zich natuurlijk niet echt een variabele vanuit CSS gezien. Verder voelt de syntax =variabele= voor mij in elk geval wat onwennig aan.
Conclusie
De WebKit ontwikkelaars zijn druk bezig om hun CSS variabelen voorstel uit te werken naar iets werkbaars. Voor wie CSS variabelen eens wil proberen, de 2 schrijfwijzen zijn te gebruiken in recente WebKit nightlies, maar vergeet niet dat dit experimentele syntax is en de definitieve syntax dus nog niet bepaald is!
Volg Scriptorama via RSS!
Reageer ook!
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>