skapa Cross-Browser Compatible Websites
inlagd i prestanda av WP Engine
Senast uppdaterad den 30 maj, 2019
även om de flesta människor hålla sig till att använda en enda webbläsare, du har massor av alternativ för både stationära och mobila enheter. Helst skulle webbplatser visa perfekt oavsett vilken webbläsare du använde. Det är dock inte alltid fallet, det är där testning av webbläsare kommer in.
med noggrann testning av webbläsare kan du se till att din webbplats ser ut och beter sig perfekt över alla populära alternativ. På så sätt får dina besökare en lika bra upplevelse, oavsett om de använder Chrome, Firefox, Opera eller mindre kända alternativ som SeaMonkey.
i den här artikeln kommer vi att prata lite mer om vikten av testning av webbläsare. Sedan går vi igenom några steg för att hjälpa dig att skapa en webbplats med flera webbläsare. Låt oss komma till jobbet!
Varför Är Kompatibilitet Mellan Webbläsare Viktigt?
de flesta använder välkända webbläsare, som Google Chrome, Safari, Firefox och Opera. Det finns dock mycket fler alternativ än du kan tänka dig. Det här är bra för konsumenten, men problemet för dig är att varje webbläsare är byggd annorlunda. Det betyder att din webbplats kan fungera perfekt på Chrome, men upplever problem på Firefox (bara för att ge ett exempel).
enligt vår erfarenhet är de flesta fel som du ser i en webbläsare men inte i en annan relativt små problem. Ett specifikt element på din webbplats kanske inte tittar på det borde, eller en viss funktion kanske inte fungerar korrekt. Även om dessa problem kan vara mindre, måste de åtgärdas om du vill ge samma upplevelse till alla webbplatsens besökare.
helst vill du designa din webbplats för att vara kompatibel med webbläsare från grunden. På så sätt riskerar du inte att alienera användarna av en viss webbläsare. I de närmaste avsnitten visar vi dig hur du gör det.
hur man skapar en webbläsare kompatibel webbplats
tanken att skapa en webbläsare kompatibel webbplats kan låta skrämmande. Några enkla steg kan dock gå långt för att se till att din webbplats fungerar perfekt på de flesta webbläsare. Låt oss prata om vad de är!
steg 1: Ange en ’Doctype’ för dina HTML-filer
när en webbläsare laddar din webbplats måste den ta reda på vilken version av HTML du använder. Detta är viktigt eftersom olika versioner av HTML innehåller olika regler.
en ’doctype’ är ett uttalande som berättar webbläsare: ”Hej, det här är den version av HTML vi ska använda!”På så sätt behöver webbläsare inte göra några gissningar, vilket kan minska antalet fel som dina användare kommer att stöta på.
lyckligtvis är detta steg anmärkningsvärt enkelt. Allt du behöver göra är att lägga till följande kodavsnitt i dina HTML-dokument:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
som du kommer att märka är detta utdrag för version 4.01 av HTML. Om du vill använda HTML5 istället kan du använda den här koden:
<!DOCTYPE html>
problemet är att vissa webbläsare fortfarande inte spelar bra med HTML5. Trots sina många förbättringar kan det påverka kompatibilitet mellan webbläsare, så du måste väga det faktum tillsammans med dess fördelar.
steg 2: Använd CSS-Återställningsreglerna
vanligtvis är CSS den främsta skyldige bakom webbläsarkompatibilitetsfel. Det beror på att varje webbläsare har sin egen uppsättning CSS-regler. För att uttrycka det på ett annat sätt kan din webbplats CSS återge olika beroende på vilken webbläsare dina besökare använder.
ett sätt att lösa detta problem är att använda en CSS-återställning. Det här är uppsättningar regler som du kan lägga till på din webbplats, som anger en baslinje för hur CSS fungerar i webbläsare.
det finns flera alternativ när det gäller CSS-återställning, men en av våra favoriter heter Normalize.css, på grund av hur omfattande det är:
du kan ladda ner normalisera.css-fil från sitt GitHub-bibliotek och använd det som utgångspunkt för din webbplats CSS. Detta hjälper dig att maximera kompatibilitet mellan webbläsare på din webbplats.
steg 3: Använd Cross-Browser kompatibla bibliotek och ramverk
JavaScript-bibliotek och breda ramar som Foundation och Bootstrap är otroligt populära idag. Om du ska använda sådana element för att bygga din webbplats kan du spara dig mycket huvudvärk genom att använda webbläsarvänliga alternativ.
vissa bibliotek och ramverk utvecklades från grunden för att fungera med så många webbläsare som möjligt. Generellt sett är de mest populära ramarna – inklusive de två vi just nämnde – byggda för att vara kompatibla med så många webbläsare som möjligt.
bara för att vara säker, var noga med att kontrollera dokumentationen för alla bibliotek eller ramar du tänker använda. I de flesta fall hittar du information om kompatibilitet mellan webbläsare ganska enkelt. Till exempel, här är stiftelsens kompatibilitetssida från dess dokumentation:
lite forskning hjälper dig att ge en fantastisk upplevelse för alla dina besökare, inte bara de som använder en viss webbläsare.
Cross-Browser testning
även om du har gjort ett försök att skapa en cross-browser kompatibel webbplats, är det fortfarande bra att kontrollera och se om allt fungerar som det ska. Den processen är relativt enkel-allt du behöver göra är att ladda din webbplats med flera webbläsare och leta efter fel.
problemet är att det finns många webbläsare där ute. För att täcka dina baser rekommenderar vi att du fokuserar på de fem bästa alternativen enligt marknadsandelar, som är:
- Google Chrome
- Safari
- Firefox
- UC Browser
- Opera
du kanske märker att Microsoft Edge inte gjorde listan. Dess marknadsandel är ganska liten idag, men det är fortfarande bra att se till att din webbplats också fungerar med den.
naturligtvis kan det vara ont att installera fem eller sex olika webbläsare på din dator. Det är därför det finns många tjänster som gör att du kan utföra testning av webbläsare online. Detta förenklar processen mycket, och avgifterna är vanligtvis mindre.
offra inte din digitala upplevelse
inte alla besökare på din webbplats kommer att använda samma webbläsare. Detta innebär att om du vill se till att varje användare får njuta av din webbplats, måste du göra några cross-browser testning.
tänk dock på – även om din webbplats fungerar perfekt i alla webbläsare måste du fortfarande använda en webbhotell av högsta kvalitet om du vill ge bästa möjliga digitala upplevelse. Med WP Engine får du fantastisk prestanda och tillgång till support på expertnivå, så kolla in våra planer!