Front-end fejlesztés

Border radius minden bőngészőn

CSS3-ról már többször volt szó az oldalon, általában azért, mert nem minden böngésző jeleníti meg a CSS3 új tulajdonságait. A mostani cikkben is egy hasonló fogunk beszélni és egy jQuery plugint fogunk segítségünkre hívni célunk megvalósításához. Véleményem szerint az egyik már most legelterjedtebb ilyen problémás tulajdonság a border-radius. Ennek segítségével lekerekített sarkokat tudunk adni egyes elemeknek és így nem kell képpel helyettesíteni az oldalt. Azt kell, hogy mondjam nincs valami túl nagy összhang a böngésző fejlesztők között, mert szinte minden böngészőn más és más kódot kell alkalmaznunk a cél elérése érdekében.

És még csak most jönnek szóba ugyebár a „modern” böngészők, amelyek egyáltalán nem támogatják ezt a fajta megoldást. Tehát meg kell találni egy aranyközép utat, hogy weboldalunk cross browser egyen, de ez nem menjen egy pillanatig sem a minőség rovására. Egyik munkám során ezen az elven merően felbuzdulva keresgélésbe kezdtem és meg is találtam, a szerintem legmegfelelőbb választást. A neve egyszerűen jQuery corner plugin. Ebből egyébként van annyi, mint égen a csillag, de ez a leghatásosabb és a legkényelmesebb. Mérete megközelítőleg 11KB, ami elég baráti. Ehhez jön még hozzá a jQuery core. Használata mi sem egyszerűbb. Illeszd a head szakaszba az alábbiakat.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.corner.js?v2.11"></script>
<script type="text/javascript">
$('.hirlevel').corner();
</script>

Jelen esetben a hirlevel osztály fog 10px-es radius-t kapni minden egyes böngésző alatt, ha jól emlékszem még IE6 alatt is. Beállításokból van nekünk rengeteg, hogy hány pixel legyen a radius, hogy csak jobb csak baloldalon, de egyéb érdekes megoldásokat és lényegében egy a használatát teljes mértékben bemutató oldalt itt találtok.

Azt tudom ajánlani, hogy akinek tényleg csak egy két dolgot kell lekerekíteni az inkább a jól bevált módszerekkel vágja ki sarkokat és készítse el úgy a honlapot, hogy az oldal mérete ne növekedjen, ha viszont több helyen szeretnénk kerekíteni, akkor mindenképpen érdemes, ha már nem is térül meg teljesen a méretben, de a lekérések számát tekintve mindenképpen előrébb leszünk. Tehát a tanulság az, hogy lehetséges vannak első ránézésre megoldhatatlan problémák a site building során, de igenis lehet böngésző független weboldalt készíteni.