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 のバージョンです。削除しないでください。

};
パラメータ 概要 既定値
style 通知が表示される場所。利用可能なオプション: "top", "bottom", "corner" "top", "bottom", "corner" "top" string
shift_page_down Shift down the page in order not to obscure content behind the notification bar. Adds margin-top to the <body> tag. true, false true boolean
notify_esr Also notify Firefox ESR (Extended Support releases) versions if they are below requirement - although they are still supported. Default is to not notify them. They are supported by mozilla for about a year after their initial release. true, false false boolean
text カスタム通知テキスト(html)
詳細(英語)
text: { 'msg':'Your web browser ({brow_name}) is out of date.', 'msgmore': 'Update your browser for...', 'bupdate': 'Update browser', 'bignore': 'Ignore', 'remind': 'You will be reminded in {days} days.', 'bnever': 'Never show again' } dictionary or string
text_for_x custom notification text for browser x
詳細(英語)
undefined dictionary or string
text_in_xx 言語 "xx" でのカスタム通知テキスト
e.g. text_de でドイツ語、text_it でイタリア語
詳細(英語)
undefined dictionary or string
text_for_x_in_xx custom notification text for browser x in language xx
text_for_i: {'msg':'Internet Explorer is not supported on this site.'}
undefined dictionary or string
nostatistics For every 1000th visitor anonymous statistics on the used browser are collected.
Turns off sending anonymous statistics.
true, false false boolean

スタイルの変更

以下の 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;
    }