си говори за работа, дизайн и тухли-четворки

Archive for September, 2010

Да заоблим или не – сайт за градински люлки

Saturday, September 18th, 2010

Най-сетне намерих време да направя редизайн на сайта ни за градински люлки, който се задвижва от WordPress. Понеже е доста подобен по тематика на оня за пейките, за който кроих дрешки в края на миналата година, стори ми се добра идея и визуално двата сайта да са в един стил – заоблени ъгли, голяма бекграунд картинка, по-силни цветове. Е добре де… не чак толкова силни. Отказах се от агресивния жълт бекграунд :)

Искаше ми се да използвам изцяло css3 за заобляне на ъглите, без старите методи с картинки, както и изцяло да спра да поддържам IE6, но след подробен преглед на статистиките се оказа, че по-голямата част от посетителите на този сайт ползват точно IE, като около 10% на всичкото отгоре са и с тази много стара версия. Жалко, но… това са предпочитанията (или възможностите) на посетителите на сайта и трябва да се съобразявам с тях.

Преди време, по друг повод бях търсила алтернативни варианти и харесах 2 елегантни, лесни за използване метода да се реши проблема със заоблянето на ъглите и при IE:

htc hack

Идеята на този метод е, че за IE се използва един .htc файл, който се задава в css преди декларацията за border-radius. Ако например имате клас rounded-corners, за който искате да заоблите ъглите с 20px, то селектора за този клас ще изглежда по този начин:

.rounded-corners {
behavior: url(/css/border-radius.htc);
border-radius: 20px;
}

Пълното описание на метода можете да намерите при неговия автор Jon Raasch. Ако ви харесва – бирата е за него :)

CurvyCorners

Ползването на CurvyCorners е още по-удобно: просто се зарежда .js файла в html-а и когато в css файла има декларация -webkit-border-radius, то ъглите на елемента с този клас ще се заоблят и във всички версии на IE. Имайте предвид, че CurvyCorners търси -webkit префикса и игнорира този за Мozila/Firefox, но скрипта е направен така, че в интелигентните браузъри, поддържащи css3, се изпълнява “натуралната” за браузъра декларация. Добавяйте всички, дори и тази без префикс, за бъдещо ползване.

С този javascript заоблянето на ъглите става доста лесно и удобно, но… има един досаден бъг – в IE6 и IE7 текущата версия на CurvyCorners влиза в конфликт с Google AdSense рекламите и те не се показват.

***

В крайна сметка – за момента за този сайт се отказах от всякакви насилствени методи за очовечаване на IE и оставих неговите потребители да гледат чепати ъгли. Останаха ми и доста дребни бъгчета за оправяне, така че със сигурност ще се наложи ъпдейт на тази WP тема.