CSS3 Best Practices for Designers
Hvis du primært er designer og for nylig er begyndt at lære CSS, har du sikkert begyndt at indarbejde nogle af de nye CSS-funktioner, der er blevet tilføjet til sproget i CSS3 .
Men hvis du ikke har stor erfaring med CSS, forsøger du sandsynligvis, hvad der er den bedste måde at håndtere nogle af de udfordringer, der opstår ved at bruge flere leverandørpræfikser, der beskæftiger sig med ældre versioner af Internet Explorer, og andre CSS3-specifikke dilemmaer.
I denne artikel vil jeg forsøge at dække nogle af de vigtige ting at huske, når jeg beskæftiger mig med disse problemer. Husk at intet her er sat i sten, men disse bør kun være retningslinjer for at hjælpe dig med at skrive mere effektivt, lettere at vedligeholde og fremtidssikret kode.
Kend dine support diagrammer
Du skal nok ikke huske hvilke funktioner der fungerer i hvilke browsere. I de fleste tilfælde fungerer CSS3-funktionerne ikke i alle browsere, der er i brug. Og i nogle tilfælde har selv de seneste versioner af browsere ikke fuld understøttelse.
Så det første du bør gøre er at forstå, hvor støtte mangler. Den primære ressource, du skal bruge, er Hvornår kan jeg bruge ... site, som indeholder diagrammer til CSS3, HTML5 og tons flere. Du kan endda lave sidebillede sammenligninger med forskellige browsere, som vist på skærmbilledet nedenfor sammenligner CSS3 support i Firefox 3.6 vs. IE9 :
Selvom Hvornår kan jeg bruge ... er nok den eneste support diagram kilde du har brug for, her er et par andre muligheder at overveje:
- CSS3 Click Chart
- CSS indhold og browsers kompatibilitet
- CSS-kompatibilitet og Internet Explorer
- Sammenligning af layoutmotorer (CSS)
Men ved, at selv om en CSS-funktion kan være opført et sted som "understøttet", betyder det ikke, at det er uden fejl eller uoverensstemmelser. Så test grundigt.
Må ikke overbruges polyfiller
På grund af klientens eller agenturets pres, eller bare det faktum, at du vil have alt til at se og fungere det samme overalt, kan du blive fristet til at bruge de mange CSS Polyfills .
Men mange af disse scripts kan sænke dine sider betydeligt - især hvis du bruger mere end en. Der er mange undersøgelser og kilder der viser vigtigheden af en hjemmeside hastighed, så enhver polyfills bør overvejes omhyggeligt og med dit websted eller app's overordnede interesser i tankerne.
For at hjælpe dig med at beslutte, hvad der skal anvendes til polyfill og hvad man bare skal tillade at nedbryde til en mindre erfaring, skal du bruge HTML5 venligst websted. Som vist i eksemplet screenshot nedenfor, vil HTML5 venligst ofte anbefale at undgå polyfills for visse funktioner:
Test, hvordan funktioner nedbrydes
Hvis du undgår mange polyfills, så skal du naturligvis lade mange CSS3-funktioner nedbryde til en mere primitiv oplevelse i ældre browsere (normalt IE6-8). Men antager ikke, at dette sker automatisk.
I mange tilfælde (for eksempel når du bruger flere baggrunde), skal du erklære en ejendom, der overskrives af CSS3-funktionen, men det vises stadig i ældre browsere.
For eksempel kan du gøre følgende for flere baggrunde:
.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;}Bemærk det enkelte baggrundsbillede, der er erklæret før linjen med flere baggrundsbilder. Ikke-understøttende browsere viser det enkelte billede, men ignorerer den anden linje. Understøttende browsere vil læse begge linjer, men den første linje overskrives af den anden.
Nogle andre CSS3-funktioner, der kan drage fordel af denne form for tilbagesendelse, er RGBA-farver, HSLA-farver og gradienter.
For at hjælpe dig med at se, hvordan CSS3-funktionen nedbrydes i ældre browsere, kan du bruge en bookmarklet, der hedder deCSS3 .
Det virker kun i Chrome og Safari, men du skal bare trække linket til din bogmærkebjælke og derefter klikke på linket på et hvilket som helst websted, du vil 'de-CSS3', og det vil vise dig webstedet med tekstskygger, afrundede hjørner og andre nye ting fjernet. Dette er selvfølgelig ingen erstatning for den faktiske browser test, men kan tjene som en nyttig vejledning til hurtigere udvikling, før du gør din endelige testning mod projektets ende.
Et andet redskab til at hjælpe med at behandle fallbacks er Modernizr JavaScript-bibliotek. Men hvis du er skræmt af biblioteker, vær det ikke. Modernizr er ikke svært at håndtere fra et CSS perspektiv. Tjek ud denne vejledning til en smertefri introduktion.
Håndtering af sælgerpræfikser
En af de rodet dele af CSS3 er at skulle klare alle de forskellige leverandørpræfikser. Vedligeholdelse af kode, der bruger alle præfikser, er kedelig og i nogle tilfælde behøver du ikke dem alle. Hvem kan muligvis huske hvornår der skal inkluderes "-o-" eller "-ms-" og hvornår ikke?
Nå, som nævnt, vil hjælp med hjælpeskemaerne hjælpe. Men her er et par andre forslag, der hjælper med at håndtere leverandørpræfikser.
Brug en CSS preprocessor
Forprocessorer er alle raseri lige nu. Men CSS begyndere og designere, der ikke er hardcore-udviklere eller programmører, kan have svært ved at håndtere disse nye værktøjer.
Så selvom præprocessorer bestemt ikke er for alle, er de absolut værd at overveje, fordi de kan forbedre din produktions- og vedligeholdelsestid seriøst.
En omfattende diskussion af præprocessorer er helt sikkert ud over denne artikel, men her er nogle links til at komme i gang:
Og hvis du finder de ting for tunge, har Chris Coyier af CSS-Tricks nogle tanker om præprocessorer Det kan hjælpe dig med at få en overordnet visning. Og her er et indlæg på Nettuts + der dækker nogle af de funktioner og fordele ved at bruge et par af de mest populære CSS preprocessorer.
Vær konsekvent i din kode
Hvis du vælger ikke at preprocesse dit CSS ved hjælp af en af de førnævnte teknologier, skal du håndtere alle leverandørpræfikser. Så sørg for at vælge en stil og orden for dine leverandørpræfikser og holde fast ved det. På denne måde bliver din kode lettere at læse og vedligeholde.
For eksempel sætter nogle CSS-udviklere deres leverandørpræfiks linjer i alfabetisk rækkefølge, og bruger indrykning, så værdierne alle linje op, sådan:
.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 er bare en måde at gøre det på. Men uanset hvilken metode du vælger, skal du være konsekvent i hele din kode. Dette ville være særligt vigtigt, hvis du arbejder på et hold, hvor andre skal læse og / eller opretholde din kode.
Selvfølgelig er ikke alle CSS3-funktioner nemme at organisere (for eksempel er koden til keyframe-animationer meget mere kompliceret), men for de fleste funktioner skal du være i stand til at have en ensartet stil, der gør udviklingen og vedligeholdelsen mere glat.
Hvad med standardegenskaben?
Du vil bemærke i eksemplet i det forrige afsnit, den sidste ejendom, der er angivet efter sælgerlinjerne, er standardversionen af ejendommen. Hvis du vil medtage standardegenskaben, er det bestemt, hvordan du skal gøre det. Så altid medtage det sidst, når du tilføjer det.
Dette er for at sikre, at leverandørens implementering af funktionen overskrives af standard implementeringen. Men der er en advarsel her.
For nogle komplekse animationer og interaktioner er det tænkeligt, at implementeringen kan ændre sig så meget, at når browseren begynder at støtte standardegenskaben, kan det have uønskede virkninger. Så i nogle tilfælde kan du hellere være bedre at forlade standardværdien helt.
Jeg skrev om dette emne mere dybtgående på min blog , så tjek det ud, hvis du ønsker en mere omfattende diskussion af dette problem.
Brug Prefixr
En af de nemmeste måder at håndtere alle cross-browser-leverandørens underlige er at bruge et handy little tool called Prefixr . Med Prefixr udvikler du bare din kode som altid, og du kan bare bruge et enkelt sælger-præfiks (for eksempel kun "-moz-") for alle dine CSS3. Derefter, når du er færdig med at teste i den ene browser og har alt, der virker som du vil, skal du bare kaste din kode til Prefixr, og den vil generere al den ekstra sælger kode for dig.
Prefixr kan også integreres automatisk med din tekst editor , og omfatter understøttelse af lange keyframe animationskode. Som et alternativ kan du også prøve et værktøj, jeg oprettede kaldet Animation Fill Code der tilføjer den ekstra sælger kode til keyframe animationer.
Test grundigt
Det sidste forslag, jeg giver her, er at teste grundigt i alle de browsere, du støtter. Du kan bruge snesevis af værktøjer og biblioteker til at hjælpe dig med din CSS3-udvikling, men intet kan erstatte grundige tests i ægte browser-miljøer.
Og dette råd ville være særligt vigtigt, hvis du beskæftiger dig med en masse responsive designrelaterede CSS3 (f.eks. Medieforespørgsler) og kraftig brug af typografiske funktioner. Du vil have, at dit indhold er brugbart og læsbart i alle browsere, selvom CSS3-funktionerne ikke er tilgængelige.