A Web Design Community curated by Chris Coyier.

ChromeやSafariで採用しているレンダリングエンジンWebKitは「-webkit-background-clip」と「-webkit-text-fill-color」という2つのCSS3プロパティに対応している。「-webkit-background-clip」は背景をその上にレンダリングされるテキストなどに合わせて切り取る指定、「-webkit-text-fill-color」はテキストに対して透過などを指定できるプロパティになっている。この2つのプロパティを組み合わせると、背景画像で文字そのものをレンダリングするといったことができる。

このあたりの基本的なテクニックと、WebKit以外のブラウザと併用する場合の切り分け方法がShow Image Under Text (with Acceptable Fallback) - CSS-Tricksで紹介されている。基本のテクニックは次のとおり。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>-webkit-background-clip: textデモ01</title>
  <style type="text/css">
  h1 {
    background: url(fire.jpg) no-repeat;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  </style>
</head>
<body>
  <h1>MYCOM Journal</h1>
</body>
</html>

背景に画像を指定。「-webkit-background-clip: text;」の指定で背景画像が文字の部分だけレンダリングされるようになる。「-webkit-text-fill-color: transparent;」で文字そのものは透過になる。つまり、文字の形の部分だけ表示されている背景画像がそのまま表示されることになる。この2つのプロパティに対応していないブラウザで閲覧すると、背景画像と文字がそのまま表示される。

Chromeで閲覧すると想定通りのレンダリングが実施されていることがわかる。

対応していないブラウザでは想定していないレンダリングが実施される。

Show Image Under Text (with Acceptable Fallback)では機能検出を活用して、backgroundclipの機能を提供している場合にはこの機能を使い、そうでない場合には使わないようにする方法を紹介している。紹介されている方法はModernizrを使って機能検出を実施するというもの。backgroundclipを検出するコードのサンプルも紹介されている。

backgroundclipに対応している場合には同じレンダリングになる。

backgroundclipに対応していないと判断された場合にはほかのスタイルが適用される。

 
<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>-webkit-background-clip: textデモ02</title>
  <script src="modernizr-1.6.min.js"></script>
  <script>
    Modernizr.addTest('backgroundclip',function(){
      var div = document.createElement('div');
      if ('backgroundClip' in div.style) return true;
      'Webkit Moz O ms Khtml'.replace(/([A-Za-z]*)/g,function(val){
        if (val+'BackgroundClip' in div.style) return true;
      });
    });
  </script>
  <style type="text/css">
  .backgroundclip h1 {
    background: url(fire.jpg) no-repeat;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  h1 {
  }
  </style>
</head>
<body>
  <h1>MYCOM Journal</h1>
</body>
</html>

ただし、試した限りではOperaに対しては次のように検出が機能していなかった。Opera向けには別の方法を併用する必要がありそうだ。

Operaも対応していないのでFirefoxと同じレンダリング結果になる。

Modernizeを使ってもOperaでは切り分けが機能しない。

最低限のアクセサビリティを実現したところをスタートポイントとし、あとは機能を提供しているリッチブラウザに対してはそうした機能を活用して優れた体験を提供していくという「プログレッシブエンハンスメント」を実現するにあたり、最近ではブラウザを判定して処理を切り分けるのではなく、提供している機能を検出して処理を切り分ける方がいいとする意見が増えている。Show Image Under Text (with Acceptable Fallback)で紹介されている方法も基本的にこの手法に則っている。