CSS
Taalvarianten: CSS 2.1 / 3
Cascading Style Sheets
Stylesheets worden zoveel mogelijk valid geschreven. CSS-Hacks worden vermeden. Scheiding tussen reset, pagina-layout, componenten, browser-specifieke styles en print-styles (voorbeeld).
CSS stylesheets worden cascading opgezet, per selector 1 regel code. Onderliggende selectors hebben een inspringen, ter vergroting van de leesbaarheid. Stijldeclaraties worden shorthand geschreven, ter verkleining van de bestandsgrootte. Het gebruik van de '!important' eigenschap wordt zoveel mogelijk vermeden, ten behoeve van gebruikersinstellingen in specifieke gevallen.
Een variant van CSSDoc in combinatie met flagging wordt toegepast voor het beschrijven van componenten en elementen in de stylesheet. Een reset stylesheet wordt gebruikt om browser-standaard stijlen te neutraliseren.
Opbouw van stylesheets:
- media-type declaratie (@media screen,tv,projection)
- globale elementen
- componenten
- component-varianten
- media-type declaratie (@media print)
- verborgen elementen
- globale elementen
- componenten en -varianten
Voor het toepassen van extra styling wanneer Javascript is ingeschakeld, wordt een Javascript specifieke stylesheet geschreven (js-enabled.css). Hierin worden bepaalde styles overschreven of worden extra specifieke classnamen gedeclareerd. Het voordeel is dat indien Javascript niet wordt ondersteund, de browser kan terugvallen op de standaard-stijl (Graceful degradation).
Flagging
In de commentaar van de stylesheets staan open- en sluit 'flags', het '=' teken en het '/' teken. Deze flags omsluiten een specifiek component of elementblok. Hierdoor is het duidelijk welke selectors bij een bepaald component horen.
/* =.classname */
.classname { }
.classname p {}
.classname p a {}
/* /.classname */
/* [component] */
div#component {}
div#component div.class {}
/* [/component] */
Shorthand CSS
/* =.shorthand */
.shorthand {padding: 0 10px 15px 10px; background: url(bg-image.gif) 0 -10px no-repeat; margin: 10px 5px; }
/* /.shorthand */
Veel gestelde vragen
- Welke browsers worden standaard ondersteund?
- Internet Explorer 7 en 8, Firefox 3, Safari 3 en 4, Google Chrome. Voor Internet Explorer 6 geldt een lager niveau van ondersteuning, waarbij de belangrijkste inhoud goed leesbaar moet zijn.
- Hoe komt mijn website uit de printer?
- Standaard wordt voor elk element op de pagina een print-style gemaakt. Als een pagina wordt geprint wordt alleen de belangrijkste inhoud getoond. Navigatie en minder relevante inhoud en links worden weggelaten. De kleurstelling is standaard zwart/wit.
- Tussen Firefox op Windows en Firefox op de Mac zie ik verschillen
- Kleine verschillen zijn acceptabel en wegen niet op tegen de moeite om ze gelijk te trekken. Als er grote verschillen ontstaan, is de kans groot dat er een bug aanwezig is in de stylesheet.
- Ik wil ronde hoeken en schaalbare elementen
- Dat kan, voor de browsers die CSS 3 ondersteunen (Firefox, Safari en Google Chrome). De andere browsers tonen of geen ronde hoeken of zijn niet geheel schaalbaar.
