IE10 の CSS3 text-shadow

本記事は、マイクロソフト本社の IE チームのブログ から記事を抜粋し、翻訳したものです。 

【元記事】CSS3 text-shadow in IE10 (2011/9/30 2:25 AM)

Windows Developer Preview の IE10 では、ハードウェア アクセラレーション対応の CSS3 text-shadow をご利用いただけます。text-shadow (テキストの影) は、Web 開発者からの要望が最も多かった機能の 1 つです。この機能を使うと、以前はテキストをインライン画像として扱わなければ実現が難しかった (または不可能だった) テキスト効果を、標準に基づいて作成できるようになります。

IE10 の text-shadow

text-shadow は、その名前が示すとおり、テキストの背後に影を描くための CSS プロパティです。

例: テキストの背後に紫色の text-shadow を適用

text-shadow は、テキストに注意を引いたり、奥行きを出すために使用します。

テキストの背後に画像や色付きの背景が使用されている場合には、text-shadow を使うことでコントラストを高め、テキストを読みやすくすることができます。

IE10 では、他のブラウザーと同じように、ベンダー プレフィックスが付かない標準形式の text-shadow がサポートされるため、現在 text-shadow が使用されているサイトも IE10 で問題なく表示することができます。標準対応というマイクロソフトの取り組みの一環として、CSS3 テキスト テスト スイートに 10 のテスト ケースを提出したところ、9 つを達成することができました。

例: IE9 (左) および IE10 (右) 上で Twitter にナビゲートする際、かすかにテキストの影が表示される

例: IE9 (左) および IE10 (右) 上で自動サービスの Web サイトにナビゲートする際、テキストの影が表示される

IE10 では、box-shadow と text-shadow の両方で同じ <shadow> の定義方法をサポートしています。

これは、text-shadow の仕様に「<shadow> は "box-shadow" プロパティに定義されているものと同じだが、"inset" キーワードは許可されない (<shadow> is the same as defined for the "box-shadow" property except that the "inset" keyword is not allowed)」という規定があるためです。

この定義は、色および 4 個のパラメーター (x オフセット、y オフセット、ぼかしの半径、拡散距離) で行われます。現在、拡散距離パラメーターは IE10 でのみサポートされています (後述の「"spread" パラメーターと相互運用性」セクションを参照)。

 

text-shadow の使用方法

最も基本的な text-shadow では、x オフセットと Y オフセットだけを使用します。

.shadow1 { color: black; text-shadow: 2px 2px; }

多くの場合、色の指定も行います。

