Godt i gang med CSS3

I sidste artikel gav jeg en intro til HTML5 – i denne artikel handler det om CSS3 – en guide til at komme godt i gang med CSS3, for dig der allerede kender lidt til tidligere udgaver af CSS.

Hurtigt i gang med CSS3

I modsætning til HTML5-doctypen, skal du ikke skrive nogen steder at du bruger CSS3: Du skal bare skrive at du bruger CSS/linke til en CSS-fil som normalt, og så står browser-producenterne for at implementere CSS3 hen ad vejen.

Så det eneste du skal gøre er at anvende CSS3, og være klar over hvilke elementer de forskellige browsere understøtter:-)

Udvikling af CSS3

CSS3 er udviklet som moduler, der er designet til at blive implementeret uafhængigt af hinanden. CSS3 er under stadig udvikling, men at CSS3 udvikles som moduler, betyder at vi kan bruge store dele af det allerede nu.

Ligesom med HTML5, er det dog ikke alle browsere, der understøtter de forskellige moduler. Så man skal liiige sørge for at bruge det på rigtig vis!

CSS3 kan trygt og roligt bruges til et websites “oplevelses”-lag, altså den visuelle oplevelse. Men vi bliver nødt til at skelne mellem to lag i den visuelle oplevelse: Kritiske og ikke-kritiske elementer. Branding, usability og layout vil f.eks. være kritisk, mens små visuelle elementer, visuel feedback og bevægelse på websitet måske ikke er kritisk.

Eksempelvis vil rundede hjørner på en kasse være kritisk hvis et design-bureau hedder “runde hjørner,” mens det ikke vil være kritisk, hvis der er tale om ethvert andet designbureau.

Her er der to principper for design og udvikling der er værd at huske på: Graceful Degradation og Progressive enhancement.

Graceful degradation går ud på at man designer og udvikler et site med henblik på den optimale bruger, og så lapper man med JavaScript mm. for at alle med ældre/dårligere browsere får en ok oplevelse på sitet.

Progressive enhancement går ud på at man sørger for en god basis-oplevelse for alle – også dem med ældre browsere, der ikke understøtter alt det fine. Og så tilføjer man ekstra lækkerier, for dem der kan se det.

Progressive enhancement er mest populær for tiden – sørg for at lave en god basisoplevelse, og giv så en række ikke-kritiske lækkerier, til dem der holder deres maskiner/browsere ved lige.

CSS3 er klar til brug

Der er en række elementer i CSS3, der allerede er klar til brug i ikke-kritiske dele af dit website:

  • Border-radius
  • Text-shadow
  • Box-shadow
  • Multiple background images
  • Opacity
  • RGBA-farver: En ny farve-model.
  • Web-fonts

Media Queries, som typisk bruges til at lave adaptive/responsive sites, er som sådan også en del af CSS3. Dem vil jeg dog ikke se på her – det vender jeg tilbage til senere.

Vendor prefixes

Da CSS3 består af en række moduler, der skal implementeres af browser-producenterne, tager det sin tid at få det gjort, og der er visse udfordringer med det. Lad os eksempelvis se på en “class” .kasse med en baggrundsfarve og en border-radius:

.kasse{
	background-color: #CCC;
	border-radius: 5px;
}

Background-color har været på banen i lang tid, men border-radius er CSS3. Det ville være dejligt hvis vi bare kunne skrive CSS-egenskaben border-radius: 5px. Men browser-producenterne er ikke nået til enighed om CSS-egenskabernes navne. De anvender det der hedder “vendor-prefixes.” Derfor bliver vi nødt til at bruge en vendor-prefix stack, for at få CSS-egenskaben til at virke på tværs af browsere. Eksempelvis:

.kasse{
	background-color: #CCC;
	-webkit-border-radius: 5px; //  Safari & Chrome
	-moz-border-radius: 5px; // Mozilla
	border-radius: 5px; // IE og fremtidige browsere
}

Det er vigtigt at skrive border-radius nederst. Border-radius er den forventede, fremtidige standard. Indtil videre brugere Safari og Chrome -webkit prefixet og firefox -moz prefixet, men nyere udgaver kommer måske til at bruge border-radius i stedet for hhv. -webkit-border-radius og -moz-border-radius.

Ved at nævne den fremtidige sidst, vil det være den der “bliver husket/brugt” af browseren. Det gælder for alle vendor-prefix stacks, du kommer til at arbejde med.

Vendor prefix listen er som følgende:

-webkit- : Til Chrome og Safari
-chrome : Specifikt til chrome, men chrome bruger samme “engine” som Safari (webkit)
-o- : Til Opera
-moz- : Til Firefox
-ms- : Til Internet Explorer

caniuse.com og html5readiness.com kan du se hvilke browsere, der understøtter forskellige CSS3-egenskaber, og for den sags skyld en liste over en masse egenskaber.

CSS Transitions

CSS transitions gør det muligt at ændre værdierne på CSS-egenskaber over et bestemt tidsrum, eksempelvis at fade en farve ind/ud, når man kører musen over noget bestemt. Det gør brugsoplevelsen på websitet langt mere “smooth.” Før brugte man gerne JS, men nu kan der i høj grad bruges CSS til det – efter “ikke-kritisk progressive enhancement princippet.”

Eksempel:

