Css3 megoldások az internet explorer számára
CSS3 - ez talán a legforróbb trend a web design ma, ami lehetővé teszi a tervezők, hogy bele a különböző elemek és megoldásait projektek révén szerény CSS és elkerülve a nem-szemantikus jelölés, további képek és komplex elemei a j # 097; vascript.
Sajnos ez nem titok, hogy bárki, hogy az Internet Explorer (még a legújabb verziók) még mindig nem támogatja a legtöbb funkciót, beleértve a CSS3.
A tapasztalt fejlesztők megértik, mennyire fontos a CSS3 alkalmazása az új projektekben, de egy speciális módszer. Annak érdekében, hogy a tartalom akkor is elérhető maradjon, ha a böngésző nem támogatja a CSS3-at.
Vannak azonban olyan esetek, amikor az ügyfél ragaszkodik ahhoz, hogy a projekt böngésző-megoldásokat tartalmazzon, amelyek még az IE6-ban is működnek. Ilyen esetekben az általunk gyűjtött a választékot, hogy a fejlesztők is használhatják azokat az eseteket, amikor be kell vezetni a CSS3, de addig menteni funkciót böngészők támogatása nélkül (IE6, 7 és 8).
Opacitás (sűrűség / áttetszőség)
Úgy tűnik számunkra, hogy sok fejlesztő zavarba ejtette, hogy az Internet Explorer még mindig nem támogatja ezt a nagyon gyakori funkciót. Már mindenki számára olyan unalmas, hogy néha elfelejtjük, hogy ez egy CSS3 funkció. Habár IE nem támogatja kifejezetten ezt a funkciót, nagyon hasonló rendszert valósíthat meg:
Valójában csak a második sorra van szüksége, amely az Internet Explorer három változatában működik. De ha valamilyen oknál fogva csak ezt a funkciót kell használni az IE 8 verzióban (nem a 6. és a 7. pontban), akkor csak a harmadik sort alkalmazhatja, amely nem működik a korábbi verziókban.
Az egyes böngészőknél a vonal végén lévő átlátszóság ugyanazt az elvet alkalmazza, mint a sűrűség szintjei, 0 és 100 között (bár a sűrűségi szint két számjegyből áll 0-ról 1-re). Azt is meg kell jegyezni, hogy az átlátszósági értékeket (még a standard módszerrel is) örökölni fogják az összes gyermek, mivel nincs különálló beállításuk.
* A szűrő paraméterei csak a Microsoftra érvényesek, ezért a CSS kód nem tekinthető érvényesnek
* Ami az átláthatósági szintet illeti, az Internet Explorer szűrőjében minden gyerek örökölte a paramétereket.
Border-radius (lekerekített sarkok)
A határ-sugár opció (gyakoribb, mint lekerekített sarkok a CSS3-ban) egy másik közös CSS3 szolgáltatás. Ez a beállítás lehetővé teszi a fejlesztők számára, hogy elkerüljék a fejfájást a további elemek elhelyezése révén j # 097; De aztán újra a Microsoft nem is akar együttműködni, és az Internet Explorer nem támogatja ezt a funkciót.
Szerencsére van legalább egy olyan megoldás, amely az IE jelöléshez alkalmazható. Remiz Ranas a HTML Remix-ről létrehozta a CSS Curves Corner nevű HTC fájlt. amely letölthető a Google Code-ba.
A nagy dolog az, hogy telepítésével ezt a kódot, akkor nem kell figyelemmel kíséri a munkáját, csak meg kell adnia a sugár értékeit a lekerekített sarkok. Csak meg kell adnod egy linket a CSS-fájlhoz, és a szkript automatikusan elemzi a CSS-t a standard határ-sugár paraméter megfelelő sugárértékéhez.
A következőképpen néz ki a kódod:
Egyszerűen működik, ahogy fent látható. Bár ideális esetben csak CSS-ben használhat értéket az IE-ben, ugyanazt a választót használja a CSS-ben, hogy a kód megérthesse, hol kaphassák meg a sugárértéket.
Mivel ez a módszer egy külön HTC fájlt igényel, itt láthatja a bemutatót.
* A HTC fájl 142 sorból áll (az optimalizálás vagy a GZip-tömörítés hozzájárulhat)
* A viselkedési paraméter érvényteleníti a CSS-t
* A kiszolgálónak szüksége van arra, hogy betöltse a HTC fájlt annak érdekében, hogy ez a módszer működjön
* Az IE8-ban előfordulhat, hogy egyes esetekben problémák merülnek fel, ha a HTC-fájl kényszeríti a görbe elemet negatív értéket z-indexre
Box Árnyék
A box-shadow opció egy másik CSS3 funkció, amely lehetővé teszi görbe árnyékok alkalmazását olyan elemekre, amelyek határ-sugárparamétereket használnak. Az IE nem támogatja a box-árnyékot, de van egy szűrő, amely durván pótolja ezt a funkciót.
Meg kell jegyezni, hogy a box-árnyék paramétert el kell távolítani a CSS3 háttér- és keretmodulból. így valószínűleg a CSS3 a jövőben kicsit más lesz, mint most.
Amint az a fentiekben látható, a WebKit és a Mozilla beállítások mellett olyan árnyékszűrőt alkalmazhat, amely az Internet Explorer összes verziójában működik.
* Az IE árnyékszűrő beállításai nem egyeznek a többi paraméterrel, ezért ahhoz, hogy megközelíthessük ezt a hatást, be kell ásni az értékeket, hogy elérjük a kívánt eredményt.
* A szűrőparaméterek nem érvényesek, hanem a WebKit és a Mozilla családok böngésző paraméterei is, ezért valószínűleg nem minden külső böngészőben találja a külső eltérést.
Szöveges árnyék
Ezt a módszert már évek óta gyakorolják mind a nyomtatott termékek, mind a webdesign számára. Ami a weboldalt illeti, minden sokkal egyszerűbb a képek miatt, vagy a szöveg másolása és elhelyezése miatt. A CSS3 lehetővé teszi a fejlesztőknek, hogy egyszerű árnyékfüggvénnyel könnyen árnyékot adjanak a szöveghez.
Sajnos az Internet Explorer alkalmazással újra felmerülhetnek problémák, még akkor is, ha megfelelő szűrőket használnak. A probléma megoldásához a fejlesztő, Kilian Valhov egy plugint írt a jQuery számára. amellyel szöveges árnyékot alkalmazhat IE-ben.
Először is, a CSS-ben meg kell adnia a szöveg-árnyék értékét:
Az értékek határozzák meg az árnyék színét, a függőleges és a vízszintes helyzetet, valamint a homályosság szintjét.
Miután végrehajtotta a jQuery könyvtárat a dokumentumba, futtathatja a plug-inet a jQuery használatával:
A plugin lehetővé teszi paraméterek cseréjét CSS értékek helyett. Látogasson el a fejlesztő weblapjára, hogy megismerkedhessen a részletekkel.
Bár ez a plugin keresztböngésző. A fenti példa a CSS kódban már megadott CSS3 értéken alapul, így a standard CSS beállításokkal fog működni, ahol külön kell futtatni.
Mivel ez a módszer megköveteli a jQuery könyvtár és a külső plug-in fájl használatát, a demot közvetlenül a hálózaton láthatja.
Vannak olyan tényezők, amelyek nagyban befolyásolhatják ezt a módszert. Talán sokkal kényelmesebb lesz, ha árnyékot készít egy képen.
* Annak érdekében, hogy az IE árnyéka ugyanúgy nézzen ki, mint a többi böngésző esetében, az IE-re vonatkozó különböző CSS-beállításokat kell alkalmazni, amelyek időt igényelnek a munka fejlesztésére és karbantartására
* Meg kell adnod a jQuery könyvtárat és a plugin fájlt is, amely egy 61 vonalkód (a Gzip-compression hozzájárulhat)
* Az IE árnyéka soha nem fog kinézni, mint a többi böngészőben
* A csereparaméterek alkalmazása során a plugin néha extra értéket generál, ami hatalmas árnyékot okozhat, mivel a régi paramétereket nem változtatták meg
* A CSS3 verziótól eltérően a plugin nem támogatja több árnyékot egyszerre
* Valamilyen oknál fogva, az IE nyolcadik változatában végzett munka érdekében meg kell állítania a z-indexet
Az időköltségeket csökkentő módszerek alkalmazásának másik példája az a képesség, hogy a CSS3 segítségével saját magasságokat és háttereket hozhat létre. Bár az IE nem támogatja a gradienseket, nagyon könnyen megvalósítható a megfelelő IE család szintaxisán keresztül.
Annak érdekében, hogy az összes böngészőben ugyanúgy megjelenjen a gradiens, beleértve az Internet Explorer összes verzióját is, használja az alábbi CSS kódot (IE utolsó két sorában):
IE szűrők esetén a GradientType beállítható "1" (vízszintes) vagy "0" (függőleges) értékre.
Tipikusan csak problémák fordulnak elő az olyan szűrőkön keresztül, amelyeket IE szűrő segítségével hajtottak végre.
* A CSS kódod érvénytelen, bár ez érvényes a WebKit és a Mozilla család böngészőinek értékeire is
* Az IE8-nak más kódra van szüksége, ami időt igényel
* A WebKit és a Mozilla gradiensei lehetővé teszik a korlátozások kijelentését; amely nem tulajdonítható az IE színátmeneteknek, ami csökkenti a rugalmasság szintjét
* Az IE szűrő nem teszi lehetővé a sugárirányú gradiensek kijelentését, amelyeket a WebKit és a Mozilla böngészők támogatnak
* Ahhoz, hogy a színátmenetek láthatóak legyenek az IE-ben, a gradiens elemnek sablonjával kell rendelkeznie
Átlátszó háttérszínek (RGBA) (Átlátszó háttérszínek)
A CSS3 más módot kínál az átláthatóság bevezetésére, ezúttal az alfa csatornán keresztül, amely háttérszínként szerepel. Az IE nem támogatja ezt a módszert, de más módon is megvalósítható.
Itt van az alfa háttércsatorna kód a CSS3-val kompatibilis böngészők számára:
A fent megadott CSS kóddal a háttérszín RGB értékekre és az opcionális "alpha" ".4" értékre lesz állítva. Az IE-ben való megjelenítéshez használhatja a megfelelő szűrőt, hogy létrehozzon egy fokozatot ugyanazzal a kezdő és végsõ színnel, és támogassa az átlátszó értéket. Ez csak az IE-hez tartozó CSS-ben szerepel, ami az előző paramétereket felváltja.
Az IE színátmenet ugyanolyan lesz, mint a többi böngésző esetében, megkettőzi az RGBA átláthatóságát.
Az alábbi példák közül az első példa az összes olyan böngészőben működik, amelyek támogatják az RGBA színeket. A második példa csak az IE-ben fog működni.
* A szűrő paraméterei nem érvényes CSS kód
* Az IE CSS kódja további kódkódot igényel
* A tétel megköveteli a jelölést
Megjegyzések: Kezdetben a PNG módszert használtuk e hatás elérése érdekében, de csak az IE7-8-ban dolgozott, és az IE6 speciális hackezést igényelt. Aztán megpróbáltunk egy másik módszert, és rájöttünk, hogy jobban működik. A PNG módszer egy másik módja, de több problémája lehet, és számos további mellékhatása van.
Több háttér
A CSS3 másik módszere, amely óriási mértékben hozzájárult a CSS fejlesztéséhez. Jelenleg ezt a funkciót nem csak Opera és IE támogatja. De az érdekes, hogy az IE, az 5.5-ös verzióig támogatja több elem beágyazását egy elembe egy szűrőn keresztül.
Továbbra is alkalmazhatja a hacket az IE6-ra, és látni fogja, hogy a kép kétszer jelenik meg, amelyet a háttér hozzáadásával meg kell oldania: nincs paraméter, majd a szűrő alkalmazása. Ugyanezen elv alapján az IE lehetővé teszi két kép használatát mint egy elem hátterét.
Ha több háttérképet szeretne alkalmazni a Firefoxban, a Safariban és a Chrome-ban, használja a következő CSS kódot:
Ha két háttérképet szeretne az IE egyik elemére alkalmazni, használja az alábbiakat a CSS-ben az IE-ben:
Az alább látható blokk több képet jelenít meg a Chrome, a Firefox és a Safari alkalmazásban (bár az IE-ben nem fog látni semmit):
Az alábbi blokk több képet jelenít meg az IE6-8-ban (de más böngészőkben csak egy kép jelenik meg):
* A CSS kódod nem érvényes
* A második képet a szűrő paramétere alkalmazza, és mindig a bal felső sarokban jelenik meg. Nem fogja tudni ismételni, ezért ez a módszer nem különösebben rugalmas, és csak bizonyos esetekben használható
* Ahhoz, hogy egy elemet központosítsunk (mint a többi böngészőben), létre kell hoznunk egy képet, amelynek pontos fehér résszel kell rendelkeznie. Így szimulálhatja a központosítást (amint azt a példa mutatja)
* Az AlphaImageLoader szűrő problémákat okozhat a munka során
Az elem forgatása (elem forgatása) (elem forgatása)
A CSS3 számos funkciót biztosít az átalakítás és az animáció számára. Vannak módok is az elemek elforgatására IE-ben, bár ez ritkán található meg.
Annak érdekében, hogy az elem 180 fokos legyen (függőlegesen csúsztatva), a következő CSS3 kód szükséges:
Annak érdekében, hogy ugyanazt az elforgatást hozzon létre az IE-ben, használnia kell a megfelelő szűrőt:
A forgatási érték lehet 1, 2, 3 vagy 4. Ezek a számok 90, 180, 270 vagy 360 fokos perspektivikus forgást jelentenek.
Az alábbiakban látható elem fordított állapotban jelenik meg az Internet Explorer programban. Mivel fejjel lefelé fordul a szűrő paramétere. Annak érdekében, hogy ezt világosabbá tegyük, 3 pixel vastagságot alkalmaztunk az "alsó" határon, ami most az elem tetején jelenik meg.
* A CSS kódod nem lesz érvényes, bár ez érvényes a WebKit és a Mozilla böngészőinek kódjára is
* Böngészők A Webkit és a Mozilla lehetővé teszik, hogy az elemeket egy bizonyos fokig elforgassa, az IE szűrő pedig csak 4 értéket tartalmaz, ami nagymértékben csökkenti a rugalmasságot
Ezenkívül: IE lehetővé teszi, hogy az elemeket ugyanolyan rugalmassággal forgassa el, mint a CSS3. Nehéz megmagyarázni példával, de a CSS3. amelyet a Paul Airex projektje bemutatott, megmutatja nekünk, hogy IE-kompatibilis kódot használhatunk CSS3 forgatás esetén.
Valószínűleg sok fejlesztő gyűlölnek bennünket erre a gyűjteményre, mivel egyes ügyfelek olyan okos, hogy tudnak vezetni megoldásokat a keresési sáv az Internet Explorer, majd piszkálni itt fejlesztők. Vigyázz tehát, hogy mit mondasz ügyfeleidnek. Habár IE nem támogatja ezeket a funkciókat, ez nem jelenti azt, hogy ez lehetetlen.
És ne feledjük, hogy minden alkalommal meg kell átírni az eredeti CSS beállításokat IE, vagy ha az j # 097; vascript, jQuery vagy HTC-fájlt, akkor kell támaszkodni a külső források. Ez biztosítja, hogy más böngészők ne tegyenek szükségtelen és felesleges kérdéseket.
Sok esetben az Internet Explorer legjobb megoldása a projekt funkcionális részeinek csökkentése. Reméljük, hogy a fenti megoldások legalább néhány lehetőséget nyújtanak a bonyolultabb alkalmazások megteremtéséhez az igényes ügyfelek számára.