Senas naršyklės apibrėžimas naudojant css. CSS

Šiame straipsnyje apžvelgsime, kas yra naršyklės priešdėliai, kodėl jie egzistuoja ir kaip juos naudoti CSS.

Kas yra priešdėliai?

Pradedantis žiniatinklio kūrėjas, studijuojantis teorinius dalykus CSS pagrindai ir naudojant šias žinias praktikoje gali kilti problemų svarstant tikrus pavyzdžius. Dėl to jis gali neteisingai suprasti, kas vyksta, ir atgrasyti nuo tolesnio noro studijuoti šią technologiją.

Pavyzdžiui, svarstydamas svetainės stilius, žiniatinklio kūrėjas gali susidurti su savybėmis, kurių priekyje yra nesuprantamų žodžių: -webkit-, -moz-, -ms- ir kt.

* ( -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; )

Kas tai? Tiesą sakant, viskas paprasta, šie keisti žodžiai yra šių naršyklių priešdėliai:

-Webkit-: Chrome naršyklės, Safari, Opera;
-moz- : Mozilla naršyklė Firefox;
-ms-: naršyklė Internet Explorer.

Taigi, jei prieš ypatybės pavadinimą yra priešdėlis, tai reiškia, kad ši savybė įdiegta ir bus naudojama tik nurodytoje naršyklėje. Visos kitos naršyklės nepaisys šios savybės, nes jiems šis priešdėlis nežinomas.

Priešdėlių atsiradimo priežastys?

Priešdėlių atsiradimo priežastys buvo kelios:

Į naršyklę įtraukti eksperimentines CSS ypatybes, kurių standartas dar nepatvirtino. Taigi, naršyklės pardavėjai išbando ir pateikia pasiūlymus prieš priimdami CSS ypatybes į standartą.
Norėdami išspręsti problemas, susijusias su kelių naršyklių suderinamumu.
Norėdami sukurti savo ypatybes, kurios nėra įtrauktos į CSS standartą, bet gali atsirasti jame po kurio laiko.

Kai eksperimentinė nuosavybė patvirtinama standarte ir išbandoma naršyklėje, jos priešdėlis paprastai pašalinamas.

Kaip naudoti priešdėlius?

Apsvarstykite šį kodą kaip pavyzdį:

* ( -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; )

Šis kodas taiko CSS ypatybes, kurios pakeičia visų tinklalapio elementų pločio ir aukščio skaičiavimo algoritmą. Pirmoji CSS ypatybė -webkit-box-sizing su border-box reikšme skirta naršyklėms, naudojančioms webkit (Safari) arba blink (Chrome, Opera, Yandex.Browser) variklį. Antroji CSS savybė -moz-box-sizing su reikšme border-box yra skirta naršyklėms, naudojančioms Gecko variklį ( Mozilla Firefox). Paskutinė CSS nuosavybė skirta naršyklėms, kuriose ši nuosavybė jau buvo išbandyta ir įdiegta pagal standartą.

Naudodami CSS ypatybių priešdėlius, turite atsiminti, kad jie turėtų būti dedami prieš CSS nuosavybę be priešdėlio. Kodėl tai taip svarbu? Tai svarbu, nes jei kada nors naršyklė įdiegs pradinę ypatybę (be priešdėlio), tada ji bus naudojama (nes ji yra paskutinė), o ne eksperimentinė versija.

Pavyzdžiui: CSS nuosavybės taikymas visiems tinklalapio elementams Google naršyklė „Chrome“ versijos 40.

Aukščiau esančiame paveikslėlyje matote, kad pirminė dėžutės dydžio ypatybė jau įdiegta šioje naršyklėje, o kadangi ji yra paskutinė, naršyklė ją naudoja, o ne pirmiau nurodytą žiniatinklio rinkinio dėžutės dydžio ypatybę.

Kaip patikrinti konkrečios nuosavybės palaikymą naršyklėje?

Svetainę, kurioje galite patikrinti, ar ši nuosavybė įdiegta konkrečioje naršyklėje, rasite žemiau esančioje nuorodoje. Be to, svetainėje procentais rodomas vartotojų, kurie naudojasi šia naršyklės versija, skaičius.

Svetainė "Ar galiu naudoti..."

Pavyzdžiui: patikrinkime, kaip transformavimo ypatybė įdiegta naršyklėse.

„CaniUse“ svetainėje naršyklės pažymėtos skirtingomis spalvomis, atsižvelgiant į palaikymo būseną. tam tikros savybės arba žymės:

Raudonas stačiakampis yra naršyklė, kurioje ši savybė neįdiegta;
Žalias stačiakampis su brūkšneliu viršutiniame dešiniajame kampe yra naršyklė, kurioje ši ypatybė naudojama naudojant priešdėlį;
Šviesiai žalias stačiakampis yra naršyklė, kurioje ši savybė iš dalies įdiegta;
Žalias stačiakampis yra naršyklė, kurioje ši savybė įdiegta pagal standartą.

