Cross-browser CSS3, eller hur man hanterar Internet Explorer. Vad är kompatibilitet över webbläsare?
Alla Internetanvändare använder specialprogram– webbläsare. En webbläsare är ett program som kommunicerar mellan användaren och servern. Webbläsaren skickar förfrågningar till servern och tar emot svar från den, och detta svar omvandlas till den form att alla är vana vid att ringa en internetsida med allt dess innehåll, text, bilder, videor etc. Färdig look sida (innehållsplats, storlek, färg, typsnitt, etc.) ställs in med använder HTML layout och cascading style sheets (CSS), som konverterades från en bild ritad av en designer till en form som webbläsaren förstår. Detta kallas layout. Med enkla ord är HTML-layout arrangemanget av elementen på en internetsida, där de ska placeras enligt designern som skapade layouten för den framtida sidan.
Men varje användare föredrar en webbläsare som är mer bekant för dem. Nuförtiden finns det 5 mest populära webbläsare, som indikeras av statistik. Dessa är Chrome, Safari, Opera, FireFox och Internet Explorer (IE). Dessa webbläsare av en eller annan version används oftast av Internetanvändare för att surfa på World Wide Web. Var och en av dessa webbläsare har sin egen funktionalitet och sina egna egenskaper för att visa webbsidor.
I det stora utbudet av alla webbläsare och deras versioner, och deras funktioner för att visa webbsidor, dök konceptet med cossbrowser HTML-layout upp. Så vad är kompatibilitet över webbläsare?!
Kompatibilitet över webbläsare är möjligheten för webbsidor att visas lika i olika versioner av webbläsare, utan förvrängning eller "spridning" av sidelement, oavsett webbläsarens egenskaper.
Det största antalet av dessa funktioner har webbläsare Explorer från Microsoft, varför de inte är omtyckta mest HTML layoutdesigners och komma med idéer till det olika sätt leder till korrekt visning av sidan (dessa metoder kallas "kryckor" av layoutdesigners). Vår personliga åsikt är att det är möjligt att skapa en HTML-sida över webbläsare utan att använda just dessa "kryckor" som täpper till HTML-koden på sidan.
Villkorliga kommentarer för Internet Explorer Villkorliga kommentarer för alla versioner av IE Villkorliga kommentarer för IE 7 Villkorliga kommentarer för IE 6 Villkorliga kommentarer för IE 5.5 Villkorliga kommentarer för IE tidigare än version 6 Villkorliga kommentarer för IE tidigare än version 7 Villkorliga kommentarer för IE tidigare versioner 8 Villkorlig kommentar för IE äldre än version 9 Villkorlig kommentar för IE äldre än version 6 Villkorlig kommentar för IE äldre än version 7 Villkorlig kommentar för IE äldre än version 8 Grundläggande regler för layout över webbläsare:Det är ingen hemlighet att varje webbläsare har sina egna designstilar för vissa HTML-kodelement, teckenstorlek, indragsstorlek, etc. vilket kommer att leda till spridning av sidelement, och det kommer inte att vara över webbläsare.
Av detta kan vi dra slutsatsen att alla inbyggda stilar i olika webbläsare måste "inaktiveras", eller snarare återställas till samma. Vissa HTML-kodare gör detta direkt när de ställer in CSS-stilar för enskilda element, men vi använder en annan praxis. Vi återställer alla webbläsares CSS-stilar i början av CSS-dokumentet. För att göra detta använder vi en modifierad uppsättning CSS-stilar som föreslås av meyerweb.com
Denna kod, läggs till i CSS-stilar, återställer alla webbläsares ursprungliga stilar till samma. Detta kommer att göra HTML-sidlayouten identisk i alla webbläsare, oavsett deras egna stilar.
Giltighet HTML-dokumentDen andra regeln för HTML-layout över webbläsare är överensstämmelse med HTML- och XHTML-standarderna som godkänts av W3C-konsortiet. Varje HTML-dokument (nämligen ett dokument) har sin egen standard och sina egna skrivfunktioner.
Vi kommer att titta på typerna av HTML-dokumentstandarder och deras skillnader senare, eftersom detta ämne kräver separat övervägande och beskrivning.
Giltigheten av ett HTML-dokument är överensstämmelse med de godkända standarderna och normerna från W3C-konsortiet.
Enligt W3C-standarder måste varje HTML-dokumenttagg ha sitt eget taggpar. Dessa par kallas öppnings- och stängningstaggar, men det finns undantag från denna regel - det här är taggar ,
etc., dessa taggar har inte ett avslutande par.
En icke-sluten parad tagg, som varje webbläsare kan förstå på sitt eget sätt, och kommer att visa innehållet som är inneslutet i dessa taggar på ett sätt som inte är avsett av layoutdesignern.
Du kan kontrollera giltigheten av ett HTML-dokument på W3C-konsortiets webbplats.
Giltig kodexempel: Giltig kod Giltig HTML-kodDenna HTML-kod följer XHTML 1.0 strikta standarder och är giltig
Och innehåller både parade (avslutande) taggar och en oparad tagg
Denna HTML-kod överensstämmer inte med W3C-standarder och är inte giltig
Det finns många sätt att kontrollera webbläsarkompatibiliteten för HTML-dokumentet som skrivs, det enklaste av dem är att installera alla populära webbläsare till din dator. Men vad sägs om olika versioner Internet Explorer?! – kommer många att fråga.
Det finns ett enkelt sätt att samla alla versioner av IE i en flaska, så att säga. Du kan ladda ner IE Tester, som inkluderar alla versioner av IE som börjar med IE 5.5.
Du kan också använda tjänsten Browsershots.org, som låter dig ta bilder av ditt HTML-dokument från mer än 40 olika webbläsare.
Problem med kompatibilitet över webbläsare kommer att plåga webbutvecklarnas sinnen under lång tid, precis tills de släpper en webbläsare som kommer att användas av alla utan undantag (det vill säga aldrig - redaktörens anteckning). Nu är det mest skit IE6, delvis IE7, som lägger till mycket extra arbete för layoutdesigners som inte förolämpar någon.
Jag presenterar ett urval CSS-hack, som hjälper dig att göra ditt liv enklare och uppnå zen och uppnå kompatibilitet över webbläsare.
Återställa CSS-inställningar. Alla webbläsare har någon form av CSS-stilar aktiverade som standard. Till exempel det mesta dåligt exempel, vilket är inneboende i de flesta (om inte alla) webbläsare, där standardmarginalen på 10px är specificerad för body-taggen, vilket resulterar i att innehållet som placeras inuti flyttas bort från webbläsarens kant, vilket förstör idén om designens ursprungliga utseende. Det mest slående exemplet är webbplatsen för den välkända Intersport-butiken, eller snarare dess ryska filial - de vet fortfarande inte att marginalen kan återställas.
Jag använder vanligtvis följande konstruktion för att korrigera störande parametrar:
* (marginal: 0px; utfyllnad: 0px;)
img (kant: 0; )
a, img, div, input ( disposition: ingen; )
ol, ul ( liststil-position: inuti; )
I princip räcker detta för att uppnå kompatibilitet över webbläsare och korrekt visning av webbplatsen. Men jag tror att det fortfarande är värt att börja återställa all CSS. Jag kanske är lite konservativ, det är därför jag fortfarande inte gör det här - varför göra det om allt är okej. Men jag kanske missar något.
Problemet löstes radikalt på webbplatsen - de erbjuder följande kod:
html, body, div, span, applet, objekt, iframe,
h1, h2, h3, h4, h5, h6, p, citat, pre,
a, förkortning, akronym, adress, stor, citera, kod,
del, dfn, em, typsnitt, img, ins, kbd, q, s, samp,
liten, strejk, stark, sub, sup, tt, var,
b, u, jag, mitten,
dl, dt, dd, ol, ul, li,
fältuppsättning, form, etikett, förklaring,
tabell, bildtext, tbody, tfoot, thead, tr, th, td (
marginal: 0;
stoppning: 0;
gräns: 0;
disposition: 0;
teckenstorlek: 100%;
vertikal-align: baslinje;
bakgrund: transparent;
}
kropp (linjehöjd: 1; )
ol, ul ( liststil: ingen; )
blockquote, q ( citattecken: inga; )
blockquote:before, blockquote:after, q:before, q:after (
innehåll: "";
innehåll: inget;
}
/* kom ihåg att definiera fokusstilar! */
:fokus ( kontur: 0; )
/* kom ihåg att markera inlägg på något sätt! */
ins (text-dekoration: ingen;)
del (text-dekoration: genomlinje;)
/* tabeller behöver fortfarande "cellspacing="0"" i uppmärkningen */
bord (
border-collapse: kollapsa;
kantavstånd: 0;
}
Min-höjd i IE. Internet Explorer 6 accepterar inte helt CSS min-höjd, särskilt när det behövs. Problemet är löst på detta sätt:
väljare (
min-höjd:300px;
höjd:auto; !Viktig
höjd:300px;
}
Markera länkar prickig ram i webbläsare. Det är ofta i vägen, förstör utsikten och behövs inte av någon.
För vanliga webbläsare (inklusive IE8) måste du ställa in disposition: ingen(), och för IE6 och IE7 måste du använda en ogiltig outline:expression(hideFocus="true"). Även om detta hack vanligtvis inte behövs för IE6 och IE7 (jag kommer inte ihåg ett fall då det fungerade bra med länkar a), kan du uppnå kodgiltighet genom att tilldela denna parameter via javascript eller genom något bibliotek. Till exempel, för jQuery är koden följande:
$("a").attr("hideFocus", "true").css("outline", "ingen");
Genomskinlighet. Ibland behöver du ställa in transparens för block. Detta görs enkelt, men tyvärr ogiltigt:
väljare (
filter:alfa(opacitet=75);
-moz-opacitet:.75;
opacitet:.75;
}
PNG-transparens i IE6. Glöm inte strukturens existens:
img, div (
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(...);
}
Men eftersom den är ogiltig, och även om du anger en png som bakgrund, kan den inte placeras och renderas. Därför rekommenderas den för användning IE PNG Fix ().
Bikubiskt interpolationsläge för skalade bilder. Det låter abstrut, men det är inget komplicerat. Kommer du ihåg i IE6 (och tydligen i IE7 också) om vi placerar en bild på sidan och minskar dess storlek, då krymper den ner och ser ut som skit? Så det finns ett sätt att fixa detta (även om det tyvärr är ogiltigt)
img ( -ms-interpolationsläge: bikubisk;)
Scrollar i IE. Som standard, i utforskare (den sjätte, kanske den sjunde), visas den vertikala rullningslisten alltid i webbläsaren, även när det inte finns något innehåll på sidan alls. Det är lätt att fixa.
html (spill: auto; )
Fördubbling av fält i IE. Om float:left och den angivna marginalen finns, stryps marginalen i åsnan. Botemedlet är display:inline().
Pseudo-class:hover för IE. Eftersom åsnan är väldigt tät stödjer den hovringen endast för tagg a. Ibland räcker detta (eftersom en kan förvandlas till en div med display:block), och ibland räcker det inte alls. Det finns inga CSS-lösningar för detta, men det finns jQuery-lösningar. Vi skapar en klass i CSS (i vårt fall med namnet classname), ger den en färg, bakgrund, etc., ja, och lägger till koden för det önskade elementet (i vårt fall är det för li)
Vi har släppt en ny bok "Content Marketing in i sociala nätverk: Hur du kommer in i dina prenumeranters huvuden och får dem att bli kära i ditt varumärke."
Prenumerera
Cross-browser-kompatibilitet är förmågan hos en webbresurs att anpassa sig till flera webbläsare och visas korrekt i dem.
Fler videor på vår kanal - lär dig internetmarknadsföring med SEMANTICA
Du har till exempel gjort en hemsida för din webbutik. Du har skapat en vacker design som är tilltalande för ögat. Men användare kommer åt din webbplats via olika webbläsare. Vissa människor använder faktiskt en smartphone. Och om du inte har kontrollerat resursens kompatibilitet över webbläsare, kan det hända att webbplatsen inte visas bra i vissa webbläsare.
Element kan flytta ut, bilder kanske inte visas och typsnitt blir fula. En person kommer inte att använda en sådan tjänst. Han kommer att fortsätta leta.
Webbplatsutvecklarens uppgift är att göra det så att, oavsett webbläsare och enhet, resursen visas korrekt.
Layout för flera webbläsareDet råder konkurrens mellan webbläsare. Tidigare försökte alla lägga till exceptionella funktioner och alternativ. Detta ledde till det faktum att HTML-standarder respekterades inte längre och varje webbläsare renderade sidor på olika sätt.
Netscape Navigator hoppade av loppet och gav monopolet till Internet Explorer. Nästan samtidigt började projekten ta fart Mozilla Firefox(Gecko) Google Chrome(Blink), Opera (WebKit) och Safari (WebKit), som delar upp marknaden sinsemellan och tvingar samhället att tänka på frågan om deras webbläsares kompatibilitet.
Vilken webbdesigner eller layoutdesigner som helst vet hur CSS3 kan göra livet enklare, snabba upp och optimera layoutprocessen. Egenskaper som "border-radius" och "box-shadow" gör det möjligt att undvika användningen av onödiga bilder och dussintals rader kod, vilket i sin tur påskyndar webbplatsens layoutprocess och ökar dess laddningshastighet. När jag använde CSS3 i mitt arbete stötte jag på problemet med kompatibilitet över webbläsare, nämligen webbplatser som visas i äldre webbläsare och, naturligtvis, i Internet Explorer. Idag kommer jag att berätta vilka verktyg jag använder för att uppnå kompatibilitet över webbläsare av CSS3, inklusive Internet Explorer.
Låt oss ta en närmare titt på ett antal metoder som kan användas för att uppnå användning av CSS3 över webbläsare.
PRIMÄRA INSTÄLLNINGAR
Ladda ner skripten och kopiera dem till en mapp med CSS-stilar. Här är en lista över skript som vi behöver: CSS3 PIE är vår assistent i arbetet med IE. PIE lär Internet Explorer att förstå CSS3. CSS3PIE-nedladdningsmappen innehåller alla filer vi behöver. Vi kommer att använda filen PIE.htc och kommer åt den via CSS, så vi måste placera den i samma mapp som stilfilerna.
Selectivizr används för att hantera CSS3-väljare. Den används i kombination med JavaScript-bibliotek, som jQuery eller Mootools. Jag rekommenderar att du väljer Mootools eftersom det stöder alla Selectivizr-funktioner (CSS-väljare).
I det här exemplet kommer jag att använda Google-värd med Mootools-biblioteket, för att göra detta kommer jag helt enkelt att klistra in den nödvändiga koden i huvudet:< script type = "text/javascript" src = "selectivizr-min.js" >
< script type = "text/javascript" src = "https://ajax.googleapis.com/ajax/libs/mootools/1.4.0/mootools-yui-compressed.js " >
Vi kan också använda jQuery för att få ett CSS3 text-shadow-alternativ. Allt vi behöver göra är att ladda ner jQuery text-shadow plugin, och ansluta den med jQuery: Bra, nu kan vi börja lösa CSS3 problem över webbläsare.
RUNDA HÖRN (GRÄNSRADIUS)
Att runda hörn är förmodligen det bästa CSS3 har gett oss. Lyckligtvis kan du använda den och inte vara rädd för felaktig visning i Internet Explorer. CSS3PIE hjälper oss med detta.
border-radius: 10px ;
beteende: url (PIE.htc);
Som du kan se behöver vi bara "anropa" PIE-skriptet efter egenskapen border-radius.
BOX-SHADOW & RGBA-FÄRGER
Precis som med border-radius, för att stödja Internet Explorer med rundade hörn, behöver du bara ansluta PIE-skriptet. Kom också ihåg att vi kan använda RGBA-värden.
box-shadow: 5px 5px 5px rgba(0 , 0 , 0 , . 75);
beteende: url (PIE.htc);
Du kan också använda RGBA-färger när du anger egenskaperna för "bakgrundsfärg".
DUBBEL BAKGRUND
Och återigen använder vi prefixet -pie-:
bakgrund: url (img/flash.png) 20px 20px no-repeat , url (img/airplane.png) 90px 50px no-repeat , #00BFF3 ; /* Moderna webbläsare */
Paj-bakgrund: url (img/flash.png) 20px 20px no-repeat, url (img/airplane.png) 90px 50px no-repeat, #00BFF3; /* IE6+ */
beteende: url (PIE.htc);
GRÄNS-BILD
Den sista CSS3-egenskapen som PIE stöder är border-image:
border-image: url (border.png) 27 27 27 27 rund rund;
beteende: url (PIE.htc);
CSS3-VÄLJARE
Det är dags att använda Selectivizr. Vi ansluter JavaScript som visas ovan, och alla CSS3-väljare kommer att vara tillgängliga för IE6+!
tabell tr:första barn (
bakgrund: #252525 ;
tabell tr:nth-child(2 n+ 1) (
bakgrund: #ebebeb ;
TEXT-SKUGGA
Den här egenskapens kompatibilitet över webbläsare kan enkelt uppnås med hjälp av jQuery-bibliotek. När vi har anslutit den anropar vi helt enkelt funktionen "textShadow()" för den önskade väljaren:
$(document).ready(function ()(
$(".txt").textShadow();
För den fulla effekten, lägg helt enkelt till "text-shadow" till dina CSS-stilar.
text-shadow: 2px 2px 2px svart;
Dvs FILTER
För att ersätta vissa CSS3-regler kan du också använda IE-filter. Här är ett exempel på en bakgrundsgradient:
bakgrund: #FFFFFF ;
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr= "#444444" , EndColorStr= "#999999"); /* IE6–IE9 */
Följande egenskap motsvarar regeln "transform". Men dess syntax är så komplicerad att jag rekommenderar att du använder en speciell generator för att beräkna det nödvändiga värdet.
/* IE8+ - måste vara på en rad, tyvärr */
Ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.9848077530122079, M12=-0.17364817766693127, M21=0.17364817766692102, M804=Metod.50766692102, M80766693127 expandera")" ;
filter: progid:DXImageTransform.Microsoft.Matrix(
M11 = 0,9848077530122079,
M 12 = -0,17364817766693127,
M21 = 0,17364817766693127,
M22 = 0,9848077530122079,
SizingMethod= "autoexpansion");
marginal-vänster: -14px ;
margin-top: -21px ;
I SLUT
Som du kan se kan vi använda CSS3-egenskaper och väljare utan rädsla för webbläsare som Internet Explorer. Jag hoppas att den här artikeln var användbar för dig och att du kommer att hitta praktisk tillämpning av den kunskap du har förvärvat. I nästa artikel kommer jag att berätta hur man integrerar CSS3PIE i Joomla, eftersom många webbansvariga har ett stort problem med detta.
Kompatibilitet över webbläsare är en webbplatss förmåga att visas korrekt i olika webbläsare. Resursen bör fungera likadant i alla webbläsarversioner.
Detta är särskilt viktigt i en tidevarv av responsiv webbdesign, när gränssnittets förmåga att anpassa sig till ett brett utbud av olika enheter samtidigt som den ger en optimal tittarupplevelse.
Tidigare skulle en designer skapa en designlayout i Photoshop, som sedan skulle överföras till HTML och CSS. Idag tvingar tekniska förändringar oss att tänka om detta koncept. Vi kan inte längre förutsäga vilken webbläsare, upplösning eller enhet som kommer att användas för att visa webbplatsen. De dagar då de flesta datorer använde en fast upplösning på 1024 gånger 768 pixlar är förbi, och webbplatser kunde utformas med statiska dimensioner.
Moderna webbläsare har fullt stöd för HTML5 och CSS3. Men samma HTML/CSS/JavaScript-kod tolkas olika i äldre webbläsare, vilket leder till "inkompatibilitet mellan webbläsare" för webbplatsen. Detta gäller särskilt för gamla Internetversioner Utforskare.
I den här artikeln kommer vi att titta på aktuell statistik om webbsidor och tillhandahålla en lista över verktyg som hjälper till att lösa olika problem kompatibilitet.
1. Nuvarande situationGlobal statistik för 2015 visar att de 14 mest använda skärmupplösningarna sträcker sig från 1920 gånger 1080 till 320 gånger 480 pixlar.
Även om Windows 7 (31,20%) fortfarande har en stor marknadsandel, börjar mobila plattformar ersätta traditionella stationära plattformar.
Tittar vi på statistiken för 2015 på de webbläsare som används ser vi att förstaplatsen tillhör Chrome (alla versioner - 44,87 %), andra platsen - Firefox (alla versioner - 10,37 %), tredje platsen Internet Explorer 11 (6,84 %).
Accelererad release av ny Google-versioner Med Chrome och Firefox kan du mer effektivt utveckla projekt för dessa plattformar. En lite annorlunda bild framträder för "bad guy" Internet Explorer, eftersom gamla versioner av den fortfarande kan hittas på Internet. Och detta leder till problem med webbplatsens kompatibilitet över webbläsare.
Microsoft slutade stödja IE6 den 8 april 2014. Och från 2016 kommer endast den senaste versionen av Internet Explorer att stödjas och uppdateras. Detta innebär i praktiken att stödet för IE7 och IE8 helt lades ner i början av 2016, oavsett operativ system. IE9 stöds endast i Windows Vista, IE10 - endast på Windows Server 2012, IE11 - på Windows 7 och Windows 8.1:
Som ett resultat måste vi sluta utveckla för IE6 och, liksom IE7. För att motivera denna strategi, här är några exempel på beslut som välkända företag tagit: Google slutade stödja IE8 i november 2012 och IE9 i oktober 2013.
Github stöder inte längre IE 7 och 8. Dessutom fungerar en del av Twitter-funktionaliteten inte i IE8. Och slutligen kommer det populära ramverket inte att stödja IE8, från och med version 4.
Användningsstatistiken kan dock variera beroende på region, med 6,11 % av användarna i Kina som fortfarande surfar genom IE8 under 2015. Om vi betänker att det fanns cirka 724 400 000 internetanvändare i Kina, kan det förstås att cirka 44 200 000 kineser fortsätter att använda IE8 i år.
Därför kan regionala marknader, specifika kunder och branschkrav variera avsevärt. Detta gäller särskilt för företag och statliga myndigheter.
2. Analysera din publikGrundprincipen här är denna: ju högre kompatibilitet över webbläsare krävs, desto mer utvecklingstid kommer att krävas, vilket leder till en ökning av kostnaden för projektet. För att fatta ett välgrundat, ekonomiskt sunt beslut måste du ställa dig själv följande frågor:
- Vilken är din målgrupp?
- Vilken geografisk region ska du rikta in dig på?
- Vilka webbläsare och enheter använder dina besökare?
- Finns det tekniska faktorer i ditt företag eller din bransch som tvingar dig att stödja specifika versioner av äldre webbläsare?
- Vilka är villkoren e-handel konverterings- och lönsamhetsgrader olika grupper användare efter webbläsarversion?
Genom att besvara dessa frågor med hjälp av statistiska data, t.ex. Google Analytics, kan du få en objektiv bild.
3. Problem med äldre webbläsare och olika utvecklingsmetoderResponsiv webbdesign är starkt beroende av mediafrågor för att modifiera CSS för olika skärmupplösningar. Dessutom kännetecknas moderna webbplatser av användningen av HTML5 semantiska element (till exempel , , , , ) för att gruppera designkomponenter. CSS3-väljare används för att välja specifika element och sedan tilldela stilar (till exempel , :checked , :nth-child(n) , :not(selector) , :last-child) ). Slutligen specificeras responsiv typografi ofta med REM-enheter (root em).
Detta leder oss till följande tekniska utmaningar när vi implementerar CSS-kompatibilitet över webbläsare:
- CSS3 media frågor
- Semantisk HTML-element 5: stöds inte i IE6, 7 och 8;
- CSS3-väljare: Stöds inte i IE6. Stöds endast delvis i IE7 och 8;
- REM-enheter: stöds inte i IE6, 7 och 8. Stöds endast delvis i IE9 och 10;
- CSS-reglerbegränsning: IE9 och lägre stöder endast 4095 CSS-väljare. Reglerna efter den 4095:e väljaren gäller inte.
Ovanstående misstag kommer att ha störst inverkan på den strategi som används vid implementering av responsiv design.
Det finns två huvudsakliga utvecklingsstrategier: inkrementell förenkling och progressiv förbättring.
Progressiv förbättring - baserad på principen att starta utveckling från en gemensam nämnare, från minimum tekniska krav och nivån på användarupplevelsen som webbplatsen erbjuder. Besökare som kommer åt sidan via senaste versionerna webbläsare och enheter, kommer att betjänas av en progressivt utökad version av webbplatsen med alla de senaste funktionerna.
Å andra sidan kommer användare av äldre webbläsare och långsamma internetanslutningar att erbjudas en grafiskt avskalad men fortfarande funktionell version av sajten.
Detta tillvägagångssätt för att implementera kompatibilitet över webbläsare innebär att man startar utvecklingen med en enkel version, till vilken mer komplexa element sedan läggs till. Äldre webbläsare kommer att kunna visa webbplatsen med grundläggande nivå interaktionsupplevelse. Och nya HTML/CSS/JavaScript-funktioner kommer att finnas tillgängliga i webbläsare som faktiskt kan använda dem.
Däremot ger inkrementell förenkling en fullt fungerande nivå av UX i moderna webbläsare. Och sedan gradvis minskar komplexiteten för äldre webbläsare på grund av grafik, men utan att beröra funktionalitet. Tanken är att börja utveckla med de senaste webbstandarderna och sedan försöka minimera problemen förknippade med äldre webbläsare.
Vilket tillvägagångssätt du väljer beror på personliga preferenser och projektförhållanden:
- Progressiv förbättring ger större stabilitet eftersom du gradvis kan lägga till nya funktioner till din moderna webbläsare. Men det kräver mer noggrann planering;
- Vissa utvecklare hävdar att det inte är någon mening med att stödja äldre webbläsare och bör användas Nyaste teknikerna. Stöd för moderna webbläsare ger mycket mer bästa upplevelsen interaktioner;
- Det finns en uppfattning om att progressiv förbättring är död eftersom många JavaScript-applikationer inte fungerar bra med detta tillvägagångssätt;
- Webbtillgänglighet för offentliga institutioner kan vara föremål för lokala juridiska krav och kan kräva ett specifikt tillvägagångssätt.
Med tillkomsten av funktionsdetekteringsverktyg som Modernizr, lutar jag personligen åt att använda inkrementell förenkling och webbläsarsvartlistning när jag utvecklar kompatibla webbplatser.
4. Testa, testa, testa...För att upptäcka potentiella JavaScript-problem över webbläsare så snabbt som möjligt bör du testa din webbplats i olika webbläsare och upplösningar under utvecklingen. Det finns olika mjukvaruemulatorer som kan hjälpa oss:
- Browserstack är en kommersiell tjänst som ger tillgång till en testmiljö där du kan testa ditt projekt på mer än 700 stationära webbläsare och Mobil enheter använda en virtuell maskin i molnet;
- Microsoft Virtual Machines - Om du kör Linux har du inte tillgång till Internet Explorer. Lösningen kan vara att ladda ner bilderna virtuella maskiner för IE6 till IE11, som sedan kan användas tillsammans med Oracle VM Virtualbox eller Vagrant för lokal testning;
- Olika skärmupplösningar för en specifik webbläsare kan snabbt testas med hjälp av onlinetjänsten Screenfly. Använda webbläsarplugins som Window Resizer för Google Chrome, eller direkt i avsnittet för utvecklarverktyg i Chrome och Firefox.
Jag startar vanligtvis nya projekt genom att återställa CSS med Normalize.css, vilket ger bättre kompatibilitet mellan webbläsare när jag definierar standardformat för HTML-element upp till Internet Explorer 8. Normalize.css sparar de nödvändiga elementstilarna och normaliserar dem utseende och fixar ett antal buggar och inkonsekvenser i olika webbläsare.
Dessutom kan många äldre webbläsare inte tolka okända HTML-element och CSS-egenskaper. När webbläsaren stöter på en bit HTML eller CSS som den inte förstår, ignorerar den det och fortsätter renderingsprocessen. Många applikationer använder leverantörsprefix för att lägga till nya, experimentella eller icke-standardiserade CSS-funktioner innan de implementeras i specifikationen:
// Webkit-webbläsare som Chrome och Safari -webkit- // Firefox -moz- // Internet Explorer -ms- // Opera -o-
Problemet är att prefix är besvärliga att använda och har många buggar associerade med dem. Så jag använder CSS Autoprefixer plugin i kombination med Grunt.
Regelbunden CSS regler kommer att bearbetas med insticksprogrammet och prefix kommer att läggas till dem baserat på databasen "Kan jag använda". Det rekommenderas att ange i konfigurationen vilka versioner av webbläsare som behöver stödjas, till exempel:
alternativ: (webbläsare: ["senaste 2 versionerna", "dvs >= 8", "Firefox >= 12", "iOS >= 7", "Android >= 4"] )
Som ett exempel, överväg följande CSS-klass:
Exempel ( bakgrundsbild: linjär-gradient (överst till vänster, #4676dd, #00345b); display: flex; övergång: 1s alla; )
Med CSS Autoprefixer konverteras det till:
Exempel (bakgrundsbild: -webkit-linear-gradient(överst till vänster, #4676dd, #00345b); bakgrundsbild: -moz-linear-gradient(överst till vänster, #4676dd, #00345b); bakgrundsbild: linjär- gradient (överst, #4676dd, #00345b display: -ms-flexbox: 1s all;
6. Villkorliga kommentarerOm du behöver skapa reserv-CSS eller aktivera JavaScript för flera webbläsare för tidigare versioner av Internet Explorer kan du använda villkorliga kommentarer. De stöds i Internet Explorer 5-9, de använder syntaxen HTML-kommentarer i kombination med booleska värden. Beroende på det booleska värdet (sant eller falskt), kommer koden inuti kommentarstaggarna att visas eller döljas i motsvarande webbläsarversioner:
KOD SOM KOMMER ATT UTFÖRAS // om Internet Explorer // om INTE Internet Explorer // om Internet Explorer 7 // om INTE Internet Explorer 7 // om Internet Explorer 9 eller LÄGRE // om Internet Explorer 7 eller HÖGRE // om Internet Explorer 6 ELLER 7 // om HÖGRE Internet Explorer 6 MEN UNDER 9
Koden döljs automatiskt i alla webbläsare som inte stöder villkorliga kommentarer. Ett tydligt exempel av hur villkorade kommentarer kan användas effektivt i praktiken är HTML5 Boilerplate, som lägger till specifika CSS-klasser för föråldrade versioner Internet Explorer:
7. Polyfills
Tekniska inkonsekvenser hos äldre webbläsare för responsiv webbdesign kan korrigeras med en polyfill. Det är en del av JavaScript-kod som "fyller" ett specifikt funktionellt gap mellan en äldre webbläsare och en funktion. Det finns ett antal polyfills som kan användas för att tillhandahålla webbläsarstöd för HTML5-funktioner.
Nedan finns flera polyfills utformade för att eliminera webbplatsens problem med flera webbläsare som nämns i punkt 3:
- respond.js - implementerar CSS3-mediefrågor för Internet Explorer 6 - 8;
- html5shiv tillåter användning av HTML5 semantiska element i Internet Explorer 6 - 8;
- selectivzr - emulerar CSS3-väljare och pseudoklasser i Internet Explorer 6 - 8. Fullständigt stöd kräver antingen Mootools 1.3 eller NWMatcher 1.2.3. Partiellt stöd är tillgängligt med JQuery 1.3/1.4;
- REM-unit-polyfill - Avgör om webbläsaren stöder rem-enheter och ger en reserv. Fungerar med IE8 och lägre.
För att använda de angivna polyfills måste de läggas till från CDN eller som en fil i rätt format i de villkorliga kommentarerna i avsnittet (glöm inte att inkludera ett av JavaScript-biblioteken som krävs för Selectivizr):
För varje projekt måste du utvärdera om dessa ytterligare skript verkligen är nödvändiga, eftersom de kan leda till prestandaproblem. De flesta polyfills är kompakta, men varje extra laddat skript är det ytterligare HTTP-begäran. Detta kan göra att sidan laddas långsammare.
8. Definiera funktioner med ModernizrModernizr-biblioteket, skrivet i JavaScript, hjälper dig att kontrollera en webbplatss kompatibilitet över webbläsare: om en specifik HTML5- eller CSS3-funktion stöds i olika webbläsare. Om funktionen inte är tillgänglig kan alternativ CSS- eller JavaScript-kod laddas.
Tanken är att direkt bestämma webbläsarens funktionalitet, snarare än att försöka installera en specifik version av den. Och baserat på detta, härleda dess funktionalitet, vilket är ett mindre effektivt och pålitligt sätt.
Det är värt att notera att Modernizr inte lägger till saknade funktioner i webbläsaren. Därför måste du ange kod från reserv-CSS eller polyfill.
Först måste du ladda ner den fullt fungerande monteringen. Senare, när du är redo att utveckla, kan du skapa en anpassad version med de specifika funktionerna du testar. Allt du behöver göra är att lägga till .no-js-klassen i din webbplats HTML-tagg och inkludera Modernizr-skriptet i head-avsnittet efter en CSS-fil:
Modernizr Demo Modernizr Demo
Detta är en Modernizr-övning.
Klassen .no-js används för att kontrollera om JavaScript är aktiverat i användarens webbläsare. Om aktiverat kommer Modernizr att ersätta .no-js med .js-klassen. Modernizrs testfunktion analyserar om en viss funktion stöds i webbläsaren och genererar en serie klasser som läggs till HTML-elementet. Google Chrome 47.0.2526.111 kommer till exempel att returnera följande objektklasser.
För närvarande är Modernizr tillgängligt som ett globalt objekt som kan anropas tillsammans med ett funktionsnamn för att kontrollera om det finns. Den returnerar ett booleskt värde (sant eller falskt).
Låt oss titta på två enkla exempel på CSS och JavaScript.
Exempel lösning CSS-problem kompatibilitet över webbläsare: kontrollera SVG-stöd och tillhandahålla som alternativ för backup PNG
För närvarande finns det en tendens till mer och mer aktiv användning SVG (Scalable Vector Graphics), men den här grafiken stöds inte i IE8 och lägre. Om SVG stöds i webbläsaren, genererar Modernizr CSS-klassen .svg . Om SVG inte är tillgängligt lägger verktyget till klassen .no-svg i HTML-koden. Med CSS nedan kommer webbläsare som stöder SVG att använda den vanliga .logo-klassen, medan webbläsare som inte stöder SVG kommer att använda .no-svg-reglerna:
Logotyp ( bakgrundsbild: url("logo.svg"); bredd: 164px; höjd: 49px; ) .no-svg .logo (bakgrundsbild: url("/logo.png"); bredd: 164px; höjd : 49px)
JavaScript Exempel: Definiera border-radius och lägga till lämpliga CSS-klasser
Avrundning av ramhörn stöds inte i IE8 och lägre. Vi kan skapa olika CSS-klasser som tillämpas beroende på närvaron av gränsradiefunktionen:
// Klass för en webbläsare med border-radius-funktionen .round-borders ( border-radius: 5px; ) // Klass för en webbläsare utan border-radius-funktionen .black-borders ( border: 3px solid #000000; )
Nu kan du använda JavaScript för att lagra mål-ID:t som en variabel och sedan lägga till CSS-klasser via ett villkor:
var element = document.getElementById("TestID"); if (Modernizr.borderradius) ( element.className = "round-borders"; ) else ( element.className = "black-borders"; )
SlutsatsNär det kommer till responsiv webbdesign i äldre webbläsare finns det ingen universell lösning. Det är viktigt att analysera resursens publik för att få en uppfattning om det verkliga antalet webbläsareanvändare. Därefter måste du noggrant testa webbplatsen för att identifiera potentiella problem med flera webbläsare.
Genom att noggrant välja rätt polyfills att lägga till i villkorliga kommentarer kan du komma runt bristen på de viktigaste HTML5-funktionerna. Dessutom är möjligheten att avgöra med Modernizr på ett bekvämt sätt tillhandahålla reserv-CSS och JavaScript för äldre webbläsare som saknar stöd för modern HTML5-funktionalitet Popup-meddelande när du klickar på en länk med använder JavaScript
När jag arbetade med en av uppgifterna stötte jag på behovet av att visa ett popup-fönster innan användaren omdirigerades till en specifik länk. Vi…