Rev. 2.73

kangax씨는 또다시 재미있는 함수를 만들었습니다. 브라우저별로 특징을 가지는 CSS 프로퍼티의 지원여부를 분석하는 함수입니다. "BorderRadius" CSS 프로퍼티를 지원하는 브라우저에서만 사용되도록 스크립트를 작성할 수 있게 하는 것입니다. 이것은 아래와 같은 원리로 지원여부를 분석할 수 있습니다.

var el = document.createElement('div');
typeof el.style.marginLeft == 'string'; // true
typeof el.style.marginLeft2 == 'string'; // false

'marginLeft' in el.style; // true
'marginLeft2' in el.style; // false

그리고 다음과 같이 성능까지 고려한 함수로 작성하여 사용할 수 있게 하였습니다.

var getStyleProperty = (function(){
 
  var prefixes = ['Moz', 'Webkit', 'Khtml', 'O', 'Ms'];
  var _cache = { };
 
  function getStyleProperty(propName, element) {
    element = element || document.documentElement;
    var style = element.style,
         prefixed,
         uPropName;
 
    // check cache only when no element is given
    if (arguments.length == 1 && typeof _cache[propName] == 'string') {
      return _cache[propName];
    }
    // test standard property first
    if (typeof style[propName] == 'string') {
      return (_cache[propName] = propName);
    }
 
    // capitalize
    uPropName = propName.charAt(0).toUpperCase() + propName.slice(1);
 
    // test vendor specific properties
    for (var i=0, l=prefixes.length; i<l; i++) {
      prefixed = prefixes[i] + uPropName;
      if (typeof style[prefixed] == 'string') {
        return (_cache[propName] = prefixed);
      }
    }
  }
 
  return getStyleProperty;
})();

예를 들어 DOM 요소를 기울이거나 모양 자체에 변형을 가할 수 있는 "transform" CSS 프로퍼티는 최신 브라우저들(Safari3, FF3.5, Chrome2)에서만 사용할 수 있습니다. 이 CSS 프로퍼티의 지원여부를 알아내려면 "getStyleProperty('transform')"을 호출하는 것으로 단방에 처리할 수 있게 되는 것입니다. 멋지죠?

var transform = getStyleProperty('transform'); // MozTransform
if (transform) element.style[transform] = 'rotate(90deg)';

덧. 아래는 Prototype에서 사용될 수 있도록 직접 수정한 코드입니다.

Element.addMethods({
  getStyleProperty: (function(){
    var prefixes = ['Moz', 'Webkit', 'Khtml', 'O', 'Ms'], _cache = {};
    return function(element, propName) {
      if (!propName) {
        propName = element;
        element = document.documentElement;
      }

      var style = element.style, prefixed;
      // check cache only when no element is given
      if (arguments.length == 1 && typeof _cache[propName] == 'string')
        return _cache[propName];
      // test standard property first
      if (typeof style[propName] == 'string')
        return (_cache[propName] = propName);

      // test vendor specific properties
      for (var i = 0, l = prefixes.length; i < l; i++)
        if (typeof style[prefixed = prefixes[i] + propName.capitalize()] == 'string')
          return (_cache[propName] = prefixed);
    }
  })()
});

$('element').getStyleProperty('transform'); // MozTransform
Element.getStyleProperty('transform'); // MozTransform

Comments

attachment

Soh Tanaka씨는 jQuery와 CSS를 이용해서 간단한 페이지 벗겨내기 효과를 만들었습니다. 이 것을 응용하면 호기심을 유발하는 광고 컨텐츠를 배치하거나 색다른 페이지 전환효과를 연출할 수 있습니다. 멋진 아이디어네요. 유사한 jQuery 플러그인 으로 Elliott Kember씨의 "The Sexy Curls"도 있습니다.

$("#pageflip").hover(function() { //On hover...
  $("#pageflip img , .msg_block").stop()
    .animate({ //Animate and expand the image and the msg_block (Width + height)
      width: '307px', height: '319px'
    }, 500);
  } , function() {
    $("#pageflip img").stop().animate({ //On hover out, go back to original size 50x52
      width: '50px', height: '52px'
    }, 220);
    $(".msg_block").stop().animate({ //On hover out, go back to original size 50x50
      width: '50px', height: '50px'
    }, 200); //Note this one retracts a bit faster (to prevent glitching in IE)
});

Comments