new repository

1 files changed, 66 insertions, 0 deletions

diff --git a/devdocs/html/global_attributes%2Finert.html b/devdocs/html/global_attributes%2Finert.html
new file mode 100644
index 00000000..c416cb3a
--- /dev/null
+++ b/devdocs/html/global_attributes%2Finert.html
@@ -0,0 +1,66 @@
+<header><h1>inert</h1></header><div class="section-content">
+<p>The <code>inert</code> <a href="../global_attributes">global attribute</a> is a Boolean attribute indicating that the browser will ignore the element. With the <code>inert</code> attribute, all of the element's flat tree descendants (such as modal <a href="../element/dialog"><code>&lt;dialog&gt;</code></a>s) that don't otherwise escape inertness are ignored. The <code>inert</code> attribute also makes the browser ignore input events sent by the user, including focus-related events and events from assistive technologies.</p> <p>Specifically, <code>inert</code> does the following:</p> <ul> <li>Prevents the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event"><code>click</code></a> event from being fired when the user clicks on the element.</li> <li>Prevents the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event"><code>focus</code></a> event from being raised by preventing the element from gaining focus.</li> <li>Hides the element and its content from assistive technologies by excluding them from the accessibility tree.</li> </ul> <div class="code-example">
+<p class="example-header"><span class="language-name">html</span></p>
+<pre data-signature="Sy0vG9jUe76GIEXhlR7TLm+FSdd8YNAAi/KHJ1BpY4o=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span> <span class="token attr-name">inert</span><span class="token punctuation">&gt;</span></span>
+  <span class="token comment">&lt;!-- content --&gt;</span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
+</pre>
+</div> <p>The <code>inert</code> attribute can be added to sections of content that should not be interactive. When an element is inert, it along with all of the element's descendants, including normally interactive elements such as links, buttons, and form controls are disabled because they cannot receive focus or be clicked.</p> <p>The <code>inert</code> attribute can also be added to elements that should be offscreen or hidden. An inert element, along with its descendants, gets removed from the tab order and accessibility tree.</p> <div class="notecard note" id="sect1"> <p><strong>Note:</strong> While <code>inert</code> is a global attribute and can be applied to any element, it is generally used for sections of content. To make individual controls "inert", consider using the <a href="../attributes/disabled"><code>disabled</code></a> attribute, along with CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:disabled"><code>:disabled</code></a> styles, instead.</p> </div>
+</div>
+<h2 id="accessibility_concerns">Accessibility concerns</h2>
+<div class="section-content">
+<p>Use careful consideration for accessibility when applying the <code>inert</code> attribute. By default, there is no visual way to tell whether or not an element or its subtree is inert. As a web developer, it is your responsibility to clearly indicate the content parts that are active and those that are inert.</p> <p>While providing visual and non-visual cues about content inertness, also remember that the visual viewport may contain only sections of content. Users may be zoomed in to a small section of content, or users may not be able to view the content at all. Inert sections not being obviously inert can lead to frustration and bad user experience.</p>
+</div>
+<h2 id="specifications">Specifications</h2>
+<div class="_table"><table class="standard-table">
+<thead><tr><th scope="col">Specification</th></tr></thead>
+<tbody><tr><td><a href="https://html.spec.whatwg.org/multipage/interaction.html#the-inert-attribute">HTML Standard <br><small># the-inert-attribute</small></a></td></tr></tbody>
+</table></div>
+<h2 id="browser_compatibility">Browser compatibility</h2>
+<div class="_table"><table>
+<thead>
+<tr id="bct-browser-type">
+<th></th>
+<th colspan="6">Desktop</th>
+<th colspan="6">Mobile</th>
+</tr>
+<tr id="bct-browsers">
+<th></th>
+<th>Chrome</th>
+<th>Edge</th>
+<th>Firefox</th>
+<th>Internet Explorer</th>
+<th>Opera</th>
+<th>Safari</th>
+<th>WebView Android</th>
+<th>Chrome Android</th>
+<th>Firefox for Android</th>
+<th>Opera Android</th>
+<th>Safari on IOS</th>
+<th>Samsung Internet</th>
+</tr>
+</thead>
+<tbody><tr>
+<th><code>inert</code></th>
+<td class="bc-supports-yes">102</td>
+<td class="bc-supports-yes">102</td>
+<td class="bc-supports-yes">112</td>
+<td class="bc-supports-no">No</td>
+<td class="bc-supports-yes">88</td>
+<td class="bc-supports-yes">15.5</td>
+<td class="bc-supports-yes">102</td>
+<td class="bc-supports-yes">102</td>
+<td class="bc-supports-yes">112</td>
+<td class="bc-supports-yes">70</td>
+<td class="bc-supports-yes">15.5</td>
+<td class="bc-supports-yes">19.0</td>
+</tr></tbody>
+</table></div>
+<h2 id="see_also">See also</h2>
+<div class="section-content"><ul> <li>HTML <a href="../element/dialog"><code>&lt;dialog&gt;</code></a> element</li> <li>
+<a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert"><code>HTMLElement.inert</code></a> HTML DOM property</li> <li><a href="https://developer.chrome.com/articles/inert/" target="_blank">Introducing inert</a></li> <li><a href="https://www.stefanjudis.com/blog/the-inert-attribute-is-finally-coming-to-the-web/" target="_blank">The "inert" attribute is finally coming to the web</a></li> </ul></div><div class="_attribution">
+  <p class="_attribution-p">
+    &copy; 2005&ndash;2023 MDN contributors.<br>Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.<br>
+    <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inert" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inert</a>
+  </p>
+</div>