Scriptorama.nl

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

Meer CSS voorstellen: Transitions, Transforms en Animation

Na het voorstel van Daniel Glazman en David Hyatt voor CSS variabelen, heeft David Hyatt met enkele collega's van Apple nog 3 voorstellen tot uitbreiding van CSS standaard gepubliceerd, namelijk: Transitions, Animation en Transforms.

(more...)

Voorstel voor CSS Variables

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:

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!