Kaip žinote, ne visos naršyklės failus suvokia vienodai css stiliai. 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 rekomenduojama 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

Stiliai naršyklėms, kurios tinkamai nesupranta jūsų css, įrašomi atskirame faile. 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ą:

kur styles.css yra failas, kuris bus atsakingas tik už IE skirtus stilius.

Vienintelis žinomas Šis momentas būdas rašyti tik skirtus stilius Google Chrome naudojant JavaScript. Jums nereikia žinoti JS, tiesiog paimkite pavyzdį iš čia ir pritaikykite jį savo poreikiams.

Esmė ta, kad mes patikriname, kokią naršyklę naudoja svetainės lankytojas ir jei tai yra Google Chrome, tada prijungiame ją už jį papildomas failas stilius, kuriuose reikiamos savybės, kurios gali sutapti pagrindiniame stiliaus faile, pasirinkite !important.

skyriuje, žymos viduje pridėkite šias eilutes):

var isChrome = !!window.chrome && !!window.chrome.webstore; if (isChrome) ( var $ = dokumentas; var cssId = "manoCss"; var head = $.getElementsByTagName("head"); var nuoroda = $.createElement("link"); link.id = cssId; link.rel = "stylesheet" link.type = "text/css" = "/css/template.css";

Vienintelis šiuo metu žinomas būdas rašyti tik „Opera“ stilius naudojant „JavaScript“. Jums nereikia žinoti JS, tiesiog paimkite pavyzdį iš čia ir pritaikykite jį savo poreikiams.

Esmė ta, kad patikriname, kokią naršyklę naudoja svetainės lankytojas ir jei tai yra Opera, tada jai prijungiame papildomą stiliaus failą, kuriame reikiamos savybės, kurios gali sutapti pagrindiniame stiliaus faile, pasirenkame !important.

Sintaksė yra tokia (.php arba .html faile, kur įtraukiame stiliaus failą, t. y. skyriuje, žymos viduje pridėkite šias eilutes):

var isOpera = !!window.opera || /opera|opr/i.test(navigator.userAgent); if (isOpera) ( var $ = dokumentas; var cssId = "manoCss"; var head = $.getElementsByTagName("head"); var link = $.createElement("link"); link.id = cssId; link.rel = "stylesheet" link.type = "text/css" link.href = "/css/template.css" //kelias į tik Opera stiliaus failą

Vienintelis dalykas, kurį čia reikia pakeisti, yra 10 eilutėje kelias į jūsų stiliaus failą.

Dėkojame visiems už dėmesį, džiaugiamės galėdami pabandyti dėl jūsų. Pakartojame, kad laukiame Jūsų pastabų, pasiūlymų tobulinti ir pan.

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, o tai lemia svetainės „nesuderinamumą tarp naršyklių“. Tai ypač pasakytina apie senus Interneto versijos Tyrinėtojas.

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

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 %) vis dar užima didžiausią rinkos dalį, mobiliosios platformos pradeda keisti tradicines, stacionarias.

Ž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%).

Paspartintas naujų išleidimas 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 „Windows Server 2012“, 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 pasitelkdami statistinius duomenis, pvz. Google analizė, galite gauti 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 Techniniai reikalavimai 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 pagrindiniu vartotojo patirties lygiu. 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 jo 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ų šiuolaikinės naršyklės. 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 Naujausios technologijos. Š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 emuliatorių, kurie 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., „Windows Resizer“, skirtą „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 ypatybių. 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ų naujas, eksperimentines ar nestandartines CSS funkcijas prieš jas įdiegiant 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 sintaksę HTML komentarai 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ŠTETINĖ „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. Dalinė parama teikiama nuo 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, juos reikia pridėti iš CDN arba kaip tinkamo formato failą viduje sąlyginiai komentarai skiltyje (nepamirškite įtraukti vienos iš „Selectivizr“ reikalingų „JavaScript“ bibliotekų):

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

Apsvarstykime du paprasti pavyzdžiai CSS ir JavaScript.

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

Šiuo metu pastebima tendencija vis aktyviau naudojant SVG(Scalable Vector Graphics), bet š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.png"); 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

Kada mes kalbame apie 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.

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 „nepanaši“ naršyklė iš kitų. Be to, kiekviena versija yra „skirtinga“ savaip. Tačiau priimkime realybę tokią, kokia ji yra. Tačiau realybė tokia, kad nėra jokių įsilaužimų skirtingos versijos Kuriant IE jų reikia pakankamai, kad būtų galima sudėti į atskirą failą ir įkelti tik šios šeimos naršyklėms. 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 kokia versija interneto naršyklė Explorer;
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:

#pavyzdys (
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) (
#pavyzdys (
spalva: raudona;
}

}

Firefox

@-moz-document url-prefix() (
#pavyzdys (
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. Ar jums patinka?

UPD 08/09/11: Naujausi pranešimai iš frontų: Habré buvo rastas įsilaužimas į Opera. Kaip šitas:

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