Dit is de officiële vertaling van de CSS Crib Sheet van Dave Shea , en er is vriendelijk toelating gegeven aan Gigadesign.be om deze te publiceren. Waarvoor dank.

Ongetwijfelt zal je ooit, bij het designen met CSS, op een punt geraken waar je niet verder weet, en waarschijnlijk zal je dan radeloos zijn. Dit naslagwerk dient om het designers gemakkelijker te maken als je plotseling voor een dooreen gerakeld ontwerp staat.

Het snelle ultieme naslagwerk voor Css ontwikkelaars

Als je twijfelt, valideer

Als je plotseling ongewenste resultaten krijgt bij het ontwerpen, kan je jezelf een hele boel tijd en frustraties besparen door je code eerst eens te valideren. onjuiste opgestelde Xhtml/Css ontwerpen resulteren meestal in rare layout toestanden.

Ontwerp en test je CSS eerst in de meest gangbare huidige browsers alvorens te testen in oudere versies

Als je een website maakt en deze dan in een oude, kapotte browser test, zal je code afhankelijk zijn van de weergave in de oude, kapotte browser. Als de tijd gekomen is om te testen in een meer webstandaarden compatibele browser, zal je gefrustreerd geraken als de weergave in de browser niet correct zal verschijnen. Daarom wordt aangeraden te starten met voor perfectie te gaan, en hacks toe te passen voor de mindere browsers. Je code zal meer standaard compatibele zijn, direct vanaf het begin, en je zal niet zoveel moeten hacken om ondersteuning te hebben voor elke browser de dag van vandaag, en dit zeggende zijn Mozilla, Safari en Opera in gedachten.

Als je gebruik maakt van floats voor layouts, clear ze dan ook op de correcte manier.

Floats zijn “tricky”, en doen meestal niet wat je van hun verwacht. Als je in een situatie komt waarbij floats bestaan buiten een boord of het omvattende element, of helemaal niet doen wat je verwacht, kijk dan eens na of datgene wat je wil bereiken wel bestaat. Of ga eens lang bij Eric Meyer’s tutorial over deze materie.

Ineenstorten van randen, gebruik padding of een border om te verhinderen.

Ooit zal je het meemaken, extra lege spatie waar het niet gewenst is, of daar waar het gewenst is verschijnt het niet. Als je boorden met margins gaat bepalen is collapsing (ineenstorten), dus het overdekken van naburige elementen, het meest waarschijnlijke waar je mee te maken gaat hebben, Andy Budd kan je uitleggen wat je allemaal kunt verwachten.

Probeer het gebruik van padding/borders en een vaste waarde voor breedte van een element, te vermijden.

Internet Explorer 5 heeft een fout (bug) met het box model, en kan er een zooitje van maken. Er zijn achterpoortjes (nederlandse vertaling) om dit op te lossen, maar de beste manier is padding toe te voegen aan het parent element (ouderelement, voorgaande element), in plaats van een vaste pixel breedte aan het child element (kind element, onderliggende element) te geven.

Vermijd de “Flash of Unstyled Content” in IE.

Als je enkel de @import regel gebruikt voor externe style in te binden, vroeger of later zal je een “flits” zien van gewone tekst zonder enige vorm van opmaak via CSS, waarnaa de CSS uiteindelijk vorm zal geven. Dit effect kan worden verhindert. (nederlandse vertaling).

Vertrouw niet op min-width in IE.

Waarom, IE verstaat het gewoon niet. Maar het behandelt width als min-width tot een bepaalde graad, dus met een beetje IE filtering kan je hetzelfde eindresultaat bereiken.

Als je twijfelt, verminder width’s.

Soms kom je tegen dat afmetingen zoals 50% + 50% uiteindelijk eindigen als 100.1% welke dan je layout breken is sommige browsers. Probeer de afmetingen iets te beperken zoals 50% dan 49% wordt, of zelfs 49.9%.

Inhoud verschijnt niet correct in IE?

Je ondervind het effect van de Peekaboo bug (kiekeboe fout in Internet Explorer), zeker als je mouse-over een link gaat en plotseling alle inhoud verschijnt. Lees Position is Everything voor de oplossing.

Wees voorzichtig als je links styled, zeker bij gebruik van ankers (anchors).

Als je gebruik maakt van een gewone anchor in je code (<a name=”anchor”>), zal het je wel al zijn opgevallen dat deze ook de pseudo-classes zoals :hover en :active overneemt. Om dit effect te voorkomen zal je of id voor anchors moeten gebruiken, of stylen met een beetje meer magie, zoals :link:hover en :link:active.

Je wilt een effect bereiken, bestaat deze wel en is het mogelijk ?

Er zijn browser specifieke extenties die niet gangbaar zijn in de officiële specificaties. (Verduidelijking: je kunt met sommige browsers dingen doen met CSS, die enkel en alleen maar bij deze browser werken.). Als je bijvoorbeeld probeert filters toe te passen of schuifbalken te stylen, dan werk je met merkgebonden code die enkel maar werkt in IE. Als de validator je verteld dat de code die je gebruikt niet “defined” (bepaald) is, dan weet je dat de kans bestaat dat je code merkgebonden is en nooit zal werken bij elke browser.

Verdeel en verover: gebruik comentaar om grote delen style uit te schakelen

Doeltreffend als je werkt aan grote, niet eigen, CSS bestanden. maak grof gezien de ene helft commentaar, als het probleem zich nog steeds voordoet, zit het in de andere helft. Maak van de rest die overblijft commentaar, als het probleem niet meer aanwezig is, zit de fout in dit deel wat nu commentaar is. Verfijn je commentaar gedeelte en test opnieuw, ga zo door tot je het probleem gelokaliseerd hebt.
Commentaar maak je in CSS bestanden door het begin voor te gaan met /* en het einde van het gedeelte af te sluiten met */

Onthoud de regel “LoVe/HAte” voor links

Als je link pseudo-classe’s specifiëerd, doe dit altijd, maar ook altijd, in deze volgorde: Link, Visited, Hover, Active. Op elke andere manier zal het niet werken. Denk er zelfs aan om :focus te gebruiken en pas de volgorde aan naar: LVHFA (of: Lord Vader’s Handle Formerly Anakin, zoals voorgesteld door Matt Haughey)

Onthoud “TRouBLEd” borders

Borders, margins en padding shorthand (verkortingen) werken volgens een specifieke volgorde: met de klok mee startend vanaf de top of Top, Right, Bottom, Left. Dus: margin: 0 1px 3px 5px;
heeft als resultaat: geen top margin, 1px rechter margin, 3px margin onderkant, 5px linker margin.

Geef maten aan niet nul waarden.

Css verwacht dat je maten meegeeft aan waarden voor fonts, margins en afmetingen. Enigste uitzondering in deze regel is line-height, welke, raar maar waar, geen maat nodig heeft. De verhoudingen tussen de verschillende browser als waarden geen maat hebben is niet bij deze regel van toepassing, nul is nul, welke maat er ook achter staat, px, em of andere. Bij nul is geen maat nodig. Voorbeeld:
padding: 0 2px 0 1em;

Test verschillende font afmetingen.

Vooruitstrevende browsers zoals Mozilla en Opera laten het toe tekst afmetingen aan te passen, zonder daarbij rekening te houden welke afmetingen gebruikt worden in de CSS. Sommige personen zullen zeker een grotere of kleinere standaard afmeting hebben als jij. Probeer een zo groot mogelijke weergave van je tekst te ondersteunen, dus dat je layout niet verknoeid wordt als je teks weergeeft op 150%.

Vergelijk aanduidingen tussen je Html en Css

Sommige browsers zijn hoofdlettergevoelig. Gebruik maken van een class zoals “homePage” is goed, als je een zefsverzekerd telkens terugkeerend principe hanteerd, als je dan in je Html een class=”homepage” toewijst, zal het problemen opleveren in hoofdlettergevoelige browsers zaols Mozilla.

Test embedded (in je Html), maar plaats online als imported (extern)

Als je werkt met een stylesheet ingekapseld in je Html, zal je het mogelijk probleem met caching fouten elimineren terwijl je aan het testen bent. Dit is zeer belangrijk als je testen doet met sommige Mac browsers. Maar als je klaar bent om online te plaasten, verhuis je style extern en voeg toe aan je Html via @import regel of via <link> regel.

Voeg eenvoudige borders toe om je te helpen bij het opsporen van fouten in je layout.

Een universele regel zoals div {border: solid 1px #f00;} kan je helpen te zoeken naar een bepaald layout probleem. Maar het toevoegen van een boord aan een speciale plaats kan je helpen om doelgericht te zoeken naar overlappende delen of lege ruimte die anders niet zo duidelijk te zien waren.

Gebruik nooit enkele quotaties (apostrofen) rond paden voor afbeeldingen.

Als je een achtergrond afbeelding bepaald, weerhoud jezelf ervan gebruik te maken van ‘pad_naar_afbeelding’, dus plaats er geen quotaties rond. Deze zijn niet nodig, en IE5/ zal eraan stikken.

Plaats geen links naar lege style sheets, als bijvoorbeeld plaatshouders voor eventuele toekomstige style sheets. (zoals mobiele of print media style sheets)

Mac IE5 zal zich eraan verbijten en de laadtijd van de pagina zal zeker verlengen. Heb minstens èèn enkele regel opgenomen of zelfs maar een commentaar zodat MacIE er geen problemen mee ondervindt.

Als laatste, hier zijn enkele vernoemenswaardige theoriën die niet echt van funktionele toepassing zijn, maar zeker de moeite zijn als je eraan denkt te gaan ontwerpen:

Organizeer je Css bestand.

Geef commentaar aan blokken Css doeltreffend en op de juiste plaats, groepeer gelijkende selectors, en vestig een verenigbare noemende overeenkomst. Formateer je code met lege ruimtes, aanbevolen is een enkele spatie in plaats van een tab-ruimte voor cross-platform overwegingen in een logische volgorde.

Geef namen aan classes/IDs gebaseerd aan hun funktie, niet aan hun verschijning.

Als je een class maakt zoals .smallblue en later wordt je gevraagd deze te veranderen naar grote rode tekst, de classnaam zal elke bedoeling verliezen. Maak daarvoor eerder gebruik van logische namen zoals .copyright en .pullquote.

Geef je over aan CSS filters enkel als laatste en enige uitweg.

Css hacks en filters kunnen je helpen om selectief Css weer te geven voor verschillende elementen. In plaats van het gebruiken van deze telkens wanneer je probleem tegenkomt, probeer een oplossing te vinden die meer standaard en cross-browser is voor het gewenste effecte te bereiken. Als je twijfelt, hier is een lijst met alle CSS filters.

Combineer selectors.

Houd je Css zo “light” mogelijk, om zo laadtijd te mimimalizeren. Groepeer selectors (Nederlandse vertaling), vertrouw op erfelijkheid van parent elementen, en reduceer overtolligheid door gebruik te maken van de shorthand techniek (Nederlandse vertaling).

Denk aan toegankelijkheid als je image replacement gebruikt

Gewone FIR (Nederlandse vertaling) heeft de gekende problemen in screenreaders, en voor diegene die afbeeldingen weergeven hebben uitgezet. Alternatieven bestaan.

Einde