CSS izgled za više preglednika. Kompatibilnost s više preglednika: responzivni web dizajn za starije preglednike. Problemi s naslijeđenim preglednicima i različitim pristupima razvoju

Dobar dan, saveznici!

Kao layout dizajner svakodnevno se moram baviti raznim CSS3 svojstvima koja, htjeli-ne htjeli, moram koristiti kako bi se ispravno prikazala u svim modernim i nemodernim preglednicima. Naravno, prikupio sam i određenu biblioteku koju koristim pri izradi raznih projekata. Prikupio sam svoju kolekciju iz raznih izvora i foruma, na beskrajnim prostranstvima Interneta, pa ne čudi ako se netko već susreo s nečim zasebno.

Možda iskusnije predstavnike naše struke ovaj post neće zanimati, ali mlađima i neiskusnijima može biti od koristi. Od starijih drugova, pak, želio bih dobiti komentare o nedostacima koji bi ovdje mogli biti prisutni, i važne točke, koji, naprotiv, ovdje može biti odsutan.

Da bi CSS3 ispravno radio u svim preglednicima, morate koristiti neke vanjske biblioteke.

Zapravo, nakon svih priprema, možete ići izravno na svojstva CSS3 kojima ćemo se rugati.

Zaobljeni rubovi ili border-radius .border-radius ( border-radius: 10px; background-clip: padding-box; behavior: url(PIE.htc); )
svojstvo background-clip: padding-box; eliminira mogućnost da slika u pozadini ometa naša zaobljena područja.

Ponašanje linije: url(PIE.htc); povezuje našu PIE datoteku da podrži ovo IE svojstvo.

