Ny teknik gör webbutvecklingen mer spännande än någonsin tidigare. HTML5 och CSS3 ger en dubbel dos av moderna metoder som är helt uppfriskande och bemyndigande. Tyvärr kan utnyttjandet av dessa tekniker väsentligt komplicera din strävan efter att korsa webbläsarkompatibilitet.
Hur kan du veta vilka tekniker som är säkra att använda nu och vilka ska du antingen erbjuda alternativ till eller helt undvika? Gå med i oss när vi tittar på en handfull av våra favoritresurser som snabbt och enkelt hjälper dig att fatta välgrundade beslut om verklig världs HTML5 och CSS3-implementering.
Helt enkelt oemotståndlig
Kors webbläsarkompatibilitet var svår nog för några år sedan innan vi började dyka in i nyskapande ny teknik som HTML5 och CSS3. Nu med de här verktygen krypande i framkant av våra utvecklingsmetoder kan det vara en ordentlig röra.
Fördelarna med att använda HTML5 och CSS3 är tydliga och obestridliga. De är så fulla av godsaker och roliga att en av en av tio utvecklare kan motstå åtminstone doppa en tå i för att testa vattnet. För att främja hype, författare som jag ständigt ritar ut fantastiska nya handledning som lär dig insatserna och de här teknikerna, vilket ger dig en önskan om att få dem att träda i praktiken så snart som möjligt.
Rider vi framåt?
Medan de flesta av oss rusar i huvudet på att utnyttja det senaste och bästa i utvecklingstendenser för webben, ber om några få rationella själar att sakta ner. Nya leksaker är bra och bra, men mycket av dessa saker är fortfarande under uppbyggnad och resten har inte implementerats bra över alla viktiga webbläsare.
Så vem har rätt? Hur kan du som en praktisk, verklig världsutvecklare veta om man ska köpa in i hype och springa med den nya eller lita på skeptikerna och hålla fast vid de beprövade och sanna metoderna från år tidigare?
Sluta gissningen
Det enda bästa du kan göra för att bestämma om du personligen kan börja implementera ny webbteknologi är att utbilda dig själv om det stöd som du kan förvänta dig för varje nytt objekt i de olika webbläsarna som är mest viktiga för din publik.
Det låter som mycket arbete eller hur? Det finns otaliga bloggposter, böcker och webbplatser dedikerade till att lära dig dessa saker, tillräckligt för att äta upp en hel livstid och mer. Mängden material är så helt överväldigande att du kanske undviker att lära dig helt enkelt ut av hot.
Lyckligtvis finns det några väldigt enkla och raka sätt att se till att det du gör fungerar bra över olika webbläsare. Du behöver inte sortera genom långa blogginlägg eller läsa en bunt av böcker varje gång du vill kasta i en droppskugga, du behöver bara en snabb titt på några få resurser för att komma igång.
Webbläsarkompatibilitetskartor: En utvecklarens bästa vän
Det allra första som jag rekommenderar att du gör i din strävan att ta reda på vilken ny teknik du kan implementera idag är att bokmärke ett eller två massiva webbläsarkompatibilitetsdiagram.
Dessa resurser är ovärderliga och kan spara dig oändliga timmar av forskning. De tjänar som en snabb referens som omedelbart hjälper dig att identifiera vilka webbläsare som gör och inte stöder de tekniker som du försöker implementera. Några av de bättre valen erbjuder till och med hjälp med att få de äldre webbläsarna att spela bra.
När kan jag använda?
Caniuse.com är verkligen inte det vackraste alternativet för webbläsarkompatibilitetskartor, men det är en av de mest användbara och grundliga.
Organisationen här är väldigt enkel och enkel att använda: klicka bara på ett objekt från någon av de fem kategorierna (CSS, HTML5, SVG, JS API och Other) och du kommer att tas till ett diagram som visar dig stöd för olika webbläsare. Sökningen ger också omedelbara resultat När du skriver så är svaren på alla dina webbläsares frågor aldrig mer än några tangenttryckningar borta.
Låt oss till exempel säga att du läste min senaste artikel om: före och: efter och skulle vilja dubbelklicka på mina uttalanden om webbläsarkompatibilitet för: efter pseudoelementet (kontrollera alltid dina fakta!), Allt du behöver göra är typ? efter? i sökfältet och diagrammet nedan kommer att dyka upp.
Det finns massor av bra information för dig att utnyttja. Diagrammet informerar oss om att vi har bra stöd över hela forumet för nuvarande webbläsare (även IE), men det är svårt att ta två versioner tillbaka med IE7 och tidigare.
Förutom kompatibilitetsschemat hittar du två andra värdefulla objekt: en webbläsars jämförelsefunktion och en lista över användbara resurser.
Den senare av dessa innehåller ofta några riktigt bra länkar. Om du till exempel ser upp nya CSS3-funktionaliteter som gradienter, kan du få en länk till en generator som kommer att göra jobbet för dig. I det ovanstående fallet fick vi en länk för en detaljerad guide som förklarar användningen av CSS genererat innehåll med hjälp av pseudo-element.
I webbkompatibilitetsschemat kan du välja två webbläsare och se en översikt över stödet för objekten i någon av de fem kategorier som nämnts tidigare.
FindMeByIP
Om du vill avstå från alla funktioner i den föregående sajten till förmån för några vanliga gamla omfattande webbkompatibilitetsscheman som du kan göra bokmärke och referens i en blixt, kolla sidan HTML5 och CSS3 Support på FindMeByIP.
Som du kan se är diagrammen här ganska attraktiva och mycket lätta att läsa. Dessa är perfekta för när du bara behöver snabbt dubbelkontrollera något eller få en överblick över webbläsarstöd över hela linjen.
Ska du använda den?
Webbläsarkompatibilitetskartor är fantastiska för att låta dig veta om en viss webbläsare stöder vad du försöker implementera, men de ger dig bara möjlighet att fatta beslut, du måste fortfarande tolka informationen och bestämma huruvida det är säkert att fortsätta.
Om du är en ny utvecklare kan detta vara skrämmande. För att hjälpa dig vidare, se till att kolla HTML5 Please. Det här projektets platta som genereras kommer att berätta om du vill använda en viss teknik eller inte, och gör rekommendationer om hur du ska gå vidare. Du bör aldrig följa något blint, men när du är på staketet kan det säkert hjälpa dig att ringa.
Som med När kan jag använda, i sökfältet här ger du omedelbara resultat när du skriver. Låt oss säga att du vill veta om CSS-övergångar är säkra att implementera, helt enkelt skriva in? Övergångar? och resultaten kommer att filtrera till följande:
Omedelbart får vi en rekommendation för användning, som visas i det övre högra hörnet av resultatet:
? Använd med fallback? är det råd vi får för CSS-övergångar. Detta är kopplat till en kort och enkel information som säger att övergångar är säkra om de inte är nödvändiga för en användbar upplevelse och att alla interaktionskritiska övergångar ska backas upp med ett alternativ för andra webbläsare. De nödvändiga webbläsarprefix för implementering tillhandahålls också. För många saker, rekommenderas polyfills för att göra din implementering som cross-browser kompatibel som möjligt.
Modernizr har din rygg
Den slutliga resursen du behöver bli bekant med i din strävan efter cross-browser-kompatibel CSS3 och HTML5 är Modernizr. Du har utan tvekan hört talas om det innan, men det är dags att ladda ner det och kolla in det.
Anledningen till att Modernizr är så bra är att den automatiskt kan detektera om en webbläsare stöder en viss funktion och sedan servera lite JavaScript-magi som svar. Detta gör att du kan redogöra för ett imponerande brett utbud av omständigheter och tillhandahålla JavaScript-fallbackar och polyfilter för äldre webbläsare med mycket liten ansträngning.
Modernizr testar för stöd för över 40 nästkommande genfunktioner, ger information om hur du kommer och kommer inte att stödjas och ger de bästa lösningarna för att hjälpa dig att svara på eventuella hål i stöd.
Slutsats
Resurserna ovan är alla inriktade på att hjälpa dig att fatta välgrundade beslut om huruvida du ska implementera en viss HTML5- eller CSS3-teknik.
Webbläsarkompatibilitetskartor ger en snabb hänvisning till hur du kan förvänta varje webbläsare att svara på en viss teknik. HTML5 Vänligen ger dig solida och ärliga rekommendationer för huruvida du ska fortsätta eller inte, och Modernizr hjälper dig att identifiera och fylla funktionshålen i en specifik design.
Dessa resurser tar dig inte av haken för att dyka in i djupare förståelse för hur man korrekt genomför dessa funktioner, men de tjänar som en fantastisk startguide för hur och när man ska gå vidare.
Lämna en kommentar nedan och berätta om dina favoritresurser i det här området. Använder du någon av de webbplatser som anges ovan? Vilka andra verktyg är ovärderliga för ditt arbetsflöde?