noscript要素

このエントリーをはてなブックマークに追加

noscript要素はスクリプトが無効にされている際に表示される要素です。

<noscript>
このコンテンツはJavaScriptの利用を想定して作成されています。<br>
ご利用の際はJavaScriptを有効にしてください。
</noscript>

スクリプトを無効にしているユーザーへのアナウンスや代替コンテンツの記述に利用できます。

noscript要素内にnoscript要素は記述できませんので注意してください。

IE7でのバグ

IE7ではnoscript要素にborderやbackgroundを指定した場合、JavaScript が有効な状況でもそのスタイリングが表示されるバグがあります。noscrpt要素内にdiv要素などを配置し、そのdivに対してスタイリングを行うことで回避可能です。

noscript div{
	border:1px solid red;
}

IEに対するスタイリンング

IEは最新のIE10も含めCSSのセレクタにnoscript要素を含めると一部のスタイリングが無効化されるバグがあります。

noscript div{
	padding-top:20px;
}

そういった場合はhtml要素などに「no-js」などのclassを付与しておき、

<html class="no-js">

JavaScriptでこのClassを取り除きます。jQueryのremoveClass()などを利用すると簡単に取り除けます。

$("html").removeClass("no-js");

JavaScript OFF環境ではclass属性「no-js」は付いたままですので、このclassを起点にスタイリングを行うことでIEでもnoscript要素をスタイリングできます。

.no-js div{
	padding-top:20px;
}

参考URL

4.3.2 The noscript element - W3C -

登録日 : 2013年07月13日 最終更新日 : 2013年9月20日

同じカテゴリー(スクリプト)のエントリー

検索

スポンサードリンク

バージョン

リファレンス