Minden böngésző saját stílussal
Minden böngésző saját stílussal
Annak ellenére, hogy a modern böngészők fokozatosan közelít egymáshoz a képességek és támogatja a CSS specifikáció, köztük is vannak különbségek a megközelítés. Minden böngésző értelmezi a saját belátása HTML és stílusok különösen. Lehet vitatkozni, hogy melyik böngésző „korrektebb”, a lényeg továbbra is az egyik - mindaddig, amíg számos böngészők és embereket alkalmaznak, a helyszín kell tenni annak érdekében, hogy megfelelően és hiba nélkül jelenik meg bennük. A legtöbb ember csak közömbös mindenféle szabványok és előírások, ha csak azért, hogy nem tud a létezésükről. Sokan nem is tudják, mi az a HTML és használja a böngésző van telepítve a rendszerben alapértelmezés szerint. Az emberek jönnek vonatkozó információkat tartalmazó honlapok és érdekli, hogyan lehet gyorsan és gond nélkül. Ha a kedvenc böngésző „görbe” jeleníti meg a helyszínen, akkor könnyebb, hogy nem érti, mi történik, és zárja be a helyszínen, és megy egy másik, az előny, hogy most sok minden témában.
Így arra a következtetésre jutunk, hogy szükség van, hogy egy univerzális kód „kihegyezett” a különböző böngészők, ami azt jelenti, hogy meg kell tanulni a jellemzőit és tesztelni egy csomó dokumentumot. És itt állunk szemben ellentmondásokat alkalommal a böngésző bypass hogy csak akkor lehet írni a CSS kódot minden böngészőben. A következő foglalkozik módszereket, amelyek figyelembe veszik a sajátosságait a böngésző, és lehetővé teszi, hogy csökkentsék az időt és energiát, amikor helyek létrehozása.
document.write ( "„)
ahol style.css egy fájl egy adott böngésző.
Netscape4 = document.layer;
Netscape6 = Mozilla = (navigator.appName == "Netscape") DOM;
Netscape7 = navigator.userAgent.indexOf ( "Netscape / 7")> = 0;
Opera5 = window.opera DOM;
Opera6 = Opera5 window.print;
Opera7 = Opera5 navigator.userAgent.indexOf ( "Opera 7")> = 0;
IE = document.all ! Opera5;
Firefox = navigator.userAgent.indexOf ( "Firefox")> = 0;
ha (IE) document.write ( "„);
más document.write ( "„);
Ne gondold, hogy az egyes stílusok kell írni minden böngészőben. Például a Netscape (6-os verzió felett), a Mozilla és a Firefox alapulnak ugyanazt az alapvető, úgynevezett Gecko, így c munka helyek közel azonos. Valamilyen módon a megközelítés közel böngészők az Internet Explorer 6 és 7, Opera, és a legtöbb esetben ezek tükrözik az eredmények egyaránt helyesek. Kiderült, hogy általában szükséges létrehozni, csak két különböző stílusú, Ajánlott böngészők tartozó különböző.
Gyermek szelektor
CSS specifikáció szerint a> jel (jele „több”) kezelésére használják a gyermek elemeinek stílusát. Vedd H1> I
Vannak kontextus szelektor a küldetés nagyon hasonlít gyermek szelektor. Ebben az esetben, a két szelektorok vannak írva egy sorban szóközzel elválasztva.
DIV> I leányvállalata választó
DIV I A helyi választó
A különbség az ilyen típusú, a következő szelektor. Stílus választó alkalmazzák a gyermek csak akkor, ha ez egy közvetlen leszármazottja, más szóval, közvetlenül található a szülő elem. A kontextus választó vállal szintű fészkel. Annak érdekében, hogy világos, hogy mi forog kockán, mi magyarázza a következő kódot (2. példa).
2. példa helytelen használata leányvállalata választó
Lorem ipsum dolor sit amet.
A bemutatott példában a DIV hozzáadásával tag. melynek közepén a szakasz P. és ő viszont tag I. A stílus írott szöveg színe megváltozzon, hogy piros a választó I. de csak akkor, ha közvetlenül belül DIV. És a mi esetünkben a címke belsejében található P. én ezért nem vonatkozik a stílust. Ahhoz, hogy ez a munka, akkor használja az alábbi lehetőségeket.
P> I
DIV> P
DIV> P> I
A kontextus szelektor nem veszik figyelembe a rendelést beágyazott elemeket, ezért elhelyezhet DIV I 2. példa akkor működik megfelelően, azaz a A szöveg színe a vörös.
Térjünk most vissza a böngésző. Az Internet Explorer nem érti gyermek szelektor, de jól működik összefüggésben. Létrehozása CSS kód, amely egyaránt tartalmaz az ilyen és más szelektor, ezáltal különbséget a stílus az IE böngésző, és az összes többit. Bár kontextus szelektorok értjük minden böngésző, ezt követő vonal felülírja az aktuális beállítást stílus (3. példa).
3. példa szelektorok különböző böngészők
Lorem ipsum dolor sit amet.
A példa azt mutatja, hogyan lehet létrehozni egy zöld szöveget az IE böngészőt, és piros - az összes többi.
Az Internet Explorer 5-ös látható egy érdekes funkció - megérti a szerkezet HTML> választó. hogy más böngészők, beleértve a régebbi verziójú saját figyelmen kívül hagyni. Hozzátéve stílus kód szövege HTML> DIV
univerzális szelektor
Értelemben bármely eleme a CSS segítségével a csillag (*), amely az úgynevezett egyetemes választó. Magától értetődő, minden böngésző, hanem a kombinációja * HTML - csak egy Internet Explorert. Így, a stílus változás a különböző böngészők bemutatott 4. példa.
Példa 4. Az univerzális szelektor
Lorem ipsum dolor sit amet.
Ez a példa létrehoz egy stílust IE és az összes többi böngésző.
A szögletes zárójelek között elfogadható, hogy az alábbi kulcsszavakat:
- IE - bármely változata a böngésző Internet Explorer;
- IE 5 - Internet Explorer 5;
- IE 5.5 - Internet Explorer 5.5;
- IE 6 - Internet Explorer 6;
- lt - a böngésző verziószáma kisebb, mint ez;
- GT - verziószám nagyobb, mint a megadott;
- LTE - verziószám kisebb vagy egyenlő, mint a megadott;
- GTE - böngésző verziószáma nagyobb, vagy egyenlő, mint a megadott.
Mivel ezek az elemek csak írni TEST tartály belsejében. szükség van hozzá egy STYLE tag. amint az 5. példában bemutatjuk.
Lorem ipsum dolor sit amet.
A címke COMMENT
Példa 6. Alkalmazási tag COMMENT
Internet Explorer mutatja fehér betűkkel zöld alapon, a többi böngészőhöz - zöld karakterek egy szürke háttér.
Példák stílus használni a különböző böngészők
Tekintsük a feladatot, hogy a használni kívánt más stílust böngészőkre adatok helyesen jelenik meg a weboldalon.
IE böngészők (Opera) és a Netscape (beleértve a Mozilla és a Firefox) különböző megközelítéseket alkalmaznak a koncepció az elem szélességét. IE van beállítva, hogy a szélessége a stilisztikai attribútum szélességét. A Netscape és hozzáteszi, hogy ez az értékek a mezők és határ vastagsága. Ennek a sajátos típusú elemek valamelyest változhat a böngészők. 7. példa azt mutatja, a létrehozását a menüt egy fix szélessége 200 képpont. Nézet menü kisebb kivételtől eltekintve böngészők is helyesen jeleníti meg, de amíg a választó felvételre kerül a paraméter szélesség: 100%. Az a tény, hogy a használata a tulajdonságok display: block a referencia készlet teljes szélességében a menüt (1. ábra), és most nem feltétlenül vigye a kurzort a szigorúan szöveget. De nem a böngésző az Internet Explorer, amely ebben az esetben is igényel több szélessége a szélesség attribútum. A 100% érték vezet az a tény, hogy a Netscape kiválasztó sávot kezd túllépni a határokat, hogy néz ki, elég hanyag (ábra. 2).
Ábra. 1. A szükséges menü
Ábra. 2. Menü szélességű: 100%
Kétféle módon, hogy a menü munka böngészők azonos és hiba nélkül. Az első - szélességének beállításához nem 100%, és kevesebb, például 97%. Bár nem ez a legjobb megoldás, a probléma azonban az, hogy dönt. A második módszer - hozzá szélessége attribútum csak az IE böngésző, arra kényszerítve más böngészők figyelmen kívül hagyja azt, amint azt a 7. példában.
7. példa létrehozása menü
Hogy oldja meg ezt a problémát, nem elég, hogy a margók és növeli a távolságot a számok a szövegben, minden margó ebben az esetben a böngésző teljesen figyelmen kívül hagyták. Meg kell adnia a list-style-position: kívül és mozgassa a szöveget jobbra. Lista nézet ilyen esetben némileg eltérő a különböző böngészőkben, de mégis, helyesen jelenik meg (8. példa).
8. példa hibajavító Internet Explorer 6 böngésző
- Lorem ipsum dolor sit amet
- Consectetuer adipiscing elit
- Sed diem nonummy nibh euismod
- Tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, Quis nostrud exerci mény ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.