CSS3 megoldások az Internet Explorer
De a fejlesztők szembesülnek azzal a ténnyel, hogy az ügyfelek ragaszkodnak cross-browser megoldások, előrehaladott CSS3 funkciókat. igénylő azokat még az IE6. Ez a cikk hozta össze a számos lehetőség, hogy a fejlesztő figyelembe vehet, ha dolgozik ilyen körülmények között, amikor a CSS3 támogatás szükséges minden verziójú Internet Explorer (IE6, IE7 és IE8 - mindegyikük még mindig jelentős mennyiségű a látogatók).
átláthatóság
Valószínű, hogy minden a fejlesztők érthetetlen az a tény, hogy az Internet Explorer még nem támogatja ezt a nagyon népszerű (bár zavaró) tulajdon. Ezt alkalmazzák az egész hely olyan sokáig, hogy mindenki elfelejtette volna, hogy a valóságban - ez CSS3 tulajdonságot. Bár IE nem támogatja fényelnyelés tulajdon. kínál hasonló átláthatóság hatásokat használja a saját tulajdonságai szűrőt.
Sőt, akkor csak a második sorban, ami működik mind a három az Internet Explorer. De ha kell, hogy csak az átlátszóságot IE8 valamilyen oknál fogva, akkor a harmadik sorban, amely a legrégebbi változat a böngésző nem ismeri fel.
Az átláthatóság érték, van telepítve a végén minden sor tulajdonságok az IE, is működik mint az érték a fényelnyelés. Adj egy számot 0-tól 100 (átlátszatlanság tulajdonság használ két-pont-szám tartományban 0 és 1. Például, „44” az IE egyenértékű „0,44” más böngészők). Telepítés átláthatóság öröklött elemek leszármazottak, hogy zavaró lehet, ha dolgozik.
demonstráció
Ennek az elemnek siniy háttérszín (# 0000FF), de egy átláthatósága 40%, így a kék levezetésére
Ugyanaz az elem nélkül átláthatóság beállításokat.
hiányosságokat
Keresés tulajdonság csak akkor használható a Microsoft termékek, azaz a CSS nem érvényesít
Mivel abban az esetben, a tulajdonságok használatával fényelnyelés. az érték a szűrő IE öröklődik minden eleme a leszármazottak
lekerekített sarkok
Remiz Rahnas kifejlesztette a HTC fájl neve CSS lekerekített sarkok (letöltheti azt a Google Code). Az oldatot lehet használni a stíluslapok, amelyek csak az IE.
Ez egy csodálatos kódot nem igényel semmilyen támogatást az Ön oldalán, ha csak szükség, hogy kerek a sarkokat. Ez csak akkor szükséges, hogy csatolja a fájlt a CSS kódot, és a program automatikusan elemzi a CSS kód segítségével az értékeket a sugarak a border-radius tulajdonság.
A kód lehet kinézni:
Ideális esetben a használni kívánt viselkedést egyetlen ingatlan stíluslapok IE, ugyanazt a választót CSS, ezért a szkript lesz az értékeket a sugarak.
demonstráció
Mivel a technika használatát igényli, egy külső HTC fájl, a demo megtalálható itt (az oldal a link kell nyitni IE).
hiányosságokat
- HTC fájl 142 sornyi kódot (minimalizálása vagy archiválás tud segíteni, de nem távolítja el teljesen a problémát)
- viselkedés a tulajdonság teszi a CSS érvénytelen
- A szervernek képesnek kell lennie, hogy töltse le a fájlt a HTC használja ezt a technikát
- Úgy tűnik, hogy az IE8 ugyanaz a probléma, ha a HTC fájl elemek lekerekített sarkokkal. amelyek a negatív z-index tulajdonságok
téglalapok árnyékok
Box-árnyék tulajdonság egy másik hasznos tulajdonsága CSS3, amely hozzáad egy elemet a természetes növényzet. IE nem támogatja a tulajdonságok box-árnyék. de a szűrő szállodában egy tisztességes alternatívát.
Meg kell jegyezni, hogy a box-shadow tulajdonság eltávolításra került a modulhatárok és CSS3 háttérrel. Így CSS3, van némi bizonytalanság a jövőt abban a pillanatban.
Amellett, hogy a tulajdonságokat WebKit és Mozilla, akkor létrehoz egy szűrőt, amely működik az összes verziójú Internet Explorer.
demonstráció
Ez az elem egy árnyék, amely megjelenik az Internet Explorer.
hiányosságokat
- A szűrő beállításait árnyékok IE nem felel meg pontosan az épület box-árnyék. Annak érdekében, hogy ugyanolyan elvégzésének szükségességét pontos beállítása értékek is komoly probléma.
- Szűrés tulajdonságokat vizsgáljuk, valamint a tulajdonságokat WebKit és Mozilla. Így a hiba velejárója minden böngészőben.
szövegárnyék
Hozzáadása árnyék szöveges feliratokat gyakorolt a tervezés és nyomdai weboldalak már sok éve. A web design általában a probléma megoldódik segítségével képeket és néha kétszerezni a szöveg eltolás. CSS3 kínál a fejlesztők könnyen hozzá árnyékok szöveggé egyszerű és rugalmas tulajdonságait szöveg árnyék.
Sajnos, az árnyék a felül a szöveget az Internet Explorer nem olyan egyszerű folyamat - még egy szűrő. A probléma megoldására van egy jQuery plugin. által kifejlesztett dán web designer Kilian Valkhof.
Először telepíteni kell a CSS tulajdonság szöveg-árnyék.
Beállított értékek árnyék színes, elhelyezkedés a vízszintes tengelyen, a helyzet a függőleges tengelyen, és a mértéke blur.
Miután beleértve a jQuery könyvtár és a plugin-t a dokumentumba, akkor hívja a plugin:
A beépülő modul lehetővé teszi, hogy használja a beállításokat módosítani CSS tulajdonságokat.
demonstráció
Mivel ez a módszer használatát igényli a jQuery könyvtár és egy külső plug-in, akkor láthatjuk, egy bemutatót itt.
hiányosságokat
Van néhány komoly hátrányai, amelyek megakadályozzák szélesebb körű alkalmazása ezt a módszert. Valószínűleg jobb lenne létrehozni egy képet, hogy cserélje ki a szöveget az IE.
- Annak érdekében, hogy árnyékban nagyon hasonlított minden böngészőben, akkor be kell állítani speciális beállításokat csak IE alatt oldal design
- Követelmény, beleértve a jQuery könyvtár, vagyis egy további 61-line kód
- az árnyék verzió az IE nem ugyanúgy néz ki, mint más böngészőkben
- Amikor a paramétereket a dugót, ami megváltoztathatja a beállítási értékeket a tulajdonságokat a CSS, a bővítmény nem működik megfelelően, árnyékok kimenetre hanyag
- Ellentétben CSS3 bővítmény verziója nem támogatja a többszörös árnyékok
- Valamilyen oknál fogva, annak érdekében, hogy ez a munka IE8 kell kérni az elem z-index értéke
Létrehozása színátmenetek háttér kiváló technika CSS3, amely segít megmenteni a fejlesztési időt. Bár az Internet Explorer nem támogatja a CSS3 színátmenetek, nagyon könnyen megvalósítható őket egy konkrét szintaxis.
Annak megállapításához, a gradiens, ami ugyanúgy néz ki minden böngészőben, beleértve az összes verzió az Internet Explorer, a következő kód használata CSS (az utolsó két sor IE):
Az IE GradientType szűrő lehet értékeket '1' (horizontálisan), vagy '0' (függőlegesen).
demonstráció
Ez az elem egy lineáris gradiens, amely mint az Internet Explorer.
hiányosságokat
- A CSS fájl nem bizonyul megfelelőnek. Ez az állítás igaz az értékeket a WebKit és Mozilla
- Egyéb szükséges kód IE8, ami növeli a fejlesztési időt
- Színátmenetek WebKit és a Mozilla lehetővé teszi, hogy állapítsa meg a „stop”, ez nem lehetséges, hogy a gradiens IEy
- IE szűrő nem tudja meghatározni a „radiális” gradiens, amely megmarad a WebKit és a Mozilla
- A gradiens látható volt az IE, az elem kell egy sablont (azaz, tulajdonságok, amelyek meghatározzák a grafikus paraméterek, mint például a magasság és a szélesség kell beállítani azt)
Átlátszó háttér színe (RGBA)
CSS3 másik módszer segítségével az átláthatóság, amely befolyásolja az alfa-csatorna a megadott háttérszínt. Az Internet Explorer nem támogatja ezt a funkciót, de lehet játszani.
Kompatibilitás böngészők CSS3 szintaxis alfaértékét csatorna háttérszín az alábbiak szerint:
CSS szabály határozza meg a háttér színét RGB értékét és további változást az alfa értéke 0,4. Szimulálni az Internet Explorer használjon szűrőt létrehozni egy gradiens azonos kezdeti és végső megfelelő színeket átláthatóságát értéket. Ilyen tulajdonság lehet felvenni a stíluslap csak IE, amely törli a korábbi beállításokat.
Gradient ugyanúgy néz ki, az IE-ben id más böngészők, átfedések RGBA átláthatóság hatást. \
demonstráció
Az első példa működik böngészők, amelyek támogatják a RGBA, a második csak akkor működik az Internet Explorer:
Ez a bekezdés a háttérben színtranszparenciát 40% definiált keresztül RGBA
Bekezdés IE használ szűrő szimulálja RGBA átláthatóság (csak akkor működik, IE).
hiányosságokat
- Keresés tulajdonság nem ment át az ellenőrzésen
- CSS további sort szükséges IE
- Elemnek van egy sablon
összetett hátterű
Ez a CSS technika rengeteg gyakorlati alkalmazások széles körű alkalmazását. Jelenleg, IE és az Opera nem támogatja az összetett háttérrel. Érdekes tény - IE 5.5 verzió képes használni összetett hátterű ugyanazon elem egy szűrővel.
A Firefox, Safari és Chrome használata összetett hátterű következő szabály CSS:
Ahhoz, hogy használni a két háttérrel egyik eleme az IE a következő szabály:
demonstráció
Az alábbiakban egy szerves része Melyik háttér, ami megjelenik a Chrome, a Safari és a Firefox (IE nem látok semmit):
Az alábbiakban megadott elemnek van egy összetett mintázat, amely a kimenet IE (más böngészők csak egy kimeneti minta):
hiányosságokat
- CSS kód nem tesztelt
- A második kép használt ingatlan szűrőt. Ez mindig jelenik meg a bal felső sarokban, és nem kell megismételni. Így a módszer korlátozva van használni
- Ahhoz, hogy egy pontnak a központban (mint a többi böngésző). akkor létre kell hozni egy képet egy további körül fehér szimulálására központosító
A forgatás a elemek (CSS transzformáció)
CSS3 egy sor átalakulás és animáció, ami néhány tűnhet alkalmatlan CSS. Mindazonáltal van egy módja annak, hogy szimulálják a forgó elem az Internet Explorer? bár korlátozott formában.
Forgó elem 180 fokkal (függőleges forradalom):
Az ilyen intézkedések IE használja a szűrő:
elforgatás paraméter a következő értékeket: 1, 2, 3, vagy 4. A megfelelően, a forgatás által a 90, 180, 270, vagy 360 fok.
demonstráció
Az alábbiakban megadott elem jeleníti meg a szöveget fejjel lefelé az ingatlan szűrőt. Annak igazolására, az elem sötét szürke keret szélessége 3 pixel alább. Ha bekapcsolja a cella határán jelenik meg a tetején.
Ez az elem fordított 180 fokkal.
hiányosságokat
- CSS táblázat nem bizonyul megfelelőnek.
- Míg Mozilla WebKitje elforgatható lépésekben B1 mértékben, az IE szűrő csak 4 fázisforgatási, ami korlátozza annak rugalmasságát.
következtetés
Bár IE nem támogatja a CSS3, ez nem jelenti azt, hogy lehetetlen megvalósítani ilyen tulajdonságokkal.
Sok esetben a legjobb megoldás a szervezéssel foglalkozó IE megjeleníti korlátozott tulajdonságai. A fenti módszerek segítenek abban az esetben, az ügyfél ragaszkodik a pontosabb cross-browser lejátszását az erőforrás.
Által nyújtott információk útján két csatorna (látás és hallás) a képzés hatékonyságának sokkal jobb tanulás könyvekből. A házi feladatok és online tesztek lehetővé teszi, hogy folyamatosan úgy gondolja, a célnyelven, és azonnal ellenőrizze tudását!
Ha azt szeretnénk, hosszú ideig, hogy tanulmányozzák, hogyan lehet HTML-t, akkor engem, mert van jó hír!
Ha már megtanulta a HTML és tovább szeretne lépni, a következő lépés az lesz, hogy tanulmányozza a CSS technológiával.
Ha azt szeretnénk, hogy megértsék a fogalmak domain és tárhely, megtanulják, hogyan kell létrehozni egy adatbázist, feltölteni a fájlokat a honlapon keresztül FTP szerver, hozzon létre aldomain konfigurálja a postaládákat a helyszínen, és ellenőrzi a részvétel, a tanfolyam kifejezetten az Ön számára!