Box shadow ili box-shadow .box-shadow( box-shadow: 3px 3px 4px #444; filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color="#444444"); ponašanje: url (PIE.htc); )
Filtar svojstava: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color="#444444"); koristi se za IE. Gradijent na pozadini ili pozadini: linear-gradient() .gradient( background-color: #444444; background: -webkit-linear-gradient(top, #444444, #999999); background: linear-gradient(to dolje, #444444, #999999); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr="#81a8cb", endColorstr="#4477a1"); -pie-background: linearni gradijent(do dna, #444444, #999999); ponašanje: url(PIE.htc); ) Dupla pozadina ili pozadina: url(), url(); .multiple-background( background: url(back1.png) 0 0 no-repeat, url(back2.png) 0 0 no-repeat; -pie-background: url(back1.png) 0 0 no-repeat, url( back2.png) 0 0 bez ponavljanja; ponašanje: url(PIE.htc); )
Čini se da moderni preglednici razumiju sve, ali za IE opet koristimo PIE.Slika umjesto poteza ili granične slike: url(); .border-image( -webkit-border-image: url("image.png") 30 okrugli; border-image: url("image.png") 30 okrugli; ponašanje: url(PIE.htc); )
Ovdje svojstvo ponašanja neće raditi u IE10 Sjena teksta ili sjena teksta Ovdje prestaju čari PIE-a. Da biste koristili sjenčanje teksta u IE-u, morate koristiti gore spomenutu biblioteku jQuery.textshadow.

Da biste ga koristili, prvo morate odrediti našu sjenu u stilovima, za obične preglednike
.text-shadow( text-shadow: 1px 1px 3px #000; )

A onda, koristeći knjižnicu, tražimo od neobičnih IE preglednika da nas razumiju
$(funkcija())( $(".text-shadow").textShadow(); ))
prvo, ne zaboravite, povezati ovu knjižnicu i sve što je potrebno za njezin rad.

Algoritam za izračunavanje širine i visine elementa (da, to je upravo prijevod) ili box-sizing .box-sizing( -moz-box-sizing: border-box; box-sizing: border-box; )
Nažalost ovo svojstvo neće raditi u preglednicima IE7 i ranijim. Na ovaj trenutak Nisam našao ispravno rješenje za ovaj problem, ali to ne znači da ono ne postoji. Stavljanje blokova u red ili prikaz: inline-block Sjajna moderna značajka koja vam omogućuje da blokove postavite u jedan red bez korištenja svojstva plovka i tako dalje. Na moju žalost, u praksi sam se susreo s činjenicom da ga mnogi ljudi koriste čisto. To je tako
.inline-block( display: inline-block; )
Ovaj kod podržavaju samo najnoviji moderni preglednici. Za potpunu podršku morate mu dodati nekoliko redaka. Kompletan kod je:
.inline-block( min-height: 250px; display: inline-block; vertical-align: top; zoom: 1; *display: inline; _height: 250px; )
Ovdje
prikaz: -moz-inline-stack; navikao razumjeti stari Mozillin inline-block.
svojstvo vertical-align: top; Poravnava sve blokove okomito na vrh. Ovisno o zadatku, možete to učiniti na dnu.
I na kraju svojstva
zumiranje: 1; *prikaz: inline; _visina: 250px;
koriste se za IE. Imajte na umu da se u ovom slučaju koristi _height: 250 jer IE ne poznaje svojstvo min-height Transparentnost ili neprozirnost .opacity( neprozirnost: 0,5; filter: alpha(opacity=50); )
Imajte na umu da je u filtrima koji se koriste za IE vrijednost prozirnosti navedena u rasponu od 0 do 100, a ne kao obično od 0 do 1. Animacija ili prijelaz .transition ( -webkit-transition: sve 1s lakoća; prijelaz: sve 1s jednostavnost; ) Transformirajte objekte ili transformirajte .transform( -webkit-transform: scale(0.3); -ms-transform: scale(0.3); transform: scale(0.3); )
Svojstva prijelaza i transformacije nisu podržana u IE preglednicima starijim od verzije 9, a prijelaz je podržan samo od verzije 10. Još nisam pronašao rješenje ni za stari IE. Veličina pozadina ili veličina pozadine .veličina-pozadine( pozadina: url("back.jpg") bez ponavljanja gornji centar; -webkit-veličina-pozadine: naslovnica; veličina-pozadine: naslovnica; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader( src="back.jpg", sizingMethod="scale"); ) CSS3 selektori Govorimo o selektorima kao što su
ul li:fist-child() ul li:last-child() ul li:nth-child(3)() input() a:hover()
I drugi korisni selektori: koji su dodani u CSS3. Kako bismo pružili visokokvalitetnu podršku za takve selektore, koristimo gore spomenutu biblioteku Selectivizr. Da bi funkcionirao, samo ga trebamo uključiti prije naše CSS datoteke.
Kompletan popis selektora s kojima Selectivizr radi možete pronaći na službenoj stranici, u odjeljku “Kako to radi?”.

Na kraju bih želio napomenuti da nisam uzeo u obzir sva svojstva kompatibilnosti s više preglednika, već samo ona koja se najčešće koriste u svakodnevnoj praksi. Nadam se da vam ovaj post može biti barem donekle koristan!

Ažurirana svojstva rubnog radijusa i neprozirnosti. Hvala pepelsbey na strogoj primjedbi!

Ažurirano većina svojstava prema preporuci. Hvala puno korisniku Aingisu na velikoj pomoći!

// echo get_the_post_thumbnail(get_the_ID(), "relatedthumbnail"); // prikaži veličinu moje sličice?>

Kako biste osigurali da se stranica jednako dobro prikazuje u različitim preglednicima, morate poraditi na njezinoj kompatibilnosti s više preglednika. U tome nam pomaže testiranje stranice i otklanjanje pogrešaka html/css oznaka. Ali postoje alati koji vam mogu pomoći smanjiti gnjavažu oko oblikovanja i osigurati da osnovni stilovi budu isti u različitim preglednicima. Kakvi su to alati, zašto i kako ih koristiti - razmotrit ćemo dalje.

Preglednici i osnovni stilovi

Činjenica je da svaki preglednik prema zadanim postavkama ima određeni skup osnovnih stilova koje prema zadanim postavkama primjenjuje na stranicu. A ako izradimo stranicu u “golom” html-u bez dizajna i stilova, preglednik će i dalje prikazati oznaku u većoj veličini i podebljano, malo manjoj veličini i tako dalje. Preglednik će istaknuti tekst u oznaci kurziv, učinit će ga podcrtanim i podebljanim.

To će se dogoditi jer preglednik već ima vlastite stilove za elemente koji se prema zadanim postavkama primjenjuju na stranice otvorene u njemu. A činjenica je da se u različitim preglednicima ta pravila malo razlikuju, od preglednika do preglednika. Prije desetak godina te su razlike bile prilično dramatične i vrlo uočljive. Sada su minimalni, ali još uvijek postoje.

Kako biste uklonili te razlike i učinili da se stranica prema zadanim postavkama prikazuje jednako u svim preglednicima, upotrijebite posebnu .css datoteku: reset.css ili normalize.css

reset.css - što radi i kako ga koristiti
Prva datoteka koja se pojavila bila je reset.css. Ova css datoteka sadrži popis svih mogućih html oznaka i vraća njihovu vrijednost na nulu. Odnosno, uklanja sve moguće uvlake, čini font istim u svim oznakama, poništavajući sve stilove teksta. Tako se svi naslovi i odlomci prikazuju u običnom tekstu, iste veličine i bez uvlake. Kao rezultat toga, vraćamo zadane stilove u svim preglednicima.
Radi ovako: prvo na stranicu uključimo datoteku reset.css, a nakon nje vlastitu datoteku sa stilovima. Kao rezultat toga, prvo resetiramo sve stilove, a tek onda postavljamo style.css html dizajn oznake. Na taj način postižemo da će svi preglednici vratiti svoje stilove na zadane, a sve će se oznake temeljiti na stilovima koje smo postavili u style.css.
Preuzmite reset.css
Reset.css možete preuzeti na cssreset.com
Ili možete preuzeti verziju Erica Meyera " Poništi CSS” 2.0 putem gumba ispod, s mog bloga:
normalize.css - kako radi i koja je razlika
Nakon što se reset.css poveže sa stranicom, svi stilovi se moraju ponovno napisati. I svaki put ova aktivnost postane zamorna. Stoga je resetiranje zamijenjeno drugim alatom - normalizacijom. Normailze - kao što naziv implicira, ne poništava sve stilove, već ih normalizira, dovodeći ih u jedinstven izgled u svim preglednicima. Nakon njegove primjene osnovni stilovi za prikaz naslova, veličine fonta, uvlake... unificiraju se i prikazuju identično u svim preglednicima. Koristeći ga, možete uštedjeti određeno vrijeme, koje bi u slučaju resetiranja bilo potrošeno na pisanje stilova resetiranja.
Ako još niste koristili normalize.css, preporučujem da ga isprobate u svom sljedećem projektu, a tko zna, možda ga nećete moći odbiti 😉
Preuzmite normalize.css
Normalize.css možete preuzeti s necolas.github.io/normalize.css
Ili preuzmite s mog bloga:
Što je bolje resetirati ili normalizirati?
Ne postoji jasan odgovor.
Prvi poništava sve stilove, drugi vodi do jednog nazivnika. Iskusni dizajneri izgleda koji koriste reset.css obično imaju vlastite skupove stilova koji se uključuju odmah nakon resetiranja za stiliziranje sadržaja. I ne moraju ponovno definirati stilove za osnovne elemente svaki put u novom izgledu. To i ja radim. Osjećam se ugodno i znam koje stilove postavljam prema zadanim postavkama i kako funkcioniraju.
normalizirati je prikladno ako proučite njegovu strukturu, možete ga modificirati za sebe - prilagođavanjem osnovnog izgled oznake A rad s njim također će biti zgodan u hodu - kada morate puno i često slagati.
Svaki alat je dobar, najvažnije je koristiti ga ispravno 😉

Koriste ga svi korisnici interneta posebni programi– preglednici. Preglednik je program koji komunicira između korisnika i poslužitelja. Preglednik šalje zahtjeve poslužitelju i od njega prima odgovore, a taj odgovor se pretvara u oblik na koji su svi navikli zvati Internet stranicu sa svim svojim sadržajem, tekstom, slikama, videima itd. Gotov izgled stranice (lokacija sadržaja, dimenzije, boja, font itd.) postavlja se pomoću HTML izgled i kaskadne stilske tablice (CSS), koje su transformirane iz slike koju je nacrtao dizajner u prikaz koji preglednik može razumjeti. To se zove raspored. Jednostavnim riječima HTML layout je raspored elemenata internetske stranice gdje bi se trebali nalaziti prema dizajneru koji je izradio layout buduće stranice.

Ali svaki korisnik preferira preglednik koji mu je poznatiji. Danas postoji 5 najpopularnijih preglednika, koji su označeni statistikom. To su Chrome, Safari, Opera, FireFox i Internet Explorer(IE). Ove ili one verzije preglednika korisnici interneta najčešće koriste za pregledavanje World Wide Weba. Svaki od ovih preglednika ima svoju funkcionalnost i svoje karakteristike prikaza internetskih stranica.

U velikom izboru svih preglednika i njihovih inačica, te njihovih mogućnosti prikaza internetskih stranica, pojavio se koncept cossbrowser HTML layout-a. Dakle, što je kompatibilnost s više preglednika?!

Kompatibilnost između preglednika je sposobnost internetskih stranica da se jednako prikazuju u različitim verzijama preglednika, bez izobličenja ili „širenja“ elemenata stranice, bez obzira na karakteristike samog preglednika.

Najviše veliki iznos imaju ove značajke Internet preglednici Explorer iz Microsofta, zbog čega ih većina HTML kodera "ne voli" i izmišljaju ih za to različiti putevišto dovodi do ispravnog prikaza stranice (ove metode dizajneri izgleda nazivaju “štakama”). Naše osobno mišljenje je da je moguće stvoriti HTML stranicu unakrsnom pregledniku bez korištenja ovih istih "štaka" koje začepljuju HTML kod stranice.
Uvjetni komentari za Internet Explorer Uvjetni komentari za sve verzije IE-a Uvjetni komentari za IE 7 Uvjetni komentari za IE 6 Uvjetni komentari za IE 5 Uvjetni komentari za IE 5.5 Uvjetni komentari za IE starije od verzije 6 Uvjetni komentari za IE starije od verzije 7 Uvjetni komentari za IE starije verzije 8 Uvjetni komentar za IE stariji od verzije 9 Uvjetni komentar za IE stariji od verzije 6 Uvjetni komentar za IE stariji od verzije 7 Uvjetni komentar za IE stariji od verzije 8 Osnovna pravila rasporeda između preglednika:
Nije tajna da svaki preglednik ima svoje stilove dizajna za određene elemente HTML koda, veličinu fonta, veličinu uvlake itd. što će dovesti do širenja elemenata stranice, a neće biti cross-browser.
Iz ovoga možemo zaključiti da svi prilagođeni stilovi različitim preglednicima trebate “onemogućiti”, odnosno resetirati na iste. Neki HTML koderi to rade izravno kada postavljaju CSS stilove na pojedinačni elementi, koristimo drugačiju praksu. Resetiramo sve CSS stilove preglednika na samom početku CSS dokumenta. Da bismo to učinili, koristimo modificirani skup CSS stilova koje je predložio meyerweb.com
Poništi CSS stilove html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite , code, del , dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol , ul, li , fieldset, obrazac, label, legenda, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu , nav, output , rubin, odjeljak, sažetak, vrijeme, oznaka, audio, video ( margina: 0; ispuna: 0; obrub: 0; veličina fonta: 100%; težina fonta: 100; font: naslijediti; okomito poravnati: osnovna linija; ) /* HTML5 poništavanje uloge prikaza za starije preglednike */ članak, na stranu, detalji, figcaption, slika, podnožje, zaglavlje, hgroup, izbornik, nav, odjeljak ( prikaz: blok; ) tijelo ( visina linije: 1; ) ol , ul ( list-style: none; ) blockquote, q ( quotes: none; ) blockquote:before, blockquote:after, q:before, q:after ( content: ""; content: none; ) table ( border-collapse : kolaps; granični razmak: 0; ) a( text-decoration:none )
Ovaj kod, dodan CSS stilovima, vraća vlastite stilove svih preglednika na iste. To će vam omogućiti da napravite izgled HTML stranice identičan u svim preglednicima, bez obzira na vlastite stilove.
Valjanost HTML dokument
Drugo pravilo HTML izgleda za više preglednika je usklađenost sa standardima HTML i XHTML koje je odobrio konzorcij W3C. Svaki HTML dokument (odnosno dokument) ima svoj vlastiti standard i vlastite značajke pisanja.

Kasnije ćemo pogledati vrste standarda HTML dokumenata i njihove razlike, budući da ova tema zahtijeva zasebno razmatranje i opis.

Valjanost HTML dokumenta je usklađenost s odobrenim standardima i normama konzorcija W3C.

Prema W3C standardima, svaka oznaka HTML dokumenta mora imati vlastiti par oznaka. Ti se parovi nazivaju otvarajuće i zatvarajuće oznake, ali postoje iznimke od ovog pravila - to su oznake ,
itd., ove oznake nemaju završni par.

Nije zatvoreno uparena oznaka, svaki ga preglednik može drugačije razumjeti i prikazati sadržaj unutar ovih oznaka na način koji dizajner izgleda nije zamislio.

Valjanost HTML dokumenta možete provjeriti na web stranici konzorcija W3C.
Primjer valjanog koda: Valid code Valid HTML code
Ovaj HTML kôd u skladu je sa strogim standardima XHTML 1.0 i valjan je
I sadrži uparene (završne) oznake i neuparenu oznaku

Primjer nevažećeg koda: Ne važeći kod Nevažeći HTML kod
Ovaj HTML kôd nije u skladu sa standardima W3C i nije valjan

Provjera kompatibilnosti s više preglednika.
Postoji mnogo načina za provjeru kompatibilnosti HTML dokumenta koji se upisuje s više preglednika, od kojih je najjednostavniji da instalirate sve popularne preglednike na svoje računalo. Ali što s tim? različite verzije Internet Explorer?! - pitat će se mnogi.

Postoji jednostavan način da sakupite sve verzije IE-a u jednoj boci, da tako kažem. Možete preuzeti IE Tester, koji uključuje sve verzije IE počevši od IE 5.5.

Također možete koristiti uslugu Browsershots.org koja vam omogućuje snimanje slika vašeg HTML dokumenta iz više od 40 različitih preglednika.

Kompatibilnost s više preglednika sposobnost je web stranice da se ispravno prikazuje u različitim preglednicima. Resurs bi trebao raditi jednako u svim verzijama preglednika.

Ovo je osobito važno u eri responzivnog web dizajna, kada je sposobnost front-enda da se prilagodi širokom rasponu razne uređaje dok još uvijek pruža optimalno iskustvo gledanja.

Prethodno bi dizajner izradio izgled dizajna u Photoshopu, koji bi zatim bio prebačen u HTML i CSS. Danas nas tehnološke promjene tjeraju da preispitamo ovaj koncept. Više ne možemo predvidjeti koji će se preglednik, rezolucija ili uređaj koristiti za pregled stranice. Prošli su dani kada je većina računala koristila fiksnu rezoluciju od 1024 x 768 piksela, a stranice su se mogle dizajnirati sa statičnim dimenzijama.

Moderni preglednici u potpunosti podržavaju HTML5 i CSS3. Ali isti HTML/CSS/JavaScript kôd se drugačije tumači u starijim preglednicima, što dovodi do "nekompatibilnosti s više preglednika" web-mjesta. To posebno vrijedi za starije verzije Internet Explorera.

U ovom ćemo članku pogledati trenutnu statistiku pregledavanja web stranica i dati popis alata koji pomažu u rješavanju raznih problema kompatibilnosti.
1. Trenutno stanje
Globalne statistike za 2015. pokazuju da je 14 najkorištenijih razlučivosti zaslona u rasponu 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 preglednicima, vidimo da je na prvom mjestu Chrome (sve verzije - 44,87%), na drugom mjestu je Firefox (sve verzije - 10,37%), na trećem Internet Explorer 11 (6,84%).

Ubrzano izdavanje novih verzija Google Chrome i Firefox vam omogućuju učinkovitiji razvoj projekata za te platforme. Nešto drugačija slika nastaje kod “zločestog” Internet Explorera, jer se na internetu još uvijek mogu pronaći njegove stare verzije. A to dovodi do problema s kompatibilnošću stranice s više preglednika.

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

Kao rezultat toga, moramo zaustaviti razvoj za IE6 i, kao i IE7. Da bismo opravdali ovu strategiju, evo nekoliko primjera odluka poznatih tvrtki: Google je prestao podržavati IE8 u studenom 2012., a IE9 u listopadu 2013.
Github više ne podržava IE 7 i 8. Osim toga, neke od funkcija Twittera ne rade u IE8. I konačno, popularni okvir neće podržavati IE8, počevši od verzije 4.

Međutim, statistika korištenja može se razlikovati ovisno o regiji, a 6,11% korisnika u Kini još uvijek pregledava IE8 u 2015. Ako uzmemo u obzir da je u Kini bilo približno 724.400.000 korisnika interneta, može se shvatiti da približno 44.200.000 Kineza nastavlja koristiti IE8 ove godine.

Stoga se regionalna tržišta, specifični kupci i industrijski zahtjevi mogu značajno razlikovati. To posebno vrijedi za korporativne i državne agencije.
2. Analizirajte svoju publiku
Osnovno načelo ovdje je sljedeće: što je veća potrebna kompatibilnost s više preglednika, to će biti potrebno više vremena za razvoj, što dovodi do povećanja troškova projekta. Da biste donijeli informiranu, ekonomski zdravu odluku, trebate si postaviti sljedeća pitanja:

Koja je vaša ciljana publika?

Koju geografsku regiju trebate ciljati?

Koje preglednike i uređaje koriste vaši posjetitelji?

Postoje li tehnički čimbenici u vašoj tvrtki ili industriji koji vas tjeraju da podržavate određene verzije starijih preglednika?

Iz perspektive e-trgovine, koje su stope konverzije i ROI različitih grupa korisnika po verziji preglednika?

Odgovarajući na ova pitanja uz pomoć statističkih podataka, primjerice Google Analyticsa, možete dobiti objektivnu sliku.
3. Problemi s naslijeđenim preglednicima i različitim pristupima razvoju
Responzivni web dizajn uvelike se oslanja na medijske upite za izmjenu CSS-a za različite rezolucije zaslona. Osim toga, moderna web-mjesta karakterizira korištenje HTML5 semantičkih elemenata (na primjer, , , , , ) za grupiranje komponenti dizajna. CSS3 selektori koriste se za odabir određenih elemenata i zatim dodjeljivanje stilova (na primjer, , :checked , :nth-child(n) , :not(selector) , :last-child) ). Konačno, responzivna tipografija često se specificira korištenjem REM (root em) jedinica.

