Objavljeno: 06.07.2011

Još jednom ću opisati hakove poznate svima i opisane 100.500 puta ranije za različite pretraživače.

Dat ću definiciju haka sa web stranice Vlada Merzhevicha htmlbook.ru: „Hak je skup tehnika koje imaju za cilj postavljanje stila određenog elementa za jedan pretraživač, koji bi se razlikovao od stila za druge pretraživače.“

Prije svega, zanimala su me aktuelna radna rješenja, pa sam testirao sve primjere u najnovijim verzijama pretraživača, osim IE (Opera 11, Firefox 4, Chrome 13, Safari 5, IE 8).

Internet Explorer

Pregledač koji se najviše razlikuje od drugih. Štaviše, svaka verzija je „drugačija“ na svoj način. Ipak, prihvatimo realnost onakvom kakva jeste. Ali realnost je da hakuje različite verzije Kada dizajnirate IE, potrebno vam je dovoljno njih da ih stavite u zasebnu datoteku i učitate samo za ovu porodicu pretraživača. Da bismo to učinili, napisaćemo komentar u odjeljku HTML dokumenta koji Internet Explorer može prepoznati.

Kao uslov možete koristiti sljedeće ključne riječi:

• IE - bilo koja verzija pretraživača Internet Explorer;
• IE 7 - Internet Explorer 7;
• IE 8 - Internet Explorer 8;
• IE 9 - Internet Explorer 9;
• lt - broj verzije pretraživača manji od navedenog;
• gt - broj verzije veći od navedenog;
• lte - broj verzije manji ili jednak navedenom;
• gte - broj verzije pretraživača veći ili jednak navedenom.

Možda ću posebno napomenuti još jedan hak za IE 7: zvjezdicu ispred imena selektora. na primjer:

#primjer (
boja : zelena ;
* boja: crvena;
}

Chrome i Safari

Hak za pretraživače zasnovane na webkit engine-u - Chrome i Safari:

@media screen i (-webkit-min-device-pixel-ratio:0) (
#primjer (
boja:crvena;
}

}

Firefox

@-moz-document url-prefix() (
#primjer (
boja:crvena;
}

}

Opera

Ne postoje univerzalni hakovi za Opera! Da, naravno, možete pronaći hakove za Opera na internetu, ali, nažalost, ove informacije su malo zastarjele. Jednom je bio hak, ali je sve ispalo:

@media all i (min-width:0px) (


}

Hmm, ako postoje hakovi za sve pretraživače, ali ne i za Opera, nameće se logičan zaključak: prvo morate dizajnirati za Opera, a zatim ispolirati izgled za druge pretraživače. Kako gledaš na ovo?

UPD 08/09/11: Najnoviji izvještaji sa fronta: hak za Opera je pronađen na Habréu. ovako:

@media all i (-webkit-min-device-pixel-ratio:10000),
ne sve i ( -webkit-min-device-pixel-ratio : 0 ) (
#example (boja: crvena;)
}

Međutim, toplo preporučujem da ga ne koristite. Navešću kao argument komentar Vadima Makeeva (aka Pepelsbey): "Ovi hakovi se oslanjaju na nepotpunu ili pogrešnu podršku za Media Queries i mogu prekinuti sa bilo kojim manjim ažuriranjem pretraživača koji popravlja ili dodaje podršku. Nemojte pucati sebi u nogu koristeći potencijalno opasne hakove.". Što se, u stvari, dogodilo s prvim hakom za Opera spomenutom u ovom članku.

Na osnovu toga, i dalje vjerujemo da je najbolji hak za pretraživač Opera kompetentan, validan izgled.

6.5K

Kompatibilnost među pretraživačima je sposobnost web stranice da se ispravno prikazuje različitim pretraživačima. Resurs bi trebao raditi isto u svim verzijama pretraživača.

Ovo je posebno važno u eri responzivnog web dizajna, kada je sposobnost front-enda da se prilagodi širokom spektru razni uređaji istovremeno pružajući optimalno iskustvo gledanja.

