IE8でもtext-shadow
MSIE8でSafariとかFirefoxとかOperaのtext-shadow風な装飾効果を実現
全面的に作り直しましたので、asamuzaK.jp : IE9で(ついでにIE7、IE8でも)text-shadowを参照して下さい。
IE7自動更新開始記念(?)「IE7でSafari風のtext-shadow」のIE8対応版。
MSIE8のCSS2.1準拠は結構なことで、expression()も標準モードでは無効としたのはある意味英断だが、MSIE7よりも場合によっては見栄えがしょぼくなるのをなんとかするようにしてみた。 せっかくCSSファイルにひとまとめにできていたものを、CSSとJavaScriptを併用する形にせざるをえなかったのは釈然としないところもあるが、まぁしょうがない。
適用方法
まずは、サンプルソースのtext-shadowのテスト
基本的には、IE7でSafari風のtext-shadowのexpression()の部分をJavaScriptに置き換えただけだが、せっかくなので要素毎や特定要素の特定class指定、id指定にある程度柔軟に対応できるようにしてみた。汎用的なclass指定にも対応させようと当初は考えたが、そうなるとDOMツリーを全部解析せにゃならんことになりそうなのでこれは残念ながら見送り。
まずは、JavaScript側。
function typeOfArr(arr) {
return arr.match(/^#/) ? 1 : // #id
arr.match(/^\./) ? 2 : // .class (未対応)
arr.match(/\w+\.\w+/) ? 3 : // element.class
4; // element
}
function addShadow(arr) {
for(var i = 0, l = arr.length; i < l; i++) {
var typ = typeOfArr(arr[i]);
if(typ == 1) {
arr[i] = arr[i].replace('#', '');
var elm = document.getElementById(arr[i]);
if(elm) {
var span = document.createElement('span');
span.setAttribute('class', 'shadow');
span.innerHTML = elm.innerHTML;
elm.appendChild(span);
}
}
if(typ == 2) {
continue;
}
if(typ == 3) {
var elmCls = new Array();
elmCls = arr[i].split('.');
elm = document.getElementsByTagName(elmCls[0]);
for(var j = 0, el = elm.length; j < el; j++) {
if(elm[j].className.match(/multi/)) {
span = document.createElement('span');
span.setAttribute('class', 'shadow');
var span2 = document.createElement('span');
span2.setAttribute('class', 'shadow2');
span.innerHTML = span2.innerHTML = elm[j].innerHTML;
elm[j].appendChild(span);
elm[j].appendChild(span2);
}
else if(elm[j].className.match(elmCls[1])) {
span = document.createElement('span');
span.setAttribute('class', 'shadow');
span.innerHTML = elm[j].innerHTML;
elm[j].appendChild(span);
}
}
}
if(typ == 4) {
elm = document.getElementsByTagName(arr[i]);
for(j = 0, el = elm.length; j < el; j++) {
span = document.createElement('span');
span.setAttribute('class', 'shadow');
span.innerHTML = elm[j].innerHTML;
elm[j].appendChild(span);
}
}
}
}
var isMSIE = /*@cc_on!@*/false;
if(isMSIE && navigator.userAgent.match(/MSIE ([0-9]{1,}[\.0-9]{0,})/)) {
if(parseFloat(RegExp.$1) == 8) {
attachEvent('onload', function() {
var arr = new Array(); // 影を適用させる要素やクラスなどの配列
arr[0] = 'h1';
arr[1] = 'h2';
arr[2] = 'p.multi';
arr[3] = 'p.eclipse';
arr[4] = '#emph';
addShadow(arr);
}
);
}
}
続いてCSS側。 MSIE8ではMS独自実装のfilterを適用させる場合には、-msとベンダー・プリフィクスをつけなければならないことと、そのフィルターの内容もカッコで括らなければならないので注意が必要。
@media screen {
h1, h2, p.eclipse, p.multi, #emph {
position : relative;
}
span.shadow, span.shadow2 {
display : block;
position : absolute;
top : 0px;
left : 0px;
width : 100%;
-ms-filter : "progid:DXImageTransform.Microsoft.Blur(PixelRadius=2.0, MakeShadow=true, ShadowOpacity=0.6)";
z-index : -1;
}
h2 span.shadow, p.multi span.shadow {
color : red;
-ms-filter : "progid:DXImageTransform.Microsoft.Blur(PixelRadius=2.0, MakeShadow=false, ShadowOpacity=0.6)";
}
p.multi span.shadow2 {
top : -4px;
left : -2px;
color : blue;
-ms-filter : "progid:DXImageTransform.Microsoft.Blur(PixelRadius=2.0, MakeShadow=false, ShadowOpacity=0.6)";
}
p.eclipse span.shadow {
top : -2px;
left : -2px;
color : black;
-ms-filter : "progid:DXImageTransform.Microsoft.Blur(PixelRadius=2.0, MakeShadow=false, ShadowOpacity=0.6)";
}
}
@media print {
span.shadow, span.shadow2 {
display : none;
}
p.eclipse {
color : black;
}
}
"IE8でもtext-shadow"へのTwitter上でのコメントやRT
2件のツイートがあります。
ツイート 1
IEでCSS3の影付け、こっちの方がソースがきれいかも。 http://asamuzak.jp/html/262 しかしどちらにしろ強引な事は否めない。
ツイート 2
IE8でもtext-shadow → http://bit.ly/bvreYr (09.09.03)