To nas dovodi do sljedećih tehničkih izazova pri implementaciji CSS kompatibilnosti s više preglednika:

CSS3 medijski upiti

Semantički HTML elementi 5: nije podržano u IE6, 7 i 8;

CSS3 birači: nisu podržani u IE6. Samo djelomično podržano u IE7 i 8;

REM jedinice: nisu podržane u IE6, 7 i 8. Samo djelomično podržano u IE9 i 10;

Ograničenje CSS pravila: IE9 i stariji podržavaju samo 4095 CSS selektora. Pravila nakon 4095. selektora ne vrijede.

Gore navedene pogreške imat će najveći utjecaj na strategiju koja se koristi pri implementaciji responzivnog dizajna.

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

Progresivno poboljšanje temelji se na principu pokretanja razvoja od zajedničkog nazivnika, uz minimalne tehničke zahtjeve i razinu korisničkog iskustva koje stranica nudi. Posjetitelji koji web stranici pristupaju putem najnovije verzije preglednicima i uređajima, posluživat će progresivno proširena verzija stranice sa svim najnovijim značajkama.

S druge strane, korisnicima starijih preglednika i sporih internetskih veza ponudit će se grafički skraćeni, ali ipak funkcionalna verzija mjesto.

Ovaj pristup implementaciji kompatibilnosti s više preglednika uključuje početak razvoja s jednostavnom verzijom, kojoj se zatim dodaju složeniji elementi. Stariji preglednici će moći prikazati stranicu s osnovnom razinom korisničkog iskustva. A nove značajke HTML/CSS/JavaScript bit će dostupne u preglednicima koji ih stvarno mogu koristiti.

