Webビーコンがstyleタグ記述CSSに反応してしまう件

20/04/19 更新

 きちんと検証していないので、話半分でお願いします。

 目次
よくあるWebビーコン
検証
解決策


Sponsored Link

よくあるWebビーコン

 外部サービスの「Webビーコン」のテンプレをコピーしてくると、下記の赤文字のように、<img>タグに「width」などの属性が直書きされていることがよくあります。


<style type="text/css"><!--
img{
border: dashed thick darkolivegreen;
width : 100px;
height: 100px
}
--></style>


<a href="~">リンク</a>
<img border="0" width="0" height="0" src="bea.jpg"> 



 なぜだか、直書きの属性よりも、styleタグのプロパティの方が優先されているようです。
CSSのボーダーの破線指定
 本来1ピクセル四方の「Webビーコン」にも、imgのCSSが適用されていてビックリします。

検証

 「styleタグ」のCSSと、「imgタグ」内の属性のどちらが、優先度が高いかを検証します。


<style type="text/css"><!--
img{
width :150px;
height:150px;
}
--></style>

<!--属性を直書き-->
<img width="initial" height="initial" src="a.jpg"> 

<!--style属性に書く(initial)-->
<img style="width: initial; height: initial; " src="a.jpg">

<!--style属性に書く(auto)-->
<img style="width: auto; height: auto; " src="a.jpg">




■chrome、Firefox、Edgeで表示
HTMLのwidth属性画像
 一番左の画像。
 「imgタグ」内の「width属性」の直書きは、「styleタグ」内のCSSに優先度で負けて「initial」が効いていません。

 真ん中、一番右の画像。
 「imgタグ」内の「style属性」に書いたプロパティは、「styleタグ」内のCSSに優先度で勝って「initial」が適用され、widthが「初期値」に戻されてオリジナルサイズになっています。

■IE11で表示 (initialとautoの挙動) 

 真ん中の画像。
 IE11では「initial」が非対応のようで、効いていません。

 一番右の画像。
 IE11では「initial」の代わりに「auto」で代用すると、効きます。

解決策


■style属性に書き換える
 Webビーコンのテンプレで「imgタグ」に「width属性」が直書きされてたら、「style属性」に書き直す。


<img width="1" border="0" src="bea.jpg">
     ↓
<img style="width:1; border:0 " src="bea.jpg">


  「width」のプロパティ値は「1」または「auto」など。
 「border」のプロパティ値は「0」または「none」など。



■styleタグに指定する

 リンクの表示などをカウントする「Webビーコン」の場合、リンクの直後に画像が来る場合がほとんどなので、「隣接セレクタ」で指定します。
 テンプレの方はいじりません。


<style type="text/css"><!--

a + img{
width:auto;
border:none;
}

--></style>

<a href="~">リンク</a>
<img src="~">


 「Webビーコン」以外の場合は、「a」タグと「img」タグの間に、「br」の改行タグが挟まることがほとんどなので、適用されません。