古いOSとIEのサポートを考える 2017年1月版

TL;DR

2017年4月11日以降は、IE11のみ考えるようにしたい。
現時点ではWindows Vista で利用されているIE9が生きていることになっているので、JavaScriptでdatasetが使えるかを基準に判定して良いと思うやつ。

現時点で < 1% 程度です。

最近1ヶ月程度の Google Analytics データのうち、

PC、Windows Vista のみ
ブラウザの利用状況をグラフにする
IEは便宜上IE9とする
サンプル数は3,000,000程度

を抽出してみましょう。

2017年1月頃の Windows Vista でのブラウザ利用状況
はい。出ました。

全体の1.96%が Windows Vistaを利用していて、そのうち30.9%がIEを利用しているようです。
つまり、全体の0.61%のようですね。セッション数から新規ユーザーに切り替えても同じ程度の結果になる為、訪問者の200人に一人程度が該当するようです。

最近、はてなブログで色々できるやつのコードを書き直しているのですが、古いIEの対応をどうしましょうか。と確認したり、ちょっと何とかできるなら試してみましょうか。とやってみたやつでした。

例えば、共通して使えるところの一部として、試しにこんなコードにしてみたり。

Htnpsne.API.ts

    export let htmlTagData: any = (() => {
        let dataset: DOMStringMap | Object = document.getElementsByTagName("html")[0].dataset;
        // フォールバック IE 10 以下
        if (typeof dataset === "undefined") {
            let attr: NamedNodeMap = document.getElementsByTagName("html")[0].attributes;
            dataset = {};
            for (let i: number = 0; i < attr.length; i++) {
                if (attr[i].name.indexOf("data-") === 0) {
                    let keyName: string = attr[i].name.slice(5).replace(/-([a-z])/g,
                        function (all: string, letter: string): string {
                            return letter.toUpperCase();
                        });
                    dataset[keyName] = attr[i].value;
                }
            }
        }
        return dataset;
    })();

TypeScriptからJavaScriptに変換されると、このようなコードになります。(抜粋)

        API.htmlTagData = (function () {
            var dataset = document.getElementsByTagName("html")[0].dataset;
            // フォールバック IE 10 以下
            if (typeof dataset === "undefined") {
                var attr = document.getElementsByTagName("html")[0].attributes;
                dataset = {};
                for (var i = 0; i < attr.length; i++) {
                    if (attr[i].name.indexOf("data-") === 0) {
                        var keyName = attr[i].name.slice(5).replace(/-([a-z])/g, function (all, letter) {
                            return letter.toUpperCase();
                        });
                        dataset[keyName] = attr[i].value;
                    }
                }
            }
            return dataset;
        })();