Browser-Update.org

カスタマイズと検証

スクリプトの検証

あなたのウェブサイトを開く際に URL に #test-bu を付加すると、バーが常に表示されます。例： http://browser-update.org/#test-bu　ページが新しいタブで再読込されていることを確認してください。 詳細（英語）

オプション

以下のオプションがスクリプトに渡されます：

$buoop = {
    required: {i:8,f:25,o:17,s:9,c:22},
    // 要求するブラウザバージョンの指定
    // これより古いブラウザには通知が表示されます。
    // f:22 ---> Firefox < 22 に通知
    // 負の値を指定すると、そのブラウザの最新のバージョンよりいくつ前までのバージョンを許容するかを指定できます。
    // c:-5 ---> Chrome < 35  に通知、Chrome の最新バージョンが 40 の場合.
    // 詳細（英語）
    
    reminder: 24,
    // メッセージが再表示されるまでの時間
    // 0 = 毎回表示する

    reminderClosed: 150,
    // ユーザがメッセージを明示的に閉じた場合，x 時間後に再表示する

    onshow: function(infos){},
    onclick: function(infos){},
    onclose: function(infos){},
    // 通知が表示された / クリックされた / 閉じられた後のコールバック関数

    l: false,
    // メッセージの固定の言語を指定する。e.g. "en" これは標準の検出機能を上書きします。

    test: false,
    // true = 常にバーを表示する（検証用）

    text: "",
    // カスタム通知テキスト（html）
    // プレースホルダ {brow_name} はブラウザの名前、{up_but} は更新リンクタグの内容、{ignore_but} は無視リンクの内容で置換されます。
    // 例： "お使いのブラウザ {brow_name} は古いバージョンです。 <a{up_but}>更新する</a> または <a{ignore_but}>無視する</a>."
    // 詳細（英語）

    text_in_xx: "",
    // 言語 "xx" でのカスタム通知テキスト
    // e.g. text_de でドイツ語、text_it でイタリア語

    newwindow: true,
    // 新しいウィンドウ/タブでリンクを開く

    url: null,
    // 通知をクリックした後に誘導される URL

    noclose:false,
    // 通知を閉じる際に「無視する」ボタンを表示しない

    nomessage: false,
    // ブラウザが古い場合に通知を表示せず、onshow コールバック関数のみ呼び出す

    jsshowurl: "//browser-update.org/update.show.min.js",
    // 通知を表示するスクリプトが存在する URL です。これはユーザが実際に古いブラウザを使用している場合にのみ読み込まれます。

    container: document.body,
    // 通知が挿入される DOM 要素です。

    no_permanent_hide: false
    // 恒久的に通知を表示しない選択肢をユーザに提供しない

    api: xxx
    // 使用する browser-update api のバージョンです。削除しないでください。

};

スタイルの変更

以下の CSS ルールが通知に適用されます。ご自身の CSS で書き換えることもできます。そのためには、CSS に詳細度（specificity）を追加する必要があります。e.g. body .buorg {font-size:20px}

    .buorg {
        position: absolute;
        position: fixed;
        z-index: 111111;
        width: 100%;
        top: 0px;
        left: 0px;
        border-bottom: 1px solid #A29330;
        text-align: center;
        color: #000;
        background-color: #fff8ea;
        font: 18px Calibri, Helvetica, sans-serif;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
        animation: 1s ease-out 0s buorgfly
    }

    .buorg-pad {
        padding: 9px;
        line-height: 1.7em;
    }

    .buorg-buttons {
        display: block;
        text-align: center;
    }

    #buorgig, #buorgul, #buorgpermanent {
        color: #fff;
        text-decoration: none;
        cursor: pointer;
        box-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
        padding: 1px 10px;
        border-radius: 4px;
        font-weight: normal;
        background: #5ab400;
        white-space: nowrap;
        margin: 0 2px;
        display: inline-block;
    }

    #buorgig {
        background-color: #edbc68;
    }

    @media only screen and (max-width: 700px) {
        .buorg div {
            padding: 5px 12px 5px 9px;
            line-height: 1.3em;
        }
    }

    @keyframes buorgfly {
        from {
            opacity: 0;
            transform: translateY(-50px)
        }
        to {
            opacity: 1;
            transform: translateY(0px)
        }
    }

    .buorg-fadeout {
        transition: visibility 0s 8.5s, opacity 8s ease-out .5s;
    }

    .buorg-icon {
        width: 22px;
        height: 16px;
        vertical-align: middle;
        position: relative;
        top: -0.05em;
        display: inline-block;
        background: no-repeat 0px center;
    }