20 CSS trick som du kanske inte känner till

Inledning

Jag kommer i denna artikel att gå igenom 20 olika CSS trick som du kanske inte känner till. Du kanske känner till de, men jag kan ju alltid chansa =).

1. Förkorta koden, använd genvägarna

Du kanske är van att skriva din kod på följande sätt:

font-family: Verdana;
 font-weight: bold;
 font-size: 12px;
 }

Men visste du att du kan förkorta det på följande sätt?

font: bold 12px verdana;[code]
Samma sak går att göra på flera andra saker, som t.ex. ramar:

[code]border: 1px solid #000;

2. Två eller flera klasser samtidigt

Visste du att man kan ha flera klasser på ett och samma element? Inte? Det kan man =)

<div class=”klass1 klass2 klass3”></div>

Det enda du behöver göra är att separera klassnamnen med ett mellanslag. Det webbläsaren kommer att göra då är att läsa varje klass efter den andre, i detta fall klass 1 sedan klass 2 eller klass 3.

Men vad händer om klass 2 definierar en svart textfärg och klass 3 en vit textfärg? Bra fråga =) Det som kommer hända är att webbläsaren tar hänsyn till den klassen som du definierat sist i ditt CSS dokument. Så om det ser ut så här i ditt CSS dokument…

.klass2 { color: black; }
 .klass 3 { color: white; }[/color]
…så kommer texten i DIV att få en vit färg. Skulle det ha sett ut så här:

[code].klass3 { color: white; }
 .klass2 { color: black; }

…så skulle texten få en svart färg. Hänger du med? Det är alltså inte i vilken ordning du skriver de i elementet, utan i CSS dokumentet.

3. CSS ram standardvärde

Oftast när man ska definiera värdet på en ram så gör man det på följande vis:

border: 3px solid #000;

Men visste du att man bara behöver definiera typen av ram i detta fall? Alltså:

border: solid;

Vet du varför? Jo, för att standardtjockleken på en ram är medium, vilket är 3-4 pixlar. Standardfärgen är den färgen som är standard för texten i det dokumentet eller elementet. Men självklart, vill man ha en streckad röd ram som är 20 pixlar tjock så får man nämna alla tre värden.

4. Att skriva ut ett CSS dokument

Många hemsidor vill gärna att besökarna skall kunna skriva ut sidan eller innehållet på sidan som visas. Oftast gör de ännu en sida som har en utskriftsvänlig version av sidan som visas, detta behövs inte! Du behöver bara skapa en ny CSS fil för samma sida som är avsedd för den utskriftsvänliga versionen. Inget mer, inget mindre. Titta på koden nedan.

 <link type="text/css" rel="stylesheet" href="standard.css" media="screen" />
 <link type="text/css" rel="stylesheet" href="utskrift.css" media="print" />

Märk väl värdet på media, print är den som är till för att skrivas ut, medan screen är till för att användas av dokumentet. Märk också att den CSS filen som ska skrivas ut har fått ett annat namn.

Det som kommer att hända här är att när användaren skriver ut sidan så kommer utrskrift.css att gälla istället för standard.css. Fiffigt va?

5. Ersätt bilder med CSS

Låt oss säga att du vill ha en rubrik i ett typsnitt som användaren förmodligen inte har, då är det ju bäst att använda en bild med texten i, inte sant? Men du vill ändå att sökmotorerna ska hitta rubriken. Då kanske du gör på följande sätt:

<h1><img src=”bild.jpg” alt=”Min hemsida” /></h1>

Detta går bra, sökmotorn kommer nog att hitta denna rubrik. Problemet är att sökmotorn kommer inte att ta hänsyn till alt=”” lika mycket som en vanlig text. Så hur löser vi det? Vi börjar med XHTML koden:

<h1>Min hemsida</h1>

Och nu använder vi vårt lilla CSS trick ;)

h1 {
    text-indent: -9000px;
    width: bildens bredd;
    height: bildens höjd;
    background:url(bild.jpg) no-repeat;
 }

