CSS生成コンテンツテクノロジー

はじめに

content プロパティは、生成されたコンテンツを :before および :after 疑似要素に追加するために CSS 2.1 で導入されました。すべての主要なブラウザ (Firefox 1.5 以降、Safari 3.5 以降、IE 8 以降、Opera 9.2 以降、Chrome 0.2 以降) がこの機能をサポートしています。さらに、Opera 9.5 以降では、:before および :after 擬似要素だけでなく、すべての要素の content 属性がサポートされています。

CSS 3 生成コンテンツの作業草案では、コンテンツ プロパティにさらに多くの機能が追加されています。たとえば、コンテンツをドキュメント内で挿入および移動して、脚注、文末脚注、セクション コメントを作成できます。しかし、拡張機能の内容を実装しているブラウザはありません。

この記事では、生成されたコンテンツの使用の基本を説明し、次にそれらを使用するための具体的なテクニックを説明します。

いくつかの注意点

このトピックに入る前に、生成されたコンテンツ

は CSS が有効になっている最新のブラウザーでのみ動作し

、DOM 経由では利用できないことを指摘しておく価値があります。これは純粋な表現です。具体的には、アクセシビリティの観点から、生成されたコンテンツは現在のスクリーン リーダーではサポートされていません。

生成されたコンテンツ - 基本

コンテンツは次のように使用されます:

h2:before {

content: "some text";

}

これは、ページテキスト」h2.

content 属性のテキスト値を入力する代わりに、次のように属性値 attr() を使用することもできます:

a:after {

content: attr(href)

}

これは次のようになりますa 要素の href 各要素の内容を挿入した後。

属性名 attr() を参照する場合は、引用符なしで属性名を使用する必要があることに注意してください。

カウンターを使用したり、挿入された画像を使用して動的な数値 URL (/path/to/file) を生成することもできます。いくつかの例を見てみましょう。

カウンターを使用してコンテンツを数値化する

質問 1、質問 2、質問 3 など、繰り返される一連の要素に増分値を挿入する場合は、カウンターを使用してカウンター値を増分し、コンテンツを使用して表示することができます。次の方法でカウントします:

ol {

リストスタイルタイプ: なし;

カウンタリセット: セグメント化されたカウンタ

}

li: before {

content: "chapter" counter (stall); -increment

}

in 最初のルールでは、counter-reset 属性を使用してカウンターを 1 にリセットします。 2 番目のルールでは、各 li 要素に

string

が出力されます。ここで、X はカウンターの現在の値です。 2 番目のルールの最後の属性 - リスト内の次の要素に進む前に、カウンターの値を 1 ずつ増やします。章もちろん、このCSS機能をサポートしていないブラウザでは番号は表示されません。これが Web ページのどこかでわかりにくい場合は、第 10 章で詳細を参照してください。純粋に装飾的なコンテンツを生成するか、実際の HTML で記述する必要があるコンテンツの実際の部分を生成するかは紙一重です。

生成されたコンテンツを使用してカウンターを作成する方法を説明するデモを作成しました。このトピックの詳細については、自動番号付けのための CSS カウンターの使用に関する David Storey の優れた記事を参照してください。

多言語コンテンツに正しい引用符を挿入します

言語が異なれば、引用符に異なる文字が使用されます。英語の引用は次のように書かれます:

「あなたにそれをさせるのは誰かだけです、

ノルウェー語の引用は次のように書かれます:

« Hvis du forteller meg nok en vits, såskal jegslådeg til jorden»»

HTML でハードコードされた引用符を含む単純なテキストを使用する代わりに、q 要素を使用できます

誰かがそうさせた場合にのみ機能します

;Hvis du forteller meg nok en vits, så skal jeg slå deg til jorden.

CSS で言語ごとに適切な引用符を指定します

/* 引用符を指定します2 つの言語の場合 */

:lang(en) > q { quotes: '"' '"' }

:lang(no) > q { quotes: "«" "»"}

/ * 要素のコンテンツの前後に引用符を挿入 */

q:before { content: open-quote }

