Paskelbta: 2011-07-06

Dar kartą aprašysiu visiems žinomus ir 100 500 kartų anksčiau aprašytus įsilaužimus skirtingoms naršyklėms.

Pateiksiu įsilaužimo apibrėžimą iš Vlado Merževičiaus svetainės htmlbook.ru: „Įsilaužimas yra technikų rinkinys, kuriuo siekiama nustatyti tam tikro elemento stilių vienai naršyklei, kuris skirtųsi nuo kitų naršyklių stiliaus“.

Visų pirma, domėjausi dabartiniais veikiančiais sprendimais, todėl visus pavyzdžius išbandžiau naujausiose naršyklių versijose, išskyrus IE (Opera 11, Firefox 4, Chrome 13, Safari 5, IE 8).

Internet Explorer

Labiausiai „nepatinkanti“ naršyklė iš kitų. Be to, kiekviena versija yra „skirtinga“ savaip. Tačiau priimkime realybę tokią, kokia ji yra. Tačiau realybė yra tokia, kad įsilaužimai skirtingos versijos Kuriant IE jų reikia pakankamai, kad būtų galima sudėti į atskirą failą ir įkelti tik šiai naršyklių šeimai. Norėdami tai padaryti, HTML dokumento skiltyje, kurią „Internet Explorer“ gali atpažinti, parašysime komentarą.

Kaip sąlygą galite naudoti šiuos raktinius žodžius:

• IE – bet kuri Internet Explorer naršyklės versija;
• IE 7 – Internet Explorer 7;
• IE 8 – Internet Explorer 8;
• IE 9 – Internet Explorer 9;
• lt - naršyklės versijos numeris mažesnis nei nurodyta;
• gt - versijos numeris didesnis nei nurodyta;
• lte - versijos numeris mažesnis arba lygus nurodytam;
• gte - naršyklės versijos numeris didesnis arba lygus nurodytam.

Galbūt atskirai atkreipsiu dėmesį į kitą IE 7 įsilaužimą: žvaigždutę prieš parinkiklio pavadinimą. Pavyzdžiui:

#example (
spalva: žalia;
* spalva: raudona;
}

Chrome ir Safari

Nusilaužimas naršyklėms, pagrįstoms žiniatinklio rinkinio varikliu – „Chrome“ ir „Safari“:

@medijos ekranas ir (-webkit-min-device-pixel-ratio:0) (
#example (
spalva: raudona;
}

}

Firefox

@-moz-document url-prefix() (
#example (
spalva: raudona;
}

}

Opera

„Opera“ nėra universalių įsilaužimų! Taip, žinoma, „Opera“ įsilaužimų galite rasti internete, tačiau, deja, ši informacija yra šiek tiek pasenusi. Kažkada buvo įsilaužimas, bet viskas paaiškėjo:

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


}

Hmm, jei yra įsilaužimų visoms naršyklėms, bet ne Opera, galima daryti logišką išvadą: pirmiausia reikia sukurti Opera, o tada nušlifuoti maketą kitoms naršyklėms. Kaip į tai žiūrite?

UPD 08/09/11: Naujausi pranešimai iš priekio: Habré buvo rastas įsilaužimas į Opera. kaip tai:

@media all and (-webkit-min-device-pixel-ratio:10000),
ne visi ir ( -webkit-min-device-pixel-ratio : 0 ) (
#pavyzdys ( spalva : raudona ; )
}

Tačiau labai rekomenduoju jo nenaudoti. Kaip argumentą pateiksiu Vadimo Makejevo (dar žinomo kaip Pepelsbey) komentarą: "Šie įsilaužimai priklauso nuo neišsamios arba klaidingos medijos užklausų palaikymo ir gali nutrūkti su bet kokiu nedideliu naršyklės atnaujinimu, kuris pataiso ar papildo palaikymą. Nešaudykite sau į koją naudodami potencialiai pavojingus įsilaužimus.". Tiesą sakant, tai atsitiko su pirmuoju šiame straipsnyje paminėtu operos įsilaužimu.