Det vi gjorde här är att vi såg till att texten försvann från användarens skärm, ca 9000 pixlar åt vänster, d.v.s. någonstans utanför din skärm just nu :). Detta påverkar inte sökmotorerna, eftersom de inte bryr sig om CSS eller JavaScript för den delen. Sedan satte vi bilden som bakgrund och satte en höjd och bredd på rubriken. Simpelt och bra!

6. CSS box modell hack alternativ

Jag vet inte om du känner till det, men Internet Explorer 6 är inte världens bästa webbläsare =) Så den tenderar till att göra sådant som man inte vill att den ska göra. När man sätter följande inställningar på en DIV…

div { 
    width: 100px;
    padding: 5px;
    border: 5px;
 }

…så kommer IE6 inte att räkna ut bredden på DIV på följande sätt: 100 + (5 + 5) + (5 +5) = 120 pixlar. Det ska den ju göra, det är det som är ”rätt”. I IE6 kommer bredden att vara 100 pixlar bara.

Hur fixar man detta? Svar genom att sätta ett ID, t.ex. ”boxen” på samma  DIV som du jobbar med följande inställningar:

div {
    width:100px;
 }
 div #boxen {
    padding: 5px;
    border: 5px;
 }

Sådär! :)

7. Placera en DIV i mitten av skärmen/sidan

Ibland vill man ha en design där en DIV är i mitten av webbläsaren, då kan man använda följande kod:

div {
    width: 800px;
    margin: 0 auto;
 }

Det är viktigt att du har en fast bredd på den DIV, annars kommer detta inte att fungera! Dock kommer detta inte att fungera riktigt i exempelvis IE6, då måste du sätta följande egenskap på body:

body { text-align: center; }

Då kommer texten i DIV att centreras också ju, eller hur? Men det är en baggis, se bara till att innehållet i DIV ligger på vänstra sidan:

div {
    text-align: left;
    width: 800px;
    margin: 0 auto;
 }

8. Positionera vertikalt med CSS

Säg att du har en DIV eller liknande som är 30 pixlar hög och du vill att texten i den skall placeras vertikalt i mitten, hur gör man då? Det finns ett litet trick. Se till att line-height har samma värde som höjden på DIV. Exempel:

div {
    height: 30px;
    line-height: 30px;
 }

Då kommer det förhoppningsvis att fungera ;)

9. Positionera innanför en DIV

Ibland har man flera objekt i en DIV som man så gärna vill positionera. Det man ska börja med att göra är att sätta följande egenskaper på den DIV som man ska positionera i (låt oss kalla den för ”container”):

#container { position: relative; }

Sedan är det bara att börja positionera det som är inuti den. Säg att ”container” är 800 pixlar bred och du har en meny inuti den som är 100 pixlar bred och du vill ha den på högra kanten av ”container”:

#menu { right: 0; }

Då kommer menyn att fungera ifall din XHTML kod ser ut så här:

<div id=”container”><div id=”menu”></div></div>

10. Bakgrundsfärg sträcks till botten av skärmen

En svaghet med CSS är att man inte kan kontrollera det vertikalt lika bra som horisontellt. Säg att du har en vit bakgrund, men vill ha en blå kolumn på vänstra sidan där du vill ha din meny. Du prövar med denna kod:

#left-menu {
    width: 200px;
    background: blue;
 }

Om menyn inte sträcker sig själv (innehållsmässigt) till botten av skärmen, så kommer din design att förstöras. Din meny kommer nog att skäras av där innehållet slutar i kolumnen. Det du kan göra är att du kan göra en bild som är lika bred som du vill ha kolumnen och sätta den som bakgrundsfärg:

body { background:url(blue-bg.jpg) 0 0 repeat-y; }

11. Block eller inline?

Nästan alla XHTML element är av typen block eller inline. De som är block-element har gemensamt är:

• De börjar alltid på en egen rad (ny rad)
• Height, line-height samt top och bottom marginaler kan bli manipulerade
• Standardbredden är 100 % om inget annat specifieras

Några exempel på block-element är <div>, <h1> (och andra rubriker), <form>, <ul> och <li>. De som är inline-element har följande gemensamt:

• Börjar på samma rad
• Height, line-height samt top och bottom marginaler kan inte manipuleras
• Bredden är så bred som innehållet, om det inte manipuleras på något sätt

