CSS ハックまとめ

プログラミングCSS2014年10月19日
もはや CSS ハックを使用してバグを克服する時代ではないので更新されていません。
Internet Explorer 対策にあてる時間でアニメでも見ましょう。

「CSS ハック」とは

現在、様々なバージョンのブラウザーがリリースされていますが、その全てが正しい表示をするわけではありません。最新のプロパティーに対応していなかったりするのはもちろんのこと、特に Internet Explorer 6 には多くのバグが知られています。そんなバグを克服する手段として編み出されたのが、「CSSハック」です。

これは、ブラウザーのバグを逆手に取って、本来は適用されないはずの記述を、特定のブラウザーにのみ適用させるという手法です。 CSSハックを利用することで、他のブラウザーへの影響なくして、特定のブラウザー専用の記述を行うことができるため、レイアウトのズレや、非対応プロパティーへの代替手段の提供などが容易になるのです。

そんなわけで、Webサイトのレガシーブラウザー対応には、もはや必須となったCSSハック。未だ根強い人気を誇る(?)、Internet Explorer 6 などを中心に紹介していきます。

続きを読む »

Twitter へのリンクをアプリで開かせる

プログラミングTwitter2014年10月17日

JavaScript（jQuery）ネタです。 iPhone などの iOS デバイスから Web サイトを閲覧しているとき、Twitter へのリンクは通常 mobile.twitter.com で開かれますが、ツイートを閲覧したりそのユーザーをフォローしたりするには正直やりづらい…。ということで、Twitter へのリンクを自動的にスマートフォンアプリで開くように書き換えるスクリプトをご紹介します。このコードの動作には jQuery が必要です。

$(function () {
    if (/iPhone|iPad|iPod/.test(navigator.userAgent)) {
        $("a[href*='twitter.com']").each(function () {
            var match;
            var $elm = $(this);
            if ((match = $elm.attr("href").match(/twitter\.com\/(?:#!\/)?([a-zA-Z0-9_]{1,20})$/))) {
                $elm.attr("href", "twitter://user?screen_name=" + match[1]);
            }
            if ((match = $elm.attr("href").match(/twitter\.com\/(?:#!\/)?[a-zA-Z0-9_]{1,20}\/status(?:es)?\/(\d+)$/))) {
                $elm.attr("href", "twitter://status?status_id=" + match[1]);
            }
        });
    }
});

上記のコードを jQuery を読み込んだあとに貼り付けるだけで、iOS のデバイスでは Twitter アプリが開かれます。

ブラウザー判定スクリプト「SystemInfo」

プログラミングJavaScript2014年10月16日

SystemInfo について

もはやブラウザーを判定する必要がないので更新されていません。

JavaScript で書かれた Web ブラウザーの判定スクリプトです。最近ではほとんどの環境がレンダリング結果の差異が小さいモダンブラウザーに置き換わりつつあり、ブラウザーを判定する必要は薄れてきていますが、アクセス解析なんかでは未だ使えると思います。

UserAgent 以外にもブラウザーが持つ固有のオブジェクトも含めて判定しているため、いくつかの UserAgent 偽装を検出することができます。また、PlayStation Portable の独自拡張にも対応しており、UserAgent に含まれていない情報も追加で取得することができます。

続きを読む »