Remdamiesi tuo, vis dar manome, kad geriausias „Opera“ naršyklės įsilaužimas yra kompetentingas, tinkamas išdėstymas.

6,5 tūkst

Kelių naršyklių suderinamumas – tai svetainės gebėjimas tinkamai rodyti skirtingos naršyklės. Išteklius turėtų veikti vienodai visose naršyklės versijose.

Tai ypač svarbu interaktyvaus interneto dizaino eroje, kai priekinės dalies gebėjimas prisitaikyti prie įvairių įvairių įrenginių tuo pačiu užtikrinant optimalią žiūrėjimo patirtį.

Anksčiau dizaineris sukurdavo dizaino maketą „Photoshop“, kuris vėliau būdavo perkeltas į HTML ir CSS. Šiandien technologiniai pokyčiai verčia permąstyti šią koncepciją. Nebegalime numatyti, kokia naršyklė, raiška ar įrenginys bus naudojamas svetainei peržiūrėti. Jau praėjo laikai, kai dauguma kompiuterių naudojo fiksuotą 1024 x 768 pikselių skiriamąją gebą, o svetaines buvo galima suprojektuoti pagal statinius matmenis.

Šiuolaikinės naršyklės visiškai palaiko HTML5 ir CSS3. Tačiau tas pats HTML/CSS/JavaScript kodas senesnėse naršyklėse interpretuojamas skirtingai, todėl svetainė nesuderinama su įvairiomis naršyklėmis. Tai ypač pasakytina apie senus Internetinės versijos Tyrinėtojas.

Šiame straipsnyje apžvelgsime dabartinę tinklalapių peržiūrų statistiką ir pateiksime įrankių, padedančių išspręsti įvairias suderinamumo problemas, sąrašą.

1. Dabartinė situacija

Pasaulinė 2015 m. statistika rodo, kad 14 populiariausių naudojamų ekrano skiriamųjų gebų svyruoja nuo 1920 x 1080 iki 320 x 480 pikselių.

Nors „Windows 7“ (31,20 proc.) vis dar užima didelę rinkos dalį, mobiliosios platformos pradeda keisti tradicines darbalaukio platformas.

Žvelgdami į 2015 metų statistiką apie naudotas naršykles, matome, kad pirmoje vietoje yra Chrome (visos versijos – 44,87%), antroje – Firefox (visos versijos – 10,37%), trečioje – Internet Explorer 11 (6,84%).

Pagreitintas naujų išleidimo greitis Google versijos„Chrome“ ir „Firefox“ leidžia efektyviau kurti šių platformų projektus. Šiek tiek kitoks vaizdas susidaro apie „blogiuką“ Internet Explorer, nes internete vis dar galima rasti senų jos versijų. Dėl to kyla problemų dėl svetainės suderinamumo tarp naršyklių.

„Microsoft“ nustojo palaikyti IE6 2014 m. balandžio 8 d. O nuo 2016 m. bus palaikoma ir atnaujinama tik naujausia „Internet Explorer“ versija. Tai iš tikrųjų reiškia, kad IE7 ir IE8 palaikymas buvo visiškai panaikintas 2016 m. pradžioje, nepaisant operacinė sistema. IE9 bus palaikomas tik Windows Vista, IE10 – tik in „Windows Server“. 2012 m., IE11 – „Windows 7“ ir „Windows 8.1“:

Dėl to turime nustoti kurti IE6 ir IE7. Norėdami pagrįsti šią strategiją, pateikiame keletą žinomų kompanijų sprendimų pavyzdžių: „Google“ nustojo palaikyti IE8 2012 m. lapkritį, o IE9 – 2013 m. spalį.

„Github“ nebepalaiko IE 7 ir 8. Be to, kai kurios „Twitter“ funkcijos neveikia IE8. Ir galiausiai, populiari sistema nepalaikys IE8, pradedant nuo 4 versijos.