a.voreslink{
    padding: 5px;
    background: #CCC;
    transition-property: background; 
    transition-duration: 0.5s; 
    transition-timing-function: ease;
}
a.voreslink:hover{
    background: #F90;
}

Der er tre delementer af denne transition (der kunne være flere/færre):

transition-property: background; - Hvad skal “transitiones”
transition-duration: 0.5s; // Transitionens varighed
transition-timing-function: ease; // Transitionens udvikling over tid: Ease speeder den op/ned i forhold til start/slut

Det interessante at bemærke er at transitionen kommer på a-selectoren, og ikke a:hover-selectoren. Man kunne godt forestille sig at transitionen skulle på :hover pseudoselectoren, fordi der skal ændres farve, når man kører musen over linket. Men transitionen skal på a-selectoren, altså elementets “normale” udseende, fordi det er den der transitioneres fra.

Ovenstående kode er lang. Heldigvis kan den skrives i shorthand som følgende:

a.voreslink{
    padding: 5px;
    background: #CCC;
    transition: background 0.5s ease;
}

Og for at få vendor-stacken med kan vi så skrive:

a.voreslink{
    padding: 5px;
    background: #CCC;
    -webkit-transition: background 0.5s ease;
    -moz-transition: background 0.5s ease;
    -o-transition: background 0.5s ease;
    transition: background 0.5s ease;  
}

Hvilke elementer kan man give transitions?

Man kan bruge transitions på mange CSS-egenskaber – f.eks. width, opacity, position og font-size. Det betyder at man faktisk kan få ting til at skifte farve, poppe op og blive større/mindre med ren CSS.

Se den fulde liste over CSS-egenskaber, man kan lave transitions på w3.org.

CSS Transforms

CSS 2D transforms gør det muligt at gør det muligt at ændre/transformere elementer på skærmens 2-dimensionelle flade.

Eksempelvis kan vi forstørre et billede, når man kører musen over:

.billedet img{
	width: 300px;
}

.billedet img:hover{
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -o-transform: scale(1.5);
    transform: scale(1.5);
}

Vi kan give elementet en skygge:

.billedet img:hover{
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -o-transform: scale(1.5);
    transform: scale(1.5);
    -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
}

Vi kan rotere elementet:

.billedet img:hover{
    -webkit-transform: scale(1.5) rotate(10deg);
    -moz-transform: scale(1.5) rotate(10deg);
    -o-transform: scale(1.5) rotate(10deg);
    transform: scale(1.5) rotate(10deg);
    -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
}

Vi kan flytte elementet med “translate,” forvride det med “skew” og meget andet. Men pas på ikke at komme til at bruge for meget lir! Alt med måde! Arj. Gå amok:-)

CSS Multiple backgrounds

Man kan have flere baggrunde på et element ved hjælp af CSS3. Det gøres som følgende:

body{
    background: url('fallback.png') repeat-x fixed 0 0,
    background:
        url('billede1.png') no-repeat fixed 40% 10%,
        url('billede2.png') repeat-x fixed;
}

Det første billede er et fallback-billede, som bruges af browseren, hvis den ikke kan vise flere baggrunde. Ellers anvendes de to andre, som er i en ny background-property med flere baggrunde på (læg mærke til at den adskiller dem ved hjælp af komma).

“billede1.png” er det billede, der er tættest på brugeren. “billede2.png” er længst væk (bagerst). Billede 1 er sat til ikke at gentages, fast positioneret, 40% fra venstre side, 10 procent fra toppen. Billede 2 gentages i hele x-aksen.

CSS Advanced Selectors

Med CSS3 har man også en række avancerede selectorer. Der er mange af dem som alle kan ses på https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors. Her vil vi blot se på et eksempel.

I CSS3 er der en række nye pseudo-klasser, herunder :last-child og :first-child.

:first-child og :last-child kan f.eks. bruges til at style første og sidste elementer i et “forældre”-element anderledes.

Har vi f.eks. en liste med links:

<ul class=”linkliste”>	
	<li>Første link</li>
	<li>... Mange link...</li>
	<li>Sidste link</li>
</ul>

Kan vi bruge følgende for at gøre første og sidste link anderledes:

.linkliste a{
	color: #CCC;
}
.linkliste:first-child a{
	color: #F90;
}
.linkliste:last-child a{
	color: #333
}

Det interessante ved at bruge avancerede CSS-selectors er at man undgår at tilføje en masse ekstra class og id’s til sin html, fordi man blot kan bruge avancerede CSS-selectors, for at ramme de pågældende elementer.

For yderligere informationer om CSS3 selectors, se artiklen fra 456bereastreet.com om CSS3 selectors.

Afrunding – brug CSS3!

Det er som nævnt ikke alle browsere, der understøtter alle CSS3 selectors. På caniuse.com og html5readiness.com kan du se hvilke browsere, der understøtter hvilke elementer. Eksempelvis kan du se søge efter CSS-transitions, for at se hvilke browsere, der understøtter det: https://caniuse.com/css-transitions

Derfra kan du så tage en beslutning: Hvilke browsere SKAL vores website understøtte, og hvad vil vi gøre med dem, der ikke understøtter det vi efterspørger?

Går vi efter “graceful degradation” eller “progressive enhancement” tilgangen (sidstnævnte er anbefalelsesværdig…)?

1 kommentar

Tilføj din

Skriv et svar