CSS3: n parhaita käytäntöjä suunnittelijoille
Jos olet ensisijaisesti suunnittelija ja olet äskettäin alkanut oppia CSS: ää, olet todennäköisesti alkanut sisällyttää joitain uusia CSS-ominaisuuksia, jotka on lisätty CSS3 .
Mutta jos sinulla ei ole paljon kokemusta CSS: stä, luultavasti yrittää selvittää, mikä on paras tapa käsitellä joitain haasteita, jotka johtuvat useiden toimittajien etuliitteiden käytöstä, jotka käsittelevät vanhempia Internet Explorerin versioita, ja muut CSS3-spesifiset ongelmat.
Tässä artikkelissa yritän kattaa joitakin tärkeitä asioita, jotka on muistettava käsitellessään näitä asioita. Muista, että mitään ei ole asetettu kiviin, mutta näiden pitäisi vain olla ohjeita, joiden avulla voit kirjoittaa tehokkaampia, helpommin ylläpitäviä ja tulevaisuuden todistuksia.
Tunne tukikartat
Sinun ei ehkä tarvitse muistaa, mitkä ominaisuudet toimivat selaimissa. Useimmissa tapauksissa CSS3-ominaisuudet eivät toimi kaikissa käytössä olevissa selaimissa. Joissakin tapauksissa jopa viimeisimmillä selainten versiolla ei ole täydellistä tukea.
Joten sinun pitäisi ensin ymmärtää, mistä tukea ei ole. Ensisijainen resurssi, jota sinun pitäisi käyttää, on Milloin voin käyttää ... sivusto, joka sisältää kaavioita CSS3, HTML5 ja tonnia enemmän. Voit jopa tehdä rinnakkaisia vertailuja eri selaimilla, kuten alla olevassa kuvakaappauksessa on esitetty vertaa CSS3-tukea Firefox 3.6 vs. IE9: ssa :
Vaikka Milloin voin käyttää ... on luultavasti ainoa tukikaavion lähde, jota tarvitset, tässä on muutamia muita vaihtoehtoja harkitsemaan:
- CSS3 Klikkaa kaaviota
- CSS-sisällön ja selainten yhteensopivuus
- CSS-yhteensopivuus ja Internet Explorer
- Layout-moottoreiden vertailu (CSS)
Mutta tiedä, että vaikka CSS-ominaisuus voidaan luetella jonnekin "tuettuina", se ei tarkoita sitä, että se ei ole vikoja tai epäjohdonmukaisuuksia. Joten testaa perusteellisesti.
Älä ylikäytä polyfillia
Asiakkaan tai viraston paineiden vuoksi tai vain siitä, että haluat kaiken näyttävän ja toimivan samalla tavalla kaikkialla, saatat olla houkutteleva käyttämään monia CSS Polyfills .
Mutta monet näistä skripteistä voivat hidastaa sivujesi huomattavasti - varsinkin jos käytät useampaa kuin yhtä. On monet tutkimukset ja lähteet jotka osoittavat sivuston nopeuden tärkeyden, joten kaikki polyfilejä on harkittava huolellisesti ja sivustosi tai sovelluksesi yleisen etunäkökohtana mielessä.
Jotta voit päättää, mitä polyfill ja mitä vain sallia heikentää vähemmän kokemusta, käytä HTML5 Please sivusto. Kuten alla olevasta esimerkkikuvauksesta ilmenee, HTML5 suosittelee usein suosittelemaan polyfillien välttymistä tietyille ominaisuuksille:
Testaa, miten ominaisuudet hajoavat
Jos vältät paljon polyfilejä, sinun on luonnollisesti sallittava monien CSS3-ominaisuuksien heikentyminen entistä alkeellisempaan kokemukseen vanhemmissa selaimissa (yleensä IE6-8). Mutta älä ota sitä, että tämä tapahtuu automaattisesti.
Useissa tapauksissa (esimerkiksi useilla taustoilla) sinun on ilmoitettava omaisuus, jonka CSS3-ominaisuus korvaa, mutta joka näkyy edelleen vanhemmissa selaimissa.
Esimerkiksi useille taustoille voit tehdä tämän seuraavasti:
.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;}Huomaa yksittäisen taustakuvan, joka on ilmoitettu ennen useampia taustakuvia. Ei-tukevat selaimet näyttävät yhden kuvan mutta jättävät toisen rivin huomiotta. Selainten tukeminen lukee molemmat rivit, mutta toinen rivi korvataan toisella rivillä.
Joitakin muita CSS3-ominaisuuksia, jotka voisivat hyötyä tämän tyyppisistä varatoimista, ovat RGBA-värit, HSLA-värit ja kaltevuudet.
Voit auttaa sinua näkemään, miten CSS3-ominaisuus hajoaa vanhemmissa selaimissa, voit käyttää nimettyä kirjanmerkkiä deCSS3 .
Se toimii tällä hetkellä vain Chrome- ja Safari-laitteissa, mutta vedä linkki kirjanmerkkipalkkiin ja napsauta linkkiä mistä tahansa sivustosta, jonka haluat de-CSS3: n, ja se näyttää sivuston, jossa on tekstiä varjot, pyöristetyt kulmat ja muut uudet tavarat poistettiin. Tietenkin tämä ei korvaa todellista selaintausta, mutta se voi toimia hyödyllisenä oppaana nopeammin kehitettäessä, ennen kuin teet lopullisen testin projektin loppua kohti.
Toinen työkalu, jolla autetaan puuttumiseen, on Modernizr JavaScript-kirjasto. Mutta jos kirjastot pelkäävät, älä ole. Modernizr ei ole vaikea käsitellä CSS-näkökulmasta. Tarkista tämä opetusohjelma kivuton käyttöönotto.
Myyjän etuliitteiden käsittely
Yksi CSS3: n sotkuisista osista joutuu käsittelemään kaikkia eri valmistajien etuliitteitä. Kaikkien etuliitteiden käyttämät koodit ovat tylsiä ja joissakin tapauksissa niitä ei tarvita. Kuka voi mahdollisesti muistaa, milloin "-o-" tai "-ms-" tulisi ottaa mukaan ja milloin ei?
No, kuten edellä mainittiin, tukikarttojen käyttäminen auttaa. Mutta tässä on muutamia muita ehdotuksia, joiden avulla voit käsitellä myyjän etuliitteitä.
Käytä CSS-esikäsittelyjärjestelmää
Preprocessorit ovat kaikki raivoa juuri nyt. Mutta CSS-aloittelijoille ja suunnittelijoille, jotka eivät ole vaikeita kehittäjiä tai ohjelmoijia, voi olla vaikea käsitellä näitä uusia työkaluja.
Joten vaikka esikäsittelyjärjestelmät eivät todellakaan ole kaikille, ne ovat ehdottomasti kannattavia, koska ne voivat vakavasti parantaa tuotanto- ja huolto-aikaa.
Laaja keskustelu esikäsittelyohjelmista on varmasti tämän artikkelin ulkopuolella, mutta tässä on joitain linkkejä, joiden avulla voit aloittaa:
Ja jos huomaat, että tavara on liian raskas, Chris Coyier CSS-Tricksillä on joitain ajatuksia esiprosessoreista jotka saattavat auttaa sinua saamaan yleiskuvan. Ja tässä viesti Nettuts +: sta joka kattaa joitakin ominaisuuksista ja eduista joidenkin suosituimpien CSS-esiprosessorien käyttämisestä.
Ole johdonmukainen koodissasi
Jos et halua ennakoida CSS: ää käyttämällä jotain edellä mainituista tekniikoista, sinun on käsiteltävä kaikkien myyjän etuliitteiden ylläpito. Varmista siis, että valitset tyylisi ja tilauksesi myyjän etuliitteille ja pysytät sen mukana. Näin koodisi on helpompi lukea ja ylläpitää.
Esimerkiksi jotkin CSS-kehittäjät laittavat myyjän etuliitteen rivit aakkosjärjestykseen ja käytä sisennystä niin, että kaikki arvot kokoavat seuraavasti:
.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;}Se on vain yksi tapa tehdä se. Mutta mitä valitsemallasi tapaa, ole vain johdonmukainen koko koodissasi. Tämä olisi erityisen tärkeää, jos työskentelet tiimissä, jossa toisten on lukea ja / tai ylläpitää koodia.
Tietenkin kaikkia CSS3-ominaisuuksia ei ole helppo järjestää (esimerkiksi koodin animaatioiden koodi on paljon monimutkaisempi), mutta useimmille ominaisuuksille pitäisi olla oltava johdonmukainen tyyli, joka tekee kehityksestä ja huollosta tasaisemman.
Entä standardiominaisuus?
Huomaat edellisen osan esimerkissä, että viimeinen ominaisuus, joka on ilmoitettu myyjän rivien jälkeen, on kiinteän version versio. Jos aiot sisällyttää vakio-ominaisuuden, tämä on ehdottomasti sitä, miten sinun pitäisi tehdä se. Joten aina sisällytä se viimeiseksi, kun lisäät sen.
Näin varmistetaan, että ominaisuuden toimittajan toteutus korvataan tavanomaisella toteutuksella. Mutta tässä on varovaisuutta.
Joillekin monimutkaisille animaatioille ja vuorovaikutuksille on mahdollista, että toteutus voi muuttua niin paljon, että kun selaimesi alkaa tukea tavallista ominaisuutta, sillä voi olla ei-toivottuja vaikutuksia. Joten tietyissä tapauksissa saatat olla parempi jättää standardi kiinteistö pois kokonaan.
Kirjoitin tästä aiheesta perusteellisemmin blogissani , joten tarkista, että haluatte kattavamman keskustelun tästä ongelmasta.
Käytä Prefixr
Yksi helpoimmista tavoista käsitellä kaikkia selaimen välittäjänä toimimattomia vieraita on käyttää kätevää pikku työkalu nimeltä Prefixr . Prefixr-koodilla kehität koodisi aina kuten aina, ja voit käyttää vain yhtä myyjän etuliitettä (esimerkiksi vain "-moz-") kaikille CSS3: lle. Sitten, kun olet suorittanut testauksen tuolla yhdellä selaimella ja olet kaiken työssä haluamallasi tavalla, heittäkää koodi etuliitteeseen ja se tuottaa sinulle kaikki ylimääräiset toimittajakoodit.
Prefixr voidaan myös integroida automaattisesti tekstieditorilla , ja se sisältää tuen pitkille avainratkaisuanimaatioiden koodeille. Vaihtoehtona voit myös kokeilla kutsuttua työkalua Animaation täyttökoodi joka lisää ylimääräisen toimittajan koodin avainhaun animaatioille.
Testaa perusteellisesti
Viimeinen ehdotus, jonka annan tässä, on testata perusteellisesti kaikissa tukemissa selaimissa. Voit käyttää kymmeniä työkaluja ja kirjastoja, jotka auttavat sinua CSS3-kehityksessäsi, mutta mikään ei voi korvata perusteellisia testejä todellisissa selainympäristöissä.
Ja tämä neuvo olisi erityisen tärkeä, jos sinulla on paljon vastaavia suunnitteluun liittyvää CSS3: ta (esim. Mediakyselyt) ja typografisten ominaisuuksien raskas käyttö. Haluat, että sisältösi on käyttökelpoinen ja luettavissa kaikissa selaimissa, vaikka CSS3-ominaisuudet eivät olisikaan saatavilla.