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

Ext Core 3.0 베타 버전 릴리즈에 이어 페키지 버전으로 볼 수 있는 Ext JS 3.0 RC1.1이 최근 릴리즈 되었습니다. Ext Core가 MIT License로 배포되어 Ext JS역시 이어받을 것으로 기대했는데 종전과 같은 GNU GPL license v3로 배포되는 군요. 상업적 용도로 사용하려면 비용을 지불해야 합니다. 골때리는 것은 Ext JS에 포함된 Ext Core역시 GNU GPL이라는 것입니다. 이거 뭐 이래요. 흥미가 급하강했습니다. 자세한 배포 내용은 그 녀석들(?) 블로그에서 확인할 수 있습니다. 죄송합니다만, 더이상 살펴보고 싶지 않네요;

Comments