Ranije bi dizajner kreirao izgled dizajna u Photoshopu, koji bi potom bio prebačen u HTML i CSS. Danas nas tehnološke promjene tjeraju da preispitamo ovaj koncept. Više ne možemo predvidjeti koji pretraživač, rezolucija ili uređaj će se koristiti za pregled stranice. Prošlo je vreme kada je većina računara koristila fiksnu rezoluciju od 1024 x 768 piksela, a sajtovi su se mogli dizajnirati sa statičnim dimenzijama.

Moderni pretraživači u potpunosti podržavaju HTML5 i CSS3. Ali isti HTML/CSS/JavaScript kod se različito tumači u starijim pretraživačima, što dovodi do „nekompatibilnosti među pretraživačima“ stranice. Ovo posebno važi za stare Internet verzije Explorer.

U ovom članku ćemo pogledati trenutne statistike o pregledima web stranica i dati popis alata koji pomažu u rješavanju različitih problema kompatibilnosti.

1. Trenutna situacija

Globalne statistike za 2015. pokazuju da se 14 najboljih korištenih rezolucija ekrana kreću od 1920 x 1080 do 320 x 480 piksela.

Iako Windows 7 (31,20%) i dalje drži veliki tržišni udio, mobilne platforme počinju zamjenjivati ​​tradicionalne, desktop platforme.

Gledajući statistiku za 2015. godinu o korištenim pretraživačima, vidimo da je prvo mjesto Chrome (sve verzije - 44,87%), drugo mjesto - Firefox (sve verzije - 10,37%), treće Internet Explorer 11 (6,84%).

Ubrzana brzina izdavanja novog Google verzije Chrome i Firefox vam omogućavaju da efikasnije razvijate projekte za ove platforme. Nešto drugačija slika se pojavljuje za “loš momak” Internet Explorer, jer se njegove stare verzije još uvijek mogu naći na Internetu. A to dovodi do problema s kompatibilnošću web-mjesta sa više pretraživača.

Microsoft je prestao da podržava IE6 8. aprila 2014. A od 2016. će biti podržana i ažurirana samo najnovija verzija Internet Explorera. To zapravo znači da je podrška za IE7 i IE8 potpuno napuštena početkom 2016. godine, bez obzira na operativni sistem. IE9 će biti podržan samo u Windows Vista, IE10 - samo u Windows Server 2012, IE11 - na Windows 7 i Windows 8.1:

Kao rezultat toga, moramo prestati sa razvojem za IE6 i, kao i za IE7. Kako bismo opravdali ovu strategiju, evo nekoliko primjera odluka koje su donijele poznate kompanije: Google je prestao podržavati IE8 u novembru 2012., a IE9 u oktobru 2013. godine.

Github više ne podržava IE 7 i 8. Osim toga, neke od Twitter funkcionalnosti ne rade u IE8. I konačno, popularni okvir neće podržavati IE8, počevši od verzije 4.

Međutim, statistika upotrebe može varirati u zavisnosti od regiona, sa 6,11% korisnika u Kini koji i dalje pregledavaju IE8 u 2015. Ako uzmemo u obzir da je u Kini bilo oko 724.400.000 korisnika Interneta, može se shvatiti da oko 44.200.000 Kineza nastavlja da koristi IE8 ove godine.

Stoga se regionalna tržišta, specifični kupci i zahtjevi industrije mogu značajno razlikovati. Ovo posebno važi za korporativne i vladine agencije.

2. Analizirajte svoju publiku

Osnovni princip ovdje je sljedeći: što je veća potrebna kompatibilnost među pretraživačima, to će biti potrebno više vremena za razvoj, što dovodi do povećanja cijene projekta. Da biste donijeli informiranu, ekonomski opravdanu odluku, morate sebi postaviti sljedeća pitanja:

• Koja je vaša ciljna publika?
• Koju geografsku regiju biste trebali ciljati?
• Koje pretraživače i uređaje koriste vaši posjetitelji?
• Postoje li tehnički faktori u vašoj kompaniji ili industriji koji vas tjeraju da podržavate određene verzije starijih pretraživača?
• Iz perspektive e-trgovine, koje su stope konverzije i ROI različitih grupa korisnika prema verziji pretraživača?

