CSS trükköket és adaptív a böngésző, a css, internet technológia, cikkek

Egyre több a fejlesztők mozog a táblázat elrendezés az elrendezés a CSS segítségével. Ha vannak előnyei, például kevesebb a betöltési idő, az elérhetőség javítása és könnyebb kezelését, miért nem megy?

Történelmileg a legalapvetőbb probléma a CSS segítségével az volt, hogy nagyon kevés böngésző támogatta őket. De az ötödik változat, minden böngésző jó támogatja a CSS, amely a jelenleg használt 99% -a böngészők.

Ez is egy fontos kérdés az, hogy a böngészők néha értelmezni CSS parancsok másképp. amit a fejlesztők felemelje a kezét az égre, és térjen vissza az asztalokhoz. De ne legyen túl elriasztani, mert a mértékben, hogy tanulni fog CSS, megtudhatja a különbségeket, és látni, hogy ezek nem annyira.

Hogyan lehet feltörni művek alkalmazkodás a böngésző

kiigazítás elve az, hogy küldjön egy becsapni a böngésző CSS parancsokat, és minden más - más, hogy elsőbbséget élveznek az első. Ez annak köszönhető, hogy az elv, hogy ha van két CSS szabályokat, a második szabály van kötve, hogy magasabb prioritást.

Tegyük fel, hogy az intervallumot a fejléc és a többi tartalma a 25 pixelek az Internet Explorer. Az IE, ez a távolság már meg normális, de az Opera, Firefox és a Safari a különbség túl nagy, és sokkal jobban fog kinézni, ha annak értéke lesz 10px. Annak elérése, hogy minden böngészőben minden ugyanúgy nézett ki, akkor létre kell hozni a következő két szabály:

#header # 123; margin-bottom: 25 képpont # 125;
#header # 123; margin-bottom: 10px # 125;

Az első parancs célja az IE, a második - az összes többi böngésző. És hogyan fog ez működni? Nos, most már nem persze, mert minden böngésző tudja érteni mind a szabályokat, és ennek megfelelően fogja használni a második, mert ez az utolsó.

Hozzáadása révén, CSS hack tudjuk rejteni a második szabály az IE. Ez azt jelenti, hogy az IE nem is tudják, hogy van egy másik szabály, ezért használja majd az első. Hogyan kell csinálni? Olvassa tovább.

Detection for Internet Explorer

Kényszeríteni IE kell használni a jobb mi a szabály, fel tudjuk használni leszármazottja választó parancsot. ami IE nem érti. Ez a parancs két elemet tartalmaz, amelyek közül az egyik leszármazottja a másik. A mi esetünkben, html> test utal, hogy a gyermek, test. tartalmazta a szülő html elemet.

Így csapatunk alakítjuk a következő formában:

#header # 123; margin-bottom: 3EM # 125;
html> test #header # 123; margin-bottom: 1em # 125;

IE nem tudja megérteni a második CSS szabályt, mert nem tudja, mit kell tenni a kifejezés a html> szervezetben. így fogja használni az első szabály. Minden más böngészők fogja használni a második szabályt.

Érzékelése IE 5

Első pillantásra úgy tűnhet furcsának, hogy kell használni a különböző szabályok különböző változatai IE, de IE5, nagyon fontos. Ennek oka, hogy IE5 hibásan „megérti” doboz modell. A szabvány szerint a telepítés során szélessége az elem CSS, padding és a határok nem tartalmazza ezt az értéket. Mégis IE5 valahogy megmagyarázhatatlanul tartalmazza ezeket a mennyiségeket a szélesség, ezáltal csökken a szélessége elemek a böngészőben.

Szabály meghatározza elem szélessége egyenlő 10em, az összes böngészők, kivéve IE5, ahol az elem szélessége fogja 5em (IE5 tartalmaz egy pad mindkét oldalán a számítási szélesség + frame):

#header # 123padding: 2em; border: 0.5em; szélesség: 10em # 125;

A megoldás erre a problémára az, hogy hack boxhoz hack, kitalált Tantek # 199; Elik, amely, hála neki lett elég jól ismert a CSS környezetben aktivisták. Most látni fogja, hogy az általa képviselt. Így annak érdekében, hogy alkalmazkodni tudjanak a IE5 és CSS szabály, akkor kell használni a következő bejegyzést:

#header # 123; padding: 2em; border: 0.5em; szélesség: 15em; hang-family: "" # 125; ""; hang-family: örökli; szélesség: 10em # 125;

Ahogy korábban kitalálta képzelni ez teljesen lehetetlen. De a legfontosabb dolog az, hogy ez tényleg működik, azaz IE5 eredetileg a szélessége 15 képpont, amely tartalmazni fogja padding mindkét oldalon, és a keretek (bal és jobb). Ez adja a szükséges szélessége 10em az IE5.

További 15em értéket fogja helyettesíteni a második érték 10em minden böngészőben, kivéve IE5. amelyek valamilyen okból nem érti a CSS parancs, ami után azonnal a hack-kifejezést. Ez nem a legelegánsabb megoldás, persze, de működik.

Érzékelése IE MAC

IE a MAC, őszintén szólva, olyanná teszi még furcsa dolgokat CSS. Úgy tűnik, a böngésző indulhat :) elavultnak tekinthető, mert a Microsoft nem felszabadító frissítéseket is. Ezért sok fejlesztő kódot írni, oly módon, hogy a helyet legalább normálisan látható IE / Mac, és nem rendelkeznek hasonló, mint más böngészők funkcionalitás és a design. Azon felhasználók, akik használják az IE / Mac, elérhető lesz az összes erőforrás a helyszínen, és ez elég.

Elrejteni egy parancsot egy hack IE / Mac CSS hack, akkor csak meg kell, hogy bekerüljenek mindegyikük között a vonalak és a csillagok:

/ # 42; Elrejtése IE-Mac # 42; /
#header # 123; margin-bottom: 3EM # 125;
#footer # 123; margin-top: 1.5em # 125;
/ # 42; vége elrejtése # 42; /

IE / Mac egyszerűen figyelmen kívül hagyja ezeket a parancsokat. Ez a hack akkor lehet hasznos, ha egy bizonyos része nem működik megfelelően az IE / Mac. Ha ez a partíció nem elsődleges, akkor egyszerűen elrejteni IE / Mac az alábbiak szerint:

#noiemac # 123; display: none # 125;

/ * Hide IE-Mac * /
#noiemac # 123; kijelző: blokk # 125;
/ * End elrejtése * /

Az első CSS szabályt elrejti az egész szakaszt hozzárendelve noiemac id (azaz