Tačiau naudojimo statistika gali skirtis priklausomai nuo regiono – 6,11 % vartotojų Kinijoje vis dar naršo IE8 2015 m. Jei atsižvelgsime į tai, kad Kinijoje buvo maždaug 724 400 000 interneto vartotojų, galima suprasti, kad maždaug 44 200 000 kinų šiais metais toliau naudojasi IE8.

Todėl regioninės rinkos, konkretūs klientai ir pramonės reikalavimai gali labai skirtis. Tai ypač aktualu įmonėms ir vyriausybinėms agentūroms.

2. Analizuokite savo auditoriją

Pagrindinis principas yra toks: kuo didesnis reikalingas kelių naršyklių suderinamumas, tuo daugiau laiko reikės kurti, o tai padidina projekto išlaidas. Norėdami priimti pagrįstą, ekonomiškai pagrįstą sprendimą, turite užduoti sau šiuos klausimus:

• Kokia jūsų tikslinė auditorija?
• Į kurį geografinį regioną turėtumėte taikyti?
• Kokias naršykles ir įrenginius naudoja jūsų lankytojai?
• Ar jūsų įmonėje ar pramonėje yra techninių veiksnių, kurie verčia jus palaikyti konkrečias senesnių naršyklių versijas?
• Kokie yra skirtingų vartotojų grupių konversijų rodikliai ir IG pagal naršyklės versiją el. prekybos požiūriu?

Atsakydami į šiuos klausimus naudodami statistinius duomenis, pavyzdžiui, iš Google Analytics, galite susidaryti objektyvų vaizdą.

3. Problemos su senomis naršyklėmis ir skirtingais kūrimo būdais

Interaktyvus žiniatinklio dizainas labai priklauso nuo medijos užklausų, kad būtų galima modifikuoti CSS skirtingoms ekrano skyroms. Be to, šiuolaikinėms svetainėms būdingas HTML5 semantinių elementų (pvz., , , , , ) naudojimas dizaino komponentams grupuoti. CSS3 parinkikliai naudojami konkretiems elementams pasirinkti ir tada priskirti stilius (pvz., , :checked , :nth-child(n) , :not(selector) , :last-child) ). Galiausiai, reaguojanti tipografija dažnai nurodoma naudojant REM (root em) vienetus.

Dėl to susiduriame su šiais techniniais iššūkiais diegiant CSS suderinamumą tarp naršyklių:

• CSS3 medijos užklausos
• HTML5 semantiniai elementai: nepalaikomi IE6, 7 ir 8;
• CSS3 parinkikliai: nepalaikoma IE6. Tik iš dalies palaikoma IE7 ir 8;
• REM įrenginiai: nepalaikomi IE6, 7 ir 8. Tik iš dalies palaikoma IE9 ir 10;
• CSS taisyklių apribojimas: IE9 ir senesnės versijos palaiko tik 4095 CSS parinkiklius. Taisyklės po 4095-ojo rinkiklio netaikomos.

Minėtos klaidos turės didžiausią įtaką strategijai, naudojamai diegiant responsive dizainą.

Yra dvi pagrindinės plėtros strategijos: laipsniškas supaprastinimas ir laipsniškas tobulinimas.

Progresyvus tobulinimas – remiantis principu pradėti plėtrą nuo bendro vardiklio, nuo minimumo techninius reikalavimus ir svetainės siūlomos naudotojo patirties lygis. Lankytojai, patekę į svetainę per naujausios versijos naršyklėse ir įrenginiuose, bus aptarnaujama palaipsniui plečiama svetainės versija su visomis naujausiomis funkcijomis.

Kita vertus, senesnių naršyklių ir lėto interneto ryšio naudotojams bus pasiūlyta grafiškai išardyta, bet vis dar funkcionali svetainės versija.

Šis požiūris į kelių naršyklių suderinamumą apima kūrimo pradžią nuo paprastos versijos, kuri vėliau pridedama sudėtingesnių elementų. Senesnės naršyklės galės rodyti svetainę su bazinis lygis sąveikos patirtis. Naujos HTML/CSS/JavaScript funkcijos bus pasiekiamos naršyklėse, kurios iš tikrųjų gali jas naudoti.