Odgovarajući na ova pitanja koristeći statističke podatke, na primjer, iz Google Analytics, možete dobiti objektivnu sliku.

3. Problemi sa starim pretraživačima i različitim razvojnim pristupima

Responzivni web dizajn se u velikoj mjeri oslanja na medijske upite kako bi modificirao CSS za različite rezolucije ekrana. Osim toga, moderne web stranice karakterizira korištenje HTML5 semantičkih elemenata (na primjer, , , , , ) za grupiranje komponenti dizajna. CSS3 selektori se koriste za odabir specifičnih elemenata i zatim dodjeljivanje stilova (na primjer, , :checked , :nth-child(n) , :not(selector) , :last-child) ). Konačno, responzivna tipografija se često specificira korištenjem REM (root em) jedinica.

Ovo nas dovodi do sljedećih tehničkih izazova prilikom implementacije CSS kompatibilnosti među pretraživačima:

• CSS3 medijski upiti
• HTML5 semantički elementi: nisu podržani u IE6, 7 i 8;
• CSS3 selektori: Nije podržano u IE6. Samo djelimično podržano u IE7 i 8;
• REM jedinice: nisu podržane u IE6, 7 i 8. Samo djelimično podržano u IE9 i 10;
• Ograničenje CSS pravila: IE9 i ispod podržavaju samo 4095 CSS selektora. Pravila nakon 4095. selektora ne vrijede.

Gore navedene greške će imati najveći uticaj na strategiju koja se koristi prilikom implementacije responzivnog dizajna.

Postoje dvije glavne razvojne strategije: inkrementalno pojednostavljenje i progresivno poboljšanje.

Progresivno unapređenje - zasnovano na principu počinjanja razvoja od zajedničkog imenioca, od minimuma tehnički zahtjevi i nivo korisničkog iskustva koje nudi stranica. Posjetioci pristupaju stranici putem najnovije verzije pretraživače i uređaje, opsluživat će progresivno proširena verzija stranice sa svim najnovijim funkcijama.

S druge strane, korisnicima starijih pretraživača i sporih internetskih veza biće ponuđena grafički umanjena, ali još uvijek funkcionalna verzija stranice.

Ovaj pristup implementaciji kompatibilnosti između pretraživača uključuje početak razvoja s jednostavnom verzijom, kojoj se zatim dodaju složeniji elementi. Stariji pretraživači će moći da prikažu sajt sa osnovni nivo iskustvo interakcije. I nove HTML/CSS/JavaScript funkcije će biti dostupne u pretraživačima koji ih zaista mogu koristiti.

Nasuprot tome, inkrementalno pojednostavljenje pruža potpuno funkcionalan nivo UX-a u modernim pretraživačima. A zatim postepeno smanjuje njegovu složenost za starije pretraživače zbog grafike, ali bez dodirivanja funkcionalnosti. Ideja je da se počne razvijati s najnovijim web standardima, a zatim pokušati minimizirati probleme povezane sa starijim pretraživačima.

Koji pristup ćete izabrati zavisi od ličnih preferencija i uslova projekta:

• Progresivno poboljšanje pruža veću stabilnost jer možete postepeno dodavati nove funkcije modernim pretraživačima. Ali to zahtijeva pažljivije planiranje;
• Neki programeri tvrde da nema smisla podržavati stare pretraživače i da ih treba koristiti najnovije tehnologije. Podrška za moderne pretraživače pruža mnogo bolje korisničko iskustvo;
• Postoji percepcija da je progresivno poboljšanje mrtvo jer mnoge JavaScript aplikacije ne rade dobro s ovim pristupom;
• Web pristupačnost za javne institucije može biti predmet lokalnih zakonskih zahtjeva i može zahtijevati poseban pristup.

Sa pojavom alata za otkrivanje funkcija kao što je Modernizr, ja lično težim korišćenju inkrementalnog pojednostavljivanja i stavljanja na crnu listu pretraživača kada razvijam usaglašene sajtove.

4. Testiranje, testiranje, testiranje...

Da biste što brže otkrili potencijalne probleme sa JavaScript međupreglednicima, trebali biste testirati svoju web stranicu u različitim pretraživačima i rezolucijama tokom razvoja. Postoje razne softverski emulatori ko nam može pomoći:

• Browserstack je komercijalna usluga koja omogućava pristup testnom okruženju u kojem možete testirati svoj projekat na više od 700 desktop pretraživača i mobilnih uređaja korištenje virtuelne mašine u oblaku;
• Microsoft virtuelne mašine - Ako koristite Linux, nećete imati pristup Internet Exploreru. Rješenje može biti preuzimanje slika virtuelne mašine za IE6 do IE11, koji se zatim može koristiti u sprezi sa Oracle VM Virtualboxom ili Vagrantom za lokalno testiranje;
• Različite rezolucije ekrana za određeni pretraživač mogu se brzo testirati pomoću online usluge Screenfly. Korištenje dodataka za pretraživače kao što je Window Resizer za Google Chrome, ili direktno u odjeljku alata za Chrome programeri i Firefox.

5. Normalize.css i CSS Autoprefixer

Obično započinjem nove projekte resetovanjem CSS-a koristeći Normalize.css, koji pruža bolju kompatibilnost među pretraživačima kada definišete podrazumevane stilove HTML elemenata do Internet Explorer 8. Normalize.css sprema potrebne stilove elemenata i normalizuje ih izgled i popravlja brojne greške i nedosljednosti u raznim pretraživačima.

Osim toga, mnogi stari pretraživači ne mogu tumačiti nepoznate HTML elemente i CSS svojstva. Kada pretraživač naiđe na dio HTML-a ili CSS-a koji ne razumije, ignorira ga i nastavlja proces renderiranja. Mnoge aplikacije koriste prefikse dobavljača za dodavanje novih, eksperimentalnih ili nestandardnih CSS funkcije prije njihove implementacije u specifikaciji:

// Webkit pretraživači kao što su Chrome i Safari -webkit- // Firefox -moz- // Internet Explorer -ms- // Opera -o-

Problem je u tome što su prefiksi nezgodni za korištenje i imaju mnogo grešaka povezanih s njima. Zato koristim dodatak CSS Autoprefixer u kombinaciji sa Gruntom.

Uobičajena CSS pravila će biti obrađena od strane dodatka i sa prefiksom na osnovu baze podataka "Mogu li koristiti". Preporučuje se da u konfiguraciji navedete verzije pretraživača koje treba da budu podržane, na primer:

opcije: ( pretraživači: ["zadnje 2 verzije", "tj. >= 8", "Firefox >= 12", "iOS >= 7", "Android >= 4"] )

Kao primjer, razmotrite sljedeću CSS klasu:

