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 станет стандартом и о префиксах можно будет забыть.