• カミナリツイッターカミナリtwitter
  • カミナリフェイスブックカミナリfacebook
  • カミナリインスタグラムカミナリinstagram

山陰の情報を発信するカミナリ

ナビ

27

SEPTEMBER

ウェブTUESDAY 2016 / 9 / 27

ブラウザのJavaScriptが有効/無効の場合で、CSSを条件分けしたい

 

「日常系の話と技術系の話ではギャップがありすぎる!」

 

とブログが微妙に不評の松本です。

もう技術系の話を書くときはペンネーム(例:ゴンザレス松本)で書こうかなぁ、とか考えてしまいます。

 

ちなみに島根県出身の天才プログラマーに まつもとゆきひろ という方がいるのですが、

ぼくは名前が まつもとひろゆき なので、有名人詐欺をしているようで大変いたたまれません。

 

 

以下本題。

ブラウザには JavaScript というプログラム言語が内蔵されています。

大変便利な機能で、例えば Google Maps がグリグリ軽快に動くのもこのプログラム言語のおかげなのですが、セキュリティ上の問題が見つかることもあるため、ユーザー側で設定を無効にしてしまっている場合もあります。

ところで通常は CSS でサイトデザインを決めているのですが、
スライドショー機能(bxSlider や Slick など)を付けると JavaScript がデザインを変えてしまうので、
JavaScriptが使えない場合は CSS を変更しないといけないこともあります。

 

そんなときの対処法はいろいろとありますが、とりあえず簡単な対処法として、<head>要素内に下記スクリプトを挿入する方法が便利です。

 

<script>
(function(){
  var html = document.getElementsByTagName('html')||[];
  html[0].classList.add('enable-javascript');
})();
</script>

すると、JavaScriptが有効な場合にのみ html要素に enable-javascript クラスが付与されます。
たったこれだけですが色々便利になります。

例えば、JavaScript が有効な場合に非表示にしたい要素には hide-enable-js というクラスを付与し、
JavaScript が無効な場合に非表示にしたい要素には hide-disable-js というクラスを付与してHTMLを作成しておきます。

あとはスタイルシートに下記を記述するだけです。

/* JavaScript が有効な場合に非表示 */
html.enable-javascript .hide-enable-js{
  display: none;
}
/* JavaScript が無効な場合に非表示 */
html:not(.enable-javascript) .hide-disable-js{
  display: none;
}

 

実は他にも色々応用が効くのですが、それはまた追々触れたいと思います。

 

 

松本博之隠しプロフィール画像

TEXT by

松本 博之まつもとひろゆき)

1978年、鳥取県米子市生まれ。
株式会社マジックワード WEBシステムの開発・運用を担当。

この人が書いた他の記事を読む