Alapvetően egyértelműen az Internet Explorer az, ami visszatartja a fejlődést a designerek számára, hiszen nagyon sokan használnak régebbi verziójú Explorert amlyek természetesen nem támogatják az új szabványokat. Az egyik ilyen örök kérdés, hogy miként tudjuk a border-eket lekerekíteni. A CSS3 alapvetően felkészült erre az apró trükkre így az Opera Firefox, Chrome Safari négyes kezeli a következő kerekítési parancsot:
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
Ezzel egy 10 pixeles kerekítést adunk a borderünknek, amelyet a szokásos border -el színezhetünk vagy vastagíthatunk. Ez mindeddig igen egyszerű, de mi van az Internet Explorer-el? Nost csak a baj! Ahogy az szokott lenni, de nincs olyan probléma, amire ne lenne megoldás így erre is van.
Alapvetően a legtöbben a képes megoldásokra esküsznek, de valljuk be egy design módosításnál minden képet újra átrajzolni és beszínezni elég macerás feladat. A legjobb megoldás a
CurvyCorners névre keresztelt javascriptes megoldás lehet, amely alapvetően csak Internet Explorer alatt töltődik be és teszi a dolgát minden nehézség nélkül viszi át az előbb ismertetett paramétereket a Microsoft böngészőjébe, de ennek azért ára is van. Először is maga a js sem kicsit, másodszor aa alkalmazásánál el is felejthetjük, hiszen csak lapbetöltődésekkor működik rendesen a dolog harmadszor pedig némi várakozás (1-2 sec) mindig kell, hogy Explorerünk legenerálja a görbítéseket. Mindezek ellenére ez a legjobb fellelhető megoldás, hiszen így nem kell képeket vagdalni a kereteket bármikor elszínezhetjük, módosíthatjuk a görbületet, ect. Ha minden igaz az Internet Explorer 9 már megbirkózik majd a CSS3-al, de több mint valószínű, hogy még évekig használnunk kell majd ezt a scriptet, hiszen a régebbi IE támogatása sok cégnél még mindig egy olyan dolog, ami megváltoztathatatlan.
A most bemutatott megoldás igen sokrétű a készítők honlapján megtalálhatjuk, hogy miként is lehet csak bizonyos elemek borderjeit változtatni vele, és ezen kívül még számos infót is. A leg geyszerűbb megoldás pedig így fest:
< script type="text/JavaScript" src="http://www.curvycorners.net/includes/curvycorners.js">
< style>
.myBox {
margin: auto;
color: #fff;
width: 60%;
padding: 20px;
text-align: center;
background-color: #f00;
border: 6px solid #fff;
/* Do rounding (native in Firefox and Safari) */
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
}
Így kerek a világ