Priešingai, laipsniškas supaprastinimas suteikia visiškai funkcionalų UX lygį šiuolaikinėse naršyklėse. Ir tada palaipsniui sumažina sudėtingumą senesnėms naršyklėms dėl grafikos, tačiau neliečia funkcionalumo. Idėja yra pradėti kurti naudojant naujausius žiniatinklio standartus ir tada pabandyti sumažinti su senesnėmis naršyklėmis susijusias problemas.

Kokį metodą pasirinksite, priklauso nuo asmeninių pageidavimų ir projekto sąlygų:

• Laipsniškas tobulinimas suteikia didesnį stabilumą, nes galite palaipsniui pridėti naujų funkcijų prie šiuolaikinių naršyklių. Tačiau tam reikia kruopštesnio planavimo;
• Kai kurie kūrėjai teigia, kad nėra prasmės palaikyti pasenusias naršykles ir jas reikėtų naudoti naujausias technologijas. Šiuolaikinių naršyklių palaikymas suteikia daug geresnę vartotojo patirtį;
• Manoma, kad laipsniškas tobulinimas yra miręs, nes daugelis „JavaScript“ programų netinkamai veikia su šiuo metodu;
• Interneto prieinamumui viešosioms institucijoms gali būti taikomi vietiniai teisiniai reikalavimai ir gali prireikti specifinio požiūrio.

Atsiradus funkcijų aptikimo įrankiams, pvz., „Modernizr“, aš asmeniškai linkiu naudoti laipsnišką supaprastinimą ir naršyklės juodąjį sąrašą, kurdamas suderinamas svetaines.

4. Testavimas, bandymas, bandymas...

Norėdami kuo greičiau aptikti galimas „JavaScript“ kelių naršyklių problemas, kurdami svetainę turėtumėte išbandyti skirtingose ​​naršyklėse ir skyrose. Yra įvairių programinės įrangos emuliatoriai kas gali mums padėti:

• Browserstack yra komercinė paslauga, suteikianti prieigą prie bandomosios aplinkos, kurioje galite išbandyti savo projektą daugiau nei 700 stalinių kompiuterių naršyklių ir mobiliuosius įrenginius naudojant virtualią mašiną debesyje;
• „Microsoft“ virtualios mašinos – jei naudojate „Linux“, neturėsite prieigos prie „Internet Explorer“. Sprendimas gali būti vaizdų atsisiuntimas virtualios mašinos IE6–IE11, kuriuos vėliau galima naudoti kartu su „Oracle VM Virtualbox“ arba „Vagrant“ vietiniam testavimui;
• Naudojant internetinę paslaugą Screenfly galima greitai išbandyti skirtingas konkrečios naršyklės ekrano skiriamąsias gebas. Naudojant naršyklės papildinius, pvz., Window Resizer for Google Chrome, arba tiesiogiai įrankių skiltyje Chrome kūrėjai ir Firefox.

5. Normalize.css ir CSS automatinis prefiksatorius

Paprastai naujus projektus pradedu iš naujo nustatydamas CSS naudodamas Normalize.css, kuris užtikrina geresnį suderinamumą tarp naršyklių nustatant numatytuosius HTML elementų stilius iki 8 versijos Internet Explorer. Normalize.css išsaugo reikiamus elementų stilius ir juos normalizuoja išvaizda ir ištaiso daugybę klaidų ir neatitikimų įvairiose naršyklėse.

Be to, daugelis senų naršyklių negali interpretuoti nežinomų HTML elementų ir CSS savybės. Kai naršyklė aptinka nesuprantamą HTML arba CSS fragmentą, ji to nepaiso ir tęsia atvaizdavimo procesą. Daugelis programų naudoja tiekėjo priešdėlius, kad pridėtų naujų, eksperimentinių ar nestandartinių CSS funkcijos prieš juos įgyvendinant specifikacijoje:

// Webkit naršyklės, pvz., Chrome ir Safari -webkit- // Firefox -moz- // Internet Explorer -ms- // Opera -o-