Nasuprot tome, inkrementalno pojednostavljenje pruža potpuno funkcionalnu razinu UX-a u modernim preglednicima. A zatim postupno smanjuje svoju složenost za starije preglednike zbog grafike, ali bez diranja u funkcionalnost. Ideja je započeti s razvojem s najnovijim web standardima i zatim pokušati minimizirati probleme povezane sa starijim preglednicima.

Koji ćete pristup odabrati ovisi o osobnim preferencijama i uvjetima projekta:

Progresivno poboljšanje pruža veću stabilnost jer možete postupno dodavati nove značajke svom moderni preglednici. Ali zahtijeva pažljivije planiranje;

Neki programeri tvrde da nema smisla podržavati naslijeđene preglednike i da ih treba koristiti Najnovije tehnologije. Podrška za moderne preglednike pruža puno bolje korisničko iskustvo;

Postoji percepcija da je progresivno poboljšanje mrtvo jer mnoge JavaScript aplikacije ne rade dobro s ovim pristupom;

Dostupnost weba za javne ustanove može podlijegati lokalnim zakonskim zahtjevima i može zahtijevati poseban pristup.

S pojavom alata za otkrivanje značajki kao što je Modernizr, osobno sam naklonjen korištenju inkrementalnog pojednostavljenja i stavljanju preglednika na crnu listu pri razvoju sukladnih stranica.
4. Testiranje, testiranje, testiranje...
Kako biste što prije otkrili potencijalne probleme s JavaScriptom u više preglednika, tijekom razvoja trebali biste testirati svoju web-lokaciju u različitim preglednicima i rezolucijama. Postoje razni softverski emulatori koji nam mogu pomoći:

