WEB лаборатория DLE » Другое для WEB » Разное и другое » Кроссбраузерный border-radius
Навигация
Популярное
    Статистика

    Материалов: 1789 [+0]
    Пользователей: 685 [+0]

    Всего онлайн : 3
    Пользователей: 0
    Гостей: 3

    Google
    Последние комментарии
    ...
    HI-tech:
    0

    Кроссбраузерный border-radius

    Кроссбраузерный border-radius


    Многие прописывают в css лишь один border-radius и на этом успакаиваются и идут дальше, однако это далеко не правильно, если у Вас конечно не подключены дополнительные библиотеки. В новых версиях браузеров вполне хватит обычного border-radius, однако если зайти в предыдущие версии этих браузеров, то можно увидеть, что border-radius не работает. Что же делать? И тут к нам приходят магические префиксы.

    Сейчас я преведу наиболее полный список этих самых префиксов, включая популярные и не очень браузеры. Скажем, что мы будем применять данные префиксы для класса box.
     .box {
    border-radius: 3px; //по спецификации
    -moz-border-radius: 3px; //FireFox
    -webkit-border-radius: 3px; // Safari
    -o-border-radius: 3px; // Opera
    -ms-border-radius: 3px; // Dniwe IE
    -icab-border-radius: 3px; // icab
    -khtml-border-radius: 3px; //khtml  
    }

    Я не буду описывать хаки для IE(IE не поддерживает border-radius), потому что каждый фильтр и хак под IE это торможение работы сайта. Могу сказать лишь, что кроссбраузерный border-radius получится 100%, если использовать заранее сделанную картинку с закругленными краями. Но у этого способа есть существенный минус: каждая картинка имеет вес, а при большом количестве картинок сайт будет открываться значительно дольше. А при большом количестве картинок можно и вовсе схватить бан от поисковиков. Надеюсь кому-то помогут эти префиксы.



    Теги: css, border-radius

    Другие новости по теме:


    Информация
    Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.