Problema ta, kad priešdėliai yra nepatogu naudoti ir su jais yra daug klaidų. Taigi aš naudoju CSS Autoprefixer įskiepį kartu su Grunt.

Įprastas CSS taisykles apdoros papildinys ir jas sudarys priešdėlis pagal duomenų bazę „Ar galiu naudoti“. Rekomenduojama konfigūracijoje nurodyti naršyklių versijas, kurias reikia palaikyti, pavyzdžiui:

parinktys: ( naršyklės: ["paskutinės 2 versijos", "ty >= 8", "Firefox >= 12", "iOS >= 7", "Android >= 4"] )

Kaip pavyzdį apsvarstykite šią CSS klasę:

Pavyzdys (fono vaizdas: linijinis gradientas (viršuje kairėje, #4676dd, #00345b); ekranas: lankstus; perėjimas: 1s all; )

SU naudojant CSS Autoprefixer konvertuoja jį į:

Pavyzdys ( background-image: -webkit-linear-gradient(viršuje kairėje, #4676dd, #00345b); background-image: -moz-linear-gradient(viršuje kairėje, #4676dd, #00345b); background-image: linear- gradientas (viršuje kairėje, #4676dd, #00345b: -webkit-flex: -ms-flexbox: 1s all;

6. Sąlyginiai komentarai

Jei reikia sukurti atsarginį CSS arba įgalinti kelių naršyklių „JavaScript“ ankstesnėms „Internet Explorer“ versijoms, galite naudoti sąlyginius komentarus. Jie palaikomi „Internet Explorer 5–9“, jie naudoja HTML komentarų sintaksę kartu su loginėmis reikšmėmis. Priklausomai nuo loginės reikšmės (true ar false), komentarų žymose esantis kodas bus rodomas arba paslėptas atitinkamose naršyklės versijose:

KODAS, KURIS BUS VYKDYTAS // jei Internet Explorer // jei NE Internet Explorer // jei NE Internet Explorer 7 // jei NE Internet Explorer 7 // jei Internet Explorer 9 arba LOWER // jei Internet Explorer 7 arba HIGHER // jei Internet Explorer 6 ARBA 7 // jei AUKŠTESNĖ „Internet Explorer 6“, BET MAŽIAU 9

Kodas automatiškai paslepiamas visose naršyklėse, kurios nepalaiko sąlyginių komentarų. Puikus pavyzdys, kaip sąlyginius komentarus galima efektyviai panaudoti praktikoje, yra HTML5 Boilerplate, kuri prideda konkrečias CSS klases. pasenusios versijos Internet Explorer:

7. Polifills

Techninius senų naršyklių, skirtų interaktyviam interneto dizainui, neatitikimus galima ištaisyti naudojant polifillą. Tai yra „JavaScript“ kodo dalis, kuri „užpildo“ konkrečią funkcinę spragą tarp senos naršyklės ir funkcijos. Yra keletas polifillų, kuriuos galima naudoti norint teikti naršyklės palaikymą HTML5 funkcijoms.

Toliau pateikiami keli užpildymai, skirti pašalinti 3 punkte minėtas svetainės tarp naršyklių problemas:

• answer.js – įgyvendina CSS3 medijos užklausas, skirtas Internet Explorer 6–8;
• html5shiv leidžia naudoti HTML5 semantinius elementus naršyklėje Internet Explorer 6–8;
• selectivzr – emuliuoja CSS3 parinkiklius ir pseudoklases „Internet Explorer 6–8“. Visiškam palaikymui reikalinga Mootools 1.3 arba NWMatcher 1.2.3. Dalinis palaikymas pasiekiamas naudojant JQuery 1.3/1.4;
• REM-unit-polyfill – nustato, ar naršyklė palaiko rem vienetus, ir pateikia atsarginį variantą. Veikia su IE8 ir senesnėmis versijomis.

Norint naudoti nurodytus polifilius, jie turi būti pridėti iš CDN arba kaip tinkamo formato failas skilties sąlyginiuose komentaruose (nepamirškite įtraukti vienos iš JavaScript bibliotekų, reikalingų Selectivizr):

Kiekvienam projektui reikia įvertinti, ar šie papildomi scenarijai tikrai reikalingi, nes gali kilti našumo problemų. Dauguma polifillų yra kompaktiški, tačiau kiekvienas papildomas įkeliamas scenarijus reiškia papildomą HTTP užklausą. Tai gali sulėtinti puslapio įkėlimą.

8. Funkcijų apibrėžimas naudojant Modernizr

„Modernizr“ biblioteka, parašyta „JavaScript“, padės patikrinti svetainės suderinamumą su keliomis naršyklėmis: ar tam tikra HTML5 ar CSS3 funkcija palaikoma skirtingose ​​naršyklėse. Jei funkcija nepasiekiama, gali būti įkeltas alternatyvus CSS arba JavaScript kodas.

Idėja yra tiesiogiai nustatyti funkcionalumą naršyklę, o ne bandydami įdiegti konkrečią jos versiją. Remdamiesi tuo, nustatykite jo funkcionalumą, o tai yra mažiau efektyvus ir patikimas būdas.

Verta paminėti, kad „Modernizr“ neprideda prie naršyklės trūkstamų funkcijų. Todėl turėsite pateikti kodą iš atsarginio CSS arba polifilio.

Pirmiausia turite atsisiųsti visiškai funkcionalų rinkinį. Vėliau, kai būsite pasiruošę kurti, galėsite sukurti pasirinktinį kūrinį su konkrečiomis testuojamomis funkcijomis. Viskas, ką jums reikia padaryti, tai pridėti .no-js klasę prie savo svetainės HTML žymos ir įtraukti Modernizr scenarijų į head skyrių po bet kurio CSS failo:

Modernizavimo demonstracija Modernizavimo demonstracija

Tai Modernizr pratimas.

.no-js klasė naudojama patikrinti, ar vartotojo naršyklėje įjungta JavaScript. Jei įjungta, Modernizr pakeis .no-js .js klase. „Modernizr“ testavimo funkcija analizuoja, ar tam tikra funkcija palaikoma naršyklėje, ir sukuria eilę klasių, kurios pridedamos prie HTML elemento. Pavyzdžiui, „Google Chrome“ 47.0.2526.111 pateiks šias objektų klases.

Šiuo metu „Modernizr“ yra visuotinis objektas, kurį galima iškviesti kartu su funkcijos pavadinimu, kad būtų galima patikrinti, ar jis egzistuoja. Jis grąžina loginę reikšmę (true arba false).

Panagrinėkime du paprastus dalykus CSS pavyzdys ir JavaScript.

CSS kelių naršyklių problemų sprendimo pavyzdys: SVG palaikymo patikrinimas ir PNG kaip atsarginio pavadinimo pateikimas

Dabartinė tendencija yra vis dažniau naudoti SVG (Scalable Vector Graphics), tačiau ši grafika nepalaikoma IE8 ir senesnėse versijose. Jei naršyklėje palaikomas SVG, Modernizr generuoja CSS klasę .svg . Jei SVG nėra, įrankis prideda .no-svg klasę prie HTML. Naudojant toliau pateiktą CSS, SVG palaikančios naršyklės naudos įprastą .logo klasę, o SVG nepalaikančios naršyklės naudos .no-svg taisykles:

Logotipas (fono vaizdas: url("logo.svg"); plotis: 164px; aukštis: 49px; ) .no-svg .logo (fono vaizdas: url("/logo.svg"); plotis: 164px; aukštis : 49px)

„JavaScript“ pavyzdys: kraštinės spindulio apibrėžimas ir atitinkamų CSS klasių pridėjimas

Rėmo kampų apvalinimas nepalaikomas IE8 ir senesnėse versijose. Galime sukurti skirtingas CSS klases, kurios taikomos atsižvelgiant į tai, ar yra sienos spindulio funkcija:

// Klasė naršyklei su border-radius funkcija .round-borders ( border-radius: 5px; ) // Klasė naršyklei be border-radius funkcijos .black-borders ( border: 3px solid #000000; )

Dabar galite naudoti „JavaScript“, kad išsaugotumėte tikslinį ID kaip kintamąjį ir tada pridėtumėte CSS klases naudodami sąlygą:

var element = document.getElementById("TestID"); if (Modernizr.borderradius) ( element.className = "apvalios kraštinės"; ) else ( element.className = "juodos sienos"; )

Išvada

Kai kalbama apie responsive web dizainas senosiose naršyklėse universalaus sprendimo nėra. Svarbu išanalizuoti šaltinio auditoriją, kad susidarytumėte supratimą apie tikrąjį naršyklės vartotojų skaičių. Tada turite kruopščiai išbandyti svetainę, kad nustatytumėte galimas kelių naršyklių problemas.

Kiekvienas, kuris buvo susijęs su žiniatinklio kūrimu, susidūrė su šia problema: kai visos naršyklės paprastai rodo puslapiui taikomą stilių, o tik vienas „niekšas“ iškraipo puslapį. Dažniausiai šis „niekšas“ tampa Interneto naršyklė Explorer, ypač 6 ir senesnės versijos, kuria naudojasi maždaug 7-8% interneto vartotojų. Sutikite, kad tai yra gana daug, kad į juos tiesiog nekreiptume dėmesio. Nors kitos naršyklės (net ir šiuolaikinės) kartais pateikia netikėtumų. Todėl, kad bet kuri naršyklė tinkamai parodytų jūsų puslapį, buvo išrasti CSS įsilaužimai.

CSS įsilaužimas yra speciali stiliaus sintaksė, kurią supranta tik viena konkreti naršyklė. Be to, CSS įsilaužimai dažnai netgi skiriasi skirtingoms tos pačios naršyklės versijoms.

Tačiau prieš pereinant prie CSS įsilaužimų, norėčiau pakalbėti apie kitą stilių atskyrimo būdą, kuris yra labiau priimtinesnis: su naudojant PHP arba JavaScript, kuriame galime nustatyti naršyklės tipą ir versiją bei pagal tai prijungti atitinkamo stiliaus failą. Mes nenagrinėsime šio metodo, nes norėdami jį suprasti, turite turėti minimalus rinkinysšių kalbų mokėjimas.

Kitas būdas yra dėl to, kad pagrindinis „dykumininkas“, kaip taisyklė, yra IE. Todėl jai buvo išrastas atskiras metodas, net ir nenaudojant scenarijų. Jį sudaro sąlyginiai komentarai dokumento pradžioje (žymos viduje). Tai veikia tik IE naršyklėse, tačiau, kaip taisyklė, su jomis yra problemų, todėl šis metodas galima rasti labai dažnai. Tai atrodo taip:

Jei išverstas į rusų kalbą, tai bus maždaug taip: „Jei vartotojo naršyklė yra IE, prijunkite stiliaus lapą iš failo css/ie.css".

Jei reikia nurodyti konkrečią naršyklės versiją, kartu su „IE“ turite nurodyti ir versijos numerį. Pavyzdžiui taip:

Kaip galite spėti, stilius bus taikomas tik 6 versijos IE naršyklėms. Taip pat gali prireikti nurodyti stiliaus lapą naršyklėms, kurios yra žemesnės nei tam tikros versijos. Šiuo atveju naudojama ši sintaksė:

Šis stilius bus taikomas visoms IE naršyklių versijoms, senesnėms nei 6 versija. Jei vietoj „lt“ dėtume „lte“, tai reikštų žemesnę arba lygiavertę 6-ai versijai.

Daugeliu atvejų šių žinių jau pakanka, ir turime stengtis nereikalauti daugiau. Tačiau yra situacijų, kai šie metodai nėra visiškai pagrįsti. Pavyzdžiui, tokioje situacijoje, kai didžiuliame CSS faile tik 1–2 stiliams reikia ypatingos atskirų naršyklių išvaizdos. Tokiu atveju yra kvaila sukurti atskirą didžiulį failą, kuris vėliau sujungiamas per scenarijus arba tokias sąlygas. Štai kodėl buvo išrasti CSS įsilaužimai naršyklėms, prie kurių dabar pereiname. Ir pradėsime nuo:

1) Internet Explorer. Šis CSS įsilaužimas veikia IE7 ir senesnėse versijose. Kaip rodo mano patirtis, IE8 naršyklė jau yra labai padori, todėl problemų su ja dar neturėjau. Tačiau IE7 ir senesnėse naršyklėse rodau įsilaužimą:

P(
* paraštės viršus: 30 piks.; # IE7 ir senesnėms naršyklėms.
}

Kaip matote, prieš antrąją savybę „margin-top“ yra simbolis „*“. Tai CSS įsilaužimas. Tai yra, jei prieš nuosavybės pavadinimą įterpsite „*“, ši ypatybė bus taikoma tik IE7 ir senesnės versijos naršyklėms. Išvada: visoms naršyklėms „margin-top“ bus „20px“, o naršyklėse IE7 ir žemesnėse – „30px“. Jei jums reikia nurodyti stilių tik IE6 ir senesnėms versijoms (taip dažnai nutinka, nes su IE7 viskas yra daug geriau ir dažniausiai nereikia redaguoti šios naršyklės stiliaus), tada yra dar vienas CSS įsilaužimas:

P(
paraštė viršuje: 20 piks.; # Visoms naršyklėms
_margin-top: 30px; # IE6 ir senesnėms naršyklėms.
}

Kaip nesunku pastebėti, prieš antrąją ypatybę yra ženklas „_“, kuris yra CSS įsilaužimas IE6 ir senesnėms naršyklėms.

2) „Mozilla Firefox“.. Šis CSS įsilaužimas veikia tik Mozilla naršyklės Firefox. Štai jo pavyzdys:

P, x:-moz-bet-nuoroda (
paraštė viršuje: 30 piks.;
}

IN šiame pavyzdyje Pranešama, kad „p“ parinkiklio stilius bus taikomas tik „Mozilla Firefox“ naršyklėms, o visos kitos naršyklės šio stiliaus nepaisys.

3) Opera. Šis CSS įsilaužimas naudojamas Opera naršyklės. Jo naudojimo pavyzdys:

* |html p (
paraštė viršuje: 30 piks.;
}

Čia manau viskas irgi aišku.

Tai viskas, ką norėjau parašyti šiame straipsnyje. Tačiau dar kartą primenu, kad CSS įsilaužimai yra blogi labai dažnai jie nepraeina kodo galiojimo patikrinimų, ir tai jau nėra gerai. Apskritai stenkitės jų nenaudoti arba naudokite tik kraštutiniu atveju. Apskritai rekomenduoju su juo susipažinti, tada turėsite mažiau problemų, susijusių su skirtingu stilių pateikimu naršyklėse.

Kaip žinote, ne visos naršyklės css stiliaus failus apdoroja vienodai. Iš esmės problemų kyla dėl senesnių mažos programinės įrangos kūrimo Internet Explorer versijų (7 ir senesnės versijos). Beje, jei problema kyla šiuolaikinėse naršyklėse (pvz., Opera, Mozilla Firefox, Chrome), tada I labai rekomenduoju peržiūrėti puslapio išdėstymą.

Taigi čia yra. Yra problemų su naršyklėmis. Ir aš žinau bent tris būdus, kaip išspręsti šią problemą.

1 būdas. Pats teisingiausias

Naršyklėms, kurios neteisingai nesupranta jūsų css, yra įrašyti stiliai atskiras failas. Paprastai ši naršyklė, kaip jau sakiau, yra Internet Explorer, o šie failai vadinami fix-ie.css

... ... ...

Pakeičiame temos pavadinimą į tikrąjį jūsų temos pavadinimą, o kai atidarysite 7 ir senesnę „Internet Explorer“ versiją, šis failas bus įtrauktas į bendrą stiliaus failų rinkinį ir netgi bus išsaugotas talpykloje, jei įjungtas talpyklos saugojimas.

Ši eilutė yra atsakinga už naršyklės, prie kurios bus prijungtas stiliaus failas, versiją: