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

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

September 18, 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 тема.

Tags: ,,

You can follow any responses to this entry through the RSS 2.0 feed.

2 Comments so far

  1. by Магазин за бижута

    On October 13, 2010 at 9:19 am

    Ами това май е лично менние, но да “заоблим” е по-добре. Но ана цвят и на мирис няма приятели така, че си остава субективно. Най-важното е на създателя да му харесва! Успех!

  2. by wakeop

    On October 13, 2010 at 9:36 am

    По-важно е собственика да си го харесва според мен :)

    Иначе IE9 поддържа border-radius, само дето създателя на постчето няма навика да следва собствените си съвети :)

2 Responses to “Да заоблим или не – сайт за градински люлки”

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

By submitting a comment here you grant wakeop a perpetual license to reproduce your words and name/web site in attribution. Inappropriate comments will be removed at admin's discretion.