CSS3セレクターに挨拶する
KestrelはCSS3セレクターのリスト全体を管理します。 たとえば、これらを使用すると、余分なタグやクラス名を追加せずに要素のグループを作成できます。
ストリップテーブル
テーブル内の行の色を交互にすることは、近年かなり一般的なアイデアです。 これには通常、Javascript、または代替色で様式化された各行のクラスの作成が必要でした。 これは、nth-child（またはnth-of-type）で実行できます
例えば
#playlist tr：nthchild（odd）td {
背景色：＃edf3fe;
}
奇数という意味の奇数に注意してください。 逆に、偶数を使用します。 さらに、括弧内に行番号、または（！）式の類似性、たとえば2n + 1を指定できます。
そして、キャップが空中に投げ込まれた
ドロップキャップ、またはロシア語ではテキストの大文字（文字）。 これは非常に大きな手紙で、本の章の最初によく見られます。 インターネットでは、通常、最初の文字に別のブロックを使用して割り当てられます。 これで、:: firstletter疑似要素を使用できます。 いずれにしても、大文字にはクラスが必要であることを忘れてはなりません
div.article> p：firstof-type :: firstletter {}
これは、div.articleの直接の子孫であるパラグラフpの最初の文字をカバーしています。
動的メディアクエリ
メディアクエリは、ユーザーのシステムに関する情報を取得するために使用されます。 彼女を知っていれば、新しいデザインを構築できます。 このアイデアは、モバイルデバイスを介してサイトにアクセスするときによく使用されます。 ケストレルでは、メディアクエリは動的です。 つまり、ウィンドウのサイズを変更するときなど、イベントが設定されるたびに呼び出されます。
@media screenおよび（max-width：730px）{
h1 {font-size：2em; }
.figure {
float：なし;
マージン：0 10％;
}
.figure p {表示：なし; }
.figure img {
最大幅：95％;
高さ：自動;
padding-bottom：5px;
}
}
丸い角
ご存知のように、CSSはborder-radiusプロパティを使用した丸めをサポートしています。 これは機能しませんが、OperaはSVGを使用して出力を提供します。 例：
CSS：
背景：銀色のURL（ "../ images / roundedcorners2.svg"）;SVG：
-webkit-border-radius：1em; -moz-border-radius：1em; ボーダー半径：1em;
<rect fill = "white" x = "0" y = "0" width = "100％" height = "100％" />
<rect fill = "silver" x = "0" y = "0" width = "100％" height = "100％" rx = "1em" />
SVGをサポートしていないブラウザーは、もちろんそれをサポートしていれば、ボーダー半径を使用してラウンドの構築を開始します。 そうでない場合、すべてが正方形のままになります。
勾配
Operaには、同じSVGを使用してグラデーションを描画する方法があります。 これはズームの状況に最適です。 ベクトルを保存します:)。
この例では、この方法でサポートされていないブラウザーの背景としてrgb色を使用し、OperaのSVGを使用します。
CSS
#playlist tr：firstof-type {background：rgb（187,187,187）url（ "../ images / gradient.svg"）; }
SVG：
<defs>
<linearGradient id = "grad" x1 = "0％" y1 = "0％" x2 = "0％" y2 = "100％">
<stop offset = "30％" style = "stop-color：rgb（219,219,219）;" />
<stop offset = "90％" style = "stop-color：rgb（187,187,187）;" />
</ linearGradient>
</ defs>
<rect fill = "url（#grad）" x = "0" y = "0" width = "100％" height = "100％" />
新しいJavascript
Javascriptエンジンが再び高速になり、重要度が低くなり、機能が向上しました。 たとえば、入力したテキストに関するいくつかの問題が解決されました。 DOM3のNode.compareDocumentPositionおよびGecko DOMのRange.comparePointのサポートが登場しました。 これらは両方ともGoogleページで使用されます。 ゲッターとセッターJavascript 1.5が追加され、Yahoo！との作業が改善されました。 メールとMicrosoft Live。
また、HTML5の人気のあるgetElementsByClassName関数を使用できるようになりました。これにより、独自のライブラリを作成する必要がなくなります。
おわりに
仕事は本格的です！ ;）
オリジナル