diff options
Diffstat (limited to 'files/de/web/html/globale_attribute')
18 files changed, 1787 insertions, 0 deletions
diff --git a/files/de/web/html/globale_attribute/accesskey/index.html b/files/de/web/html/globale_attribute/accesskey/index.html new file mode 100644 index 0000000000..2fff85d11a --- /dev/null +++ b/files/de/web/html/globale_attribute/accesskey/index.html @@ -0,0 +1,116 @@ +--- +title: accesskey +slug: Web/HTML/Globale_Attribute/accesskey +tags: + - Globale Attribute + - HTML + - Referenz +translation_of: Web/HTML/Global_attributes/accesskey +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p>Das <a href="/de/docs/Web/HTML/Globale_Attribute">globale Attribut</a> <strong>accesskey</strong> definiert ein Tastaturkürzel für das aktuelle Element. Der Attributwert muss aus einem einzelnen, druckbarem Zeichen bestehen (dies beinhaltet Zeichen mit Umlauten und andere Zeichen, die über die Tastatur eingegeben werden können).</p> + +<div class="note"> +<p><strong>Hinweis</strong>: Die WHATWG-Spezifikation besagt, dass mehrere mit Leerzeichen voneinander getrennte Zeichen angegeben werden können und der Browser davon das erste unterstützte verwenden wird. Das funktioniert jedoch in den meisten Browsern nicht. In Internet Explorer und Edge wird das erste unterstützte Zeichen jedoch ohne Probleme verwendet, sofern es keine Konflikte mit anderen Befehlen gibt.</p> +</div> + +<p>Je nach Browser und Betriebssystem unterscheidet sich die Tastaturkombination zur Ansteuerung des <strong>accesskey</strong>.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th> </th> + <th>Windows</th> + <th>Linux</th> + <th>Mac</th> + </tr> + <tr> + <th>Firefox</th> + <td colspan="2" rowspan="1" style="text-align: center;"><kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd><em>key</em></kbd></td> + <td>Firefox 57+: <kbd>Control</kbd> + <kbd>Option</kbd> + <kbd><em>key</em></kbd> -ODER- <kbd>Control</kbd> + <kbd>Alt</kbd> + <kbd><em>key</em></kbd><br> + Firefox 14–56: <kbd>Control</kbd> + <kbd>Alt</kbd> + <kbd><em>key</em></kbd><br> + Firefox < 14, <kbd>Control</kbd> + <kbd><em>key</em></kbd></td> + </tr> + <tr> + <th>Internet Explorer</th> + <td><kbd>Alt</kbd> + <kbd><em>key</em></kbd></td> + <td colspan="2">N/V</td> + </tr> + <tr> + <th>Google Chrome</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>Safari</th> + <td><kbd>Alt</kbd> + <kbd><em>key</em></kbd></td> + <td>N/V</td> + <td><kbd>Control</kbd> + <kbd>Alt</kbd> + <kbd><em>key</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"> + <p><kbd>Shift</kbd> + <kbd>Esc</kbd> öffnet zunächst eine Liste der Inhalte, die über <strong>accesskey</strong> erreichbar sind und erlaubt eine Ansteuerung über <kbd><em>key</em></kbd></p> + </td> + </tr> + </tbody> +</table> + +<p>Beachte, dass die Tastaturkombination in Firefox über die Einstellungen angepasst werden kann.</p> + +<h2 id="Spezifikation">Spezifikation</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + <tr> + <td>{{SpecName('HTML5.2', "editing.html#the-accesskey-attribute", "accesskey")}}</td> + <td>{{Spec2('HTML5.2')}}</td> + <td>Beschreibt ein realistischeres Verhalten der tatsächlichen Implementierungen.</td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "interaction.html#the-accesskey-attribute", "accesskey")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Keine Änderung gegenüber {{SpecName('HTML5.1')}}.</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "editing.html#the-accesskey-attribute", "accesskey")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Keine Änderung gegenüber {{SpecName('HTML5 W3C')}}.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "editing.html#the-accesskey-attribute", "accesskey")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Ab {{SpecName('HTML4.01')}} können mehrere Zeichen als <code>accesskey</code> gesetzt werden. Zudem kann ein <code>accesskey</code> an jedem Element gesetzt werden.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', "interact/forms.html#h-17.11.2", "accesskey")}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Nur unterstützt an {{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("label") }}, {{ HTMLElement("legend") }} und {{ HTMLElement("textarea") }}</td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + + + +<p>{{Compat("html.global_attributes.accesskey")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{domxref("Element.accessKey")}}</li> + <li>{{domxref("HTMLElement.accessKeyLabel")}}</li> + <li><a href="/de/docs/Web/HTML/Globale_Attribute">Globale Attribute</a>.</li> +</ul> diff --git a/files/de/web/html/globale_attribute/autocapitalize/index.html b/files/de/web/html/globale_attribute/autocapitalize/index.html new file mode 100644 index 0000000000..33eb99d131 --- /dev/null +++ b/files/de/web/html/globale_attribute/autocapitalize/index.html @@ -0,0 +1,46 @@ +--- +title: autocapitalize +slug: Web/HTML/Globale_Attribute/autocapitalize +tags: + - Automatische Großschreibung + - Globales Attribut + - HTML +translation_of: Web/HTML/Global_attributes/autocapitalize +--- +<p>{{HTMLSidebar("Global_attributes")}}</p> + +<p>Das <a href="/en-US/docs/Web/HTML/Global_attributes">Globale Attribut</a> <code><strong>autocapitalize</strong></code> ist ein Aufzählungsattribut, welches kontrolliert ob und wie Text-Input automatisch großgeschrieben wird, während der Nutzer etwas einfügt oder editiert. Das Attribut muss einen der folgenden Werte annehmen:</p> + +<ul> + <li><code>off</code> oder <code>none</code>: Es wird keine automatische Großschreibung benutzt (alle Buchstaben sind automatisch kleingeschrieben) </li> + <li><code>on</code> oder <code>sentences</code>: Der erste Buchstabe jedes Satzes wird zu einem großgeschriebenen Buchstaben transformiert. Die restlichen Buchstaben werden kleingeschrieben.</li> + <li><code>words</code>: Der erste Buchstabe jedes Wortes wird zu einem großgeschriebenen Buchstaben transformiert. Die restlichen Buchstaben werden kleingeschrieben.</li> + <li><code>characters</code>: Alle Buchstaben sind automatisch großgeschrieben. </li> +</ul> + +<p>Das <code>autocapitalize</code> Attribut hat keine Auswirkungen auf das Verhalten eines physikalischen Keyboards beim Tippen. Aber es hat Auswirkungen auf das Verhalten von anderen Input Mechanismen, wie virtuellen Keyboards auf Mobilfunkgeräten oder Sprachinput. Diese Mechanismen helfen Nutzern oft dabei, den ersten Buchstaben eines Satzes automatisch großzuschreiben. Das <code>autocapitalize</code> Attribut ermöglicht es Autoren dieses Verhalten auf einer per-Element Basis nicht zu berücksichtigen.</p> + +<p>Das <code>autocapitalize</code> Attribut führt nie zu automatischer Großschreibung bei einem {{HTMLElement("input")}} Element mit einem {{htmlattrxref("type", "input")}} Attribut, dessen Wert <code>url</code>, <code>email</code>, oder <code>password</code> ist.</p> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "interaction.html#autocapitalization", "autocapitalize")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + + + +<p>{{Compat("html.global_attributes.autocapitalize")}}</p> diff --git a/files/de/web/html/globale_attribute/class/index.html b/files/de/web/html/globale_attribute/class/index.html new file mode 100644 index 0000000000..cf2366a55f --- /dev/null +++ b/files/de/web/html/globale_attribute/class/index.html @@ -0,0 +1,109 @@ +--- +title: class +slug: Web/HTML/Globale_Attribute/class +tags: + - Klassen Globale Attribute +translation_of: Web/HTML/Global_attributes/class +--- +<p class="note">{{HTMLSidebar("Global_attributes")}}</p> + +<p>Das <a href="/en-US/docs/Web/HTML/Global_attributes">Globale Attribut</a> <strong>class</strong> ist eine durch Leerzeichen separierte Liste von Klassen dieses Elements. Klassen erlauben es CSS und Javascript auf spezifische Elemente über <a href="/En/CSS/Class_selectors">Klassenselektoren</a> oder DOM-Methoden {{domxref("document.getElementsByClassName")}} zuzugreifen.</p> + +<p>Obwohl die Spezifikation keine Anforderung an die Benennung von Klassen stellt, sollten Webentwickler darauf achten, dass der semantische Zweck des Elements beschrieben wird, und gerade nicht die Darstellungseigenschaften.</p> + +<p>Beispiel:<br> + Attribut <em>hervorgehoben</em> , um einen hervorgehobenen Textteil zu beschreiben aber nicht als <em>italics</em>.</p> + +<p>"Semantische" Namen bleiben logisch (zutreffend), auch wenn sich die Darstellung der Webseite ändert (wenn also z.B. Hervorhebungen anstatt <em>kursiv</em> nun farbig in braun dargestellt werden).</p> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Bemerkung</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "elements.html#classes", "class")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Keine Änderungen zum letzten Snapshot, {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "elements.html#classes", "class")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot von {{SpecName('HTML WHATWG')}}, keine Änderung zu {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "elements.html#classes", "class")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Snapshot von {{SpecName('HTML WHATWG')}}. Von {{SpecName('HTML4.01')}}, <strong>class</strong> ist jetzt ein echtes Globales Attribut.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', "struct/global.html#h-7.5.2", "class")}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Unterstützt alle Elemente außer {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, and {{HTMLElement("title")}}.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }} [1]</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }} [1]</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] <strong>class</strong> ist ein echtes Globales Attribut erst seit Firefox 32.</p> + +<h2 id="Weiterführende_Links">Weiterführende Links</h2> + +<ul> + <li>All <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>.</li> +</ul> diff --git a/files/de/web/html/globale_attribute/contenteditable/index.html b/files/de/web/html/globale_attribute/contenteditable/index.html new file mode 100644 index 0000000000..916eaf2073 --- /dev/null +++ b/files/de/web/html/globale_attribute/contenteditable/index.html @@ -0,0 +1,114 @@ +--- +title: contenteditable +slug: Web/HTML/Globale_Attribute/contenteditable +tags: + - Globale Attribute + - HTML + - Referenz + - Textbearbeitung + - Texteingabe + - contenteditable +translation_of: Web/HTML/Global_attributes/contenteditable +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p>Das <a href="/de/docs/Web/HTML/Globale_Attribute">globale Attribut</a> <code><strong>contenteditable</strong></code> ist ein Aufzählungsattribut, das angibt, ob das Element für den Benutzer bearbeitbar sein soll. Das Attribut muss eines der folgenden Werte annehmen:</p> + +<ul> + <li><code>true</code> oder eine <em>leere Zeichenkette</em> geben an, dass das Element editierbar sein soll;</li> + <li><code>false</code> gibt an, dass das Element nicht editierbar sein darf..</li> +</ul> + +<p>Wenn das Attribut nicht gesetzt ist, wird der Standardwert vom Elternelement <em>geerbt</em>.</p> + +<p>Das Attribut ist ein <em>Aufzählungs-</em> und kein <em>Boolean</em>-Attribut. Das bedeutet, dass eines der Werte <code>true</code>, <code>false</code> oder die leere Zeichenkette erforderlich sind und eine abgekürzte Schreibweise wie <code><label contenteditable>Example Label</label></code> nicht erlaubt ist. Die richtige Verwendung ist <code><label contenteditable="true">Example Label</label></code>.</p> + +<p>Die Farbe der {{Glossary("caret", "Texteinfügemarke")}} kann mit der CSS-Eigenschaft {{cssxref("caret-color")}} gesetzt werden.</p> + +<h2 id="Spezifikation">Spezifikation</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "editing.html#attr-contenteditable", "contenteditable")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Keine Änderung seit letztem Snapshot, {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "editing.html#attr-contenteditable", "contenteditable")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot von {{SpecName('HTML WHATWG')}}, keine Änderung seit {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "editing.html#attr-contenteditable", "contenteditable")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Snapshot von {{SpecName('HTML WHATWG')}}, ursprüngliche Definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<p>{{ CompatibilityTable }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown }}</td> + <td>{{ CompatGeckoDesktop("1.9") }}</td> + <td>{{ CompatVersionUnknown }}</td> + <td>{{ CompatVersionUnknown }}</td> + <td>{{ CompatVersionUnknown }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android Webview</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown }}</td> + <td>{{ CompatVersionUnknown }}</td> + <td>{{ CompatGeckoMobile("1.9") }}</td> + <td>{{ CompatVersionUnknown }}</td> + <td>{{ CompatVersionUnknown }}</td> + <td>{{ CompatVersionUnknown }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/de/docs/Web/Guide/HTML/Content_Editable">Inhalt bearbeitbar machen</a></li> + <li><a href="/de/docs/Web/HTML/Globale_Attribute">Globale Attribute</a></li> + <li>{{domxref("HTMLElement.contentEditable")}} and {{domxref("HTMLElement.isContentEditable")}}</li> + <li>The CSS {{cssxref("caret-color")}} property</li> +</ul> diff --git a/files/de/web/html/globale_attribute/dir/index.html b/files/de/web/html/globale_attribute/dir/index.html new file mode 100644 index 0000000000..28ed6389ac --- /dev/null +++ b/files/de/web/html/globale_attribute/dir/index.html @@ -0,0 +1,85 @@ +--- +title: dir +slug: Web/HTML/Globale_Attribute/dir +tags: + - Globales Attribut + - HTML + - Referenz + - Textrichtung +translation_of: Web/HTML/Global_attributes/dir +--- +<p>{{HTMLSidebar("Global_attributes")}}</p> + +<p>Das globale Attribut <strong>dir</strong> ist ein Attribut, das die Richtung des Elementtextes angibt. Es kann folgende Werte haben:</p> + +<ul> + <li><code>ltr</code>, von <strong>links nach rechts</strong> (englisch: <em>left to right</em>). Wird für Sprachen, die von links nach rechts geschrieben werden (z.B. deutsch) verwendet;</li> + <li><code>rtl</code>, von <strong>rechts nach links</strong> (englisch: <em>right to left</em>). Wird für Sprachen, die von rechts nach links geschrieben werden (z.B. arabisch) verwendet;</li> + <li><code>auto</code>, lässt den Browser des Nutzers entscheiden. Es benutzt einen simplen Algorithmus, indem es die Zeichen im Element einliest, bis es ein Zeichen mit einer bekannten Richtung findet und dann diese Richtung auf das gesamte Element anwendet.</li> +</ul> + +<div class="note"> +<p><strong>Nutzungsinformationen</strong></p> + +<p>Dieses Attribut ist verpflichtend für das {{ HTMLElement("bdo") }}-Element, bei dem es eine andere Bedeutung hat.</p> + +<ul> + <li> + <p>Dieses Attribut wird nicht vom {{ HTMLElement("bdi") }}-Element geerbt. Sein Standardwert ist <code>auto</code>.</p> + </li> + <li> + <p>Dieses Attribut kann von den CSS-Eigenschaften {{ cssxref("direction") }} and {{ cssxref("unicode-bidi") }} überschrieben werden, sofern eine CSS-Seite eingebunden ist und das Element diese Eigenschaften unterstützt.</p> + </li> + <li> + <p>Da die Richtung eines Textes sprachlich zu seinem Inhalt und nicht zu seiner Darstellung gehört, ist es zu empfehlen, dass Web-Entwickler - sofern möglich - dieses Attribut anstatt der zugehörigen CSS-Eigenschaft zu verwenden. So kann der Text auch in einem Browser, der die CSS-Eigenschaften nicht unterstützt oder in dem CSS deaktiviert ist, korrekt dargestellt werden.</p> + </li> + <li> + <p>Der <code>auto</code> Wert sollte für Daten mit einer unbekannten Richtung verwendet werden, wie zum Beispiel Daten aus Benutzereingaben, möglicherweise in einer Datenbank gespeichert.</p> + </li> +</ul> +</div> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "dom.html#the-dir-attribute", "dir")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "dom.html#the-dir-attribute", "dir")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "dom.html#the-dir-attribute", "dir")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', "dirlang.html#h-8.2", "dir")}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2> + + + +<p>{{Compat("html.global_attributes.dir")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>Alle <a href="/de-DE/docs/Web/HTML/Global_attributes">globalen Attribute</a>.</li> + <li>{{domxref("HTMLElement.dir")}}, das auf dieses Attribut zurückgreift</li> +</ul> diff --git a/files/de/web/html/globale_attribute/draggable/index.html b/files/de/web/html/globale_attribute/draggable/index.html new file mode 100644 index 0000000000..3a0dfd105e --- /dev/null +++ b/files/de/web/html/globale_attribute/draggable/index.html @@ -0,0 +1,104 @@ +--- +title: draggable +slug: Web/HTML/Globale_Attribute/draggable +tags: + - Experimental + - Global attributes + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/draggable +--- +<p>{{HTMLSidebar("Global_attributes")}} {{SeeCompatTable}}</p> + +<p>Das globale Attribut <strong>draggable</strong> ist ein Attribut, dass zeigt, ob das entsprechende Element auf einen anderen Ort gezogen werden kann. Es unterstützt die {{domxref("HTML_Drag_and_Drop_API","HTML Drag and Drop API")}}. Folgende Werte sind erlaubt:</p> + +<ul> + <li><span style="font-family: courier new;">true</span>, das Element kann <em>gedraggt</em> werden</li> + <li><span style="font-family: courier new;">false</span>, das Element kann nicht <em>gedraggt </em>werden</li> +</ul> + +<p>Wurde das Attribut nicht gesetzt, wird als Wert <code>auto</code> angenommen. Das Drag-Verhalten des Elements wird dann durch den Browser bestimmt. </p> + +<p>Bei diesem Attribut handelt es sich nicht um einen <em>booleschen </em>Wert, <code>true</code> oder <code>false</code> muss explizit angegeben werden. Eine Kurzform wie beispielsweise <code><label draggable>Beispiel Label</label></code> ist nicht zulässig. Die korrekte Verwendung ist <code><label draggable="true">Beispiel Label</label></code>.</p> + +<p>Nativ kann das Attribut <strong>draggable </strong>nur für Textauswahl, Bilder und Links verwendet werden. Bei allen anderen Elementen muss das<strong> {{domxref('GlobalEventHandlers.ondragstart','ondragstart')}}</strong><code><strong>-</strong></code>Event gesetzt werden, um Drag & Drop Mechanismen verwendet zu können. <a href="/en-US/docs/DragDrop/Drag_Operations">Dieses Beispiel</a> (englisch) enthält eine ausführlichere Beschreibung der Drag & Drop API und deren Verwendung. </p> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "interaction.html#the-draggable-attribute", "draggable")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Keine Änderung seit dem letztem Snapshot, {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "editing.html#the-draggable-attribute", "draggable")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot von {{SpecName('HTML WHATWG')}}, initiale Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Eigenschaft</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Grundlegende Funktionalität</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatGeckoDesktop("1.8.1") }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Eigenschaft</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Grundlegende Funktionalität</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatGeckoMobile("1.8.1") }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>Alle <a href="de/docs/Web/HTML/Globale_Attribute">globalen Attribute</a>.</li> +</ul> diff --git a/files/de/web/html/globale_attribute/dropzone/index.html b/files/de/web/html/globale_attribute/dropzone/index.html new file mode 100644 index 0000000000..4d0667217f --- /dev/null +++ b/files/de/web/html/globale_attribute/dropzone/index.html @@ -0,0 +1,45 @@ +--- +title: dropzone +slug: Web/HTML/Globale_Attribute/dropzone +tags: + - Experimentell +translation_of: Web/HTML/Global_attributes/dropzone +--- +<p class="note">{{HTMLSidebar("Global_attributes")}}{{SeeCompatTable}}</p> + +<p>Das <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes">globale Attribut</a> <strong>dropzone</strong> ist ein Attribut, das anzeigt, welche Arten von Inhalt auf dem Element abgelegt werden können. Es wird die <a href="/En/DragDrop/Drag_and_Drop" style="text-decoration: none; color: rgb(51, 102, 153) !important; cursor: default;" title="https://developer.mozilla.org/En/DragDrop/Drag_and_Drop">Drag and Drop API</a> verwendet. Es kann folgende Werte enthalten:</p> + +<ul> + <li><code><span style="font-family: courier new;">copy</span></code>, was anzeigt, dass eine Kopie vom abgelegten Element erstellt wird.</li> + <li><code><span style="font-family: courier new;">move</span></code>, was anzeigt, dass das abgelegte Element an diese neue Stelle verschoben wird.</li> + <li><code><span style="font-family: courier new;">link</span></code>, was einen Link auf das abgelegte Element erzeugt.</li> +</ul> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "editing.html#the-dropzone-attribute", "dropzone")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Auszug von {{SpecName('HTML WHATWG')}}, der ursprünglichen Definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<p>{{Compat("html.global_attributes.dropzone")}}</p> + +<div id="compat-mobile"> </div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>Alle <a href="/en-US/docs/Web/HTML/Global_attributes">globalen Attribute</a>.</li> +</ul> diff --git a/files/de/web/html/globale_attribute/hidden/index.html b/files/de/web/html/globale_attribute/hidden/index.html new file mode 100644 index 0000000000..f78b025ca1 --- /dev/null +++ b/files/de/web/html/globale_attribute/hidden/index.html @@ -0,0 +1,56 @@ +--- +title: hidden +slug: Web/HTML/Globale_Attribute/hidden +tags: + - Attribut + - Globales Attribut + - HTML + - Reference + - Referenz +translation_of: Web/HTML/Global_attributes/hidden +--- +<p class="note">{{HTMLSidebar("Global_attributes")}}</p> + +<p>Das <a href="/en-US/docs/Web/HTML/Global_attributes">globale Attribut</a> <strong>hidden </strong>ist ein boolesches Attribut welches angibt, dass das Element nicht oder nicht länger <em>relevant</em> ist. Zum Beispiel, kann es benutzt werden, um Elemente einer Seite zu verstecken, die nicht benötigt werden, wenn ein Anmeldeprozess erfolgreich durchgeführt wurde. Der Browser wird solche Elemente nicht anzeigen.</p> + +<p>Dieses Attribut soll nicht benutzt werden, um Inhalt zu verstecken, der rechtmäßig angzeigt werden könnte. Zum Beispiel sollte es nicht benutzt werden, um Seiten eines Tabelleninterface zu verstecken. Dies ist eine Gestaltungsfrage.</p> + +<p>Versteckte Elemente sollten nicht mit sichtbaren Elementen verlinkt sein. Elemente, die von versteckten Elementen abstammen, sind trotzdem aktiv, was bedeutet, dass Skript-Elemente immer noch ausgeführt und Form-Elemente gesendet werden können.</p> + +<div class="note"> +<p><strong>Bemerkung:</strong> Das Abändern des Wertes der CSS {{cssxref("display")}} Eigenschaft eines Elementes mit dem <code>hidden</code> Attribut überschreibt das Verhalten. Also wird ein Element mit Style <code>display: flex</code> angezeigt, egal ob das <code>hidden</code> Attribut gesetzt ist oder nicht.</p> +</div> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Bemerkung</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "interaction.html#the-hidden-attribute", "hidden")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Keine Änderung seit letztem Snapshot, {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "editing.html#the-hidden-attribute", "hidden")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot von {{SpecName('HTML WHATWG')}}, initiale Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + + + +<p>{{Compat("html.global_attributes.hidden")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>Alle <a href="/en-US/docs/Web/HTML/Global_attributes">globalen Attribute</a>.</li> +</ul> diff --git a/files/de/web/html/globale_attribute/id/index.html b/files/de/web/html/globale_attribute/id/index.html new file mode 100644 index 0000000000..6e1ef85aad --- /dev/null +++ b/files/de/web/html/globale_attribute/id/index.html @@ -0,0 +1,109 @@ +--- +title: id +slug: Web/HTML/Globale_Attribute/id +translation_of: Web/HTML/Global_attributes/id +--- +<p class="note">{{HTMLSidebar("Global_attributes")}}</p> + +<p>Das <strong>id</strong> <a href="/en-US/docs/Web/HTML/Global_attributes">globale Attribut</a> definiert einen eindeutigen Bezeichner (ID) welcher eindeutig im gesamten Dokument sein muss. Das Ziel ist die Identifizierung eines Elementes in Verknüpfungen (durch einen Fragmentbezeichner), Skripting, oder Stylisierung (mit CSS).</p> + +<p>Der Wert des Attributes ist eine undurchsichtige Zeichenkette: dies bedeutet, dass der Webautor es nicht benutzen darf um Informationen abzuleiten. Bestimmte Bedeutung, zum Beispiel bedeutungsspezifische Eigenschaften, dürfen nicht von der Zeichenkette abgeleitet sein.</p> + +<p>Der Attributwert darf keine Leerzeichen enthalten. Browsers treat non-conforming IDs that contains white spaces as if the white space is part of the ID. In contrast to the <strong>class</strong> attribute, which allows space-separated values, elements can only have one single ID defined through the <strong>id</strong> attribute. Note that an element may have several IDs, but the others should be set by another means, such as via a script interfacing with the DOM interface of the element.</p> + +<div class="note"> +<p><strong>Note:</strong> Using characters except ASCII letters and digits, <code>'_'</code>, <code>'-'</code> and <code>'.'</code> may cause compatibility problems, as they weren't allowed in HTML 4. Though this restriction has been lifted in HTML 5, an ID should start with a letter for compatibility.</p> +</div> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "dom.html#the-id-attribute", "id")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change from latest snapshot, {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "dom.html#the-id-attribute", "id")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "dom.html#the-id-attribute", "id")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}, now accept <code>'_'</code>, <code>'-'</code> and <code>'.'</code> if not at the beginning fo the id. It is also a true global attribute.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#adef-id', 'id')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Supported on all elements but {{HTMLElement("base")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, and {{HTMLElement("title")}}.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown }}[1]</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown }}[1]</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] <strong>class</strong> is a true global attribute only since Firefox 32.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>All <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>.</li> + <li>{{domxref("Element.id")}} that reflects this attribute.</li> +</ul> diff --git a/files/de/web/html/globale_attribute/index.html b/files/de/web/html/globale_attribute/index.html new file mode 100644 index 0000000000..59b8f1d2aa --- /dev/null +++ b/files/de/web/html/globale_attribute/index.html @@ -0,0 +1,205 @@ +--- +title: Globale Attribute +slug: Web/HTML/Globale_Attribute +tags: + - Attribute + - HTML + - Reference + - Web +translation_of: Web/HTML/Global_attributes +--- +<h3 id="HTMLSidebarGlobal_attributes">{{HTMLSidebar("Global_attributes")}}</h3> + +<p><strong>Globale Attribute</strong> sind Attribute die alle HTML Elemente gemeinsam haben; Sie können auf alle Elemente angewendet werden, auch wenn Sie auf einige Elemente keinen Effekt haben.</p> + +<p>Globale Attribute können für alle <a href="https://developer.mozilla.org/de/docs/Web/HTML/Element">HTML Elemente</a> festgelegt werden, <em>auch für jene die nicht im Standard verankert sind</em>. Das bedeutet, dass auch nicht standardgemäße Elemente diese Attribute erlauben müssen, auch wenn dadurch das Dokument nicht mehr HTML5-konform ist. Zum Beispiel verstecken HTML5-konforme Browser Inhalte wie <code><foo hidden>...</foo></code>, obwohl <code><foo></code> kein gültiges HTML Element ist.</p> + +<p>Zusätzlich zu den grundlegenden globalen HTML Attributen, gibt es noch die folgenden globalen Attribute:</p> + +<ul> + <li>{{HTMLAttrDef("xml:lang")}} und {{HTMLAttrDef("xml:base")}} — Diese sind von der XHTML-Spezifikation abgeleitet und veraltet und gibt es nur noch aus Kompatibilitätsgründen.</li> + <li>Mehrere <code><strong><a href="/de/docs/Web/Barrierefreiheit/ARIA">aria-*</a></strong></code> Attribute, benutzt für bessere Barrierefreiheit.</li> + <li>Die <a href="/de/docs/Web/Guide/Events/Event_handlers">Event Handler</a> Attribute: <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_globaler_Attribute">Liste globaler Attribute</h2> + +<dl> + <dt><a href="/de/docs/Web/HTML/Globale_Attribute/accesskey">{{HTMLAttrDef("accesskey")}}</a></dt> + <dd>Bietet einen Hinweis zum Generieren eines Tastenkürzels für das aktuelle Element. Dieses Attribut besteht aus einer durch Leerzeichen getrennten Liste von Zeichen. Der Browser sollte das Erste verwenden, welches auf der Computertastatur vorhanden ist.</dd> + <dt><a href="/en-US/docs/Web/HTML/Global_attributes/autocapitalize">{{HTMLAttrDef("autocapitalize")}}</a></dt> + <dd>Steuert, ob und wie Texteingaben automatisch großgeschrieben werden, wenn sie vom Benutzer eingegeben / bearbeitet werden. Es kann folgende Werte annehmen: + <ul> + <li><code>off</code> oder <code>none</code>, keine automatische Großschreibung wird angewendet (alle Buchstaben sind kleingeschrieben)</li> + <li><code>on</code> oder <code>sentences</code>, der erste Buchstabe jedes Satzes ist standardmäßig ein Großbuchstabe; alle weiteren Buchstaben sind standardmäßig kleingeschrieben</li> + <li><code>words</code>, der erste Buchstabe jedes Wortes ist standardmäßig ein Großbuchstabe; alle weiteren Buchstaben sind standardmäßig kleingeschrieben</li> + <li><code>characters</code>, alle Buchstaben werden standardmäßig großgeschrieben.</li> + </ul> + </dd> + <dt><a href="/en-US/docs/Web/HTML/Global_attributes/class">{{HTMLAttrDef("class")}}</a></dt> + <dd>Eine durch Leerzeichen getrennte Liste der Klassen des Elements. Mit Klassen können CSS und JavaScript über die <a href="/de/docs/Web/CSS/Klassenselektoren">Klassenselektoren</a> bestimmte Elemente, oder Funktionen wie die Methode {{DOMxRef("Document.getElementsByClassName()")}} auswählen und darauf zugreifen.</dd> + <dt><a href="/en-US/docs/Web/HTML/Global_attributes/contenteditable">{{HTMLAttrDef("contenteditable")}}</a></dt> +</dl> + +<p>Ein Aufzählungsattribut das angibt, ob das Element für den Benutzer bearbeitbar sein soll. Das Attribut muss einen der folgenden Werte annehmen:</p> + +<ul> + <li><code>true</code> oder eine <em>leere Zeichenkette</em> geben an, das Element editierbar sein soll;</li> + <li><code>false</code> gibt an, dass das Element nicht editierbar sein darf.</li> +</ul> + +<dl> + <dt><a href="/en-US/docs/Web/HTML/Global_attributes/contextmenu">{{HTMLAttrDef("contextmenu")}}</a></dt> + <dd>Die <code><a href="#attr-id"><strong>id</strong></a></code> von einem {{HTMLElement("menu")}} welches als Kontextmenu für das Element benutzt werden soll.</dd> + <dt><a href="/en-US/docs/Web/HTML/Global_attributes/data-*">{{HTMLAttrDef("data-*")}}</a></dt> + <dd>Diese Attributklasse erlaubt es Daten zwischen <a href="/en-US/docs/Web/HTML" title="en/HTML">HTML</a> und <a href="/en-US/docs/DOM" title="en/DOM">DOM</a> auszutauschen und auch mit Skripten darauf zuzugreifen. Diese Daten sind in dem jeweiligen {{DOMxRef("HTMLElement")}} gespeichert und können über {{DOMxRef("HTMLElement.dataset")}} ausgelesen oder geändert werden.</dd> + <dt><a href="/en-US/docs/Web/HTML/Global_attributes/dir">{{HTMLAttrDef("dir")}}</a></dt> + <dd>Ein Aufzählungsattribut das die Richtung des Elementtextes angibt. Es kann folgende Werte haben: + <ul> + <li><code>ltr</code>, von <strong>links nach rechts</strong> (englisch: <em>left to right</em>). Wird für Sprachen, die von links nach rechts geschrieben werden (z.B. deutsch) verwendet;</li> + <li><code>rtl</code>, von <strong>rechts nach links</strong> (englisch: <em>right to left</em>). Wird für Sprachen, die von rechts nach links geschrieben werden (z.B. arabisch) verwendet;</li> + <li><code>auto</code>, lässt den Browser des Nutzers entscheiden. Es benutzt einen simplen Algorithmus, indem es die Zeichen im Element einliest, bis es ein Zeichen mit einer bekannten Richtung findet und dann diese Richtung auf das gesamte Element anwendet.</li> + </ul> + </dd> + <dt><a href="/en-US/docs/Web/HTML/Global_attributes/draggable">{{HTMLAttrDef("draggable")}}</a></dt> + <dd>Ein Aufzählungsattribut das zeigt, ob das entsprechende Element auf einen anderen Ort gezogen werden kann. Es unterstützt die <a href="https://developer.mozilla.org/de/docs/Web/API/HTML_Drag_and_Drop_API" rel="nofollow" title="Die Beschreibung hierüber wurde bisher noch nicht geschrieben. Bitte überlege, mitzuwirken!"><code>HTML Drag and Drop API</code></a>. Folgende Werte sind erlaubt: + <ul> + <li><code>true</code>, das Element kann <em>gedraggt</em> werden.</li> + <li><code>false</code>, das Element kann nicht <em>gedraggt </em>werden.</li> + </ul> + </dd> + <dt><a href="/en-US/docs/Web/HTML/Global_attributes/dropzone">{{HTMLAttrDef("dropzone")}}</a> {{Experimental_Inline}}</dt> + <dd>Ein Aufzählungsattribut das anzeigt, welche Arten von Inhalt auf dem Element abgelegt werden können. Es wird die <a href="https://developer.mozilla.org/En/DragDrop/Drag_and_Drop" title="https://developer.mozilla.org/En/DragDrop/Drag_and_Drop">Drag and Drop API</a> verwendet. Es kann folgende Werte annehmen: + <ul> + <li><code>copy</code>, was anzeigt, dass eine Kopie vom abgelegten Element erstellt wird.</li> + <li><code>move</code>, was anzeigt, dass das abgelegte Element an diese neue Stelle verschoben wird.</li> + <li><code>link</code>, was einen Link auf das abgelegte Element erzeugt.</li> + </ul> + </dd> + <dt><a href="/en-US/docs/Web/HTML/Global_attributes/exportparts">{{HTMLAttrDef("exportparts")}}</a> {{Experimental_Inline}}</dt> + <dd>Used to transitively export shadow parts from a nested shadow tree into a containing light tree.</dd> + <dt><a href="/en-US/docs/Web/HTML/Global_attributes/hidden">{{HTMLAttrDef("hidden")}}</a></dt> + <dd>A Boolean attribute indicates that the element is not yet, or is no longer, <em>relevant</em>. For example, it can be used to hide elements of the page that can't be used until the login process has been completed. The browser won't render such elements. This attribute must not be used to hide content that could legitimately be shown.</dd> + <dt><a href="/en-US/docs/Web/HTML/Global_attributes/id">{{HTMLAttrDef("id")}}</a></dt> + <dd>Defines a unique identifier (ID) which must be unique in the whole document. Its purpose is to identify the element when linking (using a fragment identifier), scripting, or styling (with CSS).</dd> + <dt><a href="/en-US/docs/Web/HTML/Global_attributes/inputmode">{{HTMLAttrDef("inputmode")}}</a></dt> + <dd>Provides a hint to browsers as to the type of virtual keyboard configuration to use when editing this element or its contents. Used primarily on {{HTMLElement("input")}} elements, but is usable on any element while in {{HTMLAttrxRef("contenteditable")}} mode.</dd> + <dt><a href="/en-US/docs/Web/HTML/Global_attributes/is">{{HTMLAttrDef("is")}}</a></dt> + <dd>Allows you to specify that a standard HTML element should behave like a registered custom built-in element (see <a href="/en-US/docs/Web/Web_Components/Using_custom_elements">Using custom elements</a> for more details).</dd> +</dl> + +<div class="note"> +<p><strong>Note: </strong>The <code>item*</code> attributes are part of the <a class="external" href="https://html.spec.whatwg.org/multipage/microdata.html#microdata">WHATWG HTML Microdata feature</a>.</p> +</div> + +<dl> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/itemid">{{HTMLAttrDef("itemid")}}</a></dt> + <dd>The unique, global identifier of an item.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/itemprop">{{HTMLAttrDef("itemprop")}}</a></dt> + <dd>Used to add properties to an item. Every HTML element may have an <code>itemprop</code> attribute specified, where an <code>itemprop</code> consists of a name and value pair.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/itemref">{{HTMLAttrDef("itemref")}}</a></dt> + <dd>Properties that are not descendants of an element with the <code>itemscope</code> attribute can be associated with the item using an <code>itemref</code>. It provides a list of element ids (not <code>itemid</code>s) with additional properties elsewhere in the document.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/itemscope">{{HTMLAttrDef("itemscope")}}</a></dt> + <dd><code>itemscope</code> (usually) works along with {{HTMLAttrxRef("itemtype")}} to specify that the HTML contained in a block is about a particular item. <code>itemscope</code> creates the Item and defines the scope of the <code>itemtype</code> associated with it. <code>itemtype</code> is a valid URL of a vocabulary (such as <a href="https://schema.org/">schema.org</a>) that describes the item and its properties context.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/itemtype">{{HTMLAttrDef("itemtype")}}</a></dt> + <dd>Specifies the URL of the vocabulary that will be used to define <code>itemprop</code>s (item properties) in the data structure. {{HTMLAttrxRef("itemscope")}} is used to set the scope of where in the data structure the vocabulary set by <code>itemtype</code> will be active.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang">{{HTMLAttrDef("lang")}}</a></dt> + <dd>Helps define the language of an element: the language that non-editable elements are in, or the language that editable elements should be written in by the user. The attribute contains one “language tag” (made of hyphen-separated “language subtags”) in the format defined in <a href="https://www.ietf.org/rfc/bcp/bcp47.txt"><em>Tags for Identifying Languages (BCP47)</em></a>. <a href="https://developer.mozilla.org/de/docs/Web/HTML/Globale_Attribute$edit#attr-xml:lang"><strong>xml:lang</strong></a> has priority over it.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part">{{HTMLAttrDef("part")}}</a> {{Experimental_Inline}}</dt> + <dd>A space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the {{CSSxRef("::part()")}} pseudo-element.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/slot">{{HTMLAttrDef("slot")}}</a></dt> + <dd>Assigns a slot in a <a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Shadow_DOM">shadow DOM</a> shadow tree to an element: An element with a <code>slot</code>attribute is assigned to the slot created by the {{HTMLElement("slot")}} element whose {{HTMLAttrxRef("name", "slot")}} attribute's value matches that <code>slot</code> attribute's value.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/spellcheck">{{HTMLAttrDef("spellcheck")}}</a> {{Experimental_Inline}}</dt> + <dd>An enumerated attribute defines whether the element may be checked for spelling errors. It may have the following values: + <ul> + <li><code>true</code>, which indicates that the element should be, if possible, checked for spelling errors;</li> + <li><code>false</code>, which indicates that the element should not be checked for spelling errors.</li> + </ul> + </dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/style">{{HTMLAttrDef("style")}}</a></dt> + <dd>Contains <a href="https://developer.mozilla.org/en-US/docs/Web/CSS">CSS</a> styling declarations to be applied to the element. Note that it is recommended for styles to be defined in a separate file or files. This attribute and the {{HTMLElement("style")}} element have mainly the purpose of allowing for quick styling, for example for testing purposes.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex">{{HTMLAttrDef("tabindex")}}</a></dt> + <dd>An integer attribute indicating if the element can take input focus (is <em>focusable</em>), if it should participate to sequential keyboard navigation, and if so, at what position. It can take several values: + <ul> + <li>a <em>negative value</em> means that the element should be focusable, but should not be reachable via sequential keyboard navigation;</li> + <li><code>0</code> means that the element should be focusable and reachable via sequential keyboard navigation, but its relative order is defined by the platform convention;</li> + <li>a <em>positive value</em> means that the element should be focusable and reachable via sequential keyboard navigation; the order in which the elements are focused is the increasing value of the <a href="https://developer.mozilla.org/de/docs/Web/HTML/Globale_Attribute$edit#attr-tabindex"><strong>tabindex</strong></a>. If several elements share the same tabindex, their relative order follows their relative positions in the document.</li> + </ul> + </dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title">{{HTMLAttrDef("title")}}</a></dt> + <dd>Contains a text representing advisory information related to the element it belongs to. Such information can typically, but not necessarily, be presented to the user as a tooltip.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/translate">{{HTMLAttrDef("translate")}}</a> {{Experimental_Inline}}</dt> + <dd>An enumerated attribute that is used to specify whether an element's attribute values and the values of its {{DOMxRef("Text")}} node children are to be translated when the page is localized, or whether to leave them unchanged. It can have the following values: + <ul> + <li>empty string and <code>"yes"</code>, which indicates that the element will be translated.</li> + <li><code>"no"</code>, which indicates that the element will not be translated.</li> + </ul> + </dd> + <dd> + <h2 id="Specifications">Specifications</h2> + + <table> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <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>Added the <code>part</code> and <code>exportparts</code> global attributes.</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>Snapshot of {{SpecName("HTML WHATWG")}}. From {{SpecName("HTML5.1")}}, <code>itemid</code>, <code>itemprop</code>, <code>itemref</code>, <code>itemscope</code>, and <code>itemtype</code> have been added.</td> + </tr> + <tr> + <td>{{SpecName("HTML5.1", "dom.html#global-attributes", "Global attributes")}}</td> + <td>{{Spec2("HTML5.1")}}</td> + <td>Snapshot of {{SpecName("HTML WHATWG")}}. From {{SpecName("HTML5 W3C")}}, <code>contextmenu</code>, <code>draggable</code>, <code>dropzone</code>, and <code>spellcheck</code> have been added.</td> + </tr> + <tr> + <td>{{SpecName("HTML5 W3C", "dom.html#global-attributes", "Global attributes")}}</td> + <td>{{Spec2("HTML5 W3C")}}</td> + <td>Snapshot of {{SpecName("HTML WHATWG")}}. From {{SpecName("HTML4.01")}}, the concept of global attributes is introduced and the <code>dir</code>, <code>lang</code>, <code>style</code>, <code>id</code>, <code>class</code>, <code>tabindex</code>, <code>accesskey</code>, and <code>title</code> are now true global attributes.<br> + <code>xml:lang</code> which was initially part of XHTML, is now also part of HTML.<br> + <code>hidden</code>, <code>data-*</code>, <code>contenteditable</code>, and <code>translate</code> have been added.</td> + </tr> + <tr> + <td>{{SpecName("HTML4.01")}}</td> + <td>{{Spec2("HTML4.01")}}</td> + <td>There are no global attributes defined. Several attributes that will become global attributes in subsequent specifications are defined on a subset of elements.<br> + <code>class</code> and <code>style</code> are supported on all elements but {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, and {{HTMLElement("title")}}.<br> + <code>dir</code> is supported on all elements but {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("bdo")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}}, and {{HTMLElement("script")}}.<br> + <code>id</code> is supported on all elements but {{HTMLElement("base")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, and {{HTMLElement("title")}}.<br> + <code>lang</code> is supported on all elements but {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}}, and {{HTMLElement("script")}}.<br> + <code>tabindex</code> is only supported on {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}}, and {{HTMLElement("textarea")}}.<br> + <code>accesskey</code> is only supported on {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("label")}}, {{HTMLElement("legend")}} and {{HTMLElement("textarea")}}.<br> + <code>title</code> is supported on all elements but {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, and {{HTMLElement("title")}}.</td> + </tr> + </tbody> + </table> + + <h2 id="Browser_compatibility">Browser compatibility</h2> + + <p>The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + + <p>{{Compat("html.global_attributes")}}</p> + + <h2 id="See_also">See also</h2> + {{DOMxRef("Element")}} and {{DOMxRef("GlobalEventHandlers")}} interfaces that allow to query most global attributes.</dd> +</dl> diff --git a/files/de/web/html/globale_attribute/inputmode/index.html b/files/de/web/html/globale_attribute/inputmode/index.html new file mode 100644 index 0000000000..d5dd048922 --- /dev/null +++ b/files/de/web/html/globale_attribute/inputmode/index.html @@ -0,0 +1,76 @@ +--- +title: inputmode +slug: Web/HTML/Globale_Attribute/inputmode +tags: + - Attribute + - Bearbeiten + - Eingabemodus + - Formulare + - Globale Attribute + - HTML + - Referenz + - Text + - Texteingabe + - Web + - global +translation_of: Web/HTML/Global_attributes/inputmode +--- +<p><span class="seoSummary">Das <strong><code>inputmode</code></strong> <a href="/en-US/docs/Web/HTML/Global_attributes">globale Attribut</a> </span>ist ein aufgezähltes Attribut, das einen Hinweis auf die Art der Daten liefert, die der Benutzer während der Bearbeitung des Elements oder seines Inhalts eingeben kann. Es kann die folgenden Werte haben:</p> + +<dl> + <dt><code>"none"</code></dt> + <dd>Keine virtuelle Tastatur; dies ist nützlich, wenn die Anwendung oder die Website ihre eigene Tastatureingabesteuerung implementiert.</dd> + <dt><code>"text"</code></dt> + <dd>Standard-Text-Eingabetastatur für das aktuelle Gebietsschema des Benutzers.</dd> + <dt><code>"decimal"</code></dt> + <dd>Fraktionierte numerische Eingabetastatur, die die Ziffern und das entsprechende Trennzeichen für das Gebietsschema des Benutzers enthält (typischerweise entweder "." oder ",").</dd> + <dt><code>"numeric"</code></dt> + <dd>Numerische Eingabetastatur; alles, was benötigt wird, sind die Ziffern 0 bis 9.</dd> + <dt><code>"tel"</code></dt> + <dd>Eine Telefontastatur-Eingabe, die die Ziffern 0 bis 9, das Sternchen ("*") und die Pfund-Taste ("#") enthält. Für Formulareingaben, die eine Telefontastatur erfordern, sollte stattdessen <code><a href="/en-US/docs/Web/HTML/Element/input/tel"><input type="tel"></a></code> verwendet werden.</dd> + <dt><code>"search"</code></dt> + <dd>Eine virtuelle Tastatur, die für die Sucheingabe optimiert ist. So kann beispielsweise die Eingabetaste in "Suchen" umbenannt werden, und es kann weitere Optimierungen geben.</dd> + <dt><code>"email"</code></dt> + <dd>Eine virtuelle Tastatur, die für die Eingabe von E-Mail-Adressen optimiert ist; typischerweise beinhaltet dies das Zeichen "@" sowie andere Optimierungen. Für Formulareingaben, die eine Eingabe der E-Mail-Adresse erfordern, sollte stattdessen <code><a href="/en-US/docs/Web/HTML/Element/input/email"><input type="email"></a></code> verwendet werden.</dd> + <dt><code>"url"</code></dt> + <dd>Eine Tastatur, die für die Eingabe von URLs optimiert ist. Dies kann z.B. dazu führen, dass die Taste "/" prominenter verfügbar ist. Erweiterte Funktionen können auch den Zugriff auf die Historie und dergleichen beinhalten. Für Formulareingaben, die eine URL anfordern, sollte stattdessen <code><a href="/en-US/docs/Web/HTML/Element/input/url"><input type="url"></a></code> verwendet werden.</dd> +</dl> + +<p>Wenn dieses Attribut nicht gesetzt ist, lautet sein Standardwert <code>"text"</code>, was darauf hinweist, dass die Standard-Text-Eingabetastatur des Gebietsschemas verwendet werden sollte.</p> + +<div class="warning"> +<p><strong>Spezifischer Konflikt:</strong> Das <a href="https://html.spec.whatwg.org/multipage/interaction.html#attr-inputmode">WHATWG spec lists <code>inputmode</code></a>, und moderne Browser arbeiten daran, sie zu unterstützen. Das <a href="https://www.w3.org/TR/html52/index.html#contents">W3C HTML 5.2 spec</a> listet es nicht mehr (markiert es als veraltet). Sie sollten die WHATWG-Definition als richtig betrachten, bis ein Konsens erreicht ist.</p> +</div> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Bemerkung</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="Browser-Kompatibilität">Browser-Kompatibilität</h2> + + + +<p>{{Compat("html.global_attributes.inputmode")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>Alle <a href="/en-US/docs/Web/HTML/Global_attributes">globalen Attribute</a>.</li> +</ul> + +<div>{{HTMLSidebar("Global_attributes")}}</div> diff --git a/files/de/web/html/globale_attribute/is/index.html b/files/de/web/html/globale_attribute/is/index.html new file mode 100644 index 0000000000..ff888d1002 --- /dev/null +++ b/files/de/web/html/globale_attribute/is/index.html @@ -0,0 +1,62 @@ +--- +title: is +slug: Web/HTML/Globale_Attribute/is +translation_of: Web/HTML/Global_attributes/is +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><span class="seoSummary">The <strong><code>is</code></strong> <a href="/en-US/docs/Web/HTML/Global_attributes">global attribute</a> allows you to specify that a standard HTML element should behave like a defined custom built-in element (see <a href="/en-US/docs/Web/Web_Components/Using_custom_elements">Using custom elements</a> for more details).</span></p> + +<p>This attribute can only be used if the specified custom element name has been successfully <a href="/en-US/docs/Web/API/CustomElementRegistry/define">defined</a> in the current document, and extends the element type it is being applied to.</p> + +<h2 id="Examples">Examples</h2> + +<p>The following code is taken from our <a href="https://github.com/mdn/web-components-examples/tree/master/word-count-web-component">word-count-web-component</a> example (<a href="https://mdn.github.io/web-components-examples/word-count-web-component/">see it live also</a>).</p> + +<pre class="brush: js">// Create a class for the element +class WordCount extends HTMLParagraphElement { + constructor() { + // Always call super first in constructor + super(); + + // Constructor contents ommitted for brevity + ... + + } +} + +// Define the new element +customElements.define('word-count', WordCount, { extends: 'p' });</pre> + +<pre class="brush: html"><p is="word-count"></p></pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</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="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("html.global_attributes.is")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>All <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>.</li> +</ul> diff --git a/files/de/web/html/globale_attribute/kontextmenu/index.html b/files/de/web/html/globale_attribute/kontextmenu/index.html new file mode 100644 index 0000000000..33c1cc2e99 --- /dev/null +++ b/files/de/web/html/globale_attribute/kontextmenu/index.html @@ -0,0 +1,169 @@ +--- +title: Kontextmenü +slug: Web/HTML/Globale_Attribute/kontextmenu +tags: + - Globale Attribute + - HTML + - Kontextmenü + - Referenz +translation_of: Web/HTML/Global_attributes/contextmenu +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<div class="warning"> +<p>Das <a href="https://html.spec.whatwg.org/multipage/obsolete.html#attr-contextmenu">contextmenu Attrbut ist obsolet</a> und die Unterstützung wird aus allen Browsern entfernt werden.</p> +</div> + +<p>Das <a href="/en-US/docs/Web/HTML/Global_attributes">globale Attribut </a><code><strong>contextmenu</strong></code> ist die <a href="/en-US/docs/Web/HTML/Global_attributes/id"><strong>id</strong></a> von einem {{HTMLElement("menu")}}, welches als Kontextmenü benutzt werden soll.</p> + +<p>Ein <em>Kontextmenü</em> ist ein Menü, dass nach einer Interaktion des Benutzers erscheint. HTML5 erlaubt nun, dieses Menü anzupassen. Hier sind ein paar Beispiele, inklusive verschachtelter Menüs.</p> + +<h2 id="Beispiel">Beispiel</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush:html; highlight:[1,10,15]"><body contextmenu="share"> + <menu type="context" id="share"> + <menu label="share"> + <menuitem label="Twitter" onclick="shareViaTwitter()"></menuitem> + <menuitem label="Facebook" onclick="shareViaFacebook()"></menuitem> + </menu> + </menu> + <ol> + <li> + Überall in diesem Beispiel kannst du die Seite über das Kontextmenü auf Twitter und Facebook teilen. + </li> + <li contextmenu="changeFont" id="fontSizing"> + In diesem besonderen Listen-Element kannst du die Schriftgröße eines + Textes über das Kontextmenü vergrößern und verkleinern. + </li> + <menu type="context" id="changeFont"> + <menuitem label="Schrift vergrößern" onclick="incFont()"></menuitem> + <menuitem label="Schrift verkleinern" onclick="decFont()"></menuitem> + </menu> + <li contextmenu="ChangeImage" id="changeImage"> + Auf dem unteren Bild kannst du die Option + "Wechsele Bild" im Kontextmenü auswählen.<br /> + <img src="https://developer.mozilla.org/media/img/promote/promobutton_mdn5.png" + contextmenu="ChangeImage" id="promoButton" /> + <menu type="context" id="ChangeImage"> + <menuitem label="Wechsele Bild" onclick="changeImage()"></menuitem> + </menu> + </li> + </ol> +</body> +</pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush:js">function shareViaTwitter() { + window.open("https://twitter.com/intent/tweet?text=" + + "Hurray! I am learning ContextMenu from MDN via Mozilla"); +} + +function shareViaFacebook() { + window.open("https://facebook.com/sharer/sharer.php?u=" + + "https://developer.mozilla.org/en/HTML/Element/Using_HTML_context_menus"); +} + +function incFont() { + document.getElementById("fontSizing").style.fontSize = "larger"; +} + +function decFont() { + document.getElementById("fontSizing").style.fontSize = "smaller"; +} + +function changeImage() { + var index = Math.ceil(Math.random() * 39 + 1); + document.images[0].src = + "https://developer.mozilla.org/media/img/promote/promobutton_mdn" + + index + ".png"; +}</pre> + +<h3 id="Ergebnis">Ergebnis</h3> + +<p>{{EmbedLiveSample("Beispiel", "100%", 400)}}</p> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "forms.html#attr-contextmenu", "contextmenu")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Keine Änderungen seit dem letzten Snapshot, {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "interactive-elements.html#context-menus", "contextmenu")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot von {{SpecName('HTML WHATWG')}}, initiale Definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}<sup>[1]</sup></td> + <td>{{CompatGeckoDesktop(9)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop(20)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Eine experimentelle Implementation war zwischenzeitlich mit der Kommandozeilen-Option <code>--enable-blink-features=ContextMenu</code> verfügbar. Bis Chrome 52 und Opera 39 war diese außerdem durch Aktivieren der Option <em>Experimental Web Platform</em> verfügbar, welche aber aufgrund eines Kompatibilitätsproblems entfernt wurde. Dies ist dokumentiert in <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=87553">Chromium bug 87553</a>.</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>Alle <a href="/en-US/docs/Web/HTML/Global_attributes">globalen Attribute</a></li> + <li>{{domxref("HTMLElement.contextMenu")}}</li> +</ul> diff --git a/files/de/web/html/globale_attribute/lang/index.html b/files/de/web/html/globale_attribute/lang/index.html new file mode 100644 index 0000000000..705dfa4396 --- /dev/null +++ b/files/de/web/html/globale_attribute/lang/index.html @@ -0,0 +1,60 @@ +--- +title: lang +slug: Web/HTML/Globale_Attribute/lang +tags: + - Attribute + - HTML + - Referenz + - Sprachen + - global +translation_of: Web/HTML/Global_attributes/lang +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p>Das globale Attribut <strong>lang</strong> <a href="/en-US/docs/Web/HTML/Global_attributes">global attribute</a> wird verwendet, um die Sprache eines Elementes oder die zu verwendene Sprache für zu bearbeitende Elemente festzulegen. Dieses Attribut enthält nur einen Wert, der der Richtlinie "<a class="external" href="http://www.ietf.org/rfc/bcp/bcp47.txt"><em>Tags for Identifying Languages (BCP47)</em></a>" entspricht. Wenn kein Wert festgelegt wurde, wird automatisch <em>unkn</em><em>own</em> als Sprache festgelegt; Nach BCP47 ungültige Werte werden als <em>invalid</em> behandelt.</p> + +<p>Auch wenn ein Wert für das <strong>lang</strong>-Attribut vergeben wurde, kann es vorkommen, dass es nicht beachtet wird, weil ein <a href="/en-US/docs/Web/HTML/Global_attributes/xml:lang"><strong>xml:lang</strong></a>-Attribut immer priorisiert wird.</p> + +<p>Für die CSS-Klasse {{cssxref(":lang")}} gilt, dass zwei ungültige Werte getrennt von einander behandelt werden, wenn sich ihr Name unterscheidet. (Wenn Sie dies nicht verstehen, lesen Sie bitte den englischen Originalartikel.</p> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spezifikiation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "dom.html#the-lang-and-xml:lang-attributes", "lang")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Keine Veränderungen zur letzten Version, {{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>Version von {{SpecName('HTML WHATWG')}}, Keine Veränderungen zu {{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>Version von {{SpecName('HTML WHATWG')}}, Verhalten bei <code>xml:lang</code> und vorbestimmten Sprachgen durch einen Algorithmus festgelegt. Ebenfalls ein echtes globales Attribut.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/dirlang.html#h-8.1', 'lang')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Unterstützt alle Elemente außer diesen: {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}}, and {{HTMLElement("script")}}.</td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<p>{{Compat("html.global_attributes.lang")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>Alle <a href="/en-US/docs/Web/HTML/Global_attributes">globalen Attribute</a>.</li> +</ul> diff --git a/files/de/web/html/globale_attribute/style/index.html b/files/de/web/html/globale_attribute/style/index.html new file mode 100644 index 0000000000..7c3c2b5c77 --- /dev/null +++ b/files/de/web/html/globale_attribute/style/index.html @@ -0,0 +1,107 @@ +--- +title: style +slug: Web/HTML/Globale_Attribute/style +translation_of: Web/HTML/Global_attributes/style +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p>Das <a href="/en-US/docs/Web/HTML/Global_attributes">globale Attribut</a> <strong>style</strong> kann <a href="/en-US/docs/Web/CSS">CSS</a>-Stilvorschriften für das entsprechende Element enthalten. Bitte beachten Sie, dass eine Auslagerung der Stilvorschriften in eine externe CSS-Datei vorzuziehen sind! Dieses Attribut und das {{HTMLElement("style")}}-Element haben den großen Vorteil, schnell ein paar Stilvorschriften festzulegen, zum Beispiel um etwas nur kurz zu testen.</p> + +<div class="note"> +<p><strong>Verwendung: </strong>Dieses Attribut sollte nicht für inhaltliche Informationen genutzt werden. Wenn alle Stilvorschriften entfernt wurden, soll die Seite dennoch inhaltlich korrekt bleiben. Deshalb sollte es auch nicht zum Verstecken von irrelevanten Informationen genutzt werden, dieses Ziel verfolgt man am besten mit dem <strong><a href="#attr-hidden">hidden</a>-</strong>Attribut.</p> +</div> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "dom.html#the-style-attribute", "style")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Keine Änderungen seit der letzten Version {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "dom.html#the-style-attribute", "style")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Version {{SpecName('HTML WHATWG')}}, keine Ändeurngen zur Version {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "dom.html#the-style-attribute", "style")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Version {{SpecName('HTML WHATWG')}}. Seit {{SpecName("HTML4.01")}} ist es nun ein globales Attribut</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'present/styles.html#h-14.2.2', 'style')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Unterstützt alle Elemente außer {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, und {{HTMLElement("title")}}.</td> + </tr> + <tr> + <td>{{SpecName("CSS3 Style", "", "")}}</td> + <td>{{Spec2("CSS3 Style")}}</td> + <td>Definiert den Inhalt des <code>style</code>-Attributes.</td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funktion</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>grundlegende Unterstützung</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funktion</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>grundlegende Unterstützung</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Weitere_Informationen">Weitere Informationen</h2> + +<ul> + <li>Alle <a href="/en-US/docs/Web/HTML/Global_attributes">globalen Attribute</a>.</li> +</ul> diff --git a/files/de/web/html/globale_attribute/tabindex/index.html b/files/de/web/html/globale_attribute/tabindex/index.html new file mode 100644 index 0000000000..e097cc7985 --- /dev/null +++ b/files/de/web/html/globale_attribute/tabindex/index.html @@ -0,0 +1,130 @@ +--- +title: tabindex +slug: Web/HTML/Globale_Attribute/tabindex +tags: + - Accessibility + - Global attributes + - HTML + - Reference + - a11y +translation_of: Web/HTML/Global_attributes/tabindex +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><span class="seoSummary">Das <a href="/en-US/docs/Web/HTML/Global_attributes">Globale Attribut</a> <strong><code>tabindex</code></strong> gibt an, ob sein Element fokussiert werden kann, ob und an welcher Stelle es an der sequentiellen Tastaturnavigation beteiligt ist (normalerweise mit der Tabulatortaste, daher der Name).</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/attribute-tabindex.html","tabbed-standard")}}</div> + +<p class="hidden">Die Quelle für dieses interaktive Beispiel wird in einem GitHub-Repository gespeichert. Wenn du am interaktiven Beispielprojekt mitarbeiten möchtest, klone bitte <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a>und sende uns eine Pull-Anfrage.</p> + +<p>Es akzeptiert einen Integer als Wert der zu unterschiedlichen Ergebnissen führt, abhängig von diesen Werten:</p> + +<ul> + <li> + <p>Ein<em> negativer Wert </em>(normalerweise <code>tabindex="-1"</code>) bedeutet, dass das Element fokussierbar, jedoch nicht durch die sequenzielle Tastaturnavigation erreichbar sein sollte. Er ist meistens hilfreich um barrierefreie Widgets mit JavaScript zu erstellen.</p> + </li> + <li> + <div class="note"> + <p>Dies ist hilfreich, wenn Inhalte außerhalb des Bildschirms vorhanden sind, welche zu einem bestimmten Ereignis in Erscheinung treten. Es ist nicht möglich ein Element mit der Tastatur zu fokussieren, das einen negativen <code>tabindex</code> hat. Jedoch ist es möglich, es mittels der <code>focus()</code> <a href="/en-US/docs/Web/API/HTMLElement/focus">Methode</a> aufzurufen.</p> + </div> + + + </li> +</ul> + +<div class="note"></div> + +<ul> + <li> + <p><code>tabindex="0"</code> bedeutet, dass das Element mittels der sequenziellen Tastaturnavigation fokussierbar ist, wobei die Aufrufreihenfolge von der Quellreihenfolge des Dokuments definiert ist</p> + </li> + <li> + <div class="warning"> + <p>Die CSS-Positionierung <strong>wirkt sich nicht</strong> auf die Tab-Reihenfolge aus. Es wird sich nur die visuelle Reihenfolge der Elemente ändern. Tab-Reihenfolge entspricht der Quellreihenfolge!<em> </em></p> + </div> + + + </li> +</ul> + +<div class="warning"></div> + +<ul> + <li> + <p>Ein <em>positiver Wert</em> bedeutet, dass das Element in der sequenziellen Tastaturnavigation fokussierbar sein kann, wobei seine Reihenfolge durch den Wert der Zahl definiert wird. <code>tabindex="4"</code> würde also vor <code>tabindex="5"</code>, aber nach <code>tabindex="3"</code> fokussiert werden. Wenn mehrere Elemente den gleichen positiven <code>tabindex</code>-Wert haben, folgt ihre Reihenfolge relativ zu ihrer Position in der Dokumentquelle.</p> + + <div class="warning"> + <p>Vermeiden Sie die Verwendung von <code>tabindex</code>-Werten größer als 0. Dies erschwert es Benutzern, die auf assistive Technologie angewiesen sind, durch Seiteninhalte zu Navigieren und sie zu Bedienen.</p> + </div> + </li> +</ul> + +<div class="note"> +<p>Es wird nicht empfohlen, den Elementen positive Werte zu geben. Am Ende springt der Fokus zwischen den Elementen und es wird verwirrend, die <code>tabindex</code>-Attributwerte einzelner Elemente zu manipulieren. Empfehlenswert ist, sie in einer geeigneten DOM-Sequenz zu schreiben.</p> +</div> + +<p>Wenn das <code>tabindex</code>-Attribut für ein {{htmlelement ("div")}} festgelegt wird, kann der untergeordnete Inhalt nicht mit den Pfeiltasten gescrollt werden. Außer, der <code>tabindex</code> wurde für den Inhalt festgelegt. <a href="https://jsfiddle.net/jainakshay/0b2q4Lgv/">Folgendes fiddle hilft beim Verstehen der Scrolleffekte des <code>tabindex</code></a>.</p> + +<div class="note"> +<p><strong>Hinweis:</strong> Der maximale Wert für <code>tabindex</code> ist 32767. Wenn er nicht spezifiziert ist, wird der Standardwert von 0 angenommen.</p> +</div> + +<h2 id="Bedenken_zur_Barrierefreiheit">Bedenken zur Barrierefreiheit</h2> + + + +<p>Vermeiden Sie die Verwendung des <code>tabindex</code>-Attributs in Verbindung mit <a href="/en-US/docs/Web/Guide/HTML/Content_categories#Interactive_content">nichtinteraktiven Inhalten</a>, um Elemente durch die Tastatureingabe interaktiv fokussierbar zu machen, wie etwa zum Beispiel die Verwendung eines {{HTMLElement ("div")}} Elements, um eine Schaltfläche zu erzeugen, anstelle des {{HTMLElement ("button")}} Elements.</p> + +<p>Interaktive Komponenten, die mit nichtinteraktiven Elementen erstellt wurden, gelangen nicht in der <a href="/en-US/docs/Learn/Accessibility/What_is_accessibility#Accessibility_APIs">accessibility tree</a> für Eingabehilfen aufgeführt. Dadurch wird verhindert, dass assistive Technologien zu ihnen navigieren und sie manipulieren können. Der Inhalt sollte semantisch mit interaktiven Elementen ({{HTMLElement("a")}}, {{HTMLElement("button")}}, {{HTMLElement("details")}}, {{HTMLElement("input")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}}, etc.) beschrieben werden. Diese Elemente verfügen über integrierte Rollen und Zustände, die den Status der Zugänglichkeit mitteilen, die andernfalls durch <a href="/en-US/docs/Web/Accessibility/ARIA">ARIA</a> verwaltet werden müsste.</p> + +<ul> + <li><a href="https://developer.paciellogroup.com/blog/2014/08/using-the-tabindex-attribute/">Verwenden des tabindex Attributs | The Paciello Group</a></li> +</ul> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', "interaction.html#attr-tabindex", "tabindex")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change from latest snapshot, {{SpecName('HTML5.1')}}.</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "editing.html#the-tabindex-attribute", "tabindex")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "editing.html#attr-tabindex", "tabindex")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}. From {{SpecName("HTML4.01")}}, the attribute is now supported on all elements (global attributes).</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/forms.html#adef-tabindex', 'tabindex')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Only supported on {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}}, and {{HTMLElement("textarea")}}.</td> + </tr> + </tbody> +</table> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<p class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("html.global_attributes.tabindex")}}</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>Alle <a href="/en-US/docs/Web/HTML/Global_attributes">globalen Attribute</a></li> + <li>{{domxref("HTMLElement.tabIndex")}} das dieses Attribut widerspiegelt</li> + <li>Accessibility-Probleme mit tabindex: siehe <a href="http://adrianroselli.com/2014/11/dont-use-tabindex-greater-than-0.html">Don’t Use Tabindex Greater than 0</a> von Adrian Roselli</li> +</ul> diff --git a/files/de/web/html/globale_attribute/title/index.html b/files/de/web/html/globale_attribute/title/index.html new file mode 100644 index 0000000000..2d94d0202c --- /dev/null +++ b/files/de/web/html/globale_attribute/title/index.html @@ -0,0 +1,164 @@ +--- +title: title +slug: Web/HTML/Globale_Attribute/title +tags: + - Globales Attribut + - HTML + - Referenz + - Referenzen +translation_of: Web/HTML/Global_attributes/title +--- +<p>{{HTMLSidebar("Global_attributes")}}</p> + +<p>Der <strong>title</strong> <a href="/en-US/docs/Web/HTML/Global_attributes">globales Attribut</a> beinhaltet einen Text mit Informationen über das Element zu welchem es gehört. Diese Informationen werden dem Benutzer üblicherweise (aber nicht nur) als Tooltip angezeigt. Hier sind einige typische Beispiele für dieses Attribut:</p> + +<ul> + <li>Link: Der Titel oder die Beschreibung des verlinkten Dokuments</li> + <li>Media Elemente, (z.B.: ein Bild): eine Beschreibung oder Quellenangabe</li> + <li>Paragraph: eine Fusszeile oder ein Kommentar über den Paragraphen</li> + <li>Zitate: Informationen über den Autor, usw.</li> +</ul> + +<p>Wenn dieses Attribut weggelassen wird, ist das <code>title</code> Attribut des nächsten Vorgängers des Elements gültig (und kann somit als Tooltip für das Element verwendet werden). Wenn das Attribut als leerer String gesetzt wird, wird das <code>title</code> Attribut des Vorgängers explizit außer Kraft gesetzt (und sollte nicht als Tooltip für das Element verwendet werden).</p> + +<p>Zusätzliche Semantics sind für die <code>title</code> Attribute der {{ HTMLElement("link") }}, {{ HTMLElement("abbr") }}, {{ HTMLElement("input") }} und {{ HTMLElement("menuitem") }} Elemente definiert.</p> + +<p>Das <code>title</code> Attribut darf Mehrzeilig sein. Jede eingefügte <code>U+000A LINE FEED</code> (<code>LF</code>) repräsentiert eine solche newline. Aber Achtung! Dies bedeutet, dass:</p> + +<pre class="brush: html"><p>Newlines in title should be taken into account,like this <abbr title="This is a +multiline title">example</abbr>.</p> +</pre> + +<p>einen zweizeiligen Titel definiert.</p> + +<h2 id="Bedenken_bezüglich_des_barrierefreien_Internet">Bedenken bezüglich des barrierefreien Internet</h2> + +<p>Die Nutzung des <code>title</code> Attributs ist sehr problematisch für:</p> + +<ul> + <li>Menschen, die nur Berührungsgeräte benutzen</li> + <li>Menschen, die das Internet nur mit dem Keyboard navigieren</li> + <li>Menschen, die mit unterstützenden Technologien wie einem Bildschirmleser auf das Internet zugreifen</li> + <li>Menschen mit Beeinträchtigungen in der Feinmotorik</li> + <li>Menschen mit kognitiven Bedenken</li> +</ul> + +<p>Dies kann besonders auf inkonsistenten Browser Support zurückgeführt werden. Dies ist des Weiteren ein Problem, da unterstützende Technologien zu mehr Komplexität beim Browser-Rendering der Seite führen. Falls ein Tooltip Effekt gewollt sein sollte, ist es besser eine der folgenden Browsermethoden zu benutzen.</p> + +<p> </p> + +<ul> + <li><a href="https://www.w3.org/TR/html/dom.html#the-title-attribute">3.2.5.1. The title attribute | W3C HTML 5.2: 3. Semantics, structure, and APIs of HTML documents</a></li> + <li><a href="https://developer.paciellogroup.com/blog/2013/01/using-the-html-title-attribute-updated/">Using the HTML title attribute – updated | The Paciello Group</a></li> + <li><a href="https://inclusive-components.design/tooltips-toggletips/">Tooltips & Toggletips - Inclusive Components</a></li> +</ul> + +<p> </p> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "elements.html#the-title-attribute", "title")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change from latest snapshot, {{SpecName('HTML5.1')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "dom.html#the-title-attribute", "title")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "dom.html#the-title-attribute", "title")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Snapshot of {{SpecName('HTML WHATWG')}}. From {{SpecName("HTML4.01")}}, it is now a true global attribute.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#adef-title', 'title')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Supported on all elements but {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, and {{HTMLElement("title")}}.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + <tr> + <td>Multi-line support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{CompatGeckoDesktop(12)}}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + <tr> + <td>Multi-line support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile(12)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>Alle <a href="/en-US/docs/Web/HTML/Global_attributes">globalen Attribute</a>.</li> + <li>{{domxref("HTMLElement.title")}} welches dieses Attribut reflektiert</li> +</ul> diff --git a/files/de/web/html/globale_attribute/translate/index.html b/files/de/web/html/globale_attribute/translate/index.html new file mode 100644 index 0000000000..5cf914afb3 --- /dev/null +++ b/files/de/web/html/globale_attribute/translate/index.html @@ -0,0 +1,30 @@ +--- +title: Übersetztung in Deutsch +slug: Web/HTML/Globale_Attribute/translate +tags: + - DE von LV + - Editor's. + - Everyone + - Experimental-De + - HTML-DE + - german +translation_of: Web/HTML/Global_attributes/translate +--- +<p>Anerkannte englische (US) Version:</p> + +<p> {{HTMLSidebar ("Global_attributes")}}</p> + +<p> Das Attribut translate global ist ein Aufzählungsattribut, mit dem angegeben wird, ob die übersetzbaren Attributwerte eines Elements und die untergeordneten Knoten {{domxref ("Text")}} beim Lokalisieren der Seite übersetzt werden sollen oder ob sie unverändert bleiben sollen. Es kann folgende Werte annehmen:</p> + +<ul> + <li> leere Zeichenfolge oder "Ja", die angibt, dass das Element übersetzt werden soll, wenn die Seite lokalisiert wird.</li> + <li> "no" gibt an, dass das Element nicht übersetzt werden darf.</li> +</ul> + +<p> Obwohl nicht alle Browser dieses Attribut erkennen, wird es von automatischen Übersetzungssystemen wie Google Translate und möglicherweise auch von Tools, die von menschlichen Übersetzern verwendet werden, respektiert. Aus diesem Grund ist es wichtig, dass Webautoren dieses Attribut verwenden, um Inhalte zu markieren, die nicht übersetzt werden</p> + +<p>Verwenden des Übersetzungsattributs von HTML.</p> + +<p>Tags übersetzen Kategorisieren Sie den Artikel. Dadurch wird der Artikel unter den richtigen Filtern in der Suchmaschine auffindbar.</p> + +<p>DE German, HTML-DE, Experimental-De, Everyone, Editor's..Github. L. v</p> |