Exempel på inline-element är <span>, <a>, <label>, <input>, <img>, <strong> samt <em>.

För att ändra på ett elements status så kan man använda sig av:

display: block/inline ;

Vad är vitsen då med att byta fram och tillbaka då? Det är ett kraftfullt sätt att använda när du vill:

• … att ett inline-element ska placera sig på en ny rad
• … att ett block-element ska placera sig på samma rad
• … kontrollera bredden på ett element (användbart vid byggande av menyer)
• … manipulera höjden på ett inline-element
• Koppla bredden på bakgrunden till innehållet utan att behöva ange ett värde för bredden

12. CSS box modell hack alternativ 2

Tidigare gick jag igenom hur man löser problemet med bredden av en DIV i IE6. Nu ska vi titta på ännu ett alternativ. Det är alltså samma problem som vi nu försöker lösa som i punk 6.

padding: 2em;
 border: 1em solid #000;
 width: 20em;
 width/**/:/**/ 14em;

Så vad händer nu? Den första bredden läses av alla webbläsare, den andra av alla också, men inte av IE5 (PC). P.g.a. detta så kommer den andra bredden kommer att gälla före den första. Men hur fungerar detta egentligen och varför har vi gjort på detta sätt?

Genom att placera kommentartaggen (/**/) innan kolon, så kommer IE5 att ignorera kommandot, det samma gäller dess värde, eftersom vi placerade kommentartaggen efter kolonet. På detta sätt ”gömmer” vi detta kommando för IE5. Förstår du?

Vi ville alltså uppnå bredden 20 em, right? Alla webbläsare, inklusive IE5 kommer att förstå det genom width:20em. Dock kommer de nya webbläsarena att kunna läsa nästa rad, vilket är width:/**/:/**/14em och sätta den bredden på din DIV, plus att de kommer att ta hänsyn till marginalerna, vilket IE5 inte kommer att göra. Lätt som en plätt :)

13. Minimum bredd för en sida

Ibland vill man sätt en minimum bredd på något, då kan man använda sig av min-width, men det kommandot gillas inte av alla webbläsare, och med alla så vill jag rikta pekfingret främst mot IE. Kom ihåg att detta kommando måste läggas på ett element i body, som inte är body självt.

#container {
    width: 600px;
    width: expression(document.body.cliendWidth < 600? “600px”: “auto” );
 }

Det första kommandot är ju det “vanliga”, inget konstigt med det. Det andra kommandot är ett kort JavaScript som bara IE förstår. OBS! Detta kommer inte att validera i W3C! Vill du kombinera minimum bredd med max bredd? Använd koden nedan:

#container {
    width: 600px;
    width: expression(document.body.clientWidth < 600? “600px”: document.body.clientWidth > 1200? “1200px” : “auto” );
 }

14. IE samt dess problem med width och height

IE har tendens att göra saker och ting på eget sätt, vilket kan skapa problem för oss webbutvecklare. Säg att du har en bakgrundsbild som är 100x200 pixlar stor, då vill du ju försäkra dig om att IE förstår att boxen skall också ha samma dimensioner.

För att lösa detta så kan du använda följande kod för exempelvis en box med klassen ”box”:

.box {
    width: 100px;
    height: 200px;
 }
 html>body .box {
    width: auto;
    height: auto;
    min-width: 100px;
    min-height: 200px;
 
}

Alla webbläsare kommer att läsa igenom den första regeln, men IE kommer att ignorera den andra regeln, eftersom den använder sig av vad som kallas för child selector command. Andra webbläsare (inte IE) kommer att läsa igenom den andra regeln och kommer att applicera värdena från min-width, alltså kommer inte width värdet inte att gälla för dessa. Varför? Jo, för att min-width är med specifikt än width, vilket alltså går före.

15. Kommandot text-transform

Ett av de mindre kända, men ändå så användbara CSS kommandon, är kommandot text-transform. Den har tre värden: uppercase, lowecase och capitalize. Det förstnämnda omvandlar text till versaler (stora bokstäver), det andra till gemener (små bokstäver) och det tredje till omvandlar första bokstaven på varje ord till en versal.

