diff options
Diffstat (limited to 'files/fr/web/html/global_attributes')
27 files changed, 2961 insertions, 0 deletions
diff --git a/files/fr/web/html/global_attributes/accesskey/index.html b/files/fr/web/html/global_attributes/accesskey/index.html new file mode 100644 index 0000000000..e53f876ed8 --- /dev/null +++ b/files/fr/web/html/global_attributes/accesskey/index.html @@ -0,0 +1,143 @@ +--- +title: accesskey +slug: Web/HTML/Attributs_universels/accesskey +tags: + - Attribut + - Attribut universel + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/accesskey +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<div>L'<a href="/fr/docs/Web/HTML/Attributs_universels">attribut universel</a> <code><strong>accesskey</strong></code> fournit une indication afin de générer un raccourci clavier pour l'élément courant. La valeur de cet attribut est une liste de caractères (un caractère étant ici un seul point de code Unicode) séparés par des espaces. Le navigateur utilisera le premier caractère qui est disponible selon la disposition du clavier utilisée.</div> + +<div>{{EmbedInteractiveExample("pages/tabbed/attribute-accesskey.html","tabbed-shorter")}}</div> + +<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> + +<p>La combinaison de touches utilisée pour le raccourci clavier dépend du navigateur et du système d'exploitation utilisés.</p> + +<div class="note"> +<p><strong>Note :</strong> La spécification WHATWG indique qu'il est possible d'indiquer des caractères séparés par plusieurs espaces, auquel cas le navigateur considèrera le premier qu'il prend en charge. Toutefois, cela ne fonctionne pas dans la plupart des navigateurs. Pour IE/Edge, c'est la première valeur prise en charge qui sera utilisée si celle-ci n'entre pas en conflit avec d'autres commandes.</p> +</div> + +<table class="standard-table"> + <thead> + <tr> + <th></th> + <th>Windows</th> + <th>Linux</th> + <th>Mac</th> + </tr> + </thead> + <tbody> + <tr> + <th>Firefox</th> + <td colspan="2" rowspan="1"><kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd><em>touche</em></kbd></td> + <td> + <p>Pour Firefox 57 et les versions ultérieures : <kbd>Control</kbd> + <kbd>Option</kbd> + <kbd><em>touche</em></kbd> ou <kbd>Control</kbd> + <kbd>Alt</kbd> + <kbd><em>touche</em></kbd><br> + Pour Firefox 14 et les versions ultérieures : <kbd>Control</kbd> + <kbd>Alt</kbd> + <kbd><em>touche</em></kbd><br> + Pour Firefox 13 et les versions antérieures : <kbd>Control</kbd> + <kbd><em>touche</em></kbd></p> + </td> + </tr> + <tr> + <th>Edge</th> + <td><kbd>Alt</kbd> + <kbd><em>touche</em></kbd></td> + <td colspan="2" rowspan="1">N/A</td> + </tr> + <tr> + <th>Internet Explorer</th> + <td><kbd>Alt</kbd> + <kbd><em>touche</em></kbd></td> + <td colspan="2" rowspan="1">N/A</td> + </tr> + <tr> + <th>Google Chrome</th> + <td colspan="2" rowspan="1"><kbd>Alt</kbd> + <kbd><em>touche</em></kbd></td> + <td><kbd>Control</kbd> + <kbd>Alt</kbd> + <kbd><em>touche</em></kbd></td> + </tr> + <tr> + <th>Safari</th> + <td><kbd>Alt</kbd> + <kbd><em>touche</em></kbd></td> + <td>N/A</td> + <td><kbd>Control</kbd> + <kbd>Alt</kbd> + <kbd><em>touche</em></kbd></td> + </tr> + <tr> + <th>Opera 15+</th> + <td colspan="2" rowspan="1" style="text-align: center;"><kbd>Alt</kbd> + <kbd><em>key</em></kbd></td> + <td><kbd>Control</kbd> + <kbd>Alt</kbd> + <kbd><em>key</em></kbd></td> + </tr> + <tr> + <th>Opera 12</th> + <td colspan="3" rowspan="1"><kbd>Shift</kbd> + <kbd>Esc</kbd> ouvre une liste de contenu accessible via la touche <code>accesskey</code>, on peut alors ensuite choisir l'élément voulu grâce la touche <kbd><em>touche</em></kbd></td> + </tr> + </tbody> +</table> + +<h2 id="Accessibilité">Accessibilité</h2> + +<p>Au-delà de la prise en charge limitée des navigateurs, <code>accesskey</code> pose plusieurs problèmes :</p> + +<ul> + <li>Un raccourci défini avec <code>accesskey</code> peut rentrer en conflit avec un raccourci du système ou du navigateur, voire avec un raccourci d'un outil d'assistance. Les raccourcis pouvant être différents entre les navigateurs, systèmes d'exploitation et les outils, il n'est pas certain qu'une combinaison qui fonctionne dans un cas puisse fonctionner partout.</li> + <li>Certains raccourcis définis avec <code>accesskey</code> peuvent ne pas être utilisés avec certains claviers, notamment lorsqu'on doit prendre en compte l'internationalisation.</li> + <li>Les raccourcis définis avec <code>accesskey</code> qui utilisent un nombre peuvent être source de confusion pour les personnes souffrant de problèmes cognitifs si le nombre n'a pas d'association logique avec la fonctionnalité déclenchée par le raccourci.</li> + <li>Il est nécessaire d'informer l'utilisateur qu'un raccourci est présent afin que celui-ci puisse être conscient de cette fonctionnalité. Sans méthode d'information, l'utilisateur pourra accidentellement déclencher les raccourcis définis avec <code>accesskey</code>.</li> +</ul> + +<p>Étant donné ces raisons, il est généralement conseillé de ne pas utiliser <code>accesskey</code> pour les sites web et applications généralistes.</p> + +<ul> + <li><a href="https://webaim.org/techniques/keyboard/accesskey#spec">WebAIM : accessibilité au clavier - <code>accesskey</code> (en anglais)</a></li> +</ul> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td>{{SpecName('HTML5.2', "editing.html#the-accesskey-attribute", "accesskey")}}</td> + <td>{{Spec2('HTML5.2')}}</td> + <td>Un comportement plus réaliste est défini et correspond à ce qui est réellement implémenté.</td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "interaction.html#the-accesskey-attribute", "accesskey")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Aucune modification depuis {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "editing.html#the-accesskey-attribute", "accesskey")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Aucune modification depuis {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "editing.html#the-accesskey-attribute", "accesskey")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Plusieurs caractères peuvent être définis via cet attribut depuis {{SpecName('HTML4.01')}}. Cet attribut peut désormais être défini sur n'importe quel élément.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', "interact/forms.html#h-17.11.2", "accesskey")}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>L'attribut est uniquement pris en charge par {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("label")}}, {{HTMLElement("legend")}} et {{HTMLElement("textarea")}}.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("html.global_attributes.accesskey")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{domxref("Element.accessKey")}}</li> + <li>{{domxref("HTMLElement.accessKeyLabel")}}</li> + <li><a href="/fr/docs/Web/HTML/Attributs_universels">Les différents attributs universels</a></li> +</ul> diff --git a/files/fr/web/html/global_attributes/autocapitalize/index.html b/files/fr/web/html/global_attributes/autocapitalize/index.html new file mode 100644 index 0000000000..206412edde --- /dev/null +++ b/files/fr/web/html/global_attributes/autocapitalize/index.html @@ -0,0 +1,49 @@ +--- +title: autocapitalize +slug: Web/HTML/Attributs_universels/autocapitalize +tags: + - Attribut + - Attribut universel + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/autocapitalize +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p>L'<a href="/fr/docs/Web/HTML/Attributs_universels">attribut universel</a> <code><strong>autocapitalize</strong></code> est un attribut à valeurs contraintes qui contrôle la façon dont le texte saisi est automatiquement converti en majuscules ou non. Voici les valeurs autorisées pour cet attribut :</p> + +<ul> + <li><code>off</code> ou <code>none</code> : aucune transformation automatique n'est appliquée (par défaut, les lettres sont écrites en minuscules)</li> + <li><code>on</code> ou <code>sentences</code> : la première lettre de chaque phrase est automatiquement écrite en majuscule, les autres lettres ne sont pas transformées (elles sont par défaut en minuscules)</li> + <li><code>words</code> : la première lettre de chaque mot est automatiquement écrite en majuscule, les autres lettres ne sont pas transformées (elles sont par défaut en minuscules)</li> + <li><code>characters</code> : toutes les lettres sont converties en majuscules.</li> +</ul> + +<p>L'attribut <code>autocapitalize</code> n'a aucun impact lorsqu'on utilise un clavier physique. Il modifie la saisie pour les autres moyens de saisie tels que les claviers virtuels ou les moyens de saisie orale. Le but de cet attribut est d'aider de tels moyens à faciliter la saisie de l'utilisateur. Par défaut, un tel moyen de saisie utilisera une majuscule pour chaque début de phrase, modifier l'attribut <code>autocapitalize</code> permet aux auteurs de modifier ce comportement selon les différents éléments.</p> + +<p>L'attribut <code>autocapitalize</code> n'entraînera pas de mise en majuscule automatique pour un élément {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type", "input")}} vaut <code>url</code>, <code>email</code> ou <code>password</code>.</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', "interaction.html#autocapitalization", "autocapitalize")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("html.global_attributes.autocapitalize")}}</p> diff --git a/files/fr/web/html/global_attributes/class/index.html b/files/fr/web/html/global_attributes/class/index.html new file mode 100644 index 0000000000..6204b6a173 --- /dev/null +++ b/files/fr/web/html/global_attributes/class/index.html @@ -0,0 +1,63 @@ +--- +title: class +slug: Web/HTML/Attributs_universels/class +tags: + - Attribut + - Attribut universel + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/class +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p>L'<a href="/fr/docs/Web/HTML/Attributs_universels">attribut universel</a> <code><strong>class</strong></code> indique une liste de classes associées à l'élément courant. Les classes permettent de manipuler les éléments, via CSS ou JavaScript en utilisant <a href="/fr/docs/Web/CSS/Sélecteurs_de_classe">les sélecteurs de classe</a> ou des fonctions telles que {{domxref("document.getElementsByClassName")}}.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/attribute-class.html","tabbed-standard")}}</div> + +<div class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</div> + +<p>Bien que la spécification ne précise aucune contrainte quant aux noms utilisés pour les classes, une bonne pratique consiste à utiliser des noms qui traduisent la sémantique de l'élément plutôt que la mise en forme. Ainsi, les noms sémantiques restent pertinents même lorsque la présentation de la page évolue.</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "dom.html#classes", "class")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Aucune modification depuis {{SpecName('HTML5.1')}}.</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "dom.html#element-attrdef-global-class", "class")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>État selon {{SpecName('HTML WHATWG')}}. Aucune modification depuis {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "dom.html#classes", "class")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>État selon {{SpecName('HTML WHATWG')}}. <code>class</code> est désormas sun attribut universel depuis {{SpecName('HTML4.01')}},.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', "struct/global.html#h-7.5.2", "class")}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Cet attribut est pris en charge sur tous les éléments à l'exception de {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}} et {{HTMLElement("title")}}.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("html.global_attributes.class")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/HTML/Attributs_universels">Tous les attributs universels</a></li> +</ul> diff --git a/files/fr/web/html/global_attributes/contenteditable/index.html b/files/fr/web/html/global_attributes/contenteditable/index.html new file mode 100644 index 0000000000..1f805fc490 --- /dev/null +++ b/files/fr/web/html/global_attributes/contenteditable/index.html @@ -0,0 +1,85 @@ +--- +title: contenteditable +slug: Web/HTML/Attributs_universels/contenteditable +tags: + - Attribut + - Attribut universel + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/contenteditable +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p>L'<a href="/fr/docs/Web/HTML/Attributs_universels">attribut universel</a> <code><strong>contenteditable</strong></code> est un attribut à valeur contrainte qui indique si l'élément courant doit pouvoir être édité par l'utilisateur ou non. Lorsque c'est le cas, des éléments de l'interface du navigateur (ou de l'agent utilisateur) sont modifiés afin de permettre l'édition.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/attribute-contenteditable.html","tabbed-shorter")}}</div> + +<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> + +<p>Les valeurs autorisées pour cet attribut sont :</p> + +<ul> + <li><code>true</code> ou la chaîne de caractères vide qui indiquent que l'élément est éditable</li> + <li><code>false</code> qui indique que l'élément ne peut pas être édité.</li> +</ul> + +<p>Si cet attribut n'est pas défini, sa valeur est héritée depuis son élément parent.</p> + +<p>Cet attribut n'est pas un attribut booléen ! Cela signifie qu'une valeur explicite est nécessaire pour son fonctionnement. Toute forme telle que <code><label contenteditable>Exemple</label></code> n'est pas autorisée. La version correcte sera <code><label contenteditable="true">Exemple</label></code>.</p> + +<p>Il est possible de modifier la couleur du symbole d'insertion grâce à la propriété CSS {{cssxref("caret-color")}}.</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("HTML Editing", "contentEditable.html#contenteditable", "contenteditable")}}</td> + <td>{{Spec2("HTML Editing")}}</td> + <td>Ajout de <code>"events"</code>, <code>"caret"</code>, <code>"typing"</code>, <code>"plaintext-only"</code>.</td> + </tr> + <tr> + <td>{{SpecName("HTML WHATWG", "editing.html#attr-contenteditable", "contenteditable")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td>Aucune modification depuis la dernière dérivation, {{SpecName("HTML5.2")}}</td> + </tr> + <tr> + <td>{{SpecName("HTML5.2", "editing.html#making-document-regions-editable-the-contenteditable-content-attribute", "contenteditable")}}</td> + <td>{{Spec2("HTML5.2")}}</td> + <td>Dérivation de {{SpecName("HTML WHATWG")}}, aucune modification depuis {{SpecName("HTML5.1")}}</td> + </tr> + <tr> + <td>{{SpecName("HTML5.1", "editing.html#making-document-regions-editable-the-contenteditable-content-attribute", "contenteditable")}}</td> + <td>{{Spec2("HTML5.1")}}</td> + <td>Dérivation de {{SpecName("HTML WHATWG")}}, aucune modification depuis {{SpecName("HTML5 W3C")}}</td> + </tr> + <tr> + <td>{{SpecName("HTML5 W3C", "editing.html#attr-contenteditable", "contenteditable")}}</td> + <td>{{Spec2("HTML5 W3C")}}</td> + <td>Dérivation de {{SpecName("HTML WHATWG")}}, définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("html.global_attributes.contenteditable")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/HTML/Contenu_editable">Rendre le contenu éditable</a></li> + <li><a href="/fr/docs/Web/HTML/Attributs_universels">Tous les attributs universels</a></li> + <li>{{domxref("HTMLElement.contentEditable")}} et {{domxref("HTMLElement.isContentEditable")}}</li> + <li>{{cssxref("caret-color")}}</li> + <li><a href="/fr/docs/Web/API/HTMLElement/input_event">L'évènement <code>input</code> pour l'objet DOM <code>HTMLElement</code></a></li> +</ul> diff --git a/files/fr/web/html/global_attributes/contextmenu/index.html b/files/fr/web/html/global_attributes/contextmenu/index.html new file mode 100644 index 0000000000..187be1f1cc --- /dev/null +++ b/files/fr/web/html/global_attributes/contextmenu/index.html @@ -0,0 +1,118 @@ +--- +title: contextmenu +slug: Web/HTML/Attributs_universels/contextmenu +tags: + - Attribut + - Attribut universel + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/contextmenu +--- +<div>{{HTMLSidebar("Global_attributes")}}{{obsolete_header}}</div> + +<div class="warning"> +<p><strong>Attention !</strong> Cet attribut est <a href="https://html.spec.whatwg.org/multipage/obsolete.html#attr-contextmenu">obsolète</a> et sera retiré de l'ensemble des navigateurs.</p> +</div> + +<p>L'<a href="/fr/docs/Web/HTML/Attributs_universels">attribut universel</a> <code><strong>contextmenu</strong></code> correspond à l'{{htmlattrxref("id","","identifiant",1)}} d'un élément {{HTMLElement("menu")}} qu'on souhaite utiliser comme menu contextuel pour l'élément courant.</p> + +<p>Un menu contextuel est un menu qui apparaît suite à une action utilisateur (par exemple un clic-droit). HTML5 permet désormais de personnaliser ce menu.</p> + +<div id="ContextMenu_Example"> +<h2 id="Exemples">Exemples</h2> + +<p>Voici quelques exemples de personnalisations de menus. Le code HTML pourra être :</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush:html"><body contextmenu="share"> + <menu type="context" id="share"> + <menu label="Partager"> + <menuitem label="Twitter" onclick="shareViaTwitter()"></menuitem> + <menuitem label="Facebook" onclick="shareViaFacebook()"></menuitem> + </menu> + </menu> + <ol> + <li> + Dans cet exemple, vous pouvez partager un lien vers + cette page sur Facebook et/ou Twitter via le groupe Partager + du menu contextuel + </li> + <li>Sur cette ligne : on peut partager la page sur Twitter ou Facebook grâce au menu Partager du menu contextuel.</li> + <li><pre contextmenu="changeFont" id="fontSizing">Sur cette ligne : on peut changer la taille de la police en utilisant les options "Augmenter/Réduire la taille de la police" du menu contextuel</pre></li> + <menu type="context" id="changeFont"> + <menuitem label="Augmenter la taille de la police" onclick="incFont()"></menuitem> + <menuitem label="Réduire la taille de la police" onclick="decFont()"></menuitem> + </menu> + <li contextmenu="ChangeImage" id="changeImage">Sur cette ligne : on peut utiliser l'option "Changer l'image" du menu.</li><br /> + <img src="https://developer.mozilla.org/media/img/promote/promobutton_mdn5.png" contextmenu="ChangeImage" id="promoButton" /> + <menu type="context" id="ChangeImage"> + <menuitem label="Changer l'image" onclick="changeImage()"></menuitem> + </menu> + </ol> +</body> +</pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush:js">function shareViaTwitter() { + window.open("https://twitter.com/intent/tweet?text=" + + "Je découvre ContextMenu avec MDN."); +} + +function shareViaFacebook() { + window.open("https://facebook.com/sharer/sharer.php?u=" + + "https://developer.mozilla.org/fr/docs/Web/HTML/Attributs_universels/contextmenu"); +} +function incFont(){ + document.getElementById("fontSizing").style.fontSize="larger"; +} + +function decFont(){ + document.getElementById("fontSizing").style.fontSize="smaller"; +} + +function changeImage(){ + var j = Math.ceil((Math.random()*39)+1); + document.images[0].src="https://developer.mozilla.org/media/img/promote/promobutton_mdn" + j + ".png"; +}</pre> + +<h3 id="Résultat">Résultat</h3> + +<div>{{EmbedLiveSample("Exemples",600,500)}}</div> +</div> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td>{{SpecName("HTML WHATWG", "obsolete.html#attr-contextmenu", "contextmenu")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Rendu obsolète</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "interactive-elements.html#context-menus", "contextmenu")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Dérivation de {{SpecName('HTML WHATWG')}}, définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("html.global_attributes.contextmenu")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/HTML/Attributs_universels">Les différents attributs universels</a></li> + <li>{{domxref("HTMLElement.contextMenu")}}</li> +</ul> diff --git a/files/fr/web/html/global_attributes/data-_star_/index.html b/files/fr/web/html/global_attributes/data-_star_/index.html new file mode 100644 index 0000000000..d8befa7a2f --- /dev/null +++ b/files/fr/web/html/global_attributes/data-_star_/index.html @@ -0,0 +1,83 @@ +--- +title: data-* +slug: Web/HTML/Attributs_universels/data-* +tags: + - Attribut + - Attribut universel + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/data-* +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p>Les <a href="/fr/docs/Web/HTML/Attributs_universels">attributs universels</a> <code><strong>data-*</strong></code> forment une classe d'attributs, appelés attributs de données (<em>data attributes</em>). Ils permettent d'échanger des données propriétaire entre le <a href="/fr/docs/Web/HTML">HTML</a> et la représentation du <a href="/fr/docs/Web/API/Référence_du_DOM_Gecko">DOM</a>, qu'on peut manipuler avec des scripts.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/attribute-data.html","tabbed-standard")}}</div> + +<div class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</div> + +<p>De tels attributs sont disponibles via l'interface {{domxref("HTMLElement")}} de l'élément pour lequel l'attribut est utilisé. La propriété {{domxref("HTMLElement.dataset")}} permet d'accéder à l'attribut.<br> + Ici, l'astérisque (<code>*</code>) peut être remplacée par n'importe quel nom valide selon <a class="external" href="https://www.w3.org/TR/REC-xml/#NT-Name">les règles appliquées aux noms XML</a> et en respectant les contraintes suivantes :</p> + +<ul> + <li>Le nom ne peut pas commencer par <code>xml</code>, quelle que soit la casse utilisée pour les différentes lettres</li> + <li>Le nom ne doit pas contenir de point-virgule (<code>U+003A</code>)</li> + <li>Le nom ne doit pas contenir de lettres majuscules de l'alphabet latin (<code>A</code> à <code>Z</code>).</li> +</ul> + +<p>La propriété {{domxref("HTMLElement.dataset")}} est un objet {{domxref("StringMap")}} et la valeur d'un attribut de donnée nommé <code>data-test-valeur</code> sera accessible via <code>HTMLElement.dataset.testValeur</code> car les tirets (<code>U+002D</code>) sont remplacés par la majuscule de la lettre suivante (<a href="https://fr.wikipedia.org/wiki/CamelCase">CamelCase</a>).</p> + +<h3 id="Utilisation">Utilisation</h3> + +<p>Lorsqu'on ajoute des attributs de données <code>data-*</code>, on peut utiliser les éléments HTML classiques afin d'en faire des objets complexes et puissants. Ainsi, un <em>sprite</em> d'un vaisseau spatial dans un jeu peut être modélisé via un élément {{HTMLElement("img")}} auquel on associe un attribut <code>class</code> et plusieurs attributs de données sous la forme <code>data-*</code>.</p> + +<pre class="brush: html"><img class="spaceship cruiserX3" src="shipX3.png" + data-ship-id="324" data-weapons="laserI laserII" + data-x="414354" data-y="85160" data-z="31940" + onclick="spaceships[this.dataset.shipId].blasted()"> +</img> +</pre> + +<p>Pour un tutoriel plus avancé à propos des attributs de données HTML, lire l'article <a href="/fr/Apprendre/HTML/Comment/Utiliser_attributs_donnes">Manipuler les attributs de données</a>.</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', "dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes", "data-*")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Pas de modification depuis la dernière dérivation, {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes", "data-*")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Dérivée de {{SpecName('HTML WHATWG')}}, pas de changement depuis {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes", "data-*")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Dérivée de {{SpecName('HTML WHATWG')}}, définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("html.global_attributes.data_attributes")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/HTML/Attributs_universels">Les différents attributs universels</a></li> + <li>La propriété {{domxref("HTMLElement.dataset")}} qui permet d'accéder à ces valeurs et de les modifier.</li> +</ul> diff --git a/files/fr/web/html/global_attributes/dir/index.html b/files/fr/web/html/global_attributes/dir/index.html new file mode 100644 index 0000000000..5cf187f35e --- /dev/null +++ b/files/fr/web/html/global_attributes/dir/index.html @@ -0,0 +1,90 @@ +--- +title: dir +slug: Web/HTML/Attributs_universels/dir +tags: + - Attribut + - Attribut universel + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/dir +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p>L'<a href="/fr/docs/Web/HTML/Attributs_universels">attribut universel</a> <code><strong>dir</strong></code> est un attribut à valeur contrainte qui indique la direction du texte contenu dans l'élément.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/attribute-dir.html","tabbed-standard")}}</div> + +<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> + +<p>Les valeurs autorisées pour cet attribut sont :</p> + +<ul> + <li><code>ltr</code> : qui signifie <em>left to right </em>(gauche à droite), utilisé pour les langages écrits de gauche à droite (comme le français ou l'anglais par exemple)</li> + <li><code>rtl</code> : qui signifie <em>right to left</em> (droite à gauche), utilisé pour les langages écrits de droite à gauche (comme l'arabe par exemple)</li> + <li><code>auto</code> : qui délègue la décision à l'agent utilisateur. L'algorithme utilisé est relativement simple : le contenu textuel est analysé et lorsque le premier caractère possédant une direction « forte » est rencontré, cette direction est prise pour l'ensemble de l'élément.</li> +</ul> + +<div class="note"> +<p><strong>Notes d'utilisation :</strong><br> + Cet attribut est obligatoire pour l'élément {{HTMLElement("bdo")}}, pour lequel l'attribut a une sémantique différente.</p> + +<ul> + <li> + <p>La valeur de l'attribut n'est pas héritée par l'élément {{HTMLElement("bdi")}}. S'il n'est pas défini, la valeur par défaut sera <code>auto</code>.</p> + </li> + <li> + <p>Cet attribut peut être surchargé par les propriétés CSS {{cssxref("direction")}} et {{cssxref("unicode-bidi")}}, (qui sont appliquées si une page CSS est active et que l'élément courant prend en charge ces propriétés).</p> + </li> + <li> + <p>La direction du texte est généralement liée à la sémantique du contenu et non à sa présentation. Il est donc recommandé d'utiliser cet attribut plutôt que des propriétés CSS quand la direction n'est pas lié à une quelconque mise en forme. Ainsi, le texte sera affiché correctement, y compris si le navigateur ne supporte pas ces propriétés CSS ou si CSS est désactivé.</p> + </li> + <li> + <p>La valeur <code>auto</code> doit être utilisée pour des données dont la direction est inconnue (comme par exemple des données provenant d'une saisie utilisateur).</p> + </li> +</ul> +</div> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "dom.html#the-dir-attribute", "dir")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Aucun changement depuis la dernière dérivation, {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "dom.html#the-dir-attribute", "dir")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Dérivée de {{SpecName('HTML WHATWG')}}, aucun changement de {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "dom.html#the-dir-attribute", "dir")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Dérivée de {{SpecName('HTML WHATWG')}}, à partir de {{SpecName('HTML4.01')}} la valeur <code>auto</code> a été ajoutée et l'attribut est un attribut global à part entière.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', "dirlang.html#h-8.2", "dir")}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Attribut pris en charge pour tous les éléments à l'exception {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("bdo")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}}, et {{HTMLElement("script")}}.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("html.global_attributes.dir")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/HTML/Attributs_universels">Les différents attributs universels</a></li> + <li>La propriété {{domxref("HTMLElement.dir")}} qui reflète cet attribut</li> +</ul> diff --git a/files/fr/web/html/global_attributes/draggable/index.html b/files/fr/web/html/global_attributes/draggable/index.html new file mode 100644 index 0000000000..fe5d5cf514 --- /dev/null +++ b/files/fr/web/html/global_attributes/draggable/index.html @@ -0,0 +1,71 @@ +--- +title: draggable +slug: Web/HTML/Attributs_universels/draggable +tags: + - Attribut + - Attribut universel + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/draggable +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p>L'<a href="/fr/docs/Web/HTML/Attributs_universels">attribut universel</a> <code><strong>draggable</strong></code> est un attribut à valeur contrainte qui indique si l'élément peut être déplacé avec la souris dans un geste de glisser-déposer lorsqu'on utilise l'API <em><a href="/fr/docs/Web/API/API_HTML_Drag_and_Drop">Drag & Drop</a></em> ou les fonctionnalités natives du navigateur. Les valeurs autorisées pour cet attribut sont les suivantes :</p> + +<ul> + <li><code>true</code> : qui indique que l'élément peut être déplacé à la souris</li> + <li><code>false</code> : qui indique que l'élément ne peut pas être déplacé à la souris</li> +</ul> + +<p>Si l'attribut n'est pas défini, la valeur par défaut sera <code>auto</code> : le comportement de l'élément sera celui spécifié par défaut par le navigateur.</p> + +<p>Cet attribut est un attribut à valeur contrainte, ce n'est pas un attribut booléen. Il faut donc utiliser une valeur explicite <code>true</code> ou <code>false</code>. La notation raccourcie <code><img draggable></code>(utilisant uniquement le nom de l'attribut) ne fonctionnera pas :</p> + +<pre class="example-bad brush: html"><label draggable>Label exemple</label></pre> + +<p>En revanche, on pourra correctement utiliser :</p> + +<pre class="example-good brush: html"><label draggable="true">Label exemple</label></pre> + +<p>Par défaut, seules les sélections de texte, les images et les liens peuvent être déplacés à la souris. Pour les autres éléments, il faudra définir le gestionnaire d'événements pour {{domxref('GlobalEventHandlers.ondragstart','ondragstart')}} afin de faire fonctionner le glisser-déposer. Cela est illustré <a href="/fr/docs/Glisser_et_déposer/Opérations_de_glissement">dans cet exemple</a>.</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("HTML WHATWG", "interaction.html#the-draggable-attribute", "draggable")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td>Aucune modification depuis la dernière dérivation de {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName("HTML5.2", "interaction.html#the-draggable-attribute", "draggable")}}</td> + <td>{{Spec2("HTML5.2")}}</td> + <td>Aucune modification</td> + </tr> + <tr> + <td>{{SpecName("HTML5.1", "editing.html#the-draggable-attribute", "draggable")}}</td> + <td>{{Spec2("HTML5.1")}}</td> + <td>Dérivation de {{SpecName('HTML WHATWG')}}, définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("html.global_attributes.draggable")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/HTML/Attributs_universels">Les différents attributs universels</a></li> +</ul> diff --git a/files/fr/web/html/global_attributes/hidden/index.html b/files/fr/web/html/global_attributes/hidden/index.html new file mode 100644 index 0000000000..c14d208620 --- /dev/null +++ b/files/fr/web/html/global_attributes/hidden/index.html @@ -0,0 +1,69 @@ +--- +title: hidden +slug: Web/HTML/Attributs_universels/hidden +tags: + - Attribut + - Attribut universel + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/hidden +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p>L'<a href="/fr/docs/Web/HTML/Attributs_universels">attribut universel</a> <code><strong>hidden</strong></code> est un attribut booléen qui indique s'il n'est pas encore ou s'il n'est plus pertinent d'afficher l'élément courant. Cet attribut peut, par exemple, être utilisé afin de masquer des éléments tant que l'utilisateur ne s'est pas connecté. Le navigateur n'affichera pas les éléments masqués via cet attribut.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/attribute-hidden.html","tabbed-shorter")}}</div> + +<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> + +<p>Cet attribut ne doit pas être utilisé pour masquer du contenu qui devrait pouvoir être vu sous une autre présentation. Si un contenu est marqué comme masqué, il sera masqué pour l'ensemble des présentations, y compris pour les lecteurs d'écran et autres outils d'assistance.</p> + +<p>Les éléments cachés avec <code>hidden</code> ne devraient pas avoir de lien qui pointent vers eux depuis des éléments visibles. De plus, les éléments fils de l'élément caché sont toujours actifs : cela signifie qu'ils peuvent être utilisés par les scripts et que les formulaires peuvent envoyer des données. Dans certains autres contextes, il est possible d'avoir des relations avec les éléments cachés via <code>hidden</code>.</p> + +<p>Par exemple, on peut utiliser l'attribut ARIA <code>aria-describedby</code> pour faire référence à une description qui serait cachée (si cette dernière n'est pas pertinente seule). De même un élément {{HTMLElement("canvas")}} caché peut être utilisé comme un <em>buffer</em> hors champ par moteur graphique scripté.</p> + +<div class="note"> +<p><strong>Note :</strong> Cet attribut sera surchargé par la propriété CSS {{cssxref("display")}}. Ainsi, un élément dont le style a <code>display: flex</code> sera affiché à l'écran, même si l'attribut <code>hidden</code> est présent.</p> +</div> + + + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "interaction.html#the-hidden-attribute", "hidden")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Aucune modification depuis {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "rendering.html#hiddenCSS", "Hidden elements")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Définit le rendu par défaut suggéré en CSS lorsque l'attribut <code>hidden</code> est utilisé.</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "editing.html#the-hidden-attribute", "hidden")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Dérivée de {{SpecName('HTML WHATWG')}}. La définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("html.global_attributes.hidden")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/HTML/Attributs_universels">Les différents attributs universels</a></li> + <li><a href="/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-hidden_attribute">Utiliser l'attribut <code>aria-hidden</code></a></li> +</ul> diff --git a/files/fr/web/html/global_attributes/id/index.html b/files/fr/web/html/global_attributes/id/index.html new file mode 100644 index 0000000000..a08d5e0dce --- /dev/null +++ b/files/fr/web/html/global_attributes/id/index.html @@ -0,0 +1,72 @@ +--- +title: id +slug: Web/HTML/Attributs_universels/id +tags: + - Attribut + - Attribut universel + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/id +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p>L'<a href="/fr/docs/Web/HTML/Attributs_universels">attribut universel</a> <code><strong>id</strong></code> définit un identifiant qui doit être unique pour l'ensemble du document. Le but de cet attribut est de pouvoir identifier un élément lorsqu'on crée un lien, <a href="/fr/docs/Web/HTTP/Basics_of_HTTP/Identifier_des_ressources_sur_le_Web#Fragment">avec un fragment</a> et qu'on souhaite le manipuler avec un script ou qu'on le met en forme avec CSS.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/attribute-id.html","tabbed-shorter")}}</div> + +<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> + +<div class="blockIndicator warning"> +<p><strong>Note :</strong> La valeur de cet attribut est une chaîne de caractère « opaque ». Cela signifie que cet attribut ne doit pas être utilisé pour transporter de l'information. Les informations sur la signification de l'élément dans le document ne doivent pas être portées par la valeur de cet attribut.</p> +</div> + +<p>La valeur de cet attribut ne doit pas contenir de blancs (espaces, tabulation, etc.). Les navigateurs interprèteront les identifiants avec des espaces comme si l'espace faisait partie de l'identifiant. Ce comportement est différent de celui de l'attribut {{htmlattrxref("class")}} qui permet d'avoir des valeurs séparées par des espaces. Les éléments ne peuvent avoir qu'un seul identifiant défini via l'attribut <code><strong>id</strong></code>.</p> + +<div class="note"> +<p><strong>Note :</strong> L'utilisation de caractères non-ASCII ou qui ne sont pas des chiffres latins ou<code>'_'</code>, <code>'-'</code> et <code>'.'</code> peut entraîner des problèmes de compatibilité car ils n'étaient pas autorisé avec HTML 4. Bien que cette restriction n'existe plus avec HTML 5, un identifiant devrait toujours commencer par une lettre pour une meilleure compatibilité.</p> +</div> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "dom.html#the-id-attribute", "id")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Aucun changement depuis la dernière dérivation, {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "dom.html#the-id-attribute", "id")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Dérivée de {{SpecName('HTML WHATWG')}}, aucun changement depuis {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "dom.html#the-id-attribute", "id")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Dérivée de {{SpecName('HTML WHATWG')}}, les caractères <code>'_'</code>, <code>'-'</code> et <code>'.'</code> sont désormais acceptés s'ils ne sont pas utilisés au début de l'identifiant. Cet attribut devient un attribut global à part entière.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#adef-id', 'id')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Pris en charge par tous les éléments sauf {{HTMLElement("base")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, et {{HTMLElement("title")}}.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("html.global_attributes.id")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{domxref("Element.id")}} qui reflète cet attribut</li> + <li><a href="/fr/docs/Web/HTML/Attributs_universels">Les différents attributs universels</a></li> +</ul> diff --git a/files/fr/web/html/global_attributes/index.html b/files/fr/web/html/global_attributes/index.html new file mode 100644 index 0000000000..779e617a3d --- /dev/null +++ b/files/fr/web/html/global_attributes/index.html @@ -0,0 +1,196 @@ +--- +title: Les attributs universels +slug: Web/HTML/Attributs_universels +tags: + - Attribut + - Attribut universel + - HTML + - Reference + - Web +translation_of: Web/HTML/Global_attributes +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p>Les <strong>attributs universels</strong> sont des attributs communs à l'ensemble des éléments HTML. Ces attributs peuvent donc être ajoutés sur tous les éléments (dans certains cas, les attributs n'auront aucun effet).</p> + +<p>Les attributs universels peuvent être définis sur tous <a href="/fr/docs/Web/HTML/Element">les éléments HTML</a>, <em>y compris pour les éléments non définis dans le standard</em>. Autrement dit, les éléments non-standards doivent pouvoir accepter ces attributs. Cela permettra au navigateur de les gérer selon certains des aspects de la spécification. Par exemple, pour un navigateur conforme, un élément <code><toto hidden>...</toto></code> sera masqué bien que <code><toto></code> ne soit pas un élément HTML valide.</p> + +<p>En plus des attributs universels HTML, il existe également les attributs universels suivants :</p> + +<ul> + <li>{{htmlattrdef("xml:lang")}} et {{htmlattrdef("xml:base")}} : ces attributs proviennent des spécifications XHTML. Ils sont désormais dépréciés mais conservés pour des raisons de compatibilité.</li> + <li>Les nombreux attributs <code><strong><a href="/fr/docs/Accessibilité/ARIA">aria-*</a></strong></code> utilisés afin d'améliorer l'accessibilité.</li> + <li>Les attributs utilisés pour <a href="/fr/docs/Web/Guide/DOM/Events/Event_handlers">les gestionnaires d'événements</a> déclarés directement sur les éléments : <code><strong>onabort</strong></code>, <code><strong>onautocomplete</strong></code>, <code><strong>onautocompleteerror</strong></code>, <code><strong>onblur</strong></code>, <code><strong>oncancel</strong></code>, <code><strong>oncanplay</strong></code>, <code><strong>oncanplaythrough</strong></code>, <code><strong>onchange</strong></code>, <code><strong>onclick</strong></code>, <code><strong>onclose</strong></code>, <code><strong>oncontextmenu</strong></code>, <code><strong>oncuechange</strong></code>, <code><strong>ondblclick</strong></code>, <code><strong>ondrag</strong></code>, <code><strong>ondragend</strong></code>, <code><strong>ondragenter</strong></code>, <code><strong>ondragexit</strong></code>, <code><strong>ondragleave</strong></code>, <code><strong>ondragover</strong></code>, <code><strong>ondragstart</strong></code>, <code><strong>ondrop</strong></code>, <code><strong>ondurationchange</strong></code>, <code><strong>onemptied</strong></code>, <code><strong>onended</strong></code>, <code><strong>onerror</strong></code>, <code><strong>onfocus</strong></code>, <code><strong>oninput</strong></code>, <code><strong>oninvalid</strong></code>, <code><strong>onkeydown</strong></code>, <code><strong>onkeypress</strong></code>, <code><strong>onkeyup</strong></code>, <code><strong>onload</strong></code>, <code><strong>onloadeddata</strong></code>, <code><strong>onloadedmetadata</strong></code>, <code><strong>onloadstart</strong></code>, <code><strong>onmousedown</strong></code>, <code><strong>onmouseenter</strong></code>, <code><strong>onmouseleave</strong></code>, <code><strong>onmousemove</strong></code>, <code><strong>onmouseout</strong></code>, <code><strong>onmouseover</strong></code>, <code><strong>onmouseup</strong></code>, <code><strong>onmousewheel</strong></code>, <code><strong>onpause</strong></code>, <code><strong>onplay</strong></code>, <code><strong>onplaying</strong></code>, <code><strong>onprogress</strong></code>, <code><strong>onratechange</strong></code>, <code><strong>onreset</strong></code>, <code><strong>onresize</strong></code>, <code><strong>onscroll</strong></code>, <code><strong>onseeked</strong></code>, <code><strong>onseeking</strong></code>, <code><strong>onselect</strong></code>, <code><strong>onshow</strong></code>, <code><strong>onsort</strong></code>, <code><strong>onstalled</strong></code>, <code><strong>onsubmit</strong></code>, <code><strong>onsuspend</strong></code>, <code><strong>ontimeupdate</strong></code>, <code><strong>ontoggle</strong></code>, <code><strong>onvolumechange</strong></code>, <code><strong>onwaiting</strong></code>.</li> +</ul> + +<h2 id="Liste_des_attributs_universels">Liste des attributs universels</h2> + +<dl> + <dt>{{htmlattrdef("accesskey")}}</dt> + <dd>Cet attribut fournit une indication permettant de générer un raccourci clavier pour l'élément courant. Cet attribut se compose d'une liste de caractères séparés par des espaces. Le navigateur doit utiliser le premier caractère qui existe selon la disposition du clavier utilisée.</dd> + <dt>{{htmlattrdef("autocapitalize")}}</dt> + <dd>Cet attribut contrôle la façon dont le texte saisi est automatiquement converti en majuscules. Les valeurs autorisées pour cet attribut sont : + <ul> + <li><code>off</code> ou <code>none</code> : il n'y pas de convertion en majuscules réalisée.</li> + <li><code>on</code> ou <code>sentences</code> : la première lettre de chaque phrase est écrite en majuscule par défaut. Les autres lettres sont en minuscules par défaut.</li> + <li><code>words</code> : la première lettre de chaque mot est écrite en majuscule par défaut, les autres lettres sont en minuscules par défaut.</li> + <li><code>characters</code> : toutes les lettres sont écrites en majuscules par défaut</li> + </ul> + </dd> + <dt>{{htmlattrdef("class")}}</dt> + <dd>Une liste de classes, séparées par des espaces, qui permettent de catégoriser l'élément. Les classes permettent au CSS et à JavaScript de manipuler des éléments spécifiques grâce à <a href="/fr/docs/Web/CSS/Sélecteurs_de_classe">des sélecteurs de classe</a> (pour CSS) ou grâce à des fonctions telles que {{domxref("Document.getElementsByClassName()")}} (pour JavaScript).</dd> + <dt>{{htmlattrdef("contenteditable")}}</dt> + <dd>Un attribut à valeur contrainte qui indique si l'élément peut être édité par l'utilisateur. Si c'est le cas, le navigateur modifie l'interface utilisateur afin de permettre l'édition. Les valeur autorisées pour cet attribut sont : + <ul> + <li><code>true</code> ou la chaîne vide : ces valeurs indiquent que l'élément doit pouvoir être édité</li> + <li><code>false</code> qui indique que l'élément ne doit pas pouvoir être édité.</li> + </ul> + </dd> + <dt>{{htmlattrdef("contextmenu")}}{{obsolete_inline}}</dt> + <dd>La valeur de cet attribut correspond à la valeur de l'attribut {{htmlattrxref("id","menu")}} d'un élément {{HTMLElement("menu")}} qui doit être utilisé comme menu contextuel par cet élément.</dd> + <dt>{{htmlattrdef("data-*")}}</dt> + <dd>Cette classe d'attribut, appelée « attributs de données personnalisés », permet d'échanger des informations dans un format propriétaire entre le HTML et le DOM afin de pouvoir les manipuler via des langage de scripts. La propriété {{domxref("HTMLElement.dataset")}} permet d'accéder à l'ensemble des attribut définis de cette façon.</dd> + <dt>{{htmlattrdef("dir")}}</dt> + <dd>Un attribut à valeur contrainte qui indique la directionnalité du texte de l'élément. Les valeurs autorisées pour cet attribut sont : + <ul> + <li><code>ltr</code> (l'abbréviation anglaise pour <em>Left To Right</em>) indique que le contenu est écrit de gauche à droite (comme le français par exemple)</li> + <li><code>rtl</code> (l'abbréviation anglaise pour <em>Right To Left</em>) indique que le contenu est écrit de droite à gauche (comme l'arabe par exemple)</li> + <li><code>auto</code> : c'est l'agent utilisateur qui décide. Il utilise un algortihme qui analyse les caractères du contenu de l'élément jusqu'à trouver un caractère avec une forte directionnalité qu'il applique alors à l'ensemble de l'élément.</li> + </ul> + </dd> + <dt>{{htmlattrdef("draggable")}}</dt> + <dd>Un attribut à valeur contrainte qui indique qu'un élément peut être glissé/déposé grâce à l'<a href="/fr/docs/Web/API/API_HTML_Drag_and_Drop">API <em>Drag & Drop</em></a>. Les valeurs autorisées pour cet attribut sont : + <ul> + <li><code>true</code> : l'élément peut être glissé/déposé</li> + <li><code>false</code> : l'élément ne peut pas être glissé/déposé.</li> + </ul> + </dd> + <dt>{{htmlattrdef("dropzone")}} {{experimental_inline}}</dt> + <dd>Un attribut à valeur contrainte qui indique le type de contenu qui peut être déposé sur un élément grâce à l'<a href="/fr/docs/Web/API/API_HTML_Drag_and_Drop">API <em>Drag & Drop</em></a>. Les valeurs autorisées pour cet attribut sont : + <ul> + <li><code>copy</code> : lorsque l'élément est déposé, une copie de l'élément est créée</li> + <li><code>move</code> : lorsque l'élément est déposé, il est déplacé vers ce nouvel emplacement</li> + <li><code>link</code> : un lien est créé vers les données qui sont déplacée.</li> + </ul> + </dd> + <dt>{{htmlattrdef("exportparts")}} {{experimental_inline}}</dt> + <dd>Utilisé pour exporter de façon transitive certaines parties d'un arbre <em>shadow</em> sur un arbre réel.</dd> + <dt>{{htmlattrdef("hidden")}}</dt> + <dd>Un attribut booléen dont la valeur indique que l'élément n'est pas encore, ou n'est plus <em>pertinent</em>. Cet attribut peut ainsi être utilisé pour masquer les éléments d'une page qui ne peuvent pas être utilisés tant que la procédure de connexion n'est pas terminée. Le navigateur n'affichera pas les éléments pour lesquels cet attribut est utilisé. Cet attribut ne doit pas être utilisé afin de masquer du contenu qui aurait pu être affiché de façon pertinente.</dd> + <dt>{{htmlattrdef("id")}}</dt> + <dd>Cet attribut définit un identifiant, unique au sein de tout le document, ,pour un élément. Il doit permettre d'identifier un élément lorsqu'on crée un lien vers lui et/ou lorsque le manipule avec des scripts ou avec CSS.</dd> + <dt>{{htmlattrdef("inputmode")}}</dt> + <dd>Cet attribut fournit une indication au navigateur quant au type de contenu qui sera saisi dans le champ et qui aide à déterminer la configuration du clavier virtuel qui peut être affiché pour la saisie. Ce type est principalement utilisé pour les éléments {{HTMLElement("input")}} mais peut tout à fait être utilisé sur n'importe quel élément avec le mode {{htmlattrxref("contenteditable")}}.</dd> + <dt>{{htmlattrdef("is")}}</dt> + <dd>Cet attribut indique qu'un élément HTML standard devrait se comporter comme un élément personnalisé natif (voir <a href="/fr/docs/Web/Web_Components/Using_custom_elements">Manipuler les custom elements</a> pour plus d'informations).</dd> + <dt>{{htmlattrdef("itemid")}}</dt> + <dd>L'identifiant unique, global, d'un objet. Cet attribut est lié <a href="https://html.spec.whatwg.org/multipage/#toc-microdata">aux microdonnées</a>.</dd> + <dt>{{htmlattrdef("itemprop")}}</dt> + <dd>Cet attribut permet d'ajouter des propriétés à un objet. Cet attribut est une paire entre un nom et une valeur. Cet attribut est lié <a href="https://html.spec.whatwg.org/multipage/#toc-microdata">aux microdonnées</a>.</dd> + <dt>{{htmlattrdef("itemref")}}</dt> + <dd>Les propriétés d'un objet qui ne sont pas les éléments descendants de l'élément courant peuvent être associée via l'attribut <code>itemscope</code> contenant une référence vers un <code>itemref</code>. <code>itemref</code> fournit une liste d'identifiants d'éléments qui correspondent aux propriétés supplémentaires définies autre part dans le document. Cet attribut est lié <a href="https://html.spec.whatwg.org/multipage/#toc-microdata">aux microdonnées</a>.</dd> + <dt>{{htmlattrdef("itemscope")}}</dt> + <dd><code>itemscope</code> fonctionne généralement avec <code>itemtype</code> afin d'indiquer que le coded HTML contenu dans un bloc donné concerne un objet en particulier. <code>itemscope</code> crée l'objet et définit la portée de l'<code>itemtype</code> associée. <code>itemtype</code> est une URL valide construite à partir d'un vocabulaire (par exemple <a href="https://schema.org/">schema.org</a>) qui décrit les objets et leurs propriétés. Cet attribut est lié <a href="https://html.spec.whatwg.org/multipage/#toc-microdata">aux microdonnées</a>.</dd> + <dt>{{htmlattrdef("itemtype")}}</dt> + <dd>Cet attribut indique l'URL du vocabulaire utilisé pour définir les propriétés d'un objet. Cet attribut est lié <a href="https://html.spec.whatwg.org/multipage/#toc-microdata">aux microdonnées</a>.</dd> + <dt>{{htmlattrdef("lang")}}</dt> + <dd>Cet attribut aide à définir la langue utilisée pour l'élément. Pour les éléments non-éditables, c'est la langue dans laquelle ils sont écrits et pour les éléments éditables, c'est la langue dans laquelle ils devraient être écrits. Cet attribut contient une seule valeur telle que définie dans le document IETF <a class="external" href="https://www.ietf.org/rfc/bcp/bcp47.txt"><em>Tags for Identifying Languages (BCP47)</em></a>. L'attribut <code><strong>xml:lang</strong></code> est prioritaire par rapport à cet attribut lorsqu'il s'agit de déterminer la langue d'un élément.</dd> + <dt>{{htmlattrdef("part")}} {{experimental_inline}}</dt> + <dd>Une liste séparée par des espaces avec les noms des parties (<em>parts</em>) de l'élément. Les noms des parties permettent au CSS de cibler et de mettre en forme certains éléments d'un arbre <em>shadow</em> via le pseudo-élément {{cssxref("::part")}}.</dd> + <dt>{{htmlattrdef("slot")}}</dt> + <dd>Cet attribut affecte un créneau de l'arbre du <em><a href="/fr/docs/Web/Web_Components/Shadow_DOM">shadow DOM</a></em> pour un élément. L'élément ayant l'attribut <code>slot</code> est affecté au créneau créé par l'élément {{HTMLElement("slot")}} pour lequel l'attribut {{htmlattrxref("name", "slot")}} correspond à la valeur de l'attribut <code>slot</code>.</dd> + <dt>{{htmlattrdef("spellcheck")}} {{experimental_inline}}</dt> + <dd>Un attribut à valeur contrainte qui définit s'il faut détecter les fautes d'orthographe/grammaire dans le texte de l'élément. Les valeurs autorisées pour cet attribut sont : + <ul> + <li><code>true</code> qui indique que, si possible, il faut vérifier les erreurs d'orthographe</li> + <li><code>false</code> qui indique qu'il ne faut pas vérifier les erreurs.</li> + </ul> + </dd> + <dt>{{htmlattrdef("style")}}</dt> + <dd>Cet attribut contient les déclarations <a href="/fr/docs/Web/CSS/">CSS</a> utilisées pour mettre en forme l'élément. Note : il est recommandé d'utiliser un ou plusieurs fichiers séparés, plutôt que cet attribut, pour définir les règles de mise en forme. Le rôle de l'élément {{HTMLElement("style")}} consiste à permettre une mise en forme rapide, notamment pour des tests.</dd> + <dt>{{htmlattrdef("tabindex")}}</dt> + <dd>Cet attribut à valeur entière indique l'ordre dans lequel l'élément participe à la navigation au clavier via la tabulation. Il peut prendre différente valeur : + <ul> + <li>une valeur négative indiquera que l'élément peut recevoir le focus mais n'est pas accessible via la navigation séquentielle au clavier</li> + <li><code>0</code> indiquera que l'élément peut recevoir le focus et être accessible via la navigation au clavier mais l'ordre est relatif et déterminé par l'agent utilisateur</li> + <li>une valeur positive indiquera que l'élément peut recevoir le focus et qu'il est accessible via la navigation au clavier. La valeur utilisée indique l'ordre relatif de l'élément dans la navigation. Autrement dit, la navigation au clavier ira dans le sens croissant des éléments selon leurs valeurs respectives de <code>tabindex</code>. Si plusieurs éléments ont la même valeur, ce sera leur ordre relatif dans le document qui sera utilisé.</li> + </ul> + </dd> + <dt>{{htmlattrdef("title")}}</dt> + <dd>Cet attribut contient une représentation textuelle de l'information auquel il est lié. Une telle information est généralement, mais pas nécessairement, affichée sous la forme d'une bulle d'informations.</dd> + <dt>{{htmlattrdef("translate")}} {{experimental_inline}}</dt> + <dd>Un attribut à valeur contrainte qui est utilisé pour définir si les valeurs des attributs et des éléments fils de type {{domxref("Text")}} doivent être traduits lorsque la page est localisée. Les valeurs autorisées pour cet attribut sont : + <ul> + <li>La chaîne vide ou <code>yes</code> qui indiquent que l'élément doit être traduit</li> + <li><code>no</code> qui indique que l'élément ne sera pas traduit.</li> + </ul> + </dd> +</dl> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td>{{SpecName("HTML WHATWG", "dom.html#global-attributes", "Global attributes")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("CSS Shadow Parts", "#exposing")}}</td> + <td>{{Spec2("CSS Shadow parts")}}</td> + <td>Ajout des attributs universels <code>part</code> et <code>exportparts</code>.</td> + </tr> + <tr> + <td>{{SpecName("HTML5.3", "dom.html#global-attributes", "Global attributes")}}</td> + <td>{{Spec2("HTML5.3")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("HTML5.2", "dom.html#global-attributes", "Global attributes")}}</td> + <td>{{Spec2("HTML5.2")}}</td> + <td>Dérivation de {{SpecName("HTML WHATWG")}}. Depuis, {{SpecName("HTML5.1")}}, les attributs <code>itemid</code>, <code>itemprop</code>, <code>itemref</code>, <code>itemscope</code> et <code>itemtype</code> ont été ajoutés.</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "dom.html#global-attributes", "Global attributes")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Les attributs <code>contextmenu</code>, <code>spellcheck</code>, <code>draggable</code>, et <code>dropzone</code> ont été ajoutés depuis {{SpecName('HTML5 W3C')}}.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "dom.html#global-attributes", "Global attributes")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Le concept d'attribut universel est introduit et les attributs <code>dir</code>, <code>lang</code>, <code>style</code>, <code>id</code>, <code>class</code>, <code>tabindex</code>, <code>accesskey</code>, <code>title</code> sont désormais des attributs universels.<br> + <code>xml:lang</code> qui faisait initialement partie de XHTML est inclus dans HTML. Les attributs<br> + <code>hidden</code>, <code>data-*</code>, <code>contenteditable</code> et <code>translate</code> sont ajoutés.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Aucun attribut universel n'est défini. Plusieurs attributs, devenus universels par la suite, sont définis sur un sous-ensemble d'élément.<br> + <code>class</code> et <code>style</code> sont pris en charge pour tous les éléments à l'exception de {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}} et {{HTMLElement("title")}}.<br> + <code>dir</code> est pris en charge pour tous les éléments à l'exception de {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("bdo")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}} et {{HTMLElement("script")}}.<br> + <code>id</code> est pris en charge pour tous les éléments à l'exception de {{HTMLElement("base")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}} et {{HTMLElement("title")}}.<br> + <code>lang</code> est pris en charge pour tous les éléments à l'exception de {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}} et {{HTMLElement("script")}}.<br> + <code>tabindex</code> est uniquement pris en charge pour les éléments {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}} et {{HTMLElement("textarea")}}.<br> + <code>accesskey</code> est uniquement pris en charge pour {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("label")}}, {{HTMLElement("legend")}} et {{HTMLElement("textarea")}}.<br> + <code>title</code> est pris en charge pour tous les éléments à l'exception de {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}} et {{HTMLElement("title")}}.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("html.global_attributes")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>Les interfaces {{domxref("Element")}} et {{domxref("GlobalEventHandlers")}} qui permettent de manipuler la plupart des attributs globaux.</li> +</ul> diff --git a/files/fr/web/html/global_attributes/inputmode/index.html b/files/fr/web/html/global_attributes/inputmode/index.html new file mode 100644 index 0000000000..2babf82909 --- /dev/null +++ b/files/fr/web/html/global_attributes/inputmode/index.html @@ -0,0 +1,65 @@ +--- +title: inputmode +slug: Web/HTML/Attributs_universels/inputmode +tags: + - Attribut + - Attribut universel + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/inputmode +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><span class="seoSummary">L'<a href="/fr/docs/Web/HTML/Attributs_universels">attribut universel</a> <strong><code>inputmode</code></strong> est un attribut à valeur contrainte qui fournit une indication au navigateur quant au type de donnée qui peut être saisi par l'utilisateur lors de l'édition de l'élément ou de son contenu.</span> Les valeurs autorisées sont les suivantes :</p> + +<dl> + <dt><code>none</code></dt> + <dd>Aucun clavier virtuel ne doit être affiché. Cette valeur s'avère utile lorsque l'application ou le site web implémente son propre outil de saisie.</dd> + <dt><code>text</code></dt> + <dd>C'est du texte qui sera saisi et un clavier dans la locale de l'utilisateur pourra être affiché.</dd> + <dt><code>decimal</code></dt> + <dd>C'est un nombre décimal qui sera saisi. Le clavier affiché peut contenir des chiffres et le séparateur décimal de la locale de l'utilisateur. Attention, selon les appareils, le signe moins (<code>-</code>) peut ne pas être présent.</dd> + <dt><code>numeric</code></dt> + <dd>C'est un nombre entier qui sera saisi. Le clavier affiché peut contenir les chiffres de 0 à 9. Attention, selon les appareils, le signe moins (<code>-</code>) peut ne pas être présent.</dd> + <dt><code>tel</code></dt> + <dd>C'est un numéro de téléphone qui sera saisi. Le clavier affiché pourra être celui d'un téléphone avec les chiffres allant de 0 à 9, l'astérisque et le dièse. Pour les champs de formulaire où il faut saisir un numéro de téléphone, on utilisera plutôt <code><a href="/fr/docs/Web/HTML/Element/Input/tel"><input type="tel"></a></code>.</dd> + <dt><code>search</code></dt> + <dd>L'élément éditable sert à la recherche. Le clavier affiché sera optimisé pour une recherche (par exemple, la touche Entrée pourra être indiquée avec le mot-clé « Rechercher »).</dd> + <dt><code>email</code></dt> + <dd>C'est une adresse électronique qui sera saisie. Le clavier affiché pourra être optimisé pour la saisie d'adresses email (généralement, on aura le caractère @ et d'autres éléments). Pour les champs de formulaire où il faut saisir une adresse électronique, on utilisera plutôt <code><a href="/fr/docs/Web/HTML/Element/Input/email"><input type="email"></a></code>.</dd> + <dt><code>url</code></dt> + <dd>C'est une URL qui sera saisie. Le clavier affiché pourra être optimisé pour la saisie d'URL. Ainsi, la touche pour la barre oblique pourra être plus accessible, le clavier pourra proposer un accès à l'historique des URL utilisées, etc. Pour les champs de formulaire où il faut saisir une URL, on utilisera plutôt <code><a href="/fr/docs/Web/HTML/Element/Input/url"><input type="url"></a></code>.</dd> +</dl> + +<p>Lorsque cet attribut n'est pas explicitement défini, sa valeur par défaut est <code>"text"</code>, ce qui indique que c'est du texte qui sera saisi et qu'un clavier standard devrait être utilisé.</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("HTML WHATWG", "interaction.html#input-modalities:-the-inputmode-attribute", "inputmode")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("html.global_attributes.inputmode")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/HTML/Attributs_universels">L'ensemble des attributs universels</a></li> +</ul> diff --git a/files/fr/web/html/global_attributes/is/index.html b/files/fr/web/html/global_attributes/is/index.html new file mode 100644 index 0000000000..e460ffc4a3 --- /dev/null +++ b/files/fr/web/html/global_attributes/is/index.html @@ -0,0 +1,67 @@ +--- +title: is +slug: Web/HTML/Attributs_universels/is +tags: + - Attribut universel + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/is +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p>L'attribut <code><strong>is</strong></code> est un <a href="/fr/docs/Web/HTML/Attributs_universels">attribut universel</a> qui indique qu'un élément HTML standard devrait se comporter comme un élément natif personnalisé (<em>custom element</em>) défini (voir <a href="/fr/docs/Web/Web_Components/Using_custom_elements">Manipuler les <em>custom elements</em></a> pour plus de détails).</p> + +<p>Cet attribut peut uniquement être utilisé si l'élément personnalisé indiqué a été correctement <a href="/fr/docs/Web/API/CustomElementRegistry/define">défini</a> dans le document courant et qu'il étend le type d'élément sur lequel il est appliqué.</p> + +<h2 id="Exemples">Exemples</h2> + +<p>Cet exemple est tiré de l'exemple <code><a href="https://github.com/mdn/web-components-examples/tree/master/word-count-web-component">word-count-web-component</a></code> (<a href="https://mdn.github.io/web-components-examples/word-count-web-component/">voir le résultat en <em>live</em></a>).</p> + +<pre class="brush: js">// On crée une classe pour l'élément +class WordCount extends HTMLParagraphElement { + constructor() { + // On appelle super() pour récupérer l'initialisation + // des classes parentes + super(); + + // Le contenu du constructeur, etc. + ... + + } +} + +// On définit le nouvel élément. +customElements.define('word-count', WordCount, { extends: 'p' });</pre> + +<pre class="brush: html"><p is="word-count"></p></pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', "custom-elements.html#attr-is", "is")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("html.global_attributes.is")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>Les différents <a href="/fr/docs/Web/HTML/Attributs_universels">attributs universels</a></li> +</ul> diff --git a/files/fr/web/html/global_attributes/itemid/index.html b/files/fr/web/html/global_attributes/itemid/index.html new file mode 100644 index 0000000000..c592936a5d --- /dev/null +++ b/files/fr/web/html/global_attributes/itemid/index.html @@ -0,0 +1,116 @@ +--- +title: itemid +slug: Web/HTML/Attributs_universels/itemid +tags: + - Attribut + - Attribut universel + - HTML + - Micro-données + - Reference + - itemid +translation_of: Web/HTML/Global_attributes/itemid +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p>L'<a href="/fr/docs/Web/HTML/Attributs_universels">attribut universel</a> <strong><code>itemid</code></strong> permet d'identifier un objet, au sens des microdonnées, de façon unique et globale. L'attribut <code>itemid</code> peut uniquement être défini sur les éléments qui ont un attribut {{htmlattrxref("itemscope")}} et un attribut {{htmlattrxref("itemtype")}}. De plus, un <code>itemid</code> ne peut pas être défini sur des éléments dont l'attribut <code>itemscope</code> possède un attribut <code>itemtype</code> qui définit un vocabulaire qui ne prend pas en charge les identifiants globaux tels que défini dans la spécification du vocabulaire.</p> + +<p>La signification exacte d'un identifiant global est déterminée par la spécification du vocabulaire. C'est le rôle de cette spécification d'autoriser ou non la présence de plusieurs éléments avec le même identifiant (sur une ou plusieurs pages) et de définir les règles de gestion associées.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> + +<pre class="syntaxbox">itemid="URN"</pre> + +<p class="note"><strong>Note :</strong> Selon la définition du WHATWG, un <code>itemid</code> doit être une URL. Dans l'exemple qui suit, on utilise plutôt une URN, plus appropriée pour définir un identifiant unique comme <code>itemid</code>. Cette incohérence reflète l'état actuellement incomplet de la spécification sur les microdonnées.</p> + +<h2 id="Exemple">Exemple</h2> + +<h3 id="HTML">HTML</h3> + +<p>Un élément qui décrit un livre :</p> + +<pre class="brush: html"><dl itemscope + itemtype="http://vocab.example.net/book" + <mark>itemid="urn:isbn:0-330-34032-8"</mark>> + <dt>Title <dd itemprop="title">The Reality Dysfunction + <dt>Author <dd itemprop="author">Peter F. Hamilton + <dt>Publication date + <dd><time itemprop="pubdate" datetime="1996-01-26">26 January 1996</time> </dl> +</pre> + +<h3 id="Données_structurées_correspondantes">Données structurées correspondantes</h3> + +<table class="standard-table"> + <tbody> + <tr> + <td colspan="1" rowspan="14">itemscope</td> + <td>itemtype: itemid</td> + <td colspan="2" rowspan="1"> + <div class="jyrRxf-eEDwDf jcd3Mb IZ65Hb-hUbt4d">http://vocab.example.net/book: urn:isbn:0-330-34032-8</div> + </td> + </tr> + <tr> + <td>itemprop</td> + <td>title</td> + <td>The Reality Dysfunction</td> + </tr> + <tr> + <td>itemprop</td> + <td>author</td> + <td> + <div class="jyrRxf-eEDwDf jcd3Mb">Peter F. Hamilton</div> + </td> + </tr> + <tr> + <td>itemprop</td> + <td>pubdate</td> + <td>1996-01-26</td> + </tr> + </tbody> +</table> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML Microdata', "#items", "itemid")}}</td> + <td>{{Spec2('HTML Microdata')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "microdata.html#attr-itemid", "itemid")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("html.global_attributes.itemid")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/HTML/Attributs_universels">Les différents attributs universels</a></li> + <li>Les autres attributs universels relatifs aux microdonnées : + <ul> + <li>{{htmlattrxref("itemid")}}</li> + <li>{{htmlattrxref("itemprop")}}</li> + <li>{{htmlattrxref("itemref")}}</li> + <li>{{htmlattrxref("itemscope")}}</li> + <li>{{htmlattrxref("itemtype")}}</li> + </ul> + </li> +</ul> diff --git a/files/fr/web/html/global_attributes/itemprop/index.html b/files/fr/web/html/global_attributes/itemprop/index.html new file mode 100644 index 0000000000..956054bb32 --- /dev/null +++ b/files/fr/web/html/global_attributes/itemprop/index.html @@ -0,0 +1,436 @@ +--- +title: itemprop +slug: Web/HTML/Attributs_universels/itemprop +tags: + - Attribut + - Attribut universel + - HTML + - Micro-données + - Microdata +translation_of: Web/HTML/Global_attributes/itemprop +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p>L'<a href="/fr/docs/Web/HTML/Attributs_universels">attribut universel</a> <strong><code>itemprop</code></strong> est utilisé afin d'ajouter des propriétés à un objet. C'est un attribut universel et chaque élément HTML peut donc avoir un attribut <code>itemprop</code> qui permettra de former un couple de nom (la valeur de l'attribut) et de valeur (la valeur de l'élément). Chacune de ces paires constitue une <strong>propriété</strong> et un groupe de propriété forme un <strong>objet (<em>item</em>)</strong>. Les valeurs des propriétés sont généralement des chaînes de caractères ou des URL et peuvent être associées à de nombreux éléments comme {{HTMLElement("audio")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("link")}}, {{HTMLElement("object")}}, {{HTMLElement("source")}} , {{HTMLElement("track")}} et {{HTMLElement("video")}}.</p> + +<h3 id="Un_exemple_simple">Un exemple simple</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><div itemscope itemtype="http://schema.org/Movie"> + <h1 <strong>itemprop="name"</strong>>Avatar</h1> + <span>Director: + <span <strong>itemprop="director"</strong>>James Cameron</span> + (born August 16, 1954) + </span> + <span <strong>itemprop="genre"</strong>>Science fiction</span> + <a href="../movies/avatar-theatrical-trailer.html" + <strong>itemprop="trailer"</strong>>Trailer</a> +</div></pre> + +<h4 id="Structure_de_données">Structure de données</h4> + +<table class="standard-table"> + <tbody> + <tr> + <td colspan="1" rowspan="2"> </td> + <th colspan="2" rowspan="1"><strong>Objet</strong></th> + </tr> + <tr> + <th><strong>Nom pour <code>itemprop</code></strong></th> + <th><strong>Valeur pour <code>itemprop</code></strong></th> + </tr> + <tr> + <td><code>itemprop</code></td> + <td>name</td> + <td>Avatar</td> + </tr> + <tr> + <td><code>itemprop</code></td> + <td>director</td> + <td>James Cameron</td> + </tr> + <tr> + <td><code>itemprop</code></td> + <td>genre</td> + <td>Science fiction</td> + </tr> + <tr> + <td><code>itemprop</code></td> + <td>trailer</td> + <td>../movies/avatar-theatrical-trailer.html</td> + </tr> + </tbody> +</table> + +<h2 id="Propriétés">Propriétés</h2> + +<p>Les valeurs des propriétés sont généralement des chaînes de caractères ou des URL. Lorsque c'est une URL, on l'exprime grâce à l'élément {{HTMLElement("a")}} et avec son attribut <code>href</code>. Pour un élément {{HTMLElement("img")}}, on lira son attribut <code>src</code>, de même pour les autres éléments HTML qui font appel à d'autres ressources.</p> + +<h3 id="Trois_propriétés_dont_les_valeurs_sont_des_chaînes_simples">Trois propriétés dont les valeurs sont des chaînes simples</h3> + +<pre class="brush: html"><div itemscope> + <p>My name is + <span itemprop="name">Neil</span>. + </p> + <p>My band is called + <span itemprop="band">Four Parts Water</span>. + </p> + <p>I am + <span itemprop="nationality">British</span>. + </p> +</div></pre> + +<h3 id="Une_propriété_«_image_»_dont_la_valeur_est_une_URL">Une propriété « image » dont la valeur est une URL</h3> + +<pre class="brush: html"><div itemscope> + <img itemprop="image" + src="google-logo.png" alt="Google"> +</div> +</pre> + +<h3 id="Une_propriété_dont_la_valeur_est_un_identifiant_«_machine_»">Une propriété dont la valeur est un identifiant « machine »</h3> + +<pre class="brush: html"><h1 itemscope> + <data itemprop="product-id" + value="9678AOU879">The Instigator 2000</data> +</h1></pre> + +<p>Lorsqu'une chaîne est décrite avec un format machine plutôt qu'un format « humain », on la propriété est exprimée avec la valeur de l'attribut <code>value</code> de l'élément {{HTMLElement("data")}} et c'est le contenu de l'élément qui fournira la valeur humainement compréhensible.</p> + +<h3 id="Un_exemple_de_mesure">Un exemple de mesure</h3> + +<pre class="brush: html"><div itemscope itemtype="http://schema.org/Product"> + <span itemprop="name"> + Panasonic White 60L Refrigerator + </span> + <img src="panasonic-fridge-60l-white.jpg" alt=""> + <div itemprop="aggregateRating" + itemscope + itemtype="http://schema.org/AggregateRating"> + <meter itemprop="ratingValue" min=0 value=3.5 max=5> + Rated 3.5/5 + </meter> + (based on <span itemprop="reviewCount">11</span> + customer reviews) + </div> +</div></pre> + +<p>Pour les données numériques, on peut utiliser l'élément {{HTMLElement("meter")}} et la valeur de son attribut <code>value</code>.</p> + +<h3 id="Une_propriété_de_date">Une propriété de date</h3> + +<pre class="brush: html"><div itemscope> + I was born on + <time itemprop="birthday" datetime="2009-05-10"> + May 10th 2009 + </time>. +</div></pre> + +<p>Pour les valeurs temporelles, on utilisera les éléments {{HTMLElement("time")}} et son attribut <code>datetime</code>.</p> + +<h3 id="Imbrication_de_propriétés">Imbrication de propriétés</h3> + +<pre class="brush: html"><div itemscope> + <p>Name: + <span itemprop="name">Amanda</span> + </p> + <p>Band: + <span itemprop="band" itemscope> + <span itemprop="name">Jazz Band</span> + (<span itemprop="size">12</span> players) + </span> + </p> +</div></pre> + +<p>On peut avoir des imbrications de propriétés et utiliser l'attribut <code>itemscope</code> sur l'élément qui porte le groupe.</p> + +<p>L'élément de plus haut niveau possède deux propriétés <code>name</code> et <code>band</code>. La valeur de <code>name</code> est Amanda et la valeur de <code>ban</code><code>d</code> est un objet à part entière, composé de deux propriétés <code>name</code> et <code>size</code>. Le valeur pour <code>name</code> est Jazz Band et la valeur de <code>size</code> est 12. L'objet de plus haut niveau est un objet qui ne fait pas partie d'un autre objet.</p> + +<h3 id="Séparation_des_objets">Séparation des objets</h3> + +<pre class="brush: html"><div itemscope id="amanda" itemref="a b"></div> +<p id="a">Name: <span itemprop="name">Amanda</span></p> +<div id="b" itemprop="band" itemscope itemref="c"></div> +<div id="c"> + <p>Band: <span itemprop="name">Jazz Band</span></p> + <p>Size: <span itemprop="size">12</span> players</p> +</div></pre> + +<p>On obtient le même résultat qu'avec l'exemple précédent. Le premier objet possède deux propriétés <code>name</code> (qui vaut Amanda) et <code>band</code> qui est défini avec un autre objet. Le deuxième objet possède deux propriétés <code>name</code> (qui vaut Jazz Band) et <code>size</code> (qui vaut 12).</p> + +<h3 id="Un_objet_avec_plusieurs_occurrences_d'une_propriété">Un objet avec plusieurs occurrences d'une propriété</h3> + +<pre class="brush: html"><div itemscope> + <p>Flavors in my favorite ice cream:</p> + <ul> + <li itemprop="flavor">Lemon sorbet</li> + <li itemprop="flavor">Apricot sorbet</li> + </ul> +</div></pre> + +<p>Cet objet possède deux fois la même propriété <code>flavor</code>, qui prend deux valeurs Lemon sorbet et Apricot sorbet.</p> + +<h3 id="Deux_propriétés_avec_la_même_valeur">Deux propriétés avec la même valeur</h3> + +<pre class="brush: html"><div itemscope> + <span itemprop="favorite-color favorite-fruit"> + orange + </span> +</div></pre> + +<p>On peut définir deux propriétés au même endroit si elles prennent la même valeur.</p> + +<h3 id="Équivalence_sémantique">Équivalence sémantique</h3> + +<pre class="brush: html"><figure> + <img src="castle.jpeg"> + <figcaption> + <span itemscope> + <span itemprop="name">The Castle</span> + </span> + (1986) + </figcaption> +</figure></pre> + +<pre class="brush: html"><span itemscope> + <meta itemprop="name" content="The Castle"> +</span> +<figure> + <img src="castle.jpeg"> + <figcaption>The Castle (1986)</figcaption> +</figure></pre> + +<p>Ces deux exemples sont équivalents d'un point de vue sémantique. Tous les deux se composent d'un schéma et d'une légende et tous les deux possèdent un objet avec une propriété <code>name</code> qui vaut The Castle. Une différence subsiste : si l'utilisateur glisse-dépose l'élément, l'objet sera inclus dans les données. Dans les deux cas, l'image n'est pas associée à l'objet.</p> + +<h2 id="Les_noms_et_les_valeurs">Les noms et les valeurs</h2> + +<p>Une propriété est un ensemble non-ordonné de composants uniques sensibles à la casse qui représentent les paires de noms/valeurs. Les valeur doit avoir au moins composant pour se rattacher à l'objet. Dans le tableau ci-après, chaque cellule correspond à un composant.</p> + +<h3 id="Exemples_de_noms">Exemples de noms</h3> + +<table class="standard-table"> + <thead> + <tr> + <th colspan="1" rowspan="2" scope="col"> </th> + <th colspan="2" rowspan="1" scope="col">Objet</th> + </tr> + <tr> + <th scope="col">nom pour <code>itemprop</code></th> + <th scope="col">valeur pour <code>itemprop</code></th> + </tr> + </thead> + <tbody> + <tr> + <th><code>itemprop</code></th> + <td>country</td> + <td>Ireland</td> + </tr> + <tr> + <th><code>itemprop</code></th> + <td>Option</td> + <td>2</td> + </tr> + <tr> + <th><code>itemprop</code></th> + <td>https://www.flickr.com/photos/nlireland/6992065114/</td> + <td>Ring of Kerry</td> + </tr> + <tr> + <th><code>itemprop</code></th> + <td>img</td> + <td>https://www.flickr.com/photos/nlireland/6992065114/</td> + </tr> + <tr> + <th><code>itemprop</code></th> + <td>website</td> + <td>flickr</td> + </tr> + <tr> + <th><code>itemprop</code></th> + <td>(token)</td> + <td>(token)</td> + </tr> + </tbody> +</table> + +<p><strong>Les composants</strong> sont des chaînes de caractères ou des URL. Un objet est appelé un objet typé si c'est une URL. Les chaînes ne peuvent pas contenir de point ou de deux points.</p> + +<ol> + <li>Si un objet est un objet typé, il doit être : + <ol> + <li>Un nom de propriété autorisé par la spécification qui définit les types pertinents pour un objet ou</li> + <li>Une URL valide qui est une URL absolue qui définit un nom faisant partie de la spécification du vocabulaire ou</li> + <li>Une URL valide qui est une URL absolue utilisée comme un nom propriétaire ou</li> + </ol> + </li> + <li>Si un objet n'est pas un objet typé, le nom doit être : + <ol> + <li>Une chaîne qui ne contient pas de caractères "<strong>.</strong>" (U+002E FULL STOP) ou "<strong>:</strong>" (U+003A COLON) et qui est utilisée comme un nom « propriétaire » pour la propriété (c'est-à-dire avec un nom qui n'est pas défini dans une spécification publique).</li> + </ol> + </li> +</ol> + +<p class="note"><strong>Note :</strong> Les caractères « : » sont interdits pour les valeurs qui ne sont pas des URL afin de pouvoir distinguer les URL du reste. Les valeurs avec les caractères « . » sont réservés pour de futurs ajouts et les blancs ne sont pas autorisés car les valeurs seraient analysées comme plusieurs valeurs distinctes.</p> + +<h2 id="Valeurs">Valeurs</h2> + +<p>La valeur d'une propriété est définie comme le premier cas qui correspond dans cette liste :</p> + +<ul> + <li>Si l'élément possède un attribut <strong><code>itemscope</code> :</strong> + + <ul> + <li>La valeur est <strong>l'objet</strong> créé par l'élément.</li> + </ul> + </li> + <li>Si l'élément est un élément <strong><code>meta</code> :</strong> + <ul> + <li>La valeur est celle de l'attribut <strong><code>content</code></strong> s'il existe, la chaîne vide sinon.</li> + </ul> + </li> + <li>Si l'élément est <code><strong>audio</strong></code>, <code><strong>embed</strong></code>, <code><strong>iframe</strong></code>, <code><strong>img</strong></code>, <code><strong>source</strong></code>, <code><strong>track</strong></code> ou <strong><code>video</code> :</strong> + <ul> + <li>La valeur est l'URL correspondant à l'analyse de l'attribut <code>src</code> relatif au nœeud du document ou la chaîne vide s'il n'y pas de tel attribut ou que la recomposition de l'URL échoue.</li> + </ul> + </li> + <li>Si l'élément est un élément <code><strong>a</strong></code>, <code><strong>area</strong></code> ou <strong><code>link</code> :</strong> + <ul> + <li>La valeur est l'URL qui correspond à l'analyse de la valeur de l'attribut <code>href</code> relatif au nœud du document ou la chaîne vide s'il n'y pas de tel attribut ou que la recomposition de l'URL échoue.</li> + </ul> + </li> + <li>Si l'élément est un élément <strong><code>object</code> :</strong> + <ul> + <li>La valeur est l'URL qui correspond à l'analyse de la valeur de l'attribut <code>data</code> relatif au nœud du document ou la chaîne vide s'il n'y pas de tel attribut ou que la recomposition de l'URL échoue.</li> + </ul> + </li> + <li>Si l'élément est un élément <strong><code>data</code> :</strong> + <ul> + <li>La valeur est la valeur l'attribut <code>value</code> s'il est présent ou la chaîne vide sinon.</li> + </ul> + </li> + <li>Si l'élément est un élément <strong><code>meter</code> :</strong> + <ul> + <li>La valeur est la valeur l'attribut <code>value</code> s'il est présent ou la chaîne vide sinon. + <ul> + </ul> + </li> + </ul> + </li> + <li>Si l'élément est un élément <strong><code>time</code> :</strong> + <ul> + <li>La valeur de l'élément est la valeur de l'attribut <strong><code>datetime</code></strong>.</li> + </ul> + </li> +</ul> + +<p>Sinon :</p> + +<ul> + <li>La valeur de l'élément est le contenu textuel de l'élément HTML (<code>textContent</code>).</li> +</ul> + +<p>Les éléments qui permettent d'utiliser des attributs URL pour des URL absolues sont : <code><strong>a</strong></code>, <code><strong>area</strong></code>, <code><strong>audio</strong></code>, <code><strong>embed</strong></code>, <code><strong>iframe</strong></code>, <code><strong>img</strong></code>, <code><strong>link</strong></code>, <code><strong>object</strong></code>, <code><strong>source</strong></code>, <code><strong>track</strong></code> et <strong><code>video</code></strong>.</p> + +<h3 id="Ordre_des_noms">Ordre des noms</h3> + +<p>L'ordre des noms n'a pas d'importance mais si une propriété possède plusieurs valeurs, l'ordre sera relatif pour cette propriété.</p> + +<h4 id="Exemples_équivalents">Exemples équivalents</h4> + +<pre class="brush: html"><div itemscope> + <p itemprop="a">1</p> + <p itemprop="a">2</p> + <p itemprop="b">test</p> +</div></pre> + +<pre class="brush: html"><div itemscope> + <p itemprop="b">test</p> + <p itemprop="a">1</p> + <p itemprop="a">2</p> +</div></pre> + +<pre class="brush: html"><div itemscope> + <p itemprop="a">1</p> + <p itemprop="b">test</p> + <p itemprop="a">2</p> +</div></pre> + +<pre class="brush: html"><div id="x"> + <p itemprop="a">1</p> +</div> +<div itemscope itemref="x"> + <p itemprop="b">test</p> + <p itemprop="a">2</p> +</div> +</pre> + +<h2 id="Syntaxe">Syntaxe</h2> + +<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> + +<pre class="syntaxbox">itemprop = "name", value</pre> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="HTML_2">HTML</h3> + +<p>Un exemple sur un livre qu'on décrit avec les différents attributs.</p> + +<pre class="brush: html"><dl itemscope + itemtype="http://vocab.example.net/book" + itemid="urn:isbn:0-330-34032-8"> + <dt>Title <dd itemprop="title">The Reality Dysfunction + <dt>Author <dd itemprop="author">Peter F. Hamilton + <dt>Publication date + <dd> + <time itemprop="pubdate" datetime="1996-01-26"> + 26 January 1996 + </time> +</dl> +</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML Microdata', "#dfn-attr-itemprop", "itemprop")}}</td> + <td>{{Spec2('HTML Microdata')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "microdata.html#names:-the-itemprop-attribute", "itemprop")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("html.global_attributes.itemprop")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/HTML/Attributs_universels">Les différents attributs universels</a></li> + <li>Les autres attributs universels relatifs aux microdonnées : + <ul> + <li>{{htmlattrxref("itemid")}}</li> + <li>{{htmlattrxref("itemprop")}}</li> + <li>{{htmlattrxref("itemref")}}</li> + <li>{{htmlattrxref("itemscope")}}</li> + <li>{{htmlattrxref("itemtype")}}</li> + </ul> + </li> +</ul> diff --git a/files/fr/web/html/global_attributes/itemref/index.html b/files/fr/web/html/global_attributes/itemref/index.html new file mode 100644 index 0000000000..894df9c87c --- /dev/null +++ b/files/fr/web/html/global_attributes/itemref/index.html @@ -0,0 +1,97 @@ +--- +title: itemref +slug: Web/HTML/Attributs_universels/itemref +tags: + - Attribut + - Attribut universel + - HTML + - Micro-données + - Microdata + - Reference +translation_of: Web/HTML/Global_attributes/itemref +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p>L'<a href="/fr/docs/Web/HTML/Attributs_universels">attribut universel</a> <code><strong>itemref</strong></code> permet d'associer des propriétés à un objet via <code>itemscope</code> lorsque l'élement courant n'est pas un élément descendant. <code>itemref</code> fournit une liste d'identifiants d'éléments (à ne pas confondre avec <code>itemid</code>) dont des propriétés sont définies plus loin dans le document.</p> + +<p>L'attribut <code>itemref</code> peut uniquement être défini sur des éléments pour lesquels un attribut <code>itemscope</code> a été défini.</p> + +<p class="note"><strong>Note :</strong> L'attribut <code>itemref</code> ne fait pas partie du modèle de données des micro-données. Il s'agit purement d'une construction syntaxique pour aider les auteurs à annoter une page où les données ne suivent pas une structure arborescente claire.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> + +<pre class="syntaxbox">itemref</pre> + +<h2 class="syntaxbox" id="Exemple">Exemple</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div itemscope id="amanda" itemref="a b"></div> +<p id="a">Name: <span itemprop="name">Amanda</span> </p> +<div id="b" itemprop="band" itemscope itemref="c"></div> +<div id="c"> + <p>Band: <span itemprop="name">Jazz Band</span> </p> + <p>Size: <span itemprop="size">12</span> players</p> +</div></pre> + +<h3 id="Structure_de_données_correspondante">Structure de données correspondante</h3> + +<p><small>Au format <a href="https://json-ld.org/" rel="external">JSON-LD</a> :</small></p> + +<pre class="brush: json">{ + "@id": "amanda", + "name": "Amanda", + "band": { + "@id": "b", + "name": "Jazz Band", + "size": 12 + } +} +</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML Microdata', "#dfn-itemref", "itemref")}}</td> + <td>{{Spec2('HTML Microdata')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "microdata.html#attr-itemref", "itemref")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("html.global_attributes.itemref")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/HTML/Attributs_universels">Les différents attributs universels</a></li> + <li>Les autres attributs universels relatifs aux microdonnées : + <ul> + <li>{{htmlattrxref("itemid")}}</li> + <li>{{htmlattrxref("itemprop")}}</li> + <li>{{htmlattrxref("itemref")}}</li> + <li>{{htmlattrxref("itemscope")}}</li> + <li>{{htmlattrxref("itemtype")}}</li> + </ul> + </li> +</ul> diff --git a/files/fr/web/html/global_attributes/itemscope/index.html b/files/fr/web/html/global_attributes/itemscope/index.html new file mode 100644 index 0000000000..5e76969620 --- /dev/null +++ b/files/fr/web/html/global_attributes/itemscope/index.html @@ -0,0 +1,228 @@ +--- +title: itemscope +slug: Web/HTML/Attributs_universels/itemscope +tags: + - Attribut + - Attribut universel + - HTML + - Micro-données + - Microdata + - Reference +translation_of: Web/HTML/Global_attributes/itemscope +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p>L'<a href="/fr/docs/Web/HTML/Attributs_universels">attribut universel</a> <strong><code>itemscope</code> </strong>fonctionne généralement avec l'attribut <code>itemtype</code> afin d' indiquer qu'un bloc HTML contient un objet donné. <code>itemscope</code> crée l'objet et définit la portée de l'<code>itemtype</code> associé. Il est possible d'associer un attribut <code>itemscope</code> à n'importe quel élément HTML.</p> + +<h3 id="Les_identifiants_rattachés_à_itemscope">Les identifiants rattachés à <code>itemscope</code></h3> + +<p>Un élément qui possède un attribut <code>itemscope</code> permet de définir un nouvel élément qui sera un groupe de paires de noms/valeurs. Les éléments qui ont un attribut <code>itemscope</code> et un attribut <code>itemtype</code> peuvent également définir un attribut <code>id</code> (à ne pas confondre avec <code>itemid)</code> pour identifier de façon unique l'élément sur le Web.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> + +<pre class="syntaxbox">itemscope</pre> + +<h2 id="Exemple">Exemple</h2> + +<p>Dans cet exemple, on a trois attributs <code>itemscopes</code>. Ces trois <code>itemscopes</code> définissent les portées respectives des <code>itemtypes</code> correspondants qui sont : Recipe, AggregateRating et NutritionInformation.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div itemscope itemtype="https://schema.org/Recipe"> +<h2 itemprop="name">Grandma's Holiday Apple Pie</h2> +<img itemprop="image" src="https://c1.staticflickr.com/1/30/42759561_8631e2f905_n.jpg" width="50" height="50"/> +<p>By <span itemprop="author" itemscope itemtype="https://schema.org/Person"> +<span itemprop="name">Carol Smith</p></span> +</span> +<p>Published: <time datetime="2009-11-05" itemprop="datePublished"> +November 5, 2009</p></time> +<span itemprop="description">This is my grandmother's apple pie recipe. I like to add a dash of nutmeg.<br></span> + <span itemprop="aggregateRating" itemscope itemtype="https://schema.org/AggregateRating"> + <span itemprop="ratingValue">4.0</span> stars based on <span itemprop="reviewCount">35</span> reviews<br></span> +Prep time: <time datetime="PT30M" itemprop="prepTime">30 min<br></time> + Cook time: <time datetime="PT1H" itemprop="cookTime">1 hour<br></time> + Total time: <time datetime="PT1H30M" itemprop="totalTime">1 hour 30 min<br></time> + Yield: <span itemprop="recipeYield">1 9" pie (8 servings)<br></span> + <span itemprop="nutrition" itemscope itemtype="https://schema.org/NutritionInformation"> + Serving size: <span itemprop="servingSize">1 medium slice<br></span> + Calories per serving: <span itemprop="calories">250 cal<br></span> + Fat per serving: <span itemprop="fatContent">12 g<br></span> +</span> +<p>Ingredients:<br> + <span itemprop="recipeIngredient">Thinly-sliced apples: 6 cups<br></span> + <span itemprop="recipeIngredient">White sugar: 3/4 cup<br></span> + ... </p> + +Directions: <br> + <div itemprop="recipeInstructions"> + 1. Cut and peel apples<br> + 2. Mix sugar and cinnamon. Use additional sugar for tart apples. <br> + ... + </div> +</div> </pre> + +<h3 id="Structure_des_données">Structure des données</h3> + +<table class="standard-table"> + <tbody> + <tr> + <td colspan="1" rowspan="14">itemscope</td> + <td>itemtype</td> + <td colspan="2" rowspan="1">Recipe</td> + </tr> + <tr> + <td>itemprop</td> + <td>name:</td> + <td>Grandma's Holiday Apple Pie</td> + </tr> + <tr> + <td>itemprop</td> + <td>image:</td> + <td> + <div class="jyrRxf-eEDwDf jcd3Mb">https://c1.staticflickr.com/1/30/42759561_8631e2f905_n.jpg</div> + </td> + </tr> + <tr> + <td>itemprop</td> + <td>datePublished:</td> + <td>2009-11-05</td> + </tr> + <tr> + <td>itemprop</td> + <td>description:</td> + <td>This is my grandmother's apple pie recipe. I like to add a dash of nutmeg.</td> + </tr> + <tr> + <td>itemprop</td> + <td>prepTime:</td> + <td>PT30M</td> + </tr> + <tr> + <td>itemprop</td> + <td>cookTime:</td> + <td>PT1H</td> + </tr> + <tr> + <td>itemprop</td> + <td>totalTime:</td> + <td>PT1H30M</td> + </tr> + <tr> + <td>itemprop</td> + <td>recipeYield:</td> + <td>1 9" pie (8 servings)</td> + </tr> + <tr> + <td>itemprop</td> + <td>recipeIngredient:</td> + <td>Thinly-sliced apples: 6 cups</td> + </tr> + <tr> + <td>itemprop</td> + <td>recipeIngredient:</td> + <td>White sugar: 3/4 cup</td> + </tr> + <tr> + <td>itemprop</td> + <td>recipeInstructions:</td> + <td> + <div class="jyrRxf-eEDwDf jcd3Mb">1. Cut and peel apples 2. Mix sugar and cinnamon. Use additional sugar for tart apples .</div> + </td> + </tr> + <tr> + <td>itemprop</td> + <td colspan="2" rowspan="1">author [Person]:</td> + </tr> + <tr> + <td>itemprop</td> + <td>name:</td> + <td>Carol Smith</td> + </tr> + <tr> + <td colspan="1" rowspan="3">itemscope</td> + <td>itemprop[itemtype]</td> + <td colspan="2" rowspan="1">aggregateRating [AggregateRating]:</td> + </tr> + <tr> + <td>itemprop</td> + <td>ratingValue:</td> + <td>4.0</td> + </tr> + <tr> + <td>itemprop</td> + <td>reviewCount:</td> + <td>35</td> + </tr> + <tr> + <td colspan="1" rowspan="4">itemscope</td> + <td>itemprop[itemtype]</td> + <td colspan="2" rowspan="1">nutrition [NutritionInformation]:</td> + </tr> + <tr> + <td>itemprop</td> + <td>servingSize:</td> + <td>1 medium slice</td> + </tr> + <tr> + <td>itemprop</td> + <td>calories:</td> + <td>250 cal</td> + </tr> + <tr> + <td>itemprop</td> + <td>fatContent:</td> + <td>12 g</td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>Note</strong> : Pour extraire des micro-données d'un document HTML, vous pouvez utiliser <a href="https://developers.google.com/structured-data/testing-tool/">l'outil d'extraction de Google pour les micro-données.</a> Vous pouvez par exemple utiliser le document HTML précédent.</p> +</div> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML Microdata', "#dfn-itemscope", "itemscope")}}</td> + <td>{{Spec2('HTML Microdata')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "microdata.html#attr-itemscope", "itemscope")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("html.global_attributes.itemscope")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/HTML/Attributs_universels">Les différents attributs universels</a></li> + <li>Les autres attributs universels relatifs aux microdonnées : + <ul> + <li>{{htmlattrxref("itemid")}}</li> + <li>{{htmlattrxref("itemprop")}}</li> + <li>{{htmlattrxref("itemref")}}</li> + <li>{{htmlattrxref("itemscope")}}</li> + <li>{{htmlattrxref("itemtype")}}</li> + </ul> + </li> +</ul> diff --git a/files/fr/web/html/global_attributes/itemtype/index.html b/files/fr/web/html/global_attributes/itemtype/index.html new file mode 100644 index 0000000000..5d3ce08694 --- /dev/null +++ b/files/fr/web/html/global_attributes/itemtype/index.html @@ -0,0 +1,113 @@ +--- +title: itemtype +slug: Web/HTML/Attributs_universels/itemtype +tags: + - Attribut + - Attribut universel + - HTML + - Micro-données + - Microdata + - Référence(2) +translation_of: Web/HTML/Global_attributes/itemtype +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p>L'<a href="/fr/docs/Web/HTML/Attributs_universels">attribut universel</a> <strong><code>itemtype</code> </strong>définit l'URL du vocabulaire qui sera utilisé pour définir les propriétés des objets dans la structure de données. <code>itemscope</code> est utilisé afin de définir la portée, dans le document, où le vocabulaire défini sera actif.</p> + +<p>L'attribut <code>itemtype</code> doit avoir une valeur qui est un ensemble non ordonné de fragments uniques, sensible à la casse. Chaque fragment doit être une URL absolue valide et tous les fragments participent à la définition du même vocabulaire. La valeur de l'attribut doit avoir au moins un fragment.</p> + +<p>Les types d'objet doivent tous être définis dans des spécifications de vocabulaire (comme <a href="http://schema.org/">schema.org</a>) et doivent tous être définis avec le même vocabulaire.</p> + +<p>L'attribut <code>itemtype</code> peut uniquement être défini pour les éléments qui ont un attribut <code>itemscope</code>.</p> + +<p>Google et les autres moteurs de recherche participent au vocabulaire défini par <a href="http://schema.org/">schema.org</a> pour structurer les données. Ce vocabulaire définit un ensemble standard de types et de noms de propriétés. Par exemple <code><a href="http://schema.org/MusicEvent">MusicEvent</a></code> indique un événement musical dont les propriétés <code><a href="http://schema.org/startDate">startDate</a></code> et <code><a href="http://schema.org/location">location</a></code> utilisées pour définir les détails du concert. Dans ce cas, l'URL <code><a href="http://schema.org/MusicEvent">http://schema.org/MusicEvent</a></code> sera l'URL utilisée pour l'attribut <code>itemtype</code> et les propriétés <code>startDate</code> et <code>location</code> seront les propriétés utilisées, définies par <code><a href="http://schema.org/MusicEvent">http://schema.org/MusicEvent</a></code>.</p> + +<div class="note"> +<p><strong>Note :</strong> Vous pourrez trouver plus d'informations sur l'attribut itemtype sur <a href="http://schema.org/Thing">http://schema.org/Thing</a></p> +</div> + +<h2 id="Syntaxe">Syntaxe</h2> + +<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> + +<pre class="syntaxbox">itemtype = URL</pre> + +<h3 id="Exemple_simple">Exemple simple</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><div itemscope itemtype="http://schema.org/Product"> + <span itemprop="brand">ACME</span> + <span itemprop="name">Executive Anvil</span> +</div></pre> + +<h4 id="Structure_de_données">Structure de données</h4> + +<table class="standard-table"> + <tbody> + <tr> + <td rowspan="4"><code>itemscope</code></td> + <td><code>itemtype</code></td> + <td colspan="2" rowspan="1">http://schema.org/Product</td> + </tr> + <tr> + <td><code>itemprop</code></td> + <td><code>name</code></td> + <td>Executive Anvil</td> + </tr> + <tr> + <td><code>itemprop</code></td> + <td colspan="2" rowspan="1"><code>brand [Thing]</code></td> + </tr> + <tr> + <td><code>itemprop</code></td> + <td><code>name</code></td> + <td>ACME</td> + </tr> + </tbody> +</table> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML Microdata', "#dfn-itemtype", "itemtype")}}</td> + <td>{{Spec2('HTML Microdata')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "microdata.html#attr-itemtype", "itemprop")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("html.global_attributes.itemtype")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/HTML/Attributs_universels">Les différents attributs universels</a></li> + <li>Les autres attributs universels relatifs aux microdonnées : + <ul> + <li>{{htmlattrxref("itemid")}}</li> + <li>{{htmlattrxref("itemprop")}}</li> + <li>{{htmlattrxref("itemref")}}</li> + <li>{{htmlattrxref("itemscope")}}</li> + <li>{{htmlattrxref("itemtype")}}</li> + </ul> + </li> +</ul> diff --git a/files/fr/web/html/global_attributes/lang/index.html b/files/fr/web/html/global_attributes/lang/index.html new file mode 100644 index 0000000000..6a45c3ed2a --- /dev/null +++ b/files/fr/web/html/global_attributes/lang/index.html @@ -0,0 +1,86 @@ +--- +title: lang +slug: Web/HTML/Attributs_universels/lang +tags: + - Attribut + - Attribut universel + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/lang +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p>L'<a href="/fr/docs/Web/HTML/Attributs_universels">attribut universel</a> <code><strong>lang</strong></code> permet de définir la langue utilisée pour l'élément. Pour les éléments non-éditables, c'est la langue dans laquelle ils sont écrits. Pour les éléments éditables, c'est la langue dans laquelle devrait écrire l'utilisateur. La valeur de cet attribut est une « balise de langue » dont le format est défini par le document de l'IETF : <a class="external" href="https://www.ietf.org/rfc/bcp/bcp47.txt"><em>Les balises d'identification de langues (BCP47)</em></a>. Si cette balise est la chaîne vide, la langue sera définie comme <em>inconnue</em>. Si la balise de langue n'est pas valide selon BCP47, la langue sera définie comme <em>invalide</em>.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/attribute-lang.html","tabbed-shorter")}}</div> + +<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> + +<p>Même lorsque l'attribut <code><strong>lang</strong></code> est défini, il peut ne pas être pris en compte. En effet, l'attribut {{htmlattrxref("xml:lang")}} aura la priorité sur celui-ci.</p> + +<p>Pour la pseudo-classe CSS {{cssxref(":lang")}}, deux noms de langues invalides sont considérés différents si les noms utilisés sont différents. Par exemple, alors que <code>:lang(fr)</code> permet l'appariement avec les déclarations (valides) <code>lang="fr-BE"</code> ou <code>lang="fr-CH"</code>, un encodage (invalide) comme <code>:lang(xyzzy)</code> ne permet pas l'appariement avec une déclaration (invalide) comme <code>lang="xyzzy-Zorp!"</code>.</p> + +<h2 id="Syntaxe_des_balises_de_langue">Syntaxe des balises de langue</h2> + +<p>La syntaxe complète décrite par la BCP 47 est suffisamment développée pour désigner certains dialectes spécifiques. Toutefois, dans la plupart des cas, l'utilisation sera assez simple.</p> + +<p>Voici un aperçu de la syntaxe simplifiée. Une balise de langue est composées de trois « sous-balises » séparées par des tirets. Chacune de ces sous-balises indique une certaine propriété de la langue. Les trois sous-balises communément utilisées sont :</p> + +<dl> + <dt>Sous-balise de langue</dt> + <dd>Ce fragment est obligatoire. C'est un code sur deux ou trois caractères (généralement en minuscules) qui définit la langue de base. Pour l'anglais, cette sous-balise est <code>en</code> et pour le Badeshi, cette balise est <code>bdz</code>.</dd> + <dt>Sous-balise de script</dt> + <dd>Ce fragment est optionnel. Il décrit le système d'écriture utilisé par la langue. Cette sous-balise contient toujours quatre caractères. Pour le braille français, la balise complète sera donc <code>fr-Brail</code> ; pour le japonais écrit avec l'alphabet Katakana, le code sera <code>ja-Kana</code>. Si la langue est utilisée avec le script le plus fréquemment utilisé (par exemple de l'espagnol écrit avec l'alphabet latin), il n'est pas nécessaire d'indiquer cette sous-balise.</dd> + <dt>Sous-balise régionale</dt> + <dd>Ce fragment est optionnel. Il définit un dialecte de la langue de base pour une région donnée. Cette sous-balise est composée de deux lettres en majuscules pour indiquer un pays ou de trois chiffres pour une indiquer une région qui n'est pas un pays. Ainsi, <code>es-ES</code> représente l'espagnol parlé en Espagne et <code>es-013</code> représente l'espagnol parlé en Amérique centrale ; l'espagnol international serait simplement <code>es</code>.</dd> +</dl> + +<p>La sous-balise de script doit précéder la sous-balise régionale si les deux sont présentes. Voici un exemple avec les trois fragments : <code>ru-Cyrl-BY</code> qui correspond au russe, écrit avec l'alphabet cyrillique, tel que parlé en Biélorussie.</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', "dom.html#the-lang-and-xml:lang-attributes", "lang")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Aucun changement depuis la dernière dérivation, {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "dom.html#the-lang-and-xml:lang-attributes", "lang")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Dérivée de {{SpecName('HTML WHATWG')}}, aucun changement de {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "dom.html#the-lang-and-xml:lang-attributes", "lang")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Dérivée de {{SpecName('HTML WHATWG')}}. Définition du comportement de l'attribut <strong>xml:lang</strong> et de l'algorithme à utiliser pour déterminer la langue utilisée. Cet attribut devient également un attribut global à part entière.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/dirlang.html#h-8.1', 'lang')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Attribut supporté pour tous les éléments {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}}, et {{HTMLElement("script")}}.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("html.global_attributes.lang")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/HTML/Attributs_universels">Les différents attributs universels</a></li> + <li>La pseudo-classe CSS {{cssxref(":lang")}}</li> + <li>L'en-tête HTTP {{HTTPHeader("Content-Language")}}</li> +</ul> diff --git a/files/fr/web/html/global_attributes/slot/index.html b/files/fr/web/html/global_attributes/slot/index.html new file mode 100644 index 0000000000..c6b96098a0 --- /dev/null +++ b/files/fr/web/html/global_attributes/slot/index.html @@ -0,0 +1,49 @@ +--- +title: slot +slug: Web/HTML/Attributs_universels/slot +tags: + - Attribut + - Attribut universel + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/slot +--- +<div>{{HTMLSidebar("Global_attributes")}}{{SeeCompatTable}}</div> + +<p>L'attribut HTML universel <code><strong>slot</strong></code> permet d'affecter un créneau d'un <em><a href="/fr/docs/Web/Web_Components/Shadow_DOM">shadow DOM</a></em> à un élément. Un élément avec un attribut <code>slot</code> est affecté au créneau créé par l'élément {{HTMLElement("slot")}} dont la valeur de l'attribut {{htmlattrxref("name", "slot")}} correspond à celle de l'attribut <code>slot</code>.</p> + +<p>Pour des exemples d'application, consulter le guide <a href="/fr/docs/Web/Web_Components/Using_templates_and_slots">Utiliser les modèles (<em>templates</em>) et les emplacements (<em>slots</em>)</a>.</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "dom.html#attr-slot", "slot attribute")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG', "#dom-element-slot", "slot attribute")}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("html.global_attributes.slot")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/HTML/Attributs_universels">Les autres attributs universels</a></li> +</ul> diff --git a/files/fr/web/html/global_attributes/spellcheck/index.html b/files/fr/web/html/global_attributes/spellcheck/index.html new file mode 100644 index 0000000000..efc982d646 --- /dev/null +++ b/files/fr/web/html/global_attributes/spellcheck/index.html @@ -0,0 +1,153 @@ +--- +title: spellcheck +slug: Web/HTML/Attributs_universels/spellcheck +tags: + - Attribut + - Attribut universel + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/spellcheck +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p>L'attribut universel <code><strong>spellcheck</strong></code> est un attribut à valeur contrainte qui définit si l'orthographe du contenu de l'élément doit être vérifiée.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/attribute-spellcheck.html","tabbed-shorter")}}</div> + +<div class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</div> + +<p>Les valeurs autorisées pour cet attribut sont :</p> + +<ul> + <li><code>true</code> : cette valeur indique que, si possible, l'orthographe de l'élément doit être vérifiée avec le correcteur orthographique.</li> + <li><code>false</code> : cette valeur indique que l'orthographe de l'élément ne doit pas être vérifié.</li> +</ul> + +<p>La valeur par défaut de l'attribut (utilisée si elle n'est pas définie explicitement) sera fonction du navigateur et du type d'élément. Cette valeur par défaut peut également être héritée (autrement dit, la valeur utilisée pour l'élément courant sera la valeur explicite définie pour son plus proche ancêtre dans l'arbre des éléments).</p> + +<p>Cet attribut est un attribut à valeur contrainte, ce n'est pas un attribut booléen. Il faut donc utiliser explicitement les valeurs <code>true</code> ou <code>false</code>. Ainsi :</p> + +<pre class="example-bad brush: html"><label spellcheck>Label exemple</label></pre> + +<p>sera invalide, la formulation correcte étant :</p> + +<pre class="example-good brush: html"><label spellcheck="true">Label exemple</label></pre> + +<p>Cet attribut n'est qu'une indication à destination du navigateur : il n'est pas obligatoire qu'un navigateur puisse vérifier l'orthographe. Les éléments non-éditables ne sont généralement pas vérifiés, même lorsque <code><strong>spellcheck</strong></code> vaut <code>true</code> et que le navigateur possède une fonctionnalité de vérification orthographique.</p> + +<p>La valeur par défaut sera différente selon l'élément et le navigateur :</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th>Navigateur</th> + <th>{{HTMLElement("html")}}</th> + <th>{{HTMLElement("textarea")}}</th> + <th>{{HTMLElement("input")}}</th> + <th>Autres</th> + <th>Commentaires</th> + </tr> + <tr> + <td rowspan="3">Firefox / Gecko</td> + <td><code>false</code></td> + <td><code>false</code></td> + <td><code>false</code></td> + <td><em>hérité</em></td> + <td>Lorsque <code>layout.spellcheckDefault</code> vaut <code>0</code></td> + </tr> + <tr> + <td><strong><code>false</code></strong></td> + <td><strong><code>true</code></strong></td> + <td><strong><em>hérité</em></strong></td> + <td><strong><em>hérité</em></strong></td> + <td><strong>Lorsque <code>layout.spellcheckDefault</code> vaut <code>1</code> (valeur par défaut)</strong></td> + </tr> + <tr> + <td><code>false</code></td> + <td><code>true</code></td> + <td><code>true</code></td> + <td><em>hérité</em></td> + <td>Lorsque <code>layout.spellcheckDefault</code> vaut <code>2</code></td> + </tr> + <tr> + <td>Chrome</td> + <td><code>false</code></td> + <td><code>true</code></td> + <td>?</td> + <td><em>hérité</em></td> + </tr> + <tr> + <td>Internet Explorer</td> + <td><code>false</code></td> + <td><code>true</code></td> + <td>?</td> + <td><em>hérité</em></td> + </tr> + <tr> + <td>Opera</td> + <td><code>false</code></td> + <td><code>true</code></td> + <td>?</td> + <td><em>hérité</em></td> + </tr> + <tr> + <td>Safari</td> + <td><code>false</code></td> + <td><code>true</code></td> + <td>?</td> + <td><em>hérité</em></td> + </tr> + </tbody> +</table> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><!-- La valeur par défaut --> +<textarea>Saisissay un texte issy</textarea> + +<!-- Les valeurs explicites --> +<textarea spellcheck="true">Saisissay un texte issy</textarea> +<textarea spellcheck="false">Saisissay un texte issy</textarea> +</pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples","200","300")}}</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', "interaction.html#spelling-and-grammar-checking", "spellcheck")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Pas de changement depuis la dernière dérivation, {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "editing.html#spelling-and-grammar-checking", "spellcheck")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Dérivée de {{SpecName('HTML WHATWG')}}, définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("html.global_attributes.spellcheck")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/HTML/Attributs_universels">Les différents attributs universels</a></li> +</ul> diff --git a/files/fr/web/html/global_attributes/style/index.html b/files/fr/web/html/global_attributes/style/index.html new file mode 100644 index 0000000000..3da865a0e9 --- /dev/null +++ b/files/fr/web/html/global_attributes/style/index.html @@ -0,0 +1,92 @@ +--- +title: style +slug: Web/HTML/Attributs_universels/style +tags: + - Attribut + - Attribut universel + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/style +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p>L'<a href="/fr/docs/Web/HTML/Attributs_universels">attribut universel</a> <code><strong>style</strong></code> contient des déclarations <a href="/fr/docs/Web/CSS">CSS</a> afin de mettre en forme l'élément. Attention, il est recommandé de définir les règles de mise en forme dans un ou plusieurs fichiers séparés. Cet attribut, ainsi que l'élément {{HTMLElement("style")}} ont simplement pour but de permettre une mise en forme rapide, notamment pour tester.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/attribute-style.html","tabbed-shorter")}}</div> + +<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> + +<div class="note"> +<p><strong>Note : </strong>Cet attribut ne doit pas être utilisé à des fins sémantiques. En effet, si toute mise en forme est retirée, toute page doit rester correcte d'un point de vue sémantique. On ne devrait pas, notamment, utiliser cet attribut afin de cacher des informations qui ne seraient pas pertinentes (cela devrait être réalisé avec l'attribut {{htmlattrxref("hidden")}}.</p> +</div> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><p style="color: rgb(255, 0, 0)"> + Cette méthode n'est pas vraiment recommandée +</p> + +<p class="toto"> + Alors que ça, c'est mieux. +</p></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">.toto { + color: rgb(0, 255, 0); +}</pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples","300","300")}}</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "dom.html#the-style-attribute", "style")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Aucune modification depuis la dernière dérivation de {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "dom.html#the-style-attribute", "style")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Dérivée de {{SpecName('HTML WHATWG')}}, aucune modification depuis {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "dom.html#the-style-attribute", "style")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Dérivée de {{SpecName('HTML WHATWG')}}. Depuis {{SpecName("HTML4.01")}}, cet attribut est désormais un attribut universel.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'present/styles.html#h-14.2.2', 'style')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Cet attribut est pris en charge par tous les éléments à l'exception de {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, et {{HTMLElement("title")}}.</td> + </tr> + <tr> + <td>{{SpecName("CSS3 Style", "", "")}}</td> + <td>{{Spec2("CSS3 Style")}}</td> + <td>Définition du contenu pour l'attribut <code>style</code>.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("html.global_attributes.style")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/HTML/Attributs_universels">Les différents attributs universels</a></li> +</ul> diff --git a/files/fr/web/html/global_attributes/tabindex/index.html b/files/fr/web/html/global_attributes/tabindex/index.html new file mode 100644 index 0000000000..87aa27e5cc --- /dev/null +++ b/files/fr/web/html/global_attributes/tabindex/index.html @@ -0,0 +1,115 @@ +--- +title: tabindex +slug: Web/HTML/Attributs_universels/tabindex +tags: + - Attribut + - Attribut universel + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/tabindex +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p>L'<a href="/fr/docs/Web/HTML/Attributs_universels">attribut universel</a> <code><strong>tabindex</strong></code> est un entier indiquant si l'élément peut capturer le focus et si c'est le cas, dans quel ordre il le capture lors de la navigation au clavier (généralement à l'aide de la touche <kbd>Tab</kbd>). Si plusieurs éléments partagent la même valeur d'attribut <strong><code>tabindex</code></strong>, leur ordre sera calculé en fonction de leur position dans le document.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/attribute-tabindex.html","tabbed-standard")}}</div> + +<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> + +<p>Cet attribut peut prendre l'une des valeurs suivantes :</p> + +<ul> + <li>Une valeur négative : l'élément peut capturer le focus mais ne peut pas être atteint via la navigation au clavier ; + <div class="note"> + <p><strong>Note :</strong> Cette valeur peut être utile lorsqu'on a un contenu situé en dehors de l'écran qui doit apparaître lors d'un évènement donné. Il ne sera pas possible d'y passer le focus au clavier mais on pourra le faire avec <a href="/fr/docs/Web/API/HTMLElement/focus">la méthode <code>focus()</code></a>.</p> + </div> + </li> + <li><code>0</code> : l'élément peut capturer le focus et être atteint via la navigation au clavier, cependant son ordre relatif est défini par la plateforme, généralement selon l'ordre des éléments du DOM ; + <div class="warning"> + <p><strong>Attention !</strong> Le positionnement CSS n'aura pas d'impact sur le <code>taborder</code>. Le positionnement n'a qu'un impact visuel, l'ordre des tabulations correspond à l'ordre du DOM.</p> + </div> + </li> + <li>Une valeur positive : l'élément peut capturer le focus et peut être atteint via la navigation au clavier, l'ordre relatif dans la navigation est défini par la valeur de l'attribut. Les navigations seront parcourues dans l'ordre croissant. + <div class="warning"> + <p><strong>Attention !</strong> Il n'est pas recommandé de fournir des valeurs positives pour les éléments car cela peut être source de confusion, notamment pour les personnes qui utilisent des technologies d'assistance. Il est préférable d'organiser les éléments dans un ordre correct au niveau du DOM.</p> + </div> + </li> +</ul> + +<p>Si on utilise l'attribut <code>tabindex</code> sur un élément {{HTMLElement("div")}}, on ne pourra pas naviguer dans le contenu de cet élément avec les flèches du clavier, sauf si <code>tabindex</code> est également utilisé sur le contenu. Pour observer ce comportement, vous pouvez utiliser <a href="https://jsfiddle.net/jainakshay/0b2q4Lgv/">cet exemple JSFiddle</a>.</p> + +<div class="note"> +<p><strong>Note :</strong> La valeur maximale pour <code>tabindex</code> est fixée à 32767 par HTML4. Sa valeur par défaut est 0 pour les éléments qui peuvent recevoir le focus et -1 pour les autres.</p> +</div> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><button tabindex="1">Un bouton</button> +<textarea>Saisir un texte</textarea> +<button tabindex="0">Un autre bouton</button> +<button tabindex="1">Et un troisième</button></pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples","200","300")}}</p> + +<h2 id="Accessibilité">Accessibilité</h2> + +<p>Il faut éviter d'utiliser l'attribut <code>tabindex</code> avec du contenu <a href="/fr/docs/Web/Guide/HTML/Catégories_de_contenu#Contenu_interactif">non-interactif</a> si on souhaite uniquement rendre cet élément accessible au clavier (par exemple en voulant utiliser un élément {{HTMLElement("div")}} plutôt qu'un élément {{HTMLElement("button")}}).</p> + +<p>Les composants rendus interactifs par cette méthode ne feront pas partie de l'<a href="/fr/Apprendre/a11y/What_is_accessibility#Accessibility_APIs">arbre d'accessibilité</a> et ne pourront pas être analysés par les technologies d'assistance. Le contenu devrait être décrit sémantiquement avec des éléments interactifs ({{HTMLElement("a")}}, {{HTMLElement("button")}}, {{HTMLElement("details")}}, {{HTMLElement("input")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}}, etc.). En effet, ces éléments disposent nativement de rôles et d'états qui peuvent être utilisées par les API d'accessibilité (il faut sinon les gérer via <a href="/fr/docs/Accessibilité/ARIA">ARIA</a>).</p> + +<ul> + <li><a href="https://developer.paciellogroup.com/blog/2014/08/using-the-tabindex-attribute/">Utiliser l'attribut <code>tabindex</code>|<em>The Paciello Group</em> (en anglais)</a></li> +</ul> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', "interaction.html#attr-tabindex", "tabindex")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Aucune modification depuis la dernière dérivation, {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "editing.html#the-tabindex-attribute", "tabindex")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Dérivée de {{SpecName('HTML WHATWG')}}, aucune modification depuis {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "editing.html#attr-tabindex", "tabindex")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Dérivée de {{SpecName('HTML WHATWG')}}. À partir de {{SpecName("HTML4.01")}}, l'attribut est désormais supporté sur tous les éléments, c'est un attribut global à part entière.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/forms.html#adef-tabindex', 'tabindex')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Attribut uniquement supporté sur {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}}, et {{HTMLElement("textarea")}}.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("html.global_attributes.tabindex")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>La propriété {{domxref("HTMLElement.tabIndex")}} qui reflète cet attribut.</li> + <li><a href="/fr/docs/Web/HTML/Attributs_universels">Les différents attributs universels</a></li> + <li><a href="https://adrianroselli.com/2014/11/dont-use-tabindex-greater-than-0.html">Ce billet en anglais sur l'accessibilité et <code>tabindex</code></a> écrit par Adrian Roselli</li> + <li><code><a href="/fr/docs/Web/API/Document/hasFocus">Document.hasFocus()</a></code></li> +</ul> diff --git a/files/fr/web/html/global_attributes/title/index.html b/files/fr/web/html/global_attributes/title/index.html new file mode 100644 index 0000000000..06f0feee8d --- /dev/null +++ b/files/fr/web/html/global_attributes/title/index.html @@ -0,0 +1,129 @@ +--- +title: title +slug: Web/HTML/Attributs_universels/title +tags: + - Attribut + - Attribut universel + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/title +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p>L'<a href="/fr/docs/Web/HTML/Attributs_universels">attribut universel</a> <code><strong>title</strong></code> contient un texte d'information relatif à l'élément auquel il est rattaché.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/attribute-title.html","tabbed-shorter")}}</div> + +<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> + +<p>On le trouve généralement utilisé pour :</p> + +<ul> + <li>Fournir un libellé pour les éléments {{HTMLElement("iframe")}}</li> + <li>Fournir un libellé associé automatiquement à un élément {{HTMLElement("input")}}</li> + <li>Fournir un libellé pour les contrôles des <a href="/fr/docs/Web/HTML/Element/table">tableaux de données</a></li> +</ul> + +<p>Si cet attribut est absent, cela signifie que le titre de l'élément ancêtre le plus proche est toujours pertinent (et pourrait être utilisé comme bulle d'information pour l'élément courant). Si cet attribut vaut la chaîne vide, cela signifie explicitement que la valeur du titre de l'ancêtre le plus proche n'est pas pertinent (et ne devrait pas être utilisé comme bulle d'information).</p> + +<p>Une sémantique différente est définie pour cet attribut lorsqu'il est utilisé avec les éléments {{HTMLElement("link")}}, {{HTMLElement("abbr")}}, {{HTMLElement("input")}} et {{HTMLElement("menuitem")}}.</p> + +<h2 id="Titre_sur_plusieurs_lignes">Titre sur plusieurs lignes</h2> + +<p>Un attribut <code>title</code> peut contenir plusieurs lignes. Chaque caractère <code>U+000A LINE FEED</code> (<code>LF</code>) représentera un saut de ligne. Le fragment de code suivant représente donc un élément dont le titre est écrit sur deux lignes.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><p> + Les sauts de ligne au sein d'un attribut title doivent être pris en compte : + <abbr title="Ceci est un + titre sur plusieurs lignes">Exemple</abbr>. +</p> +</pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Titre_sur_plusieurs_lignes")}}</p> + +<h2 id="Héritage_de_title">Héritage de <code>title</code></h2> + +<p>Lorsqu'un élément ne possède pas d'attribut <code>title</code>, il hérite de la valeur de l'attribut pour l'élément parent (qui peut également l'hériter de son parent, etc.).</p> + +<p>Si cet attribut est défini avec la chaîne vide, cela signifie que le titre provenant d'un élément parent n'est pas pertinent et qu'il ne devrait pas être utilisé.</p> + +<h3 id="HTML_2">HTML</h3> + +<pre class="brush: html"><div title="Une bubulle"> + <p>Si vous survolez cet élément, il y aura une bulle d'information "Une bubulle".</p> + <p title="">Et au-dessus de celui-ci, aucune info.</p> +</div></pre> + +<h3 id="Résultat_2">Résultat</h3> + +<p>{{EmbedLiveSample("Héritage_de_title")}}</p> + +<h2 id="Accessibilité">Accessibilité</h2> + +<p>L'attribut <code>title</code> est très problématique pour :</p> + +<ul> + <li>Les personnes qui utilisent des appareils à interface tactile</li> + <li>Les personnes qui naviguent au clavier</li> + <li>Les personnes qui naviguent en utilisant des outils d'assistance comme des lecteurs d'écran ou des loupes logicielles</li> + <li>Les personnes souffrant de troubles musculaires ou cognitifs.</li> +</ul> + +<p>Cela est dû à une prise en charge hétérogène de la part des navigateurs. Si on souhaite avoir une bulle d'information, mieux vaudra <a href="https://inclusive-components.design/tooltips-toggletips/">utiliser une technique plus accessible</a>.</p> + +<ul> + <li><a href="https://developer.paciellogroup.com/blog/2013/01/using-the-html-title-attribute-updated/">Utiliser l'attribut HTML <code>title</code> - The Paciello Group (en anglais)</a></li> + <li><em><a href="https://inclusive-components.design/tooltips-toggletips/">Tooltips & Toggletips - Inclusive Components</a></em><a href="https://inclusive-components.design/tooltips-toggletips/"> (en anglais)</a></li> + <li><a href="https://www.24a11y.com/2017/the-trials-and-tribulations-of-the-title-attribute/"><em>The Trials and Tribulations of the Title Attribute</em> (en anglais) - 24 Accessibility</a></li> +</ul> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', "elements.html#the-title-attribute", "title")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Aucune modification depuis {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "dom.html#the-title-attribute", "title")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Dérivation de {{SpecName('HTML WHATWG')}}, aucune modification de {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "dom.html#the-title-attribute", "title")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Dérivation de {{SpecName('HTML WHATWG')}}. À partir de {{SpecName("HTML4.01")}}, <code>title</code> est désormais un attribut universel.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#adef-title', 'title')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Pris en charge par l'ensemble des éléments sauf {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}} et {{HTMLElement("title")}}.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("html.global_attributes.title")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/HTML/Attributs_universels">Les différents attributs universels</a></li> + <li>{{domxref("HTMLElement.title")}} that reflects this attribute.</li> +</ul> diff --git a/files/fr/web/html/global_attributes/translate/index.html b/files/fr/web/html/global_attributes/translate/index.html new file mode 100644 index 0000000000..215800e5ff --- /dev/null +++ b/files/fr/web/html/global_attributes/translate/index.html @@ -0,0 +1,71 @@ +--- +title: translate +slug: Web/HTML/Attributs_universels/translate +tags: + - Attribut + - Attribut universel + - Experimental + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/translate +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p>L'<a href="/fr/docs/Web/HTML/Attributs_universels">attribut universel</a> <code><strong>translate</strong></code> est un attribut à valeur contrainte qui peut être utilisé afin d'indiquer si les valeurs d'attribut d'un élément et si les valeurs de ses nœuds {{domxref("Text")}} descendants doivent être traduits lorsque la page est localisée ou s'il faut les laisser inchangés. Les valeurs autorisées pour cet attribut sont :</p> + +<ul> + <li><code>"yes"</code> (ou une chaîne vide), qui indique que l'élément devrait être traduit lorsque la page est localisée ;</li> + <li><code>"no"</code>, qui indique que l'élément ne doit pas être traduit.</li> +</ul> + +<div class="blockIndicator note"> +<p><strong>Note :</strong> Bien que la prise en charge de cet attribut ne soit pas homogène pour les navigateurs, celui-ci est pris en compte par les outils de traduction automatique (Google Translate par exemple) et les outils de traduction utilisés par les traducteurs. Aussi, cet attribut doit être utilisé par les auteurs web afin d'indiquer correctement le contenu qui ne devrait pas être traduit.</p> +</div> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><label for="postcode" translate="no"> + <span translate="yes">Enter your postcode to find the nearest store</span> +</label> +<input id="postcode" type="text"></pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples","250","250")}}</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "dom.html#attr-translate", "translate")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Aucun changement depuis la dernière dérivation {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "dom.html#the-translate-attribute", "translate")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Dérivée de {{SpecName('HTML WHATWG')}}, définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("html.global_attributes.translate")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/HTML/Attributs_universels">Les différents attributs universels</a></li> + <li>La propriété {{domxref("HTMLElement.translate")}} qui reflète cet attribut.</li> +</ul> diff --git a/files/fr/web/html/global_attributes/x-ms-acceleratorkey/index.html b/files/fr/web/html/global_attributes/x-ms-acceleratorkey/index.html new file mode 100644 index 0000000000..f03780b703 --- /dev/null +++ b/files/fr/web/html/global_attributes/x-ms-acceleratorkey/index.html @@ -0,0 +1,45 @@ +--- +title: x-ms-acceleratorkey +slug: Web/HTML/Attributs_universels/x-ms-acceleratorkey +tags: + - Attribut + - HTML + - Non-standard + - Reference +translation_of: Web/HTML/Global_attributes/x-ms-acceleratorkey +--- +<div>{{HTMLSidebar("Global_attributes")}}{{Non-standard_Header}}</div> + +<p>La propriété <code><strong>x-ms-acceleratorkey</strong></code> fournit une méthode pour déclarer si une touche d'accélération a été affectée à un élément.</p> + +<div class="blockIndicator note"> +<p><strong>Note :</strong> Pour fournir un raccourci clavier pour un élément qui n'utilise pas JavaScript, on utilisera l'attribut <code><a href="/fr/docs/Web/HTML/Attributs_universels/accesskey">accesskey</a></code>.</p> +</div> + +<p>{{Non-standard_Inline}} Cette propriété non-standard est spécifique à Internet Explorer et à Microsoft Edge.</p> + +<p>La propriété <code>x-ms-acceleratorkey</code> permet d'indiquer sur l'arbre d'accessibilité (utilisé par les outils d'assistance tels que les lecteurs d'écran) qu'une touche d'accélération existe. Cet attribut ne fournit pas le comportement déclenché par cette touche. Il est nécessaire de fournir les gestionnaires d'évènements associés tels que <code>onkeypress</code>, <code>onkeydown</code> ou <code>onkeyup</code> afin de traiter l'utilisation de la touche dans l'application.</p> + + + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="brush: html"><button x-ms-acceleratorkey="string">...</button></pre> + +<h2 id="Valeur">Valeur</h2> + +<p>Cette propriété peut être une chaîne de caractères avec le nom de la touche accélératrice :</p> + +<ul> + <li><code>"Ctrl+B"</code> pour indiquer la combinaison des touches <kbd>Ctrl</kbd> et <kbd>B</kbd>.</li> + <li><code>"J"</code> pour indiquer la touche <kbd>J</kbd> uniquement.</li> + <li><code>"Ctrl+; then K"</code> (cf. <a href="https://help.manuscript.com/7558/fogbugz-keyboard-shortcuts#For_Your_Server_or_non-Ocelot_Keyboard_Shortcuts">FogBugz’s old keyboard mode</a>). Une approche plus compliquée mais qui ne remplace pas les raccourcis clavier fournis par le navigateur ou le système d'exploitation.</li> +</ul> + +<h2 id="See_Also" name="See_Also">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Mozilla/Tech/XUL/Propri%C3%A9t%C3%A9s/accessKey">L'attribut universel <code>accesskey</code></a></li> + <li><a href="/fr/docs/Web/CSS/-ms-accelerator">La propriété CSS spécifique <code>-ms-accelerator</code></a></li> + <li><a href="/fr/docs/Web/API/Microsoft_API_extensions">Les extensions spécifiques à Microsoft</a></li> +</ul> diff --git a/files/fr/web/html/global_attributes/x-ms-format-detection/index.html b/files/fr/web/html/global_attributes/x-ms-format-detection/index.html new file mode 100644 index 0000000000..f11309e1b5 --- /dev/null +++ b/files/fr/web/html/global_attributes/x-ms-format-detection/index.html @@ -0,0 +1,60 @@ +--- +title: x-ms-format-detection +slug: Web/HTML/Attributs_universels/x-ms-format-detection +tags: + - Attribut + - HTML + - Non-standard + - Reference +translation_of: Web/HTML/Global_attributes/x-ms-format-detection +--- +<div>{{HTMLSidebar("Global_attributes")}}{{Non-standard_Header}}</div> + +<p>L'attribut <code><strong>x-ms-format-detection</strong></code> détermine si le format de la donnée dans le contenu est détectée automatiquement et, lorsqu'elle est trouvée, est convertie en un lien sur lequel on peut cliquer.</p> + +<div class="blockIndicator note"> +<p><strong>Note :</strong> Les liens créés grâce à la détection de format n'apparaissent pas dans le DOM.</p> +</div> + +<p>{{Non-standard_inline}}Cette propriété est spécifique à Internet Explorer et à Microsoft Edge.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="brush: html"><html x-ms-format-detection="none"> +</pre> + +<h2 id="Valeurs">Valeurs</h2> + +<p>Cet attribut peut prendre une chaîne de caractères parmi les suivantes comme valeur :</p> + +<dl> + <dt><code>all</code></dt> + <dd>Tous les formats de donnée pris en charge sont détectés.</dd> + <dt><code>none</code></dt> + <dd>La détection de format est désactivée.</dd> + <dt><code>phone</code></dt> + <dd>Seuls les numéros de téléphone sont détectés.</dd> +</dl> + +<div class="note"> +<p><strong>Note :</strong> Les liens créés via la détection de format n'auront pas d'impact sur le contenu ou sur la disposition du DOM.</p> +</div> + +<h2 id="Exemples">Exemples</h2> + +<p>Pour désactiver la détection automatique sous certaines conditions, on pourra par exemple utiliser JavaScript afin d'ajouter <code>x-ms-format-detection</code> sur les éléments qu'on soit sur un mobile (détection activée) ou sur un ordinateur de bureau (détection désactivée) :</p> + +<pre class="brush: js">if (window.matchMedia('(min-width: 1024px)').matches) { + var e = document.getElementsByClassName("phone"); + for (i = 0; i < e.length; i++) + e[i].setAttribute("x-ms-format-detection", "none"); +} +</pre> + +<p>Dans cet exemple, les numéros de téléphone conservent la mise en forme tant que la zone d'affichage (<em>viewport</em>) est moins large que 1024 pixels.</p> + +<h2 id="See_Also" name="See_Also">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/API/Microsoft_Extensions">Les extensions spécifiques à Microsoft</a></li> +</ul> |