Publicerad: 2011-07-06

Jag kommer återigen att beskriva hack kända för alla och beskrivna 100 500 gånger tidigare för olika webbläsare.

Jag kommer att ge en definition av ett hack från Vlad Merzhevichs webbplats htmlbook.ru: "Ett hack är en uppsättning tekniker som syftar till att ställa in stilen för ett visst element för en webbläsare, vilket skulle vara annorlunda än stilen för andra webbläsare."

Först och främst var jag intresserad av aktuella fungerande lösningar, så jag testade alla exempel i de senaste versionerna av webbläsare, förutom IE (Opera 11, Firefox 4, Chrome 13, Safari 5, IE 8).

Internet Explorer

Den mest "olik" webbläsaren från andra. Dessutom är varje version "olika" på sitt eget sätt. Men låt oss acceptera verkligheten som den är. Men verkligheten är att hackar för olika versioner När du designar IE behöver du tillräckligt med dem för att placera dem i en separat fil och ladda dem endast för denna familj av webbläsare. För att göra detta kommer vi att skriva en kommentar i avsnittet av HTML-dokumentet som Internet Explorer kan känna igen.

Du kan använda följande nyckelord som villkor:

• IE - valfri version av webbläsaren Internet Explorer;
• IE 7 - Internet Explorer 7;
• IE 8 - Internet Explorer 8;
• IE 9 - Internet Explorer 9;
• lt - webbläsarens versionsnummer är lägre än angivet;
• gt - versionsnummer större än specificerat;
• lte - versionsnummer mindre än eller lika med det angivna;
• gte - webbläsarens versionsnummer större än eller lika med det angivna.

Kanske kommer jag att notera ett annat hack för IE 7 separat: en asterisk före väljarnamnet. Till exempel:

#example (
färg: grön;
* färg: röd;
}

Chrome och Safari

Hack för webbläsare baserat på webkit-motorn - Chrome och Safari:

@mediaskärm och (-webkit-min-device-pixel-ratio:0) (
#example (
färg:röd;
}

}

Firefox

@-moz-document url-prefix() (
#example (
färg:röd;
}

}

Opera

Det finns inga universella hacks för Opera! Ja, naturligtvis, du kan hitta hacks för Opera på Internet, men tyvärr är denna information lite föråldrad. Det var en gång ett hack, men allt kom ut:

@media alla och (min-bredd:0px) (


}

Hmm, om det finns hacks för alla webbläsare, men inte för Opera, föreslår en logisk slutsats sig själv: först måste du designa för Opera och sedan polera layouten för andra webbläsare. Hur ser du på detta?

UPD 08/09/11: Senaste rapporterna från fronten: ett hack för Opera hittades på Habré. Så här:

@media alla och (-webkit-min-device-pixel-ratio:10000),
inte alla och ( -webkit-min-device-pixel-ratio : 0 ) (
#example (färg: röd;)
}

Jag rekommenderar dock starkt att inte använda den. Jag kommer att citera kommentaren från Vadim Makeev (aka Pepelsbey) som argument: "Dessa hack är beroende av ofullständig eller buggig Media Queries-stöd och kan bryta med alla mindre webbläsaruppdateringar som fixar eller lägger till stöd. Skjut inte dig själv i foten genom att använda potentiellt farliga hack.". Vilket faktiskt är vad som hände med det första hacket för Opera som nämns i den här artikeln.

Baserat på detta tror vi fortfarande att det bästa hacket för Opera-webbläsaren är kompetent, giltig layout.

6,5 000

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 kompatibilitetsproblem.

1. Nuvarande situation

Global 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 hastighet av utgivning av nya 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 operativsystem. IE9 stöds endast i Windows Vista, IE10 - endast i 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 tagits av välkända företag: 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 igenom 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 publik

Grundprincipen 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 bransch som tvingar dig att stödja specifika versioner av äldre webbläsare?
• Ur ett e-handelsperspektiv, vilka är konverteringsfrekvenserna och avkastningen på investeringen för olika användargrupper per webbläsarversion?

Genom att svara på dessa frågor med hjälp av statistisk data, till exempel från Google Analytics, kan du få en objektiv bild.

3. Problem med äldre webbläsare och olika utvecklingsmetoder

Responsiv 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
• HTML5 semantiska element: 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å strategin 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 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 i 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 senaste tekniken. Stöd för moderna webbläsare ger en mycket bättre användarupplevelse;
• 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 vem 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 mobila 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 verktygssektionen för Chrome-utvecklare och Firefox.

5. Normalize.css och CSS Autoprefixer

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 den 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.

Vanliga CSS-regler kommer att behandlas av plugin-programmet och prefix 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 använder CSS Autoprefixer konverterar 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 kommentarer

Om 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 HTML-kommentarsyntax i kombination med booleaner. 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 bra exempel på 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 ytterligare skript som laddas representerar en extra HTTP-begäran. Detta kan göra att sidan laddas långsammare.

8. Definiera funktioner med Modernizr

Modernizr-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 funktionalitet webbläsaren istället för 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 finns 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 överväga två enkla CSS exempel och JavaScript.

Ett exempel på att lösa CSS-problem över webbläsare: leta efter SVG-stöd och tillhandahålla PNG som reserv

Den nuvarande trenden går mot att alltmer använda SVG (Scalable Vector Graphics), men denna grafik 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.svg"); 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"; )

Slutsats

När det gäller 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.

Alla som har varit inblandade i webbdesign har stött på detta problem: när alla webbläsare normalt visar den stil som tillämpas på sidan, och bara en "jävel" vanställer sidan. Oftast blir denna "jävel". webbläsare Explorer, särskilt version 6 och lägre, som används av cirka 7-8 % av internetanvändarna. Håller med om att detta är ganska mycket att bara ignorera dem. Även om andra webbläsare (även moderna) ibland visar överraskningar. Därför, för att någon webbläsare skulle kunna visa din sida korrekt, uppfanns CSS-hack.

