jQuery сниппеты для CSS3


В одном небольшом проекте онлайн-редактора мне понадобилось динамически менять CSS3-свойства объектов, например, радиус скругления углов, угол поворота и т.д. Т.к. редактор рассчитан на весьма узкий круг пользования, то с кроссбраузерностью особо не заморачиавлся, писал обычное свойство и Хром его подхватывал. Кода же один из пользователей пожаловался, что в ИЕ у него работает «не так», я решил исправить ситуацию. А чтобы не нагромождать каждый раз ворох свойств — написал небольшие jQuery-функции, которые удобно использовать в том месте, в котором нужно, или отказаться от их использования, если они не нужны.

  1. border-radius — отвечает за скругление углов. В общем случае передаём один параметр — радиус углов в пикселях:
    function cssBorderRadius(obj, rad)
    {
        obj.css({
            '-webkit-border-radius': rad + 'px', // Saf3-4
            '-moz-border-radius': rad + 'px',    // FF1-3.6
            'border-radius': rad + 'px'          // Opera 10.5+, IE9+, Saf5+, Chrome, FF4+
        });
    }
    
    Демо
  2. rotate — отвечает за поворот объекта на заданный угол:
    function cssRotate(obj, angle)
    {
        obj.css({
            '-webkit-transform': 'rotate(' + angle + 'deg)', // Saf3.1+, Chrome
            '-moz-transform': 'rotate(' + angle + 'deg)',    // FF3.5+
            '-ms-transform': 'rotate(' + angle + 'deg)',     // IE9
            '-o-transform': 'rotate(' + angle + 'deg)',      // Opera 10.5
            'transform': 'rotate(' + angle + 'deg)'
        });
    }
    

     

    Демо

     

  3. background-size — масштабирование фона согласно заданным параметрам; в данном случае масштабирование я задаю в процентах по обеим осям:
    function cssBgSize(obj, x, y)
    {
        obj.css({
            '-webkit-background-size': x + '%, ' + y + '%', // Saf3-4
            '-moz-background-size': x + '%, ' + y + '%',    // FF3.6 
            '-o-background-size': x + '%, ' + y + '%',    // Opera 9.5-10.6
            'background-size': x + '%, ' + y + '%',       // Opera 10.6+, IE9, Saf5+, Chrome, FF4+
        });
    }
    
    Демо

По такому принципу можно построить функцию для любого свойства, которое неоднозначно описывается для разных браузеров. Хотя бы в ожидании того момента, когда CSS3 станет стандартом и о префиксах можно будет забыть.

Похожие посты

Автор:

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*