Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://developer.mozilla.org/ja/docs/Web/HTML/Reference/Global_attributes/inert below:

HTML inert グãƒãƒ¼ãƒãƒ«å±žæ€§ - HTML

Baseline 2023 *

Newly available

inert グローバル属性は論理属性で、要素とそのフラットツリーの子孫すべてが「不活性」になることを示す論理属性です。 showModal() に対応するモーダルダイアログ (<dialog>) は、不活性状態から脱します。つまり、先祖から不活性を受け継ぐことはなく、自身に inert 属性を明示的に設定した場合にのみ不活性になります。

具体的には、inertは以下のことを行います。

• ユーザーが要素をクリックしたときに click イベントが発行されないようにします。
• 要素にフォーカスが当たらないようにして、 focus イベントが発生することを防ぎます。
• ブラウザーのページ内検索機能を使用しているときに、要素のコンテンツが検索/照合されるのを防ぎます。
• ユーザーが要素内のテキストを選択できないようにします。これは、 CSS プロパティ user-select を使用してテキストの選択を無効にするのと同じです。
• ユーザーが、編集可能な要素のコンテンツを編集できないようにします。
• アクセシビリティツリーから要素とそのコンテンツを除外して、支援技術から要素とそのコンテンツを非表示にします。

<div inert>
  <!-- コンテンツ -->
</div>

inert 属性は、インタラクティブであってはならないコンテンツのセクションに追加することができます。要素が不活性化されると、リンクやボタン、フォームコントロールのような通常インタラクティブな要素を含む、その要素のすべての子孫は、フォーカスを得たりクリックしたりすることができないため、無効となります。

inert 属性は、オフスクリーンや非表示にすべき要素にも追加することができます。不活性な要素は、その子孫とともに、タブ順序とアクセシビリティツリーから取り除かれます。

メモ: inert はグローバルな属性であり、どんな要素にも使用することができますが、一般的にはコンテンツのセクションに使用されます。個々のコントロールを「不活性」にするには、代わりに disabled 属性と CSS の :disabled スタイルを使用することを検討してください。

inert` 属性を使用する際には、アクセシビリティに十分配慮してください。既定では、要素やそのサブツリーが不活性であるかどうかを視覚的に指示する方法はありません。ウェブ開発者として、アクティブなコンテンツ部分と不活性なコンテンツ部分を明確に示すことは、あなたの責任です。

コンテンツの不活性化について視覚的・非視覚的な手がかりを提供する一方で、視覚ビューポートにはコンテンツの一部しか格納されていない可能性があることも覚えておいてください。ユーザーはコンテンツの小さなセクションにズームインされるかもしれませんし、コンテンツをまったく見ることができないかもしれません。不活性な節が不活性に見えない場合、不満や使い勝手の悪さにつながる可能性があります。

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4