WebKitグラジエントを実現、アプリエンジンとしての表現力高め

SafariやMac OS XにおけるHTML/CSS/JavaScript処理用ウェブエンジンであるWebKitで、新しくグラジエントが指定できるようになった。同機能はCSSの形式で指定するもので、現在リリースされている最新のSafariではまだ利用できない。開発中のWebKitを使ったレンダリングで内容を確認できる。グラジエントを指定する形式は次のとおり。

-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)
WebKit CSSグラジエント指定形式

実際にどういった指定をするものかはサンプルが用意されているため、サンプルのHTMLを読むとわかりやすい。バックグランドに対して指定できるほか、ボーダーイメージやリストアイテム、コンテンツに対して適用できる。

<style>
.radial { width:150px; height:150px; border:2px solid black;
           background: -webkit-gradient(radial, 45 45, 10, 52 50, 30, from(#A7D30C), to(rgba(1,159,98,0)), color-stop(90%, #019F62)),
                       -webkit-gradient(radial, 105 105, 20, 112 120, 50, from(#ff5f98), to(rgba(255,1,136,0)), color-stop(75%, #ff0188)),
                       -webkit-gradient(radial, 95 15, 15, 102 20, 40, from(#00c9ff), to(rgba(0,201,255,0)), color-stop(80%, #00b5e2)),
                       -webkit-gradient(radial, 0 150, 50, 0 140, 90, from(#f4f201), to(rgba(228, 199,0,0)), color-stop(80%, #e4c700)); }
.linear { width:130px; height:130px; border:2px solid black; padding: 10px; 
           background: -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00));
           -webkit-background-origin: padding; -webkit-background-clip: content; }
}
</style>
WebKit CSSグラジエント指定例 - Background Gradients Exampleより抜粋

　　　

<style>
div {
    border-width: 21px 30px 30px 21px;
    width: 75px;
    height: 75px;
    margin: 10px;
    -webkit-border-image: -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00)) 21 30 30 21 repeat repeat;
}
</style>
WebKit CSSグラジエント指定例 - Border Image Gradient Exampleより抜粋

　　　

<style>
ul { list-style-image: -webkit-gradient(radial, center center, 3, center center, 6, from(#00c9ff), to(rgba(0,201,255,0)), color-stop(80%, #00b5e2)) }
</style>
WebKit CSSグラジエント指定例 - List Item Gradients Exampleより抜粋

　　　

<style>
div { }
.radial::before { width:150px; height:150px; border:2px solid black;
           content: -webkit-gradient(radial, 45 45, 10, 52 50, 30, from(#A7D30C), to(rgba(1,159,98,0)), color-stop(90%, #019F62)),
                       -webkit-gradient(radial, 105 105, 20, 112 120, 50, from(#ff5f98), to(rgba(255,1,136,0)), color-stop(75%, #ff0188)),
                       -webkit-gradient(radial, 95 15, 15, 102 20, 40, from(#00c9ff), to(rgba(0,201,255,0)), color-stop(80%, #00b5e2)),
                       -webkit-gradient(radial, 0 150, 50, 0 140, 90, from(#f4f201), to(rgba(228, 199,0,0)), color-stop(80%, #e4c700));
            display: block;
        }
.linear::after { width:130px; height:130px; border:2px solid black; 
           content: -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00));
           display: block;
        }
}
WebKit CSSグラジエント指定例 - Generated Content Gradients Exampleより抜粋

すでにWebKitでは新しいエフェクトをCSSに追加するためのアーキテクチャが実装されており、将来的にCSSに対してエフェクトの追加が容易であるように準備されている。たとえば今回紹介されているのは線形や放射状にグラジエントを使うが、これがもっと複雑な図形、たとえば星型であったりチェスボードのような効果イメージであったりといった適用も簡単に追加できる。

WebKitはMac OS XやWindowsに提供されているWebブラウザSafariで使われているWebブラウザエンジンだが、こうしたWebKit拡張はWebブラウザ向けの拡張というよりは、WebKitを使うアプリケーション向けのものといえそうだ。OS Xのアプリケーションの多くはWebKitを使っており、こうしたアプリケーションでより優れたUIやデザインを実現するためにこうした機能が使われることになるのではないかとみられる。

すでにGnomeの標準WebブラウザEpiphanyは次期バージョンからレンダリングエンジンをWebKitに一本化すると発表している。Acid3テストでも早期に良ポイントをマークするなどWebKitは活発に開発が続けられている。今後の開発がかなり注目されるコンポーネントだ。