[MooTools] border-radiusの簡単なIE対策

14年前

角丸にする既存ライブラリは色々あるけどHTML5対応してなかったり配置が崩れたりで、
もう面倒だから四隅にspan置いて背景指定すればいいわ…と思って作ったクラス。

new IERadius($("main"));

角丸にしたい対象を指定すると、その要素内に次のようなspanが自動作成される。

<span class="radiusFix main-tLeft" style="position: absolute; width: 5px; height: 5px; display: block; top: 0px; left: 0px;"></span>
<span class="radiusFix main-tRight" style="position: absolute; width: 5px; height: 5px; display: block; top: 0px; right: 0px;"></span>
<span class="radiusFix main-bLeft" style="position: absolute; width: 5px; height: 5px; display: block; bottom: 0px; left: 0px;"></span>
<span class="radiusFix main-bRight" style="position: absolute; width: 5px; height: 5px; display: block; bottom: 0px; right: 0px;"></span>

コーナーだけの画像を作って、

スタイルシートで背景指定する。

html {
	background-color:#113A57;
}
#main {
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
}
#main{
	background-color:#fff;
}

.radiusFix {
	background:url(../images/radius_sprite.png) no-repeat left top;
}

.main-tLeft{background-position:0px 0;}
.main-tRight{background-position:-5px 0;}
.main-bRight{background-position:-15px 0;}
.main-bLeft{background-position:-20px 0;}

指定した親要素にはposition:relativeが付与される。
positionを使うのでIE6でCSSのバグが発生する事がある。（floatが中にある要素に使った場合など）

左：使用後　右：使用前

MooToolsのcoreが必要。

Source

(function($) {
this.IERadius = new Class({
    Implements: [Options],
    options: {
        size:5,//radius size
        'classname':null,
        border:0
    },
    initialize: function(element,options) {
        this.setOptions(options);
        this.element = element;
        if(!this.element) return;
        this.element.setStyle("position","relative");
        if(typeOf(this.element)=='elements'){
            this.addCorners();
        }else{
            this.addCorner();
        }
    },
    addCorners:function(){
        this.element.each(function(el){
            for(i=0;i<4;i++){
                var span = this.createSpan(el,i);
                span.inject(el);
            }
        }.bind(this));
    },
    
    addCorner: function() {
        for(i=0;i<4;i++){
            var span = this.createSpan(this.element,i);
            span.inject(this.element);
        }
    },
    createSpan:function(obj, i){
        var name = &#91;'tLeft','tRight','bLeft','bRight'&#93;;
        var id = this.options.classname ? this.options.classname : (obj.id ? obj.id :'corner');
        var span = new Element("span",{"class":"radiusFix "+id+'-'+name&#91;i&#93;}});
        if(this.options.size)
            span.setStyles({'position':"absolute","width":this.options.size,"height":this.options.size,'display':'block','line-height':0,'font-size':0);      
        var border = (this.options.border>0)? '-'+this.options.border+'px':'0px';
        if(name[i]=='tLeft'||name[i]=='tRight'){span.style.top=border;}
        if(name[i]=='bLeft'||name[i]=='bRight'){span.style.bottom=border;}
        if(name[i]=='tLeft'||name[i]=='bLeft'){span.style.left =border;}
        if(name[i]=='tRight'||name[i]=='bRight'){span.style.right =border;}
        
        return span;
    }
});
})(document.id);

Options

size: コーナーのサイズ。nullにするとインラインCSSを設定しなくなる
classname: 通常は対象となる要素のIDにコーナー名（tLeftとか）をつけるが、このオプションを設定するとIDよりも優先して使用する。
border: 枠線がある場合はピクセルを除いた数値で指定。線幅分positionの位置をマイナスにする。

参考リンク：

Source

Options

シェア