ベンダー拡張プリフィックスヲ削減セヨ

Translation of: Cutting down on vendor prefixes

とあるブラウザーで特定の機能を有効化する場合、現在、多くのウェブ開発者たちはCSSでベンダー拡張プリフィックスを使っていることでしょう。そのこと自体は良いのですが、サンプル・コードやプリフィックスを追加するツールで、時々サポートし過ぎでやたらめったら全てのプリフィックス(今まで実装されたことがないようなものまで)を追加しようとしているのを見かけます。最早ベンダー拡張プリフィックスが不要なCSSプロパティーは数多くあると思いますし、そうでないとしてもその数は減らすことができるでしょう。

以下の例ではどのプレフィックスを、使用しているのなら、使用しているかの注釈をつけておきました。だいたいが削除でき1行で済ませられるにも関わらず、様々なベンダー拡張プリフィックスと共に使われてしまっていることが多いCSSプロパティーだけに留めています。

「いや、ダメでしょ！　それじゃあ古いブラウザーを使っている人たちを閉めだすことになっちゃう！」と考えるかもしれません。が、そういうことではありません。これは誰かを閉めだしたり、特定のブラウザーを「サポート」しないなどということではないのです。プログレッシブ・エンハンスメントを導入することにより、CSSを簡潔にし、書きやすく手入れしやすくするというような話です。ここではそのCSSプロパティー自体の主要な機能については特に触れません。もしブラウザーがプリフィックスなしのプロパティーをサポートしていない場合、もちろん、丸い角ではなかったり、影が付いていなかったり、グラデーションがかかっていなかったり、などすることでしょう。その結果は、Firefox 3.6やChrome 9、iOS 4用のSafari、その他ベンダー拡張プリフィックスが必要な古いブラウザーなどよりも全然ユーザー数の多いIE8上でのものに近くなると思われます。

何かがサポートされていないことによって全体的なレイアウトが崩れてしまう(訳注: FlexboxやMulti Columnなどがこれにあたる)ようなことがないのなら、一般的にメジャーなブラウザーの最新とそのひとつ前のバージョンにCSSが適用されるようにするだけで良いでしょう。

border-radius

ベンダー拡張プリフィックスは不要です。

.example {
    border-radius: 10px;
}

サポート状況 border-radius.

box-shadow

ベンダー拡張プリフィックスは不要です。

.example {
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

サポート状況 box-shadow.

background-origin, background-size and background-clip

ベンダー拡張プリフィックスは不要です。

.example {
    background-origin: content-box;
    background-size: 100% auto;
    background-clip: content-box;
}

サポート状況 CSS3 Backgrounds.

グラデーション

グラデーション(linear-gradient及びradial-gradient)はベンダー拡張プリフィックスを削減することにより最もサイズを減らすことができる関数(訳注: 原文ではプロパティー)でしょう。僕は全て削除してプリフィックスなしにはせず、-webkit-プリフィックスだけ使用しています(ただし古いWebKit文法を使うことはしません)。

つまり、多くのツールでベンダー拡張プリフィックスを追加すると生成される以下のようなものの代わりに:

.overkill-example {
    background: #f9f9f9;
    background: -moz-linear-gradient(top, #ffffff 0%, #f2f2f2 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f2f2f2));
    background: -webkit-linear-gradient(top, #ffffff 0%, #f2f2f2 100%);
    background: -o-linear-gradient(top, #ffffff 0%, #f2f2f2 100%);
    background: -ms-linear-gradient(top, #ffffff 0%, #f2f2f2 100%);
    background: linear-gradient(to bottom, #ffffff 0%, #f2f2f2 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f2f2f2', GradientType=0);
}

このようにしています:

.example {
    background: #f9f9f9;
    background: -webkit-linear-gradient(top, #ffffff 0%, #f2f2f2 100%);
    background: linear-gradient(to bottom, #ffffff 0%, #f2f2f2 100%);
}

ひとつだけ余分な定義があるだけです。CSSグラデーションのサポート状況を見る限り、あと1年以内には-webkit-も捨てることができるんじゃないかと考えています。

calc()

-webkit-プリフィックスだけを使っています。

.example {
    background-position: 100% 100%;
    background-position: -webkit-calc(100% + 30px) -webkit-calc(100% + 16px);
    background-position: calc(100% + 30px) calc(100% + 16px);
}

calc()の使用においてはちょっと注意が必要です。この関数をレイアウトに影響を与えるようなプロパティーで使う場合は、サポートしていないブラウザーで容易ならぬ事態を引き起こさないように必ずフォールバックを行うための定義も書くようにしましょう。

サポート状況 calc().

変化効果(Transitions)

変化効果には-webkit-プリフィックスのみを使っています:

.example {
    -webkit-transition: background-position 0.5s;
    transition: background-position 0.5s;
}

グラデーションと同じようにプリフィックスなしにできる日もそう遠くはないと思います。

サポート状況 CSS Transitions.

状況に合わせる

これまで書いてきたのはあくまでも僕がこれらCSSプロパティーのベンダー拡張プリフィックスをどう今扱っているかの例に過ぎません。もしあなたやあなたのクライアントが、Firefox 3.6やiOS 2.1といったような古いバージョンのユーザーをたくさん抱えていて、プログレッシブ・エンハンスメントされる見た目が許容できないというのなら、もう少しプリフィックスを使う必要があるかもしれません。上記のようにプリフィックスを削除したことにまつわるバグ報告を受けたことはありませんが、個人的には、それは最初にクライアントへプログレッシブ・エンハンスメントについて説明することを怠らなかったからだと思います。