0

CMS エディターが、CSS オーバーライドのみを使用して、ページ タイトルに使用されるテキストを交換できるようにしようとしています。

<header data-alternate="An Alternate Title">
    This Page's Default Title
</header>

:before または :after タグを使用すると、利用可能な多くの代替タイトルのいずれかを使用できます。

header:before {
content: attr(data-alternate);
display: inline-block;
}

私たちも言うことができれば、

header:text {
    display: none;
    }

残念ながら、私が知る限り、「このページのデフォルト タイトル」を非表示にして「別のタイトル」に置き換える良い方法はありません。これがスプライトの場合、Phark などの使い古された画像置換技術のいずれかを使用できます。:before によって生成されたテキスト置換では、それほど多くはありません。:before は、デフォルト テキストを非表示にするために使用される CSS デバイスの影響も受けるため、たとえば Phark では、:before コンテンツも -9999px になります。

私が避けようとしている解決策があります。

  1. Phark メソッドまたは何かを使用してデフォルトのテキストを非表示にし、:before コンテンツで絶対配置を使用して左: 0、上: 0 に戻します。可能であればフローを維持したい/維持する必要があります。
  2. 「ページのデフォルト タイトル」をスパンでラップし、別のタイトルが使用されているときに CSS で display: none に設定するだけです。

すなわち

<header data-alternate="An Alternate Title">
    <span class="default">This Page's Default Title</span>
</header>

これは機能しますが、ヘッダーにネストされたスパンは不快です。

生成された :before/:after コンテンツをターゲットにせずに、タグのテキストをターゲットにする方法はありますか? これを行う別の方法はありますか？

4

1 に答える 1

1

これがまさにあなたが望むものかどうかはわかりませんが、次のようなことを試すことができます：

p {
    visibility: hidden;
}
p:before {
    content: attr(data-alternate);
    display: inline-block;
    visibility: visible;
}

http://jsfiddle.net/yJKEZ/

要素の可視性をp非表示に設定してから、:before疑似要素の可視性をその設定に関係なく、その親 ( p) 内で可視に設定することができます。

それが期待どおりに機能しない場合は、プロセスを支援するために余分なスパンを追加することに大きな問題はありません. それほどきれいではないかもしれませんが、うまく機能する可能性があります。

ただし、なぜこれを行う必要があるのか​​ という疑問を提起し、このようなアプローチに関するいくつかの懸念を指摘したいと思います...

まず第一に、疑似要素は DOM の一部ではないため、代替テキストを選択することはできず、ブラウザー (またはユーザー) がアクセスすることはできません。スクリーン リーダーや検索エンジンにはデフォルトのテキストが表示され、代替テキストには何の注意も払われませんが、ユーザーにはそれが表示されます... これは混乱を招く可能性があります。

あなたの質問では、CSSでこれを実行できるようにしたいと指定していますが、可能かもしれませんが、このようなことを行うための最良の解決策ではありません. 特に、疑似要素をサポートしていない古いブラウザーで Web サイトを表示している場合 (ユーザーには何も表示されません!)。

印刷スタイルシートで画像を代替テキストに交換したり、ハイパーリンクのテキストをリンク先の完全なアドレスに交換したりする場合は、このような方法をお勧めします (これも主に印刷スタイルシートの場合です)。見出しなどの重要なコンテンツをこのように変更すると、特にアクセシビリティの点で、他の多くの問題が発生する可能性があります。

私の答えと一緒にあなたが考慮すべきこと...私はあなたの問題を解決したことを願っています!

于 2014-04-03T02:19:19.840 に答える