q:after { content: close-quote }

この手法は、任意の要素に使用できます。 q だけです (ただし、これが最も明白でセマンティックな使用方法です)。引用符属性は Safari 3 (およびそれ以下) および IE 7 (およびそれ以下) ではサポートされていないことに注意してください。

私の引用プラグインのデモを確認してください。

テキストを画像に置き換える

使用できる画像置換テクニックはいくつかありますが、それぞれに利点と欠点があります

div.logo {

Content: URL (logo. png);

}

画像の置換にこの手法を使用する利点は、実際にテキストを置換するので、画像スペース、

text-indent

を作成するのに頼る必要がないことです。パディングして元のテキストを非表示にします

ただし、いくつかの欠点があります: 画像を繰り返したり、画像スプライトを使用したりすることはできません

:before または :after だけでなく、すべてのセレクターの属性としてコンテンツ URL をサポートする Opera 9.5 以降、Safari 4 以降、Chrome でのみ機能します

このメソッドを使用してオーバーライドを含める方法はありません 画像をテキストに置き換えますそのため、スクリーン リーダーはコンテンツを理解できません。

詳細については、コンテンツを使用した画像置換デモをご覧ください。

リンクアイコンを表示

コンテンツ属性の属性セレクターを使用して、リンクが属するファイル形式または外部ファイル形式に基づいてリンクの後にアイコンをレンダリングできます。

a[href $='.pdf']:after {

content:url(icon-pdf.png);

}

a[rel="external"]:after { /* を使用することもできますa[href ^="http"]:after */

content:url(icon-external.png);

}

最初のルールは、部分文字列一致で CSS3 セレクターを使用します - href $=' を意味します。 href の最後に属性 .pdf の値があること。

正規表現により、^ と $ はそれぞれ文字列の先頭と末尾を指します。 CSS 3 の部分文字列一致属性セレクター [attribute^=value] および [attribute$=value] を使用すると、その中の任意の要素を選択しながら、属性内容が指定された値で始まるか終わる [attribute*=value] 要素と一致させることができます。属性 位置要素。

これは、リンク上に PDF と外部アイコンを表示するデモです。

属性値をコンテンツとして使用する

content: attr(val) を使用すると、要素の属性の値を画面に表示できることはすでに述べました。これは多くの便利な方法で使用できます。ここではいくつかの例を示します。

CSS で URL/略語を印刷する

分離されたリストで印刷するという記事で説明したように、印刷後に生成されたコンテンツを使用してページを充実させることができます。たとえば、印刷 CSS では、次のリンクの URL を印刷します:

a:after {

content: "(" attr(href) ")";

}

同じメソッドを使用して拡張子を印刷できます。 abbr 要素の .以下を印刷スタイルシートに追加するだけです:

abbr: {

content: "("attr(title)")";

}

詳細については、私の印刷 URL と略語拡張子のデモをご覧ください。

今後の展望: attr() CSS3 強力

CSS3 値と単位ドラフトは attr() 式の範囲を拡張します - 文字列を返すだけでなく、単位タイプ、CSS カラー、CSS 整数などの値も返すことができます、長さ、角度、時間、周波数、その他の単位。

カスタム データ プロパティに加えて、これは単純なチャート、グラフ、アニメーションのレンダリングに非常に強力です。たとえば、属性値に基づいて要素の背景色を設定できます。これは、Web 上にカラー パレットを表示するアプリケーションで役立つ場合があります。カスタム データ プロパティに設定された値に基づいて要素のサイズを指定することもできます。たとえば、棒グラフの棒の長さは、棒を表す要素のプロパティによって設定できます。残念ながら、この機能は

優先度が低いため、すぐには完成しません。

結論

この記事が content 属性とそれを使ってできることについてより深く理解していただければ幸いです。 IE 8 がコンテンツもサポートするようになったことから、この CSS 機能を制作作業で使用できることは非常に明白です。必要に応じて使用し、結果として得られるコンテンツが依然としてアクセシビリティに与える影響に注意してください。

以上がCSS生成コンテンツテクノロジーの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。