Blog

嗚呼。対応ブラウザさん。(疑似クラスやSVGの使用上の注意)

Penseur

2015.11.25

web制作にかかわってる人

さてさて皆様お久しぶりです。
web制作にかかわってる人です。本日担当であるということをすっかり忘れて業務にいそしんでおりました。
危ない危ない。

しかしついこの間もこうして記事を書いたような気がいたしますがきっと気のせいでしょう。

そんなわけで、がっつり記事を書くのはなかなか難しそうな時間しか残されていないのですが、何を書きましょうか…

IE8を対象とするなら使わない方がいい疑似セクラスや使うのに注意が必要な技術…
新しい技術で便利そうなのに対応しているブラウザが少なすぎて実務では使えない技術…
このあたりでしょうか。

・IE(インターネットエクスプローラ)8を対象にするなら使うのに注意が必要な技術―(某青いネコ型ロボットの節回しでお読みください)

疑似クラス
:nth-child
:nth-last-child
:nth-of-type
:nth-last-of-type
:last-child
:first-of-type
:last-of-type
:only-child
:only-of-type

疑似クラスだけでさっくりこれだけありましたよ…。
とりあえず多くの場合において代替手段があったりするのでそこまで困るわけではないのですが、たまに不便。

SVG
当ブログでもいくつかの記事で紹介されているベクター形式の画像データですね。
実はこのsvgもIE8では表示ができません。
どうあがいても出来ないそうで。先人の忠告には素直に従っております。
どうしてもsvgが使いたい場面と言うとレスポンシブデザインのサイトコーディングがかなりの上位に来るのですが、実は、古い世代のAndroidもSVGの表示ができないのです…。困った。
こんなケースはどうしているのかというと、javascriptのライブラリを用いてsvgが使えるブラウザと使えないブラウザを切り分けています。

Modernizr https://modernizr.com/

SVGの他にも対応しているかいないかで判定ができるので結構重宝しています。
(前のバージョンの時の記事なのでキャプチャは異なりますが基本的な使い方の紹介はこちらの記事が詳しかったです。
ブラウザ対応が簡単に!「modernizr.js」の機能と利用方法


きっと調べたらまだまだあります
(書いていることがぶれている気がしてきた…)

そんなわけで(どんなわけ)便利そうだけども対応ブラウザが少なすぎ問題な技術については次回!覚えていたら!!

次回の私の記憶力に期待してさよーならー