CSS3 bästa praxis för designers

Om du är en designer och nyligen har börjat lära dig CSS, har du förmodligen börjat ta med några av de nya CSS-funktionerna som har lagts till språket i CSS3 .

Men om du inte har mycket erfarenhet av CSS, försöker du förmodligen se vad som är det bästa sättet att hantera några av de utmaningar som uppstår genom att använda flera leverantörs prefix, som handlar om äldre versioner av Internet Explorer, och andra CSS3-specifika dilemman.

I den här artikeln försöker jag täcka några viktiga saker att komma ihåg när jag hanterar dessa problem. Tänk på att ingenting här är inställt på sten, men dessa bör bara vara riktlinjer för att hjälpa dig att skriva mer effektivt, lättare att behålla och framtidsskyddade kod.

Känn dina supportkartor

Du kommer nog inte behöva memorera vilka funktioner som fungerar i vilka webbläsare. I de flesta fall fungerar CSS3-funktioner inte i alla webbläsare som används. Och i vissa fall har även de senaste versionerna av webbläsare inte fullt stöd.

Så det första du bör göra är att förstå var stöd saknas. Den primära resursen du ska använda är När kan jag använda ... webbplats, som innehåller diagram för CSS3, HTML5 och ton mer. Du kan till och med göra jämförelser med varandra mot olika webbläsare, som visas på skärmbilden nedanför jämför CSS3-stöd i Firefox 3.6 vs IE9 :

Även när kan jag använda ... är förmodligen den enda supportkälla som du behöver, här är några andra alternativ att tänka på:

Men vet att även om en CSS-funktion kan listas någonstans som "stöds", betyder det inte att det är utan buggar eller inkonsekvenser. Så testa grundligt.

Använd inte överanvändning av polyprofiler

På grund av klient- eller byråtryck eller bara det faktum att du vill att allt ska se ut och fungera överallt, kan du bli frestad att använda de många CSS Polyfills .

Men många av dessa skript kan sakta ner dina sidor avsevärt - speciellt om du använder mer än en. Det finns många studier och källor som visar vikten av en webbplats hastighet, så några polyfills bör övervägas noggrant och med din webbplats eller app övergripande bästa i åtanke.

För att hjälpa dig att bestämma vad som ska användas för polyfill och vad som bara ska tillåtas att försämras till en mindre erfarenhet, använd HTML5 tack webbplats. Som visas i exemplet skärmdump nedan, rekommenderar HTML5 Vänligen ofta att man undviker polyfilter för vissa funktioner:

Testa hur funktionerna bryts ned

Om du undviker många polypyfills, måste du naturligtvis tillåta många CSS3-funktioner att försämras till en mer primitiv upplevelse i äldre webbläsare (vanligtvis IE6-8). Men antar inte att detta kommer att hända automatiskt.

I många fall (till exempel när du använder flera bakgrunder) måste du deklarera en egenskap som skrivs över av CSS3-funktionen, men det kommer fortfarande att dyka upp i äldre webbläsare.

Till exempel kan du göra följande för flera bakgrunder:

.element {background: url(images/fallback.jpg) no-repeat;background: url(images/example.png) center center no-repeat,url(images/example-2.png) top left repeat;}

Lägg märke till den enstaka bakgrundsbilden som deklarerats före linjen med flera bakgrundsbilder. Icke-stödjande webbläsare visar den enstaka bilden men ignorerar den andra raden. Stödjande webbläsare kommer att läsa båda raderna, men den första raden kommer att skrivas över av den andra.

Några andra CSS3-funktioner som kan dra nytta av denna typ av återgång är RGBA-färger, HSLA-färger och gradienter.

För att hjälpa dig att se hur CSS3-funktionen bryter ned i äldre webbläsare kan du använda en bokmärke som heter deCSS3 .

Det fungerar för närvarande bara i Chrome och Safari, men dra bara länken till din bokmärkesfält och klicka sedan på länken på en webbplats som du vill "de-CSS3" och den visar webbplatsen med textskuggor, rundade hörn och annat nya saker tas bort. Naturligtvis är det här inte ett ersätt för den faktiska webbläsartestningen, men kan fungera som en användbar guide för snabbare utveckling innan du gör din slutliga testning mot projektets slut.

Ett annat verktyg som hjälper till att hantera fallbacks är Modernizr JavaScript-bibliotek. Men om du är skrämmad av bibliotek, var det inte. Modernizr är inte svårt att hantera ur ett CSS-perspektiv. Checka ut denna handledning för en smärtfri introduktion.

Hantera leverantörs prefix

En av de röriga delarna av CSS3 måste hantera alla olika leverantörs prefix. Att behålla kod som använder alla prefix är tråkigt och i vissa fall behöver du inte alla. Vem kan eventuellt komma ihåg när man ska inkludera "-o-" eller "-ms-" och när inte?

Tja, som nämnts, kommer hjälp med hjälp av hjälpdiagrammen. Men här är några andra förslag som hjälper till att hantera leverantörs prefix.

Använd en CSS preprocessor

Förprocessorer är alla raserier just nu. Men CSS nybörjare och designers som inte är hardcore-utvecklare eller programmerare kan ha svårt att hantera dessa nya verktyg.

Så även om förprocessorer verkligen inte är för alla, är de definitivt värda att överväga, eftersom de kan förbättra din produktion och underhållstid på allvar.

En omfattande diskussion om förprocessorer är verkligen bortom den här artikeln, men här finns några länkar för att komma igång:

Och om du tycker att det är för tungt, har Chris Coyier av CSS-Tricks lite tankar på förprocessorer Det kan hjälpa dig att få en övergripande vy. Och här är ett inlägg på Nettuts + som täcker några av funktionerna och fördelarna med att använda några av de mest populära CSS preprocessorerna.

Var konsekvent i din kod

Om du väljer att inte förbereda din CSS med någon av de ovan nämnda teknikerna måste du hantera alla leverantörs prefix. Så se till att du väljer en stil och ordning för dina leverantörs prefix och håller fast med den. På så vis blir din kod lättare att läsa och underhålla.

Exempelvis lägger vissa CSS-utvecklare sina leverantörs prefixlinjer i alfabetisk ordning och använder indragning så att värdena alla raderar, så här:

.element {-moz-transition:    background-color linear .8s;-ms-transition:     background-color linear .8s;-o-transition:      background-color linear .8s;-webkit-transition:     background-color linear .8s;transition:     background-color linear .8s;}

Det är bara ett sätt att göra det. Men vilken metod du än väljer är bara konsekvent i hela din kod. Det här är särskilt viktigt om du arbetar på ett lag där andra måste läsa och / eller behålla din kod.

Naturligtvis är inte alla CSS3-funktioner det enkla att organisera (till exempel är koden för keyframe-animationer mycket mer komplicerad), men för de flesta funktioner borde du kunna ha en konsekvent stil som gör utveckling och underhåll mjukare.

Vad sägs om standardegenskapen?

Du kommer att märka i exemplet i föregående avsnitt, den sista egenskapen deklarerad efter att leverantörslinjerna är standardversionen av fastigheten. Om du ska inkludera standardegenskapen är det här definitivt hur du ska göra det. Så ta alltid med den senast när du lägger till den.

Detta är för att säkerställa att leverantörens implementering av funktionen skrivs över genom standardimplementeringen. Men det finns en försiktighet här.

För några komplexa animationer och interaktioner är det tänkbart att implementeringen kan förändras så mycket att när webbläsaren börjar stödja standardegenskapen kan det få biverkningar. Så i vissa fall kan du vara bättre att lämna ut standardegenskapen helt och hållet.

Jag skrev om detta ämne mer ingående på min blogg , kolla så om du vill ha en mer omfattande diskussion om denna fråga.

Använd Prefixr

Ett av de enklaste sätten att hantera alla webbläsare säljaren är att använda ett praktiskt litet verktyg som heter Prefixr . Med Prefixr utvecklar du bara din kod som alltid, och du kan bara använda ett enda leverantörs prefix (till exempel bara "-moz-") för alla dina CSS3. Då, när du är klar med att testa i den ena webbläsaren och har allt som fungerar som du vill, slänger du bara din kod till Prefixr och det genererar all extra leverantörskoden för dig.

Prefix kan också integreras automatiskt med din textredigerare , och inkluderar stöd för långa nyckelram animeringar kod. Som ett alternativ kan du också prova ett verktyg som jag skapade ringde Animation Fyllkod som lägger till den extra leverantörskoden för keyframe-animationer.

Testa grundligt

Det sista förslaget jag ger här är att testa grundligt i alla webbläsare du stöder. Du kan använda dussintals verktyg och bibliotek för att hjälpa dig med din CSS3-utveckling, men ingenting kan ersätta grundliga tester i riktiga webbläsarmiljöer.

Och detta råd skulle vara särskilt viktigt om du hanterar mycket responsivt designrelaterat CSS3 (t.ex. mediafrågor) och kraftig användning av typografiska funktioner. Du vill att innehållet ska kunna användas och läsas i alla webbläsare, även om CSS3-funktionerna inte är tillgängliga.

css css3 förprocessorer leverantörs prefix värdigt förfall webbläsarsupport polyfills