Detta kommando är otroligt användbart för att säkerställa en typ av stadga eller överrensstämmelse över hela hemsidan. Säg t.ex. att du driver en webbtidning och vill försäkra dig om att första bokstaven på rubriken är en stor bokstav, då kommer detta till hands (capitalize).

Ett till användningsområde. Har man exempelvis en engelsk sida så kanske man har en länk som heter ”CONTACT US” med stora bokstäver. Detta orsaker lite missförstånd för vissa läsare, då kanske de tror att det står ”CONTACT U S”, och det är inte det som är meningen :) Så här är det bra om du använder uppercase istället.

16. Försvinner text eller bilder i IE?

Det finns en märklig bugg i IE där text eller bakgrundsbilder ibland försvinner. De är där, men de är inte synliga. Detta problem uppstår oftast bilder och text som är nära ett float-element.

För att fixa sådana problem så behöver man bara sätta…

position: relative;

… på det elementet som försvinner. Det borde räcka! Men om det ändå inte gör det, ge elementet en bredd, då skall det fungera!

17. Osynlig text

Om du av någon anledning inte vill använda dig av display: none, men den gömmer inte bara texten, utan hela elementet. Det du kan använda dig av är text-indent:-9000px, eller så använder du annat värde. Detta förflyttar texten bort från skärmen.

Vill du gömma hela elementet men inte med hjälp av display? Då kan du använda dig av följande kod:

position: absolute;
 left: -9000px;

18. CSS för mobiltelefoner och handdatorer

Man kan skapa ett separat CSS dokument för handdatorer och mobiltelefoner samt se till att de bara aktiveras när sidan besöks av sådana webbläsare. Detta gör du genom att inkludera en CSS fil på följande sätt:

<link type=”text/css” rel=”stylesheet” href=”handheldstyle.css” media=”handheld” />

Hur du utformar den CSS filen är något som du själv får komma fram till, men ett tips är att undvika att ha sidobläddringslist på mobiltelefons webbläsare. Det är ju inte så kul =)

19. Knapp-effekt (3D-effekt)

Vill du skapa en knapp effekt på en knapp utan att skapa en formulärknapp? Med koden nedan kan du göra det:

a {
    display: block;
    border: 1px solid;
    border-color: #aaa #000 #000 #aaa;
    width: 8em;
    background: #fc0;
 }
 a:hover {
    position: relative;
    top: 1px;
    left: 1px;
    border-color: #000 #aaa #aaa #000;
 }

20. Samma navigationsutseende på varje sida

Ibland vill man att menyn ska visa på vilken sida/lank man befinner sig på genom att färga den länken lite annorlunda. Istället för att göra ändringar i XHTML koden själv på varje sida, så kan man använda sig av en fiffig liten metod.

<ul>
    <li><a href=”contact.html” class=”contact”>Kontakta oss</a></li>
    <li><a href=”about.html” class=”about”>Om oss</a></li>
 </ul>

Se till (på ditt eget sätt) att <body> får sig ett ID på varje sida. Alltså, om man befinner sig på ”Kontakta oss”, så skall det exempelvis se ut på följande vis: <body id=”contact”>, är man på ”Om oss” så: <body id=”about”>. Sen är det bara att leka med CSS koden:

#about .about, #contact .contact {
    Inställningarna du vill ha på den valda länken (där man befinner sig)
 }

Sammanfattning och summering

Jag har i denna artikel gett 20 olika användbara CSS tips. Jag hoppas att du får användning för de.

Till denna artikel har jag använt följande källor:
http://www.webcredible.co.uk/user-friendly-resources/css/css-tricks.shtml
http://www.webcredible.co.uk/user-friendly-resources/css/more-css-tricks.shtml
Jag har översatt artiklarna och byggt de efter egna behov till en enda artikel, men ett stort tack till WebCredible!

Med reservation för stavfel.
Kommentera gärna!

Vänliga hälsningar
Shadi Domat

Skapades: 2009-11-01 20:50:41
Skribent: Shadi
Lästs 3623 gånger
Betyg: 0 (totalt 5 röster)

Kommentarer