Primjer (pozadinska slika: linearni gradijent (gore lijevo, #4676dd, #00345b); display: flex; prijelaz: 1s sve; )

WITH koristeći CSS Autoprefixer ga pretvara u:

Primjer (slika pozadine: -webkit-linear-gradient(gore lijevo, #4676dd, #00345b); background-image: -moz-linear-gradient(gornje lijevo, #4676dd, #00345b); background-image: linear- gradijent (gore lijevo, #00345b) display: -ms-flexbox: 1s all;

6. Uslovni komentari

Ako trebate da kreirate rezervni CSS ili omogućite JavaScript za više pregledača za starije verzije Internet Explorera, možete koristiti uslovne komentare. Podržani su u Internet Exploreru 5-9, koriste sintaksu HTML komentara u kombinaciji s booleanskim vrijednostima. Ovisno o logičkoj vrijednosti (tačno ili netačno), kod unutar oznaka komentara bit će prikazan ili sakriven u odgovarajućim verzijama preglednika:

KOD KOJI ĆE SE IZVRŠITI // ako Internet Explorer // ako NIJE Internet Explorer // ako Internet Explorer 7 // ako NIJE Internet Explorer 7 // ako je Internet Explorer 9 ili NIŽI // ako je Internet Explorer 7 ili VIŠI // ako je Internet Explorer 6 ILI 7 // ako je VIŠI Internet Explorer 6 ALI ISPOD 9

Kôd se automatski sakriva u svim pretraživačima koji ne podržavaju uslovne komentare. Dobar primer kako se uslovni komentari mogu efikasno koristiti u praksi je HTML5 Boilerplate, koji dodaje specifične CSS klase za zastarjele verzije Internet Explorer:

7. Polifili

Tehničke nedosljednosti starih pretraživača za responzivni web dizajn mogu se ispraviti korištenjem polifila. To je dio JavaScript koda koji "puni" specifičnu funkcionalnu prazninu između naslijeđenog pretraživača i funkcije. Postoji veliki broj polifila koji se mogu koristiti za pružanje podrške pregledniku za HTML5 funkcije.

Ispod je nekoliko polifila dizajniranih da eliminišu probleme unakrsnih pretraživača spomenutih u točki 3:

• respond.js - implementira CSS3 medijske upite za Internet Explorer 6 - 8;
• html5shiv dozvoljava upotrebu HTML5 semantičkih elemenata u Internet Exploreru 6 - 8;
• selectivzr - Emulira CSS3 selektore i pseudo-klase u Internet Exploreru 6 - 8. Potpuna podrška zahtijeva ili Mootools 1.3 ili NWMatcher 1.2.3. Djelimična podrška dostupna je sa JQuery 1.3/1.4;
• REM-unit-polyfill - Određuje da li pretraživač podržava rem jedinice i daje rezervni. Radi sa IE8 i starijim verzijama.

Da biste koristili navedene polifile, oni moraju biti dodati iz CDN-a ili kao datoteka u ispravnom formatu unutar uvjetnih komentara u odjeljku (ne zaboravite uključiti jednu od JavaScript biblioteka potrebnih za Selectivizr):

Za svaki projekat morate procijeniti da li su ove dodatne skripte zaista potrebne, jer mogu dovesti do problema s performansama. Većina polifila je kompaktna, ali svaka dodatna skripta koja se učita predstavlja dodatni HTTP zahtjev. Ovo može usporiti učitavanje stranice.

8. Definiranje funkcija sa Modernizr

Biblioteka Modernizr, napisana u JavaScript-u, pomoći će vam da provjerite kompatibilnost web-mjesta između pretraživača: da li je određena HTML5 ili CSS3 funkcija podržana u različitim pretraživačima. Ako funkcija nije dostupna, može se učitati alternativni CSS ili JavaScript kod.

Ideja je direktno odrediti funkcionalnost pretraživač umjesto da pokušava instalirati određenu njegovu verziju. I na osnovu toga izvedite njegovu funkcionalnost, što je manje efikasan i pouzdan način.

Vrijedi napomenuti da Modernizr ne dodaje funkcije koje nedostaju pregledniku. Stoga ćete morati dati kod iz rezervnog CSS-a ili polifilla.

Prvo morate preuzeti potpuno funkcionalan sklop. Kasnije, kada budete spremni za razvoj, možete kreirati prilagođenu verziju sa specifičnim karakteristikama koje testirate. Sve što treba da uradite je da dodate .no-js klasu u HTML oznaku vašeg sajta i uključite Modernizr skriptu u sekciju head nakon bilo koje CSS datoteke:

Modernizr Demo Modernizr Demo

Ovo je Modernizr vježba.

Klasa .no-js se koristi za provjeru da li je JavaScript omogućen u pretraživaču korisnika. Ako je omogućeno, Modernizr će zamijeniti .no-js sa .js klasom. Modernizr-ova funkcija testiranja analizira da li je određena karakteristika podržana u pretraživaču i generiše niz klasa koje se dodaju HTML elementu. Google Chrome 47.0.2526.111, na primjer, će vratiti sljedeće klase objekata.

Modernizr je trenutno dostupan kao globalni objekat koji se može pozvati zajedno s imenom funkcije kako bi se provjerilo da li postoji. Vraća logičku vrijednost (tačno ili netačno).

Razmotrimo dva jednostavna CSS primjer i JavaScript.

Primjer rješavanja problema sa CSS-om u više pretraživača: provjera SVG podrške i pružanje PNG kao zamjenski

Trenutni trend je prema sve većoj upotrebi SVG (Scalable Vector Graphics), ali ova grafika nije podržana u IE8 i starijim verzijama. Ako je SVG podržan u pretraživaču, Modernizr generiše CSS klasu .svg. Ako SVG nije dostupan, alat dodaje .no-svg klasu u HTML. Sa CSS-om ispod, pretraživači koji podržavaju SVG će koristiti redovnu .logo klasu, dok će pretraživači koji ne podržavaju SVG koristiti .no-svg pravila:

Logo ( background-image: url("logo.svg"); širina: 164px; visina: 49px; ) .no-svg .logo ( background-image: url("/logo.svg"); širina: 164px; visina : 49px )

Primjer JavaScripta: Definiranje radijusa granice i dodavanje odgovarajućih CSS klasa

Zaokruživanje uglova okvira nije podržano u IE8 i niže. Možemo kreirati različite CSS klase koje se primjenjuju ovisno o prisutnosti funkcije border-radius:

// Klasa za pretraživač sa funkcijom border-radius .round-borders ( border-radius: 5px; ) // Klasa za pretraživač bez funkcije border-radius .black-borders ( border: 3px solid #000000; )

Sada možete koristiti JavaScript da pohranite ciljni ID kao varijablu, a zatim dodate CSS klase putem uslova:

var element = document.getElementById("TestID"); if (Modernizr.borderradius) ( element.className = "round-borders"; ) else ( element.className = "black-borders"; )

Zaključak

Kada je u pitanju responzivni web dizajn u starim pretraživačima ne postoji univerzalno rješenje. Važno je analizirati publiku resursa kako biste dobili ideju o stvarnom broju korisnika pretraživača. Zatim morate temeljito testirati web lokaciju kako biste identificirali potencijalne probleme s više pretraživača.

Svako ko se bavio web dizajnom naišao je na ovaj problem: kada svi pretraživači normalno prikazuju stil koji se primjenjuje na stranici, a samo jedan "kopile" unakaže stranicu. Najčešće to "kopile" postaje Internet pretraživač Explorer, posebno verzija 6 i starije, koji koristi otprilike 7-8% korisnika Interneta. Slažete se da je ovo dosta da ih jednostavno ignorišete. Iako drugi pretraživači (čak i moderni) ponekad pokažu iznenađenja. Stoga, kako bi bilo koji pretraživač ispravno prikazao vašu stranicu, izmišljeni su CSS hakovi.

CSS hak je posebna sintaksa stila koju razume samo jedan određeni pretraživač. Štaviše, CSS hakovi se često čak razlikuju za različite verzije istog pretraživača.

Međutim, prije nego što pređemo na CSS hakove, želio bih govoriti o drugom načinu razdvajanja stilova, koji je poželjniji: sa koristeći PHP ili JavaScript, u ​​kojem možemo odrediti tip i verziju pretraživača, te u skladu s tim povezati odgovarajući stilski fajl. Ovu metodu nećemo razmatrati, jer da biste je razumjeli, morate imati minimalni set poznavanje ovih jezika.

Drugi način je zbog činjenice da je glavni "dezerter", po pravilu, IE. Stoga je za to izmišljena posebna metoda, čak i bez upotrebe skripti. Sastoji se od uslovnih komentara na čelu dokumenta (unutar oznake). Radi samo za IE pretraživače, ali, po pravilu, ima problema sa njima, tako da ovu metodu može se naći vrlo često. izgleda ovako:

Ako se prevede na ruski, to će biti otprilike ovako: „Ako je korisnikov pretraživač IE, povežite stilski list iz datoteke css/ie.css".

Ako treba da navedete određenu verziju pretraživača, tada uz „IE“ morate uključiti i broj verzije. Na primjer ovako:

Kao što možete pretpostaviti, stil će se primijeniti samo na pretraživače IE verzije 6. Možda će biti potrebno navesti stilski list za pretraživače ispod određene verzije. U ovom slučaju se koristi ova sintaksa:

Ovaj stil će se primijeniti na sve verzije IE pretraživača ispod verzije 6. Ako umjesto "lt" stavimo "lte", to bi značilo niže ili ekvivalentno 6. verziji.

U većini slučajeva ovo znanje je već dovoljno i moramo se truditi da ne zahtijevamo više. Međutim, postoje situacije u kojima ove metode nisu sasvim razumne. Na primjer, u situaciji kada u ogromnoj CSS datoteci samo 1-2 stila trebaju poseban izgled za pojedinačne pretraživače. U ovom slučaju, glupo je kreirati posebnu ogromnu datoteku, koja se zatim povezuje preko skripti ili kroz takve uslove. Zbog toga su izmišljeni CSS hakovi za pretraživače, na koje sada prelazimo. I počećemo sa:

1) Internet Explorer. Ovaj CSS hak radi za verzije IE7 i starije. Kao što moje iskustvo pokazuje, IE8 pretraživač je već vrlo pristojan, tako da još nisam imao problema s njim. Ali za pretraživače IE7 i ispod pokazujem hak:

P(
* margin-top: 30px; # Za pretraživače IE7 i starije.
}

Kao što vidite, drugom svojstvu "margin-top" prethodi simbol "*". Ovo je CSS hak. To jest, ako stavite “*” ispred imena svojstva, onda će se ovo svojstvo primijeniti samo na pretraživače IE7 i starije. Zaključak: za sve pretraživače “margin-top” će biti “20px”, a za pretraživače IE7 i niže će biti “30px”. Ako treba da navedete stil samo za IE6 i niže (ovo se često dešava, jer su stvari mnogo bolje sa IE7 i najčešće nema potrebe za uređivanjem stila za ovaj pretraživač), onda postoji još jedan CSS hak:

P(
margin-top: 20px; # Za sve pretraživače
_margin-top: 30px; # Za pretraživače IE6 i starije.
}

Kao što nije teško primijetiti, drugom svojstvu prethodi znak “_”, što je CSS hak za pretraživače IE6 i starije.

2) Mozilla Firefox. Ovaj CSS hack radi samo za Mozilla pretraživači Firefox. Evo njegovog primjera:

P, x:-moz-any-link (
margin-top: 30px;
}

IN u ovom primjeru Izvještava se da će stil za "p" selektor biti primijenjen samo na pretraživače Mozilla Firefox, a svi ostali pretraživači će zanemariti ovaj stil.

3) Opera. Ovaj CSS hack se koristi za Opera pretraživači. Primjer njegove upotrebe:

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

I ovdje mislim da je sve jasno.

To je sve što sam htio napisati u ovom članku. Međutim, još jednom vas podsjećam da su CSS hakovi vrlo često ne prolaze provjere valjanosti koda, a to više nije dobro. Općenito, pokušajte ih ne koristiti ili ih koristite samo kao posljednje sredstvo. Općenito, preporučujem da se upoznate s njim, tada ćete imati manje problema povezanih s različitim prezentacijama stilova u pretraživačima.

Kao što znate, svi pretraživači ne tretiraju datoteke u stilu css na isti način. U osnovi, problemi nastaju sa starijim verzijama malog softvera za kreiranje Internet Explorera (verzija 7 i starije). Usput, ako se problem javlja u modernim pretraživačima (kao što su Opera, Mozilla Firefox, Chrome), onda ja toplo preporučujem pregledajte izgled stranice.

Evo ga. Postoji problem sa pretraživačima. I znam najmanje tri načina da riješim ovaj problem.

Metoda 1. Najispravniji

Napisani su stilovi za pretraživače koji ne razumiju vaš css ispravno zaseban fajl. Obično je ovaj pretraživač, kao što sam već rekao, Internet Explorer, a ove datoteke se zovu fix-ie.css

... ... ...

Mijenjamo ThemeName u pravi naziv vaše teme - a kada otvorite Internet Explorer verzije 7 i niže - ova datoteka će biti dodana u opći skup stilskih datoteka, pa čak i keširana ako je keširanje omogućeno.

Ova linija je odgovorna za verziju pretraživača na koju će biti povezana datoteka stila: