プラットフォームニュース：使用：Focus-Visible、BBC＆＃039;の新しい書体、宣言的なシャドウドン、A11y、プレースホルダー

今週のニュースには、フォーカスで視界のあるプレースホルダーと入力プレースホルダー、アクセス可能な書体、ディスプレイ：コンテンツ付きのサファリバグまで、多くのアクセシビリティがあります。さらに、スタイルのカプセル化をサポートするベアボーンのWebコンポーネントのスニペット。

今は使用を開始するのに良い時期かもしれません：フォーカスビジー可能

CSS：Focus-Visible Pseudo-Classの交代：キーボードユーザー向けのカスタムフォーカスインジケーターを作成する新しい方法としてのフォーカス。 Chromeは最近次のように切り替えました：フォーカス：フォーカスはユーザーエージェントStyleSheetで魅了され、その変更の結果、ユーザーがボタンをクリックまたはタップするとデフォルトのフォーカスリングが表示されなくなりました。

切り替えの場合：フォーカス：フォーカスビジー可能、後方互換性を検討してください。キーボードフォーカスインジケーターは、すべてのブラウザではっきりと表示される必要があります。スタイルのみ：フォーカスに魅了される非サポートブラウザには、デフォルトのフォーカスリングが表示されます。デフォルトのフォーカスリングは、デザインに応じて、「十分にクリアまたは表示できない場合があります」。

ボタン {
  背景：白。
}

ボタン：Focus-Visible {
  アウトライン：なし;
  背景：＃ffdd00; /* 金 */
}

使用を開始する良い方法：Focus-Visible Todayは、フォーカスルールでフォーカススタイルを定義し、すぐにこれらの同じスタイルをA：フォーカス：NOT（：FOCUS-Visible）ルールですぐに元に戻すことです。これは確かに最もエレガントで直感的なパターンではありませんが、すべてのブラウザでうまく機能します。

• サポートしないブラウザ：フォーカス可視：フォーカスルールで定義されているフォーカススタイルを使用し、2番目のスタイルルールを完全に無視します（Focus-Visibleはそれらには不明です）。
• サポートするブラウザでは、フォーカスビジー可能なブラウザでは、2番目のスタイルのルールは、以下で定義されているフォーカススタイルを元に戻します。フォーカスルール：フォーカス可視状態もアクティブではない言い換えれば、次のように定義されているフォーカススタイルは、フォーカスルールが有効である場合にのみ有効です。フォーカスビジーもアクティブです。

ボタン：フォーカス{
  アウトライン：なし;
  背景：＃ffdd00; /* 金 */
}

ボタン：フォーカス：not（：Focus-Visible）{
  背景：白。 / *ゴールドを元に戻す */
}

BBCは、よりアクセスしやすい書体を作成しました

BBCは、Reith（BBCの創設者John Reith irにちなんで名付けられた独自のカスタム書体を作成しました。彼らの目標は、特に小さなデバイスでは、複数の言語をサポートし、読みやすいフォントを作成することでした。フォントは、さまざまな画面サイズで混合能力ユーザーグループ（ディスレクシアと視力障害）でテストされました。

私たち[BBC]は、HelveticaまたはArialを使用していました。また、企業の書体としてギルサンもありました。これらの書体は、印刷されたページのために100年前に設計されました[そして]今日の最新のデジタル画面ではうまく機能しません。

注： Wakamai FondueのReith SansとReith Serifを検査したい場合は、BBCのWebサイトのFirefoxのDom InspectorのFonts Paneの「すべてのフォント」セクションにあるWoff2ファイルのURLにすばやくアクセスできます。

ディスプレイ：内容はSafariでまだアクセスできません

CSSディスプレイ：コンテンツ値は2018年以来ブラウザでサポートされています。この値を持つ要素は「ボックスを生成しません」で、子供に効果的に置き換えられます。これは、セマンティックドキュメント構造を保持しながら、コンテンツ値を使用して、より深くネストされた要素をFlex/グリッドアイテムに「促進」するために使用できるFlexおよびグリッドレイアウトで特に役立ちます。

残念ながら、この機能はもともと、ブラウザのアクセシビリティツリーから要素を削除する実装バグが付属していました。たとえば、表示：コンテンツを

要素に適用すると、その要素が画面リーダーが言及しなくなりました。それ以来、このバグはFirefoxとChrome（最新バージョン）で修正されています。

ChromeとFirefoxでは、スクリーンリーダーはユーザーに「メインナビゲーション」に「リスト、2つのアイテム」が含まれていることを通知します。 Safariでは、アクセシビリティツリーに

and
• 要素が存在しないため、後半の部分が欠落しています。 AppleがSafariでこのバグを修正するまで、セマンティック要素でコンテンツ値を使用し、スクリーンリーダーでテストをテストする場合は、ページもSafariでアクセスできることを確認してください。

  プレースホルダーテキストの色をオーバーライドするときに不透明度を設定します

  アクセシビリティの専門家は、事前に入力されたテキストと混同され、ユーザーが値の入力を開始したときに消える可能性があるため、可能であればプレースホルダーを避けることをお勧めします。ただし、多くのWebサイト（Wikipediaやgov.ukを含む）は、検索フィールドなどの単一の入力フィールドのみを含むシンプルなWebフォームでプレースホルダーを使用しています。

  プレースホルダーは、広くサポートされている::プレースホルダーの擬似要素を介してスタイルを整えることができます。設計でプレースホルダーテキストのカスタムカラーが必要な場合は、色と不透明度の両方を指定してください。後者はFirefoxに必要です。Firefoxは、不透明度：0.54から:: Placeholderをデフォルトで適用します。この値を無効にしないと、プレースホルダーのテキストがFirefoxでコントラストが不十分になる可能性があります。

   .search-field :: Placeholder {
    色：＃727272;
    不透明：1; / * firefoxに必要です */
  }

  宣言的なシャドウドムは、スタイルのカプセル化を普及させるのに役立ちます

  Shadow Domの重要な機能の1つは、スタイルのカプセル化です。外側のページのスタイルルールは、Shadow Tree内の要素と一致しません。その逆も同様です。この機能を使用するには、Shadow Domツリーを要素（通常はのようなカスタム要素）に接続し、要素のテンプレート（通常はDOMの

  これらの手順は、JavaScriptでのみ実行できます。スタイルのカプセル化にのみ興味があり、要素に動的な機能を必要としない場合、Shadow Domを使用してカスタム要素を作成するために必要なJavaScriptの最小量を次に示します。

   customelements.define（
    「私の要素」、
    クラスはhtmlelementを拡張します{
      constructor（）{
        素晴らしい（）;
  
        // domで<template>を見つけます
        template = document.getElementById（ "my-template"）;
  
        //テンプレートの内容のコピーを作成します…
        let content = template.content.clonenode（true）;
  
        //…<my-element>のShadow Domに注入します
        this.attachshadow（{mode： "open"}）。AppendChild（content）;
      }
    }
  ）;</my-element></template>

  スタイルのカプセル化の例については、CodepenのMiriam Suzanneの要素を参照してください。スコープスタイルは、HTMLペインの

  JavaScriptは、最新のブラウザでこのタイプのスタイルのカプセル化を作成するためにまもなく必要ない場合があります。今週初め、ChromeはGoogleの宣言的なシャドウDOM提案を出荷した最初のブラウザになりました。標準になった場合、この機能により、サーバー側のレンダリングと組み合わせてShadow Domを使用することもできます。

以上がプラットフォームニュース：使用：Focus-Visible、BBC＆＃039;の新しい書体、宣言的なシャドウドン、A11y、プレースホルダーの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。