.shadow2 { color: black; text-shadow: #87CEEB 1px 3px; }

color パラメーターは、shadow 定義の最初または最後に配置できます。さらに、ぼかしの半径も追加できます。ぼかし (ガウス) アルゴリズムを使用して、影をぼかす程度を指定します。

.shadow3 { color: black; text-shadow: 1px 3px 3px rgba(135, 206, 235, 1); }

拡散距離も指定できます。正の値は影を拡張する程度を、負の値は影を縮小する程度を示しています。

.shadow4 { color: black; text-shadow: skyblue 0px 0px 0px 4px; }

拡散のない影を複数描画することで、正の拡散を使用した text-shadow と似た効果を作り出すこともできます。しかし、それには次のような複雑なマークアップが必要なので、影の効果や品質が下がる可能性があります。

.shadow4_nospread { color: black; text-shadow: skyblue 0px 2px, skyblue 2px 0px, skyblue -2px 0px, skyblue 0px -2px, skyblue -1.4px -1.4px, skyblue 1.4px 1.4px, skyblue 1.4px -1.4px, skyblue -1.4px 1.4px; }

spread パラメーターを使用すれば、同じ効果をこれよりずっと簡単に実現することができます。また、負の値を使用すれば、これまで不可能だった効果を実現することもできます。

.shadow5 { text-shadow: 5px 5px 2px -2px #9966CC; }

上の 5 個のパラメーターは、ただ 1 つの影を表現しています。text-shadow プロパティは、順番に重ねられた一連の影をサポートします。次の例は、下から、赤、オレンジ、黄色、半透明の白色の順に text-shadow を描画しています。

.shadow6 { text-shadow: rgba(255, 255, 255, .5) 1px 1px, yellow 2px 3px, rgba(255, 153, 0, .7) 3px 6px, rgba(255, 0, 0, .5) 4px 8px; }

 

"spread" パラメーターと相互運用性

現在のところ、拡散距離は IE10 でのみサポートされています。このパラメーターがサポートされていない理由の 1 つは、W3C 仕様書の暗黙的な矛盾にあります。この仕様書では、計算値は「色および 3 つの <length> の絶対値 (a color plus three absolute <length>s)」とされている一方、「"inset" キーワードが許可されないことを除き、<shadow> は "box-shadow" プロパティと同様に定義 (<shadow> is the same as defined for the "box-shadow" property except that the "inset" keyword is not allowed)」とも示されています。box-shadow 仕様は <shadow> を、「長さの値は 2 ～ 4、[および] オプションの色によって指定 (specified by 2-4 length values, [and] an optional color)」と定義しています。

相互運用性の確保を目的とする場合、text-shadow に spread パラメーターを指定すると、その形式をサポートしないブラウザーでは無効と解析されるので注意してください。最後のパラメーターを使用する場合は、マークアップの中に "spread" を含まないフォールバック バージョンの text-shadow も用意してください。そうしないと、spread をサポートしないブラウザー上では、テキストの影が表示されません。

.shadow7 {

color: black;

text-shadow: #99FFCC 0px 0px 10px; /* for browsers without spread distance */

text-shadow: #99FFCC 0px 0px 10px 10px; /* for browsers with the full spec */

}

テキストの拡散によって、ストローク テキスト (上記)、暗くぼかした影、幅の狭い影など、さまざまな効果が可能になります。"拡散距離" パラメーターに関する皆様のご意見、ご感想をぜひお寄せください。マイクロソフトでは、CSS テキスト仕様書における text-shadow の記述をより明確にするために、今後も CSS ワーキング グループとの協議を継続していきます。

 

従来バージョンからの改善点

従来の Internet Explorer のバージョンでは、テキストの影の効果を生成するために、DXImageTransform.Microsoft.Shadow、DXImageTransform.Microsoft.DropShadow、DXImageTransform.Microsoft.Glow、DXImageTransform.Microsoft.Blur という各種フィルターを主に使用する必要がありましたが、IE10 では、CSS3 text-shadow を使ってこの効果を実現することができます。IE10 では、DXImageTransform フィルターの代わりに、text-shadow プロパティを使用してテキストの影を生成します。この方法のメリットは、標準に準拠しながら相互運用可能な方法で効果を実現できること、そしてハードウェア アクセラレーション対応の CSS3 text-shadow によって、従来に比べて大幅にパフォーマンスを向上できることがあります。

 

フォールバックの動作

現在テキストの影を使用しているサイトを、テキストの影のない状態で描画しても、品質が大きく損なわれることはありません。Web 上でテキストの影を使用する理由の多くは、視覚的な深みを与えるためのちょっとした味付けであることがほとんどです。しかしテキストの影は、クリエイティブ感をよりアップさせるために使用することもできます。

例: IE9 (左) および IE10 (右) 上で、フォールバックが不適切な text-shadow を表示した場合

text-shadow に対応していないブラウザーをサポートする必要がある場合は、CSSOM で textShadow に対する機能検出を使用し、必要に応じてテキストの色を変更します。

機能検出の使用方法は次のとおりです。

if (typeof document.body.style.textShadow == 'undefined') {

// text-shadow is not supported

document.body.style.color = 'black';

}

else {

// text-shadow is supported

document.body.style.color = '#FFFFCC';

document.body.style.textShadow = 'turquoise -2px -2px, black 2px 2px';

}

 

text-shadow をお試しください

text-shadow は、すぐにでもお試しいただけます。既にお使いの方は、"spread" パラメーターの新たな使い方を検討してみてください。たとえば、複数の影を使い、それぞれに異なるパラメーターを設定すると、面白い効果が得られます。

以下に、私が作成した面白い text-shadow 効果のコレクションをご紹介します。

こちらをクリック すると、新しいタブが開き、このコレクションが動いている様子をご覧いただけます

text-shadow は、WOFF フォントや入力要素と一緒に使用したり、CSS3 トランジションやアニメーションと組み合わせて使用することができます。ご使用のブラウザーが text-shadow と CSS トランジション/アニメーションをサポートしている場合、上のリンクをクリックすると新しいタブが表示され、さまざまな機能が連携して動作する様子をご覧いただけます。さらに、[ソースの表示] やブラウザーの開発者ツールなどを使って、マークアップを表示することもできます。

ぜひ Windows Developer Preview が提供する IE10 の text-shadow の効果を存分にお試しください。また、IE Test Drive の「Hands On: text-shadow」デモでは、テキストの影の効果をインタラクティブにお試しいただけます。生き生きとしたテキストを作成することがいかに簡単であるか、ご自身の目でお確かめください。

—Jennifer Yu、Internet Explorer プログラム マネージャー