<details name>
ã«ããæä»çã¢ã³ã¼ãã£ãªã³ã®å®ç¾
<details>
è¦ç´ ã« name
å±æ§ã追å ãããã°ã«ã¼ãåãè¡ããããã«ãªãã¾ãããOpen UI ã§ã®è°è«ãçºç«¯ã¨ãããã®ã®ããã§ãã
-
4.11.1 The
details
element -
Add name attribute for grouping details elements into an exclusive accordion by dbaron · Pull Request #9400 · whatwg/html
- Exclusive Accordion (Explainer)(
open-ui.org
)
ãã㯠<details>
è¦ç´ ãéããéã«ããã§ã«éãã¦ããä»ã® <details>
è¦ç´ ãèªåçã«éãããæä»çã¢ã³ã¼ãã£ãªã³ããå®ç¾ãããã®ã§ãã使ãæ¹ã¨ãã¦ã¯ã©ã¸ãªãã¿ã³ã¨åãããã°ã«ã¼ãåããã <details>
è¦ç´ ã«åã name
å±æ§å¤ãæå®ãã¾ãã
<section>
<h2>ãã¬ã¼ã ã®ç¹å¾´</h2>
<details name="frame-characteristics">
<summary>ææ</summary>
<p>ææã¯...</p>
</details>
<details name="frame-characteristics">
<summary>ãµã¤ãº</summary>
<p>ãµã¤ãºã¯...</p>
</details>
</section>
ãã©ã¦ã¶ã®å®è£ ã¨ãã¦ã¯ç¾å¨ Chrome canary ã対å¿ãã¦ãããåä½ã確èªãããã¨ãå¯è½ã§ãã
<details name>
ã«ããæä»çã¢ã³ã¼ãã£ãªã³ã®åä½ãã¢ï¼Chrome canary 117ï¼
è¤æ°ã® open
å±æ§ã®è¨å®
HTML ã«ç´æ¥ open
å±æ§ãæ¸ãããå ´å
ãæä»çã¢ã³ã¼ãã£ãªã³ããªã®ã§ãè¤æ°ã®ååä»ã <details>
è¦ç´ ã« open
å±æ§ãè¨å®ãããã¨ã¯ã§ãã¾ããã
<!-- ãã㯠NG ãªäºä¾ã§ã -->
<section>
<h2>ãã¬ã¼ã ã®ç¹å¾´</h2>
<details name="frame-characteristics" open="">
<summary>ææ</summary>
<p>ææã¯...</p>
</details>
<!-- â `open` å±æ§ãæå®ããã¦ããããå®éã¯éãããªã -->
<details name="frame-characteristics" open="">
<summary>ãµã¤ãº</summary>
<p>ãµã¤ãºã¯...</p>
</details>
</section>
å®éã« Chrome canary ã§è©¦ãã¨ã°ã«ã¼ãã®æåã®ã¡ã³ãã¼ã®ã¿éãããä»ã®ã¡ã³ãã¼ã¯ï¼open
å±æ§ãæå®ããã¦ããã«ãé¢ãããï¼éããããç¶æ
ã«ãªãã¾ããHTML ä»æ§ã§ã¯ä»¥ä¸ã®ããã«è¦å®ããã¦ãã¾ãã
A document must not contain more than one details
element in the same details name group that has the open
attribute present. Authors must not use script to add details
elements to a document in a way that would cause a details name group to have more than one details
element with the open
attribute present.
ä¸æ¹ãOpen UI ã®ãã¼ã¸ã«ã¯ä»¥ä¸ã®ãããªè¨è¿°ãããã¾ãã
Enforce exclusivity only for user interactions, use of the open
IDL attribute, or setting the open attribute via setAttribute
(or setAttributeNS
, setAttributeNode
, or setAttributeNodeNS
). Do not enforce exclusivity when the open
attribute is set by the parser, when it is set as a result of cloning a node, or when an element is moved to a new document. Do not enforce exclusivity for elements whose root is not a Document or a ShadowRoot.
open-ui.org
)
Open UI ã®æ¹ã§ã¯è¤æ°ã® open
å±æ§ã許å¯ããã¦ããã®ã§ããããã®å ´åã¯ãã¹ã¦ã®ã¢ã³ã¼ãã£ãªã³ãéããã®ã®ããã®ãããããä¸åº¦éããã¨ããã¯ãå
ã®ç¶æ
ï¼è¤æ°ãéããç¶æ
ï¼ã«ã¯æ»ããªãã¨ãããã¨ã«ãªãã¾ããããã¯ã¯ããæãã checked
å±æ§ã®ãªãã©ã¸ãªãã¿ã³ã°ã«ã¼ãã§è¦ãããæåã¨åãããéå¯éãªæ§è³ªãæã¤ãã®ã¨ãªãã¾ãã
<!--
`checked` å±æ§ã®ãªãã©ã¸ãªãã¿ã³ã°ã«ã¼ãã®ä¾
åæ表示ã§ã¯ããããé¸æããã¦ããªãããä¸åº¦ã©ãããé¸æããã¨ãä½ãé¸æãã¦ããªãç¶æ
ãã«ã¯æ»ããªã
-->
<p role="radiogroup">
<label><input type="radio" name="lang" value="ja" /> æ¥æ¬èª</label>
<label><input type="radio" name="lang" value="en" /> è±èª</label>
<label><input type="radio" name="lang" value="po" /> ããããã«èª</label>
</p>
åèã¾ã§ã«ã©ã¸ãªãã¿ã³ã°ã«ã¼ãã«ã²ã¨ã¤ã checked
å±æ§ããªãå ´åã«ã¤ãã¦ãä»æ§ã®æ´å²ãç´è§£ãã¨æ¬¡ã®ãããªå¤é·ã辿ã£ã¦ãã¾ãã
HTML ãã¼ã¸ã§ã³ | ä»æ§ã®è¨è¼ | ä»æ§ã¸ã®ãªã³ã¯ |
---|---|---|
HTML 2.0 (RFC 1866) | æåã®ã©ã¸ãªãã¿ã³ã on ã¨ããæ±ãã¨ãããããã ãå½æã®ã¦ã¼ã¶ã¼ã¨ã¼ã¸ã§ã³ãã¯å¿
ãããããã«å¾ããªãã£ãã |
8.1.2.4. Radio Button: INPUT TYPE=RADIO(datatracker.ietf.org ) |
HTML 3.2 | å¿
ãä¸ã¤ checked å±æ§ãæ¸ãå¿
è¦ãããã |
INPUT text fields, radio buttons, check boxes, ...![]() |
HTML4 | HTML 3.2 ã¨åããRFC 1866 ã®å®ç¾©ããå¤æ´ãããçç±ã¨ãã¦ãã¦ã¼ã¶ã¨ã¼ã¸ã§ã³ãã®å®éã®æåãèæ ®ããçµæã§ãããã¨ãæè¨ãããã |
17.2.1 Control types![]() |
W3C HTML5, HTML LS | ã²ã¨ã¤ã checked å±æ§ããªãç¶æ
ã許容ãããããã«ãªã£ããRFC 1866 ã¨ç°ãªããã¦ã¼ã¶ã¼ã¨ã¼ã¸ã§ã³ãã®åæ表示ã§ããããããã§ãã¯ãããªããã®ã¨ãããã |
4.10.5.1.16 Radio Button state (type=radio ) |
仮㫠<details name>
ãéå¯éæ§ãæã£ãå ´åããã¹ããã©ã¯ãã£ã¹ã®è¦³ç¹ããè°è«ãå¼ã³èµ·ãããã©ã¸ãªãã¿ã³ã®æ´å²ã®ããã«ä»æ§ãã³ãã³ãå¤ãã£ãããä»æ§ã¨ãã©ã¦ã¶å®è£
ãä¹é¢ãããããå¯è½æ§ãèãããããã¨ãããHTML ä»æ§ã§ã¯å½åããéå¯éæ§ãæé¤ããã¦ä¸å®å¿ã¨ãã£ãã¨ããã§ãããã
JavaScript ããåçã« open
å±æ§ãè¨å®ãããå ´å
ä¸æ¹ã以ä¸ã®ããã« JavaScript ãã open
å±æ§ãå¤æ´ããå ´åãæå¾ã«æä½ãããä¸ã¤ã®ã¿ãéããç¶æ
ã¨ãªãã¾ãã
<script type="module">
for (const detailsElement of document.querySelectorAll('details')) {
await new Promise((resolve) => setTimeout(resolve, 1000)); // åä½ç¶æ³ãåããããããããã1ç§éå¾
æ©ãã
detailsElement.open = true;
}
</script>
<section>
<h2>ãã¬ã¼ã ã®ç¹å¾´</h2>
<!-- â ä¸åº¦éãããï¼`open` å±æ§ãè¨å®ãããï¼ããããã«éããããï¼1ç§å¾ã« `open` å±æ§ãé¤å»ãããï¼ -->
<details name="frame-characteristics">
<summary>ææ</summary>
<p>ææã¯...</p>
</details>
<!-- â æçµçã«ãã¡ãã®ã¿ãéãããï¼1ç§å¾ã« `open` å±æ§ãè¨å®ãããï¼ -->
<details name="frame-characteristics">
<summary>ãµã¤ãº</summary>
<p>ãµã¤ãºã¯...</p>
</details>
</section>
HTML ä»æ§ã¯ãã®ããã«æ¸ããã¦ãã¾ãã
The group of elements that is created by a common name
attribute is exclusive, meaning that at most one of the details
elements can be open at once. While this exclusivity is enforced by user agents, the resulting enforcement immediately changes the open
attributes in the markup. This requirement on authors forbids such misleading markup.
å°å·æã®èæ ®
Web ãã¼ã¸ã®ç»é¢ä¸ã§ã¯æä»çã¢ã³ã¼ãã£ãªã³ã®æåã§è¯ãã¦ããå°å·æã«ã¯è¤æ°ãªãããã¹ã¦ãå±éãããããããã¾ãããããã«ã¤ãã¦ã Open UI ã§è°è«ããã£ããã®ã®ãç¾æç¹ã§ã¯å°å·æã®å¼·å¶å±éã¨ãã£ãå¦ç½®ã¯ããªãçµè«ã«ãªã£ãããã§ããï¼HTML ä»æ§ã«ã¯å°å·æã®ãã¨ã¯ä½ãæ¸ããã¦ãã¾ããï¼
ãã©ã¦ã¶ãä½ãããªãã«ããããã¼ã¸å¶ä½è
ã JavaScript 㧠beforeprint
, afterprint
ã¤ãã³ããæ¤ç¥ããä¸æçã« name
å±æ§ãé¤å»ãã¦æä»çã§ãªãããã¨ã«ãã£ã¦å¶å¾¡ãããã¨ã¯å¯è½ã§ããããããããã¦ãã¾ãã¨éã«å±éãå¿
è¦ãªãã¦ã¼ã¶ã¼ã«ãã£ã¦ã¯æãã çµæã«ã¯ãªãããã¾ãåéã«ãã£ã¦ã¯ç¨ç´ã¨ã¤ã³ã¯ã®ç¡é§é£ãã«ããªããããªããããæããã«å
¨å±éãæã¾ããå ´å以å¤ã¯æ
éã«ãªãã¹ãã§ãããã