Scriptorama.nl

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

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!

(more...)

WebKit implementeert CSS variabelen

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.

(more...)

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!

Firebug 1.0 beta beschikbaar

Firebug: ongetwijfeld een van de meest populaire Firefox-extensies voor webontwikkelaars, en met recht. Mathieu meldde eerder het voorproefje al. maar nu is 'ie er dan: de 1.0 beta. Übercoole nieuwe features:

  • HTML: live wijzigen van de complete structuur. Voorheen waren alleen attributes te wijzigen.
  • CSS rules: live wijzigen en weergeven van alle rules, inclusief inherited
  • CSS layout: box model visualisatie. Metrische eigenschappen van alle elementen kunnen worden weergegeven en gemeten
  • HTTP-verkeer: inzicht in requests en responses. Gooi Tamper Data overigens niet weg, want daarmee kun je POST data en headers wijzigen.
  • JavaScript profiling: timing van functies om bottlenecks op te sporen
  • eigen venster: je kunt Firebug 'ontkoppelen' naar een venster (Control/Command F12). Erg handig als je met meerdere monitoren of virtual desktops werkt.

Minstens net zo belangrijk is de filosofie van de auteur: Joe Hewitt houdt 't gratis en open source. Erg sympathiek. Donaties zijn uiteraard welkom.
Ook aan andere browsers heeft 'ie gedacht: plug Firebug Lite als JavaScript library in en je hebt een vereenvoudigde Firebug console.

ppk on JavaScript: CSS-modificatie

Peter-Paul Koch bespreekt op Naar Voren JavaScript-mogelijkheden om je CSS te veranderen. Het is een voorpublicatie van hoofdstuk 9 uit zijn eerste boek: "ppk on JavaScript". Mocht je nog niet bekend zijn met zijn waardevolle JavaScript- en CSS-research, dan is dit overzicht een goed startpunt.

CSS tools, technieken, tutorials en layouts

Smashing Magazine heeft een zeer uitgebreide verzameling CSS-links samengesteld:

CSS3 preview

Joost de Valk heeft recent zijn CSS3 blog posts verplaatst naar een apart domein. Op CSS3.info kunnen we dit keer een preview zien van CSS3 in actie. Enkele features die uitsteken zijn media queries en de opacity mogelijkheden. De specificatie van CSS3 is nog in ontwikkeling en daarom is het onduidelijk wanneer we CSS3 echt kunnen gaan gebruiken. Dat hangt er natuurlijk ook vanaf hoe snel de browsers dit zullen ondersteunen. Het is zeker het wachten waard!

CSS optimizers

Veel web developers proberen zoveel mogelijk dataverkeer te besparen door Javascript code te comprimeren met bijvoorbeeld jsmin. Ook zijn er truuks met PHP's ob_gzhandler(), mod_gzip of Apache's mod_deflate. Een andere mogelijkheid op besparing is CSS comprimeren. In CSS Optimization: Make Your Sites Load Faster for Free worden verschillende CSS compressors vergeleken. De test runs werden uitgevoerd op verschillende populaire websites zoals Digg, Slashdot en Download.com met compressies die soms wel eens 70% schelen. Wil je een echt case zien? Lees hier hoe 2 terabytes per dag werd bespaard!