codeART

Mint sok más webfejlesztő, én sem igazán kedvelem az Internet Explorert, különösen igaz ez a 6-os verzióra. A mai világban, mikor is az új és erőteljes technikák pl. HTML5 és CSS3 korát éljük és rohamosan fejődik minden, nem csoda, hogy az Ie nem bír lépést tartani. Szerencsére mindig van megoldás. Bemutatnék pár olyan módszert, amellyel kedvenc effektjeink, css beállításaink működésre bírhatóak Internet Explorer alatt is (természetesen a 6-os kilőve).

Cikkünk a hirdetés után folytatódik!

HTML5 engedélyezése Internet Exploreren

Ha érdekel a webfejlesztés biztosan hallottál már a HTML5-ről, a HTML nyelv átdolgozott változatáról, ha nem így lenne itt (wiki) bővebben olvashatsz róla.

A legtöbb modern böngésző képes már kezelni, legalábbis részben, az új HTML5 tulajdonságokat. De természetesen az IE képtelen megbirkózni ezen óriási feladattal, ezért figyelmen kívül hagyja azokat.
Létezik azonban egy megoldás, méghozzá a html5.js (milyen találó neve van, nemde?). Ez a javascript fájl képes elérni, hogy az IE kompatibilis legyen a HTML5 tulajdonságokkal.

Egyszerűen csak hívjuk meg a fájlt a következő módon. Weboldalunk fejlécébe:

1
2
3

<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Forrás: http://remysharp.com/2009/01/07/html5-enabling-script/

Árnyékolás szövegen

A közelmúltban nagyon elterjedt lett a text-shadow css beállítás használata. A legtöbb modern böngésző kezeli is, de gondolom mondanom sem kell, hogy ez sem megy ie alatt.

Létezik azonban egy ie számára készült filter beállítás ami hasonlít a text-shadow-hoz. Viszont ne feledjük, hogy ez a filter nem egy szabványos (valid) css beállítás.

1
2
3
4

p.arnyekolt {
  text-shadow: #0000ff 0px 0px 5px; /* Modern böngészők */
  filter: glow(color=#0000ff,strength=5); /* IE */
}

Forrás: http://www.howtocreate.co.uk/textshadow.html

A box-shadow css beállítás

Szerintem a box-shadow az egyik legjobb, új css tulajdonság. Nagyon szép árnyékolást hozhatunk létre a segítségével eggyetlen kép felhasználása nélkül.

1
2
3

.shadowed {
    box-shadow: 10px 10px 5px #888;
}

Internet Explorerben a következő filter segítségével hozhatunk létre a box-shadow-hoz hasonló árnyékokat.

1
2
3
4
5
6

.shadowed {
    filter:
        progid:DXImageTransform.Microsoft.DropShadow(color=#969696, offx=1, offy=1)
        progid:DXImageTransform.Microsoft.DropShadow(color=#C2C2C2, offx=1, offy=1)
        progid:DXImageTransform.Microsoft.DropShadow(color=#EFEFEF, offx=1, offy=1);
}

Forrás: http://ole-laursen.blogspot.com/2009/08/using-css3-box-shadow-with-ie.html

Lekerekített sarkok

Sokak örömére. Azt hiszem a legnépszerűbb beállítások egyike. A border-radius, képek felhasználása nélkül képes lekerekített sarkok létrehozására, de ezt valószínűleg tudjátok és ismeritek.

Aki esetleg nem, annak itt van a használatának módja:

1
2
3
4
5

.sarkok {
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
}

A jó öreg ie azonban tojik a border radiusra és tűhegyes sarkokat hagy. Erre a problémára viszonylag sok megoldás létezik az interneten. Ezek közül talán a DD roundies a legnépszerűbb. Egy javascript fájlt kell meghívnunk és egy apró js kódot elhelyezni az oldalon, ami egy bizonyos osztályba tartozó elemek sarkait lekerekíti.

Jelen esetben ez az osztály a .sarkok és 10px-es a lekerekítés.

1
2
3
4
5

<script type="text/javascript" src="DD_roundies.js"></script>
 
<script type="text/javascript">
  DD_roundies.addRule('.sarkok', '10px');
</script>

Forrás: http://www.dillerdesign.com/experiment/DD_roundies/

Átlátszóság állítása

Az Opacity az új CSS3 beállítások egyike, mellyel az elemek átlátszóságát tudjuk manipulálni és elég szép webdesignokat készíthetünk a használatával. Viszont explorerben érdekes módon nem működik , ezért megint egy szűrőhöz kell nyúlnunk. Az alábbi példa mutatja hogyan használhatod.

1
2
3
4

.div {
    opacity:.7; /* Alap CSS */
    filter:alpha(opacity=70); /* IE filter */
}

RGB színek használata

Végre a CSS3-ba bekerült az rgb színek használata, ami színhelyesség szempontjából igen hasznos funkció a fejlesztők számára. A modern böngészők a következőképpen használják ezt a beállítást.

1
2
3
4

 .szines-div {
    width: 50%;
    background-color: rgba(0, 0, 255, 0.2); /* Modern böngészők */
}

Az IE-nek ismét egy filterre van szüksége a hasonló hatás eléréséhez.

1
2
3
4
5
6
7
8
9

<!--[if IE]>
<style type="text/css">
.color-block {
    background:transparent;
    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr=#99000050,endColorstr=#99000050);
    zoom: 1;
}
</style>
<![endif]-->

Forrás: http://css-tricks.com/rgba-browser-support/

Többoszlopos elrendezés

A CSS3 lehetővé teszi, hogy a tartalmunkat több oszlopba rendezve jelenítsük meg. Szerintem ez egy nagyszerű dolog, mivel így a tervezők sokkal több lehetőséget kapnak a jobbnál jobb elrendezés kialakítására.
A következő beállítások automatikusan hozzáadják az oszlopokat az osztályhoz tartozó div-hez.

1
2
3
4
5
6

.oszlopok {
    -moz-column-width: 13em;
    -webkit-column-width: 13em;
    -moz-column-gap: 1em;
    -webkit-column-gap: 1em;
}

IE alatt, mint minden ez is másképp megy. Létezik egy jQuery plugin, mely segítségével egyszerűen létrehozhatók oszlopok ebben a csodálatos böngészőben is. A következő példa ezt demonstrálja.

1
2
3

$('#mydiv').columnize();
$('#myotherdiv').columnize({ width: 200 });
$('#mythirddiv').columnize({ columns: 2 });

Forrás: http://welcome.totheinter.net/2008/07/22/multi-column-layout-with-css-and-jquery/

Zárszó

Remélem ezzel a rövid bejegyzéssel sok problémára és kérdésre találtunk választ és megoldást. Az IE vs Modern Böngészők harca véleményem szerint sosem fog eldőlni, az ie régóta képtelen felnőni a feladatokhoz, így alternatív megoldásokat kell találni a felmerülő problémákra.

Aki arról álmodik, hogy valamelyik módszert ie6-on szeretné látni, gyorsan verje ki a fejéből, ugyanis egyik sem működik rajta. Persze különböző technikákkal el lehet érni hasonló hatásokat ezen a böngészőn is.

Ha valami nem világos kérdezzetek nyugodtan.

Szerző: codee47

A nevem Szalai Gergő, foglalkozásom webdesigner és Debrecenben dolgozom egy marketing ügynökségnél. Ha jobban meg szeretnéd ismerni életem online részét, látogass el weboldalamra, vagy használd a következő közösségi siteokat. Facebook | Twitter

Oszd meg:

• Delicious
• Digg
• Facebook
• Google Bookmarks
• Twitter

CSS, Effekt, Html, IE, Tippek