Browserstack je komercijalna usluga koja pruža pristup testnom okruženju u kojem možete testirati svoj projekt na više od 700 preglednika stolnih računala i Mobilni uredaji korištenje virtualnog stroja u oblaku;

Microsoft Virtual Machines - Ako koristite Linux, nećete imati pristup Internet Exploreru. Rješenje bi moglo biti preuzimanje slika virtualni strojevi za IE6 do IE11, koji se zatim može koristiti u kombinaciji s Oracle VM Virtualboxom ili Vagrantom za lokalno testiranje;

Različite rezolucije zaslona za određeni preglednik mogu se brzo testirati pomoću online usluge Screenfly. Korištenje dodataka preglednika kao što je Window Resizer za Google Chrome ili izravno u odjeljku alata za razvojne programere Chromea i Firefoxa.

5. Normalize.css i CSS Autoprefixer
Obično započinjem nove projekte resetiranjem CSS-a pomoću Normalize.css, koji pruža bolju kompatibilnost s više preglednika pri definiranju zadanih stilova HTML elemenata do Internet Explorera 8. Normalize.css čuva željene stilove elemenata, normalizira njihov izgled i ispravlja brojne pogreške i nedosljednosti u različitim preglednicima.

Osim toga, mnogi naslijeđeni preglednici ne mogu interpretirati nepoznate HTML elemente i CSS svojstva. Kada preglednik naiđe na dio HTML-a ili CSS-a koji ne razumije, ignorira ga i nastavlja s procesom iscrtavanja. Mnoge aplikacije koriste prefikse dobavljača za dodavanje novih, eksperimentalnih ili nestandardnih CSS značajki prije nego što ih implementiraju u specifikaciju:

// Webkit preglednici 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 s njima su povezani mnogi bugovi. Stoga koristim dodatak CSS Autoprefixer u kombinaciji s Gruntom.

Redovno CSS pravila obradit će se pomoću dodatka, a prefiksi će im se dodati na temelju baze podataka "Mogu li koristiti". Preporuča se u konfiguraciji navesti verzije preglednika koje trebaju biti podržane, na primjer:

opcije: ( preglednici: ["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); prikaz: savitljivost; prijelaz: 1s sve; )

S koristeći CSS Autoprefixer ga pretvara u:

Primjer ( pozadinska slika: -webkit-linearni gradijent(gore lijevo, #4676dd, #00345b); pozadinska slika: -moz-linearni-gradijent(gore lijevo, #4676dd, #00345b); pozadinska slika: linearno- gradijent (gore lijevo, #4676dd, #00345b); prikaz: -webkit-box; prikaz: -webkit-flex; prikaz: -moz-box; prikaz: -ms-flexbox; prikaz: flex; -webkit-transition: 1s sve; -moz-prijelaz: 1s sve; prijelaz: 1s sve; )
6. Uvjetni komentari
Ako trebate stvoriti zamjenski CSS ili omogućiti JavaScript za više preglednika ranije verzije Internet Explorer, možete koristiti uvjetne komentare. Podržani su u Internet Exploreru 5-9, koriste sintaksu HTML komentari u kombinaciji s boolean vrijednostima. Ovisno o Booleovoj vrijednosti (true ili false), kod unutar oznaka komentara bit će prikazan ili skriven u odgovarajućim verzijama preglednika:

KOD KOJI ĆE SE IZVRŠITI // ako Internet Explorer // ako NIJE Internet Explorer // ako NIJE 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 VEĆI Internet Explorer 6 ALI ISPOD 9

Kod se automatski skriva u svim preglednicima koji ne podržavaju uvjetne komentare. Dobar primjer kako se uvjetni komentari mogu učinkovito koristiti u praksi je HTML5 Boilerplate, koji dodaje specifične CSS klase za zastarjele verzije Internet Explorer:

7. Polifili
Tehničke nedosljednosti naslijeđenih preglednika za responzivni web dizajn mogu se ispraviti pomoću polifilla. To je dio JavaScript koda koji "popunjava" određenu funkcionalnu prazninu između naslijeđenog preglednika i funkcije. postoji cijela linija polyfills koji se mogu koristiti za pružanje podrške pregledniku za značajke HTML5.

U nastavku je nekoliko polifilova osmišljenih za uklanjanje problema web-mjesta s više preglednika navedenih u točki 3:

respond.js - implementira CSS3 medijske upite za Internet Explorer 6 - 8;

html5shiv dopušta korištenje 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. Djelomična podrška dostupna od koristeći JQuery 1.3/1.4 ;

REM-unit-polyfill - Određuje podržava li preglednik rem jedinice i pruža zamjenu. Radi s IE8 i starijim verzijama.

Za korištenje navedenih višestrukih popuna, moraju se 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 projekt morate procijeniti jesu li te dodatne skripte zaista potrebne jer mogu dovesti do problema s izvedbom. Većina polifila je kompaktna, ali svaka dodatna skripta koja se učita predstavlja dodatni HTTP zahtjev. To može usporiti učitavanje stranice.
8. Definiranje funkcija s Modernizr
Biblioteka Modernizr, napisana u JavaScriptu, pomoći će vam provjeriti kompatibilnost stranice s više preglednika: je li određena HTML5 ili CSS3 funkcija podržana u različitim preglednicima. Ako značajka nije dostupna, može se učitati alternativni CSS ili JavaScript kod.

Ideja je izravno odrediti funkcionalnost preglednik umjesto da pokušavate instalirati njegovu određenu verziju. I na temelju toga izvesti njegovu funkcionalnost, što je manje učinkovit i pouzdan način.

Vrijedno je napomenuti da Modernizr pregledniku ne dodaje značajke koje nedostaju. Stoga ćete morati osigurati kôd iz zamjenskog CSS-a ili polifilla.

Prvo morate preuzeti potpuno funkcionalni sklop. Kasnije, kada budete spremni za razvoj, možete izraditi prilagođenu verziju s određenim značajkama koje testirate. Sve što trebate učiniti je dodati klasu .no-js u HTML oznaku svoje web-lokacije i uključiti Modernizr skriptu u odjeljak head nakon bilo koje CSS datoteke:

Modernizr Demo Modernizr Demo
Ovo je Modernizr vježba.

Klasa .no-js koristi se za provjeru je li JavaScript omogućen u pregledniku korisnika. Ako je omogućeno, Modernizr će zamijeniti .no-js s .js klasom. Modernizrova značajka testiranja analizira je li određena značajka podržana u pregledniku i generira niz klasa koje se dodaju HTML elementu. Google Chrome 47.0.2526.111, na primjer, vratit će sljedeće klase objekata.

Trenutno je Modernizr dostupan kao globalni objekt koji se može pozvati u kombinaciji s nazivom funkcije kako bi se provjerilo postoji li. Vraća Booleovu vrijednost (true ili false).

Razmotrimo dva jednostavni primjeri CSS i JavaScript.

Primjer rješavanja problema s više preglednika CSS-a: provjera podrške za SVG i pružanje PNG-a kao zamjene

Trenutačni trend je sve veća upotreba SVG-a (Scalable Vector Graphics), ali ta grafika nije podržana u IE8 i starijim verzijama. Ako je SVG podržan u pregledniku, Modernizr generira CSS klasu .svg. Ako SVG nije dostupan, alat dodaje klasu .no-svg u HTML. S CSS-om u nastavku, preglednici koji podržavaju SVG koristit će uobičajenu klasu .logo, dok će preglednici koji ne podržavaju SVG koristiti pravila .no-svg:

Logo (pozadinska slika: url("logo.svg"); širina: 164px; visina: 49px; ) .no-svg .logo (pozadinska slika: url("/logo.png"); širina: 164px; visina : 49px; )

Primjer JavaScripta: Definiranje graničnog radijusa i dodavanje odgovarajućih CSS klasa

Zaokruživanje kutova okvira nije podržano u IE8 i starijim verzijama. Možemo stvoriti različite CSS klase koje se primjenjuju ovisno o prisutnosti funkcije border-radius:

// Klasa za preglednik s funkcijom border-radius .round-borders ( border-radius: 5px; ) // Klasa za preglednik bez funkcije border-radius .black-borders ( border: 3px solid #000000; )

Sada možete koristiti JavaScript za pohranu ciljnog ID-a kao varijable i zatim dodati CSS klase putem uvjeta:

var element = document.getElementById("TestID"); if (Modernizr.borderradius) ( element.className = "round-borders"; ) else (element.className = "black-borders"; )
Zaključak
Kada je riječ o responzivnom web dizajnu u naslijeđenim preglednicima, ne postoji univerzalna veličina za sve univerzalno rješenje. Važno je analizirati publiku resursa kako biste dobili ideju o stvarnom broju korisnika preglednika. Zatim trebate temeljito testirati web mjesto kako biste identificirali potencijalne probleme s više preglednika.

Svaki web dizajner ili dizajner izgleda zna kako CSS3 može olakšati život, ubrzati i optimizirati proces izgleda. Svojstva kao što su "border-radius" i "box-shadow" omogućuju izbjegavanje upotrebe nepotrebnih slika i desetaka redaka koda, što zauzvrat ubrzava proces izgleda stranice i povećava brzinu učitavanja. Koristeći CSS3 u svom radu, susreo sam se s problemom kompatibilnosti s više preglednika, naime stranice se prikazuju u starijim preglednicima i, naravno, u Internet Exploreru. Danas ću vam reći koje alate koristim za postizanje kompatibilnosti CSS3 s više preglednika, uključujući Internet Explorer..
Pogledajmo pobliže brojne metode koje se mogu koristiti za postizanje upotrebe CSS3 na više preglednika.
PRIMARNE POSTAVKE
Preuzmite skripte i kopirajte ih u jednu mapu s CSS stilovi. Evo popisa skripti koje će nam trebati: CSS3 PIE je naš pomoćnik u radu sa IE. PIE uči Internet Explorer da razumije CSS3. Mapa za preuzimanje CSS3PIE sadrži sve datoteke koje su nam potrebne. Koristit ćemo datoteku PIE.htc i pristupit ćemo joj putem CSS-a, pa je moramo smjestiti u istu mapu kao datoteke stilova.
Selectivizr se koristi za rukovanje CSS3 selektorima. Koristi se u kombinaciji s JavaScript bibliotekama kao što su jQuery ili Mootools. Preporučujem da odaberete Mootools jer podržava sve Selectivizr značajke (CSS selektore).
U ovom primjeru koristit ću Google hosting s Mootools bibliotekom, da bih to učinio jednostavno ću zalijepiti potreban kod u glavu:< script type = "text/javascript" src = "selectivizr-min.js" >
< script type = "text/javascript" src = "https://ajax.googleapis.com/ajax/libs/mootools/1.4.0/mootools-yui-compressed.js " >
Također možemo koristiti jQuery da dobijemo CSS3 alternativu tekstualne sjene. Sve što trebamo učiniti je preuzeti dodatak jQuery text-shadow i povezati ga s jQueryjem: Sjajno, sada možemo početi rješavati probleme s CSS3 preglednicima.
OKRUGLI KUTOVI (POLUPREMNIK OBRUBE)
Zaokruživanje kutova vjerojatno je najbolja stvar koju nam je CSS3 dao. Srećom, možete ga koristiti i ne bojati se netočnog prikaza u Internet Exploreru. U tome će nam pomoći CSS3PIE.
radijus granice: 10px ;
ponašanje: url (PIE.htc);
Kao što vidite, samo trebamo "pozvati" PIE skriptu nakon svojstva border-radius.
BOX-SHADOW & RGBA BOJE
Baš kao s border-radiusom, za Internet podrška Explorer zaobljeni kutovi, samo trebate spojiti PIE skriptu. Upamtite također da možemo koristiti RGBA vrijednosti.
okvir-sjena: 5px 5px 5px rgba(0 , 0 , 0 , . 75);
ponašanje: url (PIE.htc);
Također možete koristiti RGBA boje kada specificirate svojstva "boja pozadine".
DVOSTRUKA POZADINA
I opet koristimo prefiks -pita-:
pozadina: url (img/flash.png) 20px 20px bez ponavljanja, url (img/airplane.png) 90px 50px bez ponavljanja, #00BFF3; /* Moderni preglednici */
Pie-background: url (img/flash.png) 20px 20px bez ponavljanja, url (img/airplane.png) 90px 50px bez ponavljanja, #00BFF3; /* IE6+ */
ponašanje: url (PIE.htc);

OBRUBA-SLIKA
Posljednje CSS3 svojstvo koje PIE podržava je border-image:
border-image: url (border.png) 27 27 27 27 okrugli okrugli;
ponašanje: url (PIE.htc);

CSS3 SELEKTORI
Vrijeme je da upotrijebite Selectivizr. Povezujemo JavaScript kao što je prikazano gore i svi CSS3 selektori bit će dostupni za IE6+!
tablica tr:prvo dijete (
pozadina: #252525 ;
tablica tr:nth-child(2 n+ 1) (
pozadina: #ebebeb ;

TEKST-SJENA
Kompatibilnost ovog svojstva s više preglednika može se lako postići korištenjem jQuery biblioteke. Nakon što smo ga povezali, jednostavno pozivamo funkciju “textShadow()” za traženi selektor:
$(dokument).spreman(funkcija ()(
$(".txt").textShadow();

Za potpuni učinak jednostavno dodajte "text-shadow" svojim CSS stilovima.
tekst-sjena: 2px 2px 2px crna;

TJ FILTERI
Za zamjenu nekih CSS3 pravila, također možete koristiti IE filtere. Evo primjera pozadinskog gradijenta:
pozadina: #FFFFFF ;
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr= "#444444" , EndColorStr= "#999999"); /* IE6–IE9 */

Sljedeće svojstvo je ekvivalentno pravilu "transformacije". Ali njegova je sintaksa toliko komplicirana da preporučujem korištenje posebnog generatora za izračunavanje potrebne vrijednosti.
/* IE8+ - mora biti u jednoj liniji, nažalost */
Ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.9848077530122079, M12=-0.17364817766693127, M21=0.17364817766693127, M22=0.9848077530122079, S izingMethod="auto expand")" ;
filter: progid:DXImageTransform.Microsoft.Matrix(
M11 = 0,9848077530122079,
M 12 = -0,17364817766693127,
M21 = 0,17364817766693127,
M22 = 0,9848077530122079,
SizingMethod= "automatski proširi");
margin-lijevo: -14px ;
margin-top: -21px ;