Határon böngésző kompatibilitás reagáló web design régebbi böngészők, elrendezés oldalon
Határon böngésző kompatibilitás - képes-e a helyén jelennek meg helyesen a különböző böngészőkben. Resource működnie kell azonos az összes változat a böngészők.
1. A jelenlegi helyzet
Bár a Windows 7 (31,20%) még mindig tartja a legnagyobb piaci részesedéssel, a mobil platformok kezdik felváltani a hagyományos vezetékes.
A gyorsított ütemű kiadása új verziók a Google Chrome és a Firefox lehetővé hatékonyabban projektjei ezeken a platformokon. Kissé más kép rajzolódik ki a „rosszfiú” Internet Explorer. mert az interneten lehet még találni a régi változat. És ez problémákat okoz cross-browser oldalon.
Github nem támogatja több mint IE 7 és 8. Emellett a funkcionális része Twitter nem működik IE8. És végül, egy népszerű keretrendszer nem támogatja IE8. verziótól kezdődően 4.
Ezért a regionális piacok sajátos ügyfelek és az iparági követelmények eltérőek lehetnek anyagilag. Ez különösen igaz a vállalati és a kormányzati intézmények.
2. Elemezze a közönség
Az alapelv itt: minél magasabb az elvárt határon böngésző kompatibilitás, annál tovább tart, hogy dolgozzon ki, ami növeli a beruházási költség. Ahhoz, hogy egy ésszerű, költséghatékony tájékozott döntést, akkor fel kell tenned magadnak a következő kérdéseket:
- Mi a célközönség?
- Hogy milyen földrajzi régió a megcélozni kívánt?
- A böngészők és eszközök használnak a látogatói?
- Nem a vállalat vagy iparág technikai tényezők, amelyek támogatnak egyes verziói a régi böngészők?
- Mik a feltételei az e-kereskedelmi konverziós arány és a jövedelmezőség a különböző felhasználói csoportok változatai böngészők?
By Ezen kérdések megválaszolása segítségével statisztikai adatok, például a Google Analytics. akkor kap egy objektív képet.
3. Problémák a régebbi böngészők és a különböző megközelítések fejlesztése
Érzékeny web design nagyban függ az, ami megváltoztatja a CSS médialekérdezéseket különböző képernyőfelbontás. Ezenkívül a modern helyek jellemzik a HTML5 szemantikai elemek (például,
- CSS3 médialekérdezés. Nem támogatott IE6. 7. és 8.;
- Szemantikus HTML5 elemek. Nem támogatott IE6. 7. és 8.;
- Selectors CSS3. Nem támogatott IE6. Csak részben támogatja a IE7 és 8;
- Egység REM. Nem támogatott IE6. A 7. és 8. csak részben támogatja a IE9 és 10;
- Számának korlátozása CSS szabályokat. IE9 alatt és csak akkor fogja támogatni 4095 CSS-választókat. Szabályok után 4095. választó nem kell alkalmazni.
A fenti hiba lesz a legnagyobb hatással a stratégiák végrehajtását reagáló design.
Két fő fejlesztési stratégiák: fokozatos egyszerűsítése és fokozatos javulás.
Fokozatos javulás - elvén alapuló fejlesztés várhatóan kezdődik egy közös nevező, a minimális műszaki követelmények és tapasztalat felhasználói beavatkozás szintjét, a javasolt helyszín. Az ügyfelek látogató egy oldalon keresztül a legújabb változat a böngészők és eszközök szolgálnak fel fokozatosan bővíthető változata az oldalon a legújabb funkciókat.
Másrészt, a felhasználók a régebbi böngészők és lassú internetkapcsolattal fognak kapni grafikusan csonka, de még működőképes változata az oldalon.
Ezzel szemben a fokozatos egyszerűsítése nyújt teljes funkcionalitású UX szinten modern böngészőben. Majd fokozatosan csökken a komplexitás a régebbi böngészők miatt grafika, de anélkül, hogy hozzáérne a funkcionális. Az ötlet az, hogy kezdjen el kidolgozni a legújabb webes szabványokat, majd próbálja meg minimalizálni kapcsolatos problémák régebbi böngészők.
Figyelembe véve a megjelenése az ilyen eszközök meghatározására funkcionál Modernizr. Én személy szerint inkább használni a fokozatos egyszerűsítése és fekete lista böngészők a fejlesztés kompatibilis helyei.
4. Tesztelés, tesztelés, tesztelés.
5. Normalize.css és CSS Autoprefixer
Én általában kezdeni az új projektek CSS beállítások visszaállítása Normalize.css. amely jobb határon böngésző kompatibilitás meghatározásakor stílusok HTML-elemeket. alapértelmezett, akár az Internet Explorer 8 Normalize.css megtartja a stílusok elemeit, normalizálja a megjelenés és kijavítja a hibák száma és ellentmondások a különböző böngészők.
Emellett számos régebbi böngészők nem tudják értelmezni az ismeretlen HTML elemek és tulajdonságait CSS. Amikor a böngésző találkozik egy HTML fragment vagy CSS. hogy nem érti, hogy figyelmen kívül hagyja, és továbbra is a kijelző folyamatot. Számos alkalmazás az eladó változat előtagot, hogy egy új, kísérleti vagy nem szabványos CSS funkciók végrehajtása előtt azokat a leírás:
A probléma abban rejlik, hogy az előtagok használata kényelmetlen és egy csomó hibát velük kapcsolatban. Szóval CSS Autoprefixer bővítmény kombinált Grunt.
Hagyományos CSS szabályokat dolgozza fel a plugin és előtagok nekik alapján az adatbázis lesz hozzá, hogy „tudom használni.” Javasoljuk, hogy a konfigurációs böngésző verziók is fenn kell tartani, például:
Példaként tekintsük a következő osztály CSS:
azt a CSS Autoprefixer alakítjuk:
7. Polifilly
Íme néhány polifillov célja, hogy megszüntesse a problémákat krossbrauzernosti helyszínen bekezdésben említett 3:- respond.js - végrehajtja CSS3 médialekérdezéseket Internet Explorer 6-8;
- html5shiv használatát teszi lehetővé HTML5 szemantikai elemek az Internet Explorer 6-8;
- selectivzr - utánozza CSS3 szelektor és a pszeudo-osztályok Internet Explorer 6-8 vagy Mootools 1.3 szükséges a teljes támogatást. vagy NWMatcher 1.2.3. Részleges támogatás áll rendelkezésre keresztül JQuery 1.3 / 1.4;
- REM-egység-Polyfill - határozza meg, hogy a készülék rem böngésző, és egy tartalék támogatása. Úgy működik, IE8 és alatt.
Az egyes projektek is értékelni kell, hogy ezeket a további szkriptek valóban szükség van, mert vezethet teljesítmény problémákat. A legtöbb polifillov kompakt, de minden további letölthető script egy további HTTP-kérést. Ez lassítja az oldal betöltését.
8. meghatározása a funkciók Modernizr
Az ötlet az, hogy közvetlenül határozza meg a funkcionalitást a böngésző, ahelyett, hogy létrehozza sajátos változata. És alapján a kimenet a funkcionalitás, amely kevésbé hatékony és megbízható módon.
Érdemes megjegyezni, hogy Modernizr hozzáteszi hiányzó funkciók a böngésző. Ezért meg kell adnia a kódot a biztonsági CSS vagy polifilla.
Először le kell töltenie egy teljesen működőképes egységet. Később, amikor már készen áll, hogy dolgozzon, akkor létrehozhat egy egyéni egységet specifikus funkciókat, hogy a tesztelt. Mindössze annyit kell tennie, hogy adjunk az osztály .no-js HTML-tag helyszínen, és tartalmazza Modernizr script a fejrész után minden CSS-fájl:
Jelenleg Modernizr kapható globális objektum lehet hivatkozni együtt a függvény nevét, hogy ha létezik. Ez visszaad egy logikai értéket (igaz vagy hamis).
Példa problémamegoldás cross-browser CSS: SVG támogatás ellenőrzése, és üzemszüneti PNG
Jelenleg az a tendencia növekvő használata az SVG (Scalable Vector Graphics), de a grafika nem támogatja az IE8 és alatt. Ha SVG támogatott böngésző, Modernizr generál CSS-osztály .svg. Ha SVG nem áll rendelkezésre, az eszköz egy HTML klass.no-svg. Az alábbi CSS böngészők SVG támogatás rendszeres osztály .logo. mivel a böngészők, amelyek nem támogatják az SVG - szabályok .no-svg:
Kerekítése a sarkokban keret nem támogatott a IE8 és alatt. Mi is létrehozhatunk különböző CSS-osztályok. amelyeket jelenlététől függően funkció border-radius:
következtetés
Amikor az adaptív web design a régebbi böngészők, vannak egyetemes megoldásokat. Fontos, hogy elemezze az erőforrás közönség, hogy képet alkothassunk a tényleges száma böngésző felhasználóinak. Akkor meg kell alaposan tesztelni a helyszínen, hogy a potenciális problémákat cross-browser.
Fordítása a cikk «kölcsönös Böngésző kompatibilitás Érzékeny Web Design A régi böngészők» készítettünk egy csapat barátságos Web design projekt tól Z-ig