Ett CSS-hack är en speciell stilsyntax som bara en specifik webbläsare förstår. Dessutom skiljer sig CSS-hack ofta till och med för olika versioner av samma webbläsare.

Men innan jag går vidare till CSS-hack skulle jag vilja prata om ett annat sätt att separera stilar, vilket är mer att föredra: med använder PHP eller JavaScript, där vi kan bestämma typen och versionen av webbläsaren och, i enlighet med detta, ansluta lämplig stilfil. Vi kommer inte att överväga denna metod, eftersom du måste ha den för att förstå den minimiuppsättning kunskaper i dessa språk.

Ett annat sätt beror på det faktum att den huvudsakliga "desertören", som regel, är IE. Därför uppfanns en separat metod för det, även utan användning av skript. Den består av villkorliga kommentarer längst upp i dokumentet (inuti taggen). Det fungerar bara för IE-webbläsare, men som regel finns det problem med dem, så denna metod kan hittas väldigt ofta. Det ser ut så här:

Om det översätts till ryska blir det ungefär så här: "Om användarens webbläsare är IE, anslut sedan stilmallen från filen css/ie.css".

Om du behöver ange en specifik version av webbläsaren måste du tillsammans med "IE" även inkludera versionsnumret. Till exempel så här:

Som du kanske gissar kommer stilen endast att tillämpas på webbläsare IE version 6. Det kan också vara nödvändigt att ange en stilmall för webbläsare under en viss version. I det här fallet används denna syntax:

Denna stil kommer att tillämpas på alla versioner av IE-webbläsare under version 6. Om vi ​​istället för "lt" sätter "lte", skulle det betyda lägre eller motsvarande den 6:e versionen.

I de flesta fall räcker redan denna kunskap, och vi måste försöka att inte kräva mer. Det finns dock situationer där dessa metoder inte är helt rimliga. Till exempel, i en situation där i en enorm CSS-fil, behöver bara 1-2 stilar ett speciellt utseende för enskilda webbläsare. I det här fallet är det dumt att skapa en separat enorm fil, som sedan kopplas samman genom skript eller genom sådana förhållanden. Det är därför som CSS-hack för webbläsare uppfanns, som vi nu går vidare till. Och vi börjar med:

1) Internet Explorer. Detta CSS-hack fungerar för versioner av IE7 och lägre. Som min erfarenhet visar är webbläsaren IE8 redan mycket anständig, så jag har inte haft några problem med den än. Men för webbläsare IE7 och nedan visar jag ett hack:

P(
* marginal-top: 30px; # För webbläsare IE7 och lägre.
}

Som du kan se föregås den andra egenskapen "marginal-top" av symbolen "*". Detta är ett CSS-hack. Det vill säga, om du sätter "*" framför egenskapens namn, kommer denna egenskap endast att tillämpas på webbläsare IE7 och lägre. Slutsats: för alla webbläsare kommer "marginal-top" att vara "20px", och för webbläsare IE7 och lägre kommer det att vara "30px". Om du behöver ange stilen endast för IE6 och lägre (detta händer ofta, eftersom det är mycket bättre med IE7 och oftast finns det inget behov av att redigera stilen för den här webbläsaren), så finns det ett annat CSS-hack:

P(
margin-top: 20px; # För alla webbläsare
_margin-top: 30px; # För webbläsare IE6 och lägre.
}

Eftersom det inte är svårt att lägga märke till, föregås den andra egenskapen av ett "_"-tecken, vilket är ett CSS-hack för webbläsare IE6 och lägre.

2) Mozilla Firefox. Detta CSS-hack fungerar bara för Mozilla webbläsare Firefox. Här är hans exempel:

P, x:-moz-ny-länk (
margin-top: 30px;
}

I i detta exempel Det rapporteras att stilen för "p"-väljaren endast kommer att tillämpas på Mozilla Firefox-webbläsare, och alla andra webbläsare kommer att ignorera denna stil.

3) Opera. Detta CSS-hack används för Opera webbläsare. Ett exempel på dess användning:

* |html p (
margin-top: 30px;
}

Här tycker jag också att allt är klart.

Det var allt jag ville skriva i den här artikeln. Men jag påminner dig än en gång om att CSS-hack är dåliga, mycket ofta klarar de inte kontroll av koden, och detta är inte längre bra. I allmänhet, försök att inte använda dem eller använd dem bara som en sista utväg. Generellt rekommenderar jag att du bekantar dig med det, då kommer du att ha färre problem i samband med olika presentationer av stilar i webbläsare.

Som du vet behandlar inte alla webbläsare css-filer på samma sätt. I grund och botten uppstår problem med äldre versioner av Internet Explorer (version 7 och lägre). Förresten, om problemet uppstår i moderna webbläsare (som Opera, Mozilla Firefox, Chrome), då jag rekommenderar starkt granska sidlayouten.

Så här är den. Det finns ett problem med webbläsare. Och jag vet åtminstone tre sätt att lösa detta problem.

Metod 1. Den mest korrekta

Stilar för webbläsare som inte förstår din css korrekt skrivs in separat fil. Vanligtvis är den här webbläsaren, som jag redan sa, Internet Explorer, och dessa filer kallas fix-ie.css

... ... ...

Vi ändrar ThemeName till det riktiga namnet på ditt tema - och när du öppnar Internet Explorer version 7 och lägre - kommer den här filen att läggas till den allmänna uppsättningen stilfiler och till och med cachelagras om cachning är aktiverad.

Den här raden är ansvarig för versionen av webbläsaren som stilfilen kommer att kopplas till: