CSS

Kommentarer i CSS

Kommentarer skrivs på ett annat sätt i CSS än i HTML. I CSS skrivs kommentarer med ett snedstreck (/) följt av en asterisk (*). Kommentaren avslutas med det omvända: en asterisk med ett snedstreck efter.

/* Jag är en CSS-kommentar */

<!-- Jag är en HTML-kommentar -->

CSS Shorthand

En smart sak i CSS ör möjligheten att skriva shorthand, att förkorta och sammanfatta egenskaper. Detta sparar inte bara in tid och tangentbordsslitage, utan kan faktiskt medverka till att webbsidor laddas snabbare.

Skillnaden i hämtnings- och lästid är dock marginell, den stora vinsten med shorthand är den att CSS:en går snabbare att skriva och att det ger en mer överblickbar kod.

Om du tittar på W3C:s lista över CSS-egenskaper ser du att vissa egenskaper är sammansatta ord med bindestreck i. Alla dessa kan kortas ned. border-top-color i exemplet nedan är att se som en precisering av exakt vilken kantlinje det gäller.

I stället för att skriva till exempel:

#meny {
border-top-color: #ff0000;
border-top-width: 4px;
border-top-style: solid;
border-right-color: #ff0000;
border-right-width: 4px;
border-right-style: solid;
border-bottom-color: #ff0000;
border-bottom-width: 4px;
border-bottom-style: solid;
border-left-color: #ff0000;
border-left-width: 4px;
border-left-style: solid
}

så kan du sammanfatta detta som

#meny {
border-color: #ff0000;
border-width: 4px;
border-style: solid;
}
Eller rent av till
#meny {
border: #ff0000 4px solid;
}

Alla tre exemplen ovan kommer att ge id:t meny en röd, 4 pixlar bred kantlinje på all sidor. Alla fyra sätten är också korrekta, men det sista innebär mycket mindre text att skriva än det första exemplet.

...och så här ser det ut

En liten varning: All shorthand fungerar inte alltid, ibland måste man vara specifik och dela upp sina regler. Jag föreslår att du börjar med att försöka sammanfatta så mycket som möjligt, och dela upp reglerna om du stöter på problem, men du bestämmer själv vad du tycker känns mest bekvämt, som sagt: samtliga exempel ovan är formellt korrekta.