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.ca – Top 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]

links for 2006-10-15

• Bloggdesign, 5 poäng – Eki, MdH
  Skaffa högskolepoäng i bloggning!
  (tags: blogging education)
• Dumma användare – och programmerare | anvandbart.se
  Källkod kan vara ganska avslöjande…
  (tags: code codesearch kludge)

Youtube inte uträknat tack vare Google

Häromdagen blev det klart att Google köper världens mest populära videodelningssajt Youtube för den svindlande summan 1,65 miljarder dollar. Veckorna innan har det i stort sett tävlats i att döma ut Youtube – många förutspådde sajtens död. Anledningen är det upphovsrättskyddade materialet som finns att tillgå på Youtube. Risken för en stämning och en förlust i en rättsprocess är/var överhängande, vilket skulle betyda att sajten gick samma öde till mötes som Napster. Hårdast av alla fördömare var dotcom-veteranen Marc Cuban som menade att endast en idiot skulle köpa Youtube. Denna ”idioten” visade sig alltså bli Googles vd Eric Schmidt… Från följande länkar kan du läsa mer om hur Youtubes framtid svartmålades:

• The Jason Calacanis Weblog – Cuban: Nice knowing you YouTube. (Via Fleecelabs)
• The Jason Calacanis Weblog – On YouTube hating and loving (or “thread that needle baby!”) (Via Fleecelabs)
• Internetworld – Analytiker: You Tube kommer att sluta som Napster
• Fleecelabs – YouTube, flipp eller flopp?

Men med Google som ägare kom sajtens förutsättningar i annan dager – köpet ses av många som räddningen för Youtube. Google har nu två utmaningar för att det uppmärksammade köpet ska vara lyckat. För det första måste man alltså förhindra att Youtube verkligen dras inför rätta. Det har redan annonserats att ett ”antipiratsystem” för att identifiera skyddat material ska implementeras vid nyår. För det andra måste göra Youtube lönsamt och detta ska uppnås med hjälp av AdSense. På k-märkt kan du läsa mer om vad Google har för planer för Youtube.
Hur dom lyckas får vi se, men man kan nog räkna med att Youtube lever kvar ett tag till med Google som sin nya bundförvant. [tags]google, youtube[/tags]