lillbra.se

Att tänka på när du knappar css

Jag lovade tidigare att följa upp råden om html-kodning med dito för css, och håller härmed detta löfte. Emil Stenström har skrivit en artikel hur man ska skriva css som fungerar i alla webbläsare. Ur den plockar jag de första nedanstående råden.

Strict doctype

Här kommer återigen en uppmaning att använda en strict DOCTYPE. Då tvingar man nämligen webbläsaren att läsa koden i standards mode, och endast då kan man veta att den använder W3C’s CSS box model riktigt. Du får mindre strul med olika utseende i olika webbläsare.

Global white space reset

Nästa råd är mitt favorittips: Använd Global white space reset. Detta innebär att man tar bort alla default värden som webbläsarna har för padding och margin på de olika elementen. På så sätt slipper man ånyo strul med olika utseende i olika webbläsare. Global white space reset sätter du genom att placera följande kod först i ditt css: * {padding:0; margin:0;}

Angående margin och padding ger Jonathan Snook detta tips:

My rule of thumb is, if I set a width, I don’t set margin or padding. Likewise, if I’m setting a margin or padding, I don’t set a width.

Snook.caTop CSS tips (2006-09-20)

Förkortningar

Att använda forkortningar i css är något som inte används fullt ut av många. Med forkortningar menar jag möjligheten att skriva flera egenskaper i endast en deklaration, t.ex. background:#f00 url(background.gif) no-repeat fixed 0 0; Roger Johansson har skrivit en bra artikel om css-förkortningar. Min personliga favorit här är forkortningen av hexadecimaler färger, där det räcker med att använda en siffra för vare teckenpar: t.ex. #369 istället för #336699 eller #ccc istället för #cccccc.

Relativa mått

I Jonatan Snooks inlägg om hans bästa css-tips, finns det viktiga rådet att använda em som enhet till font-size. Detta eftersom em är ett relativt mått och användaren då kan reglera textstorleken själv, vilket inte är möjligt i alla webbläsare om ett fast mått (tex. pixlar) används.

Hantera floats

I samma inlägg presenteras även den bästa lösningen på att hantera problemet att hålla flera element som floatar. Skriv {overflow:hidden; zoom:1;} för det element som ska hålla de floatade elementen.

Selektorer

Snook påminner oss också om att unvdvika onödiga selectorer. Du behöver till exempel inte skriva div#content det räcker med #content. För att ha full koll på olika sorters selektorer rekommenderar jag artiklarna CSS 2.1 selectors på 456 Berea Street. Där kan man läsa vilka selektorer som finns, vilken inbördes viktning de har och hur de ska skrivas. Om du är über-geek kan du även kolla in CSS: Specificity Wars där liknande innehåll finns, exemplifierat genom StarsWars!

Centrering m.m.

Roger Johansson har även skrivit en utmärkt artikel i två delar om hans bästa css tips och tricks. Där återfinns en användbar lösning till hur man centrerar element (vilket inte är helt enkelt att lista ut i css). För att centrera ett element inuti ett annat skriver man: margin:0 auto; Andra råd och tips han ger i den artikeln är:

  1. Specificera enhet om värdet inte är 0
  2. Case senitivity
  3. Du kan ha flera klassnamn på ett element
  4. Gruppera selektorer
  5. Använd arv

Lycka till med knappandet! [tags]css, webbutveckling, webbdesign[/tags]

5 kommentarer till “Att tänka på när du knappar css”

  1. Ranald says:

    Det där med global whitespace reset kanske löser mitt problem med padding i IE. Men jag har visserligen ingen koll på mitt CSS, behöver skriva ett helt nytt.

  2. [...] lillbra » Blog Archive » Att tänka på när du knappar css Global white space reset för att ordna med webbläsarens padding och margin (tags: CSS tips) [...]

  3. Jonatan Larsson says:

    Ja, förhoppningsvis! Du kanske kan hitta lösningen på denna länk åxå: Closing the gap between list items in IE – 456 Berea Street

  4. [...] Läs också: Att tänka på när du knappar cssAndra bloggar om: css, w3c, acid2, standards [...]

  5. [...] Relaterade inlägg: Att tänka på när du knappar css [...]

Kommentera

Rullar på Wordpress med modifierat Guerrilla-tema