Die MDN Content Kitchensink

Warnung: Löschen Sie diese Seite nicht. Sie wird von mdn/yari für deren Automatisierung verwendet.

Über diese Seite

Der kitchensink ist eine Seite, die versucht, jedes mögliche Inhaltselement und Yari-Makro zu integrieren.

Diese Seite versucht, der komplette Schnittpunkt jeder anderen Seite zu sein. Nicht in Bezug auf den Text, sondern in Bezug auf die Stile und Makros. Lassen Sie uns mit einigen Anmerkungen beginnen...

Text, der das <kbd>-Tag verwendet: Umschalt

Hinweis: Hier ist eine Blockanzeige-Notiz.

Warnung: Hier ist eine Blockanzeige-Warnung.

Vorherige/Nächste-Schaltflächen

Ein weiteres Beispiel…

Code-Beispiele

Klartext

  ___________________________
< I'm an expert in my field. >
  ---------------------------
         \   ^__^
          \  (oo)\_______
             (__)\       )\/\
                 ||----w |
                 ||     ||

HTML

html

<pre></pre>

JavaScript

const f = () => {
  return Math.random();
};

CSS

css

:root {
  --first-color: #488cff;
  --second-color: #ffff8c;
}

#firstParagraph {
  background-color: var(--first-color);
  color: var(--second-color);
}

WebAssembly

wasm

(func (param i32) (param f32) (local f64)
  local.get 0
  local.get 1
  local.get 2)

Rust

rust

#[cfg(test)]
mod tests {
    #[test]
    fn it_works() {
        assert_eq!(2 + 2, 4);
    }
}

Python

python

class BookListView(generic.ListView):
    model = Book
    # your own name for the list as a template variable
    context_object_name = 'my_book_list'
    queryset = Book.objects.filter(title__icontains='war')[:5]
    template_name = 'books/my_arbitrary_template_name_list.html'

Interaktive Beispiele

Probieren Sie es aus

Tabellen

Markdown-Tabelle

Konstanter Name	Wert	Beschreibung
`QUERY_COUNTER_BITS_EXT`	0x8864	Die Anzahl der Bits, die verwendet werden, um das Abfrageergebnis für das gegebene Ziel zu halten.
`CURRENT_QUERY_EXT`	0x8865	Die derzeit aktive Abfrage.
`QUERY_RESULT_EXT`	0x8866	Das Abfrageergebnis.
`QUERY_RESULT_AVAILABLE_EXT`	0x8867	Ein Boolean, der anzeigt, ob ein Abfrageergebnis verfügbar ist.
`TIME_ELAPSED_EXT`	0x88BF	Verstrichene Zeit (in Nanosekunden).
`TIMESTAMP_EXT`	0x8E28	Die aktuelle Zeit.
`GPU_DISJOINT_EXT`	0x8FBB	Ein Boolean, der anzeigt, ob die GPU eine unzusammenhängende Operation ausgeführt hat.

HTML-Tabelle

Inhaltskategorien	Flussinhalt, Phrasierungsinhalt, fühlbarer Inhalt.
Erlaubter Inhalt	Phrasierungsinhalt.
Tag-Auslassung	Keine, sowohl das Start- als auch das End-Tag sind obligatorisch.
Erlaubte Eltern	Jedes Element, das Phrasierungsinhalt akzeptiert.
Implizierte ARIA-Rolle	Keine entsprechende Rolle
Erlaubte ARIA-Rollen	Beliebige
DOM-Schnittstelle	[`HTMLElement`](/de/docs/Web/API/HTMLElement)

Werte für den Inhalt von `<meta name="viewport">`
Wert	Mögliche Unterwerte	Beschreibung
`width`	Eine positive ganze Zahl oder der Text `device-width`	Definiert die Pixelbreite des Viewports, bei der Sie möchten, dass die Webseite gerendert wird.
`user-scalable` Nur lesbar	`yes` oder `no`	Wenn auf `no` gesetzt, kann der Benutzer nicht in die Webseite hineinzoomen. Der Standardwert ist `yes`. Browsereinstellungen können diese Regel ignorieren und iOS10+ ignoriert sie standardmäßig.
`viewport-fit`	`auto`, `contain` oder `cover`	Der Wert `auto` beeinflusst das anfängliche Layout-Viewport nicht, und die gesamte Webseite ist sichtbar. Der Wert `contain` bedeutet, dass der Viewport so skaliert wird, dass er das größte Rechteck im Display vergrößert. Der Wert `cover` bedeutet, dass der Viewport so skaliert wird, dass er das Gerätedisplay ausfüllt. Es wird dringend empfohlen, die sicheren Bereichsvariablen zu verwenden, um sicherzustellen, dass wichtiger Inhalt nicht außerhalb des Displays landet.

Jedes Makro unter der Sonne

Nun ja, fast jedes Makro. Hoffentlich nur die, die aktiv verwendet werden.

Ein HTTP-Fehlercode, der "Bad Gateway" bedeutet.

Ein Server kann als Gateway oder Proxy (Zwischenschritt) zwischen einem Client (wie Ihrem Webbrowser) und einem anderen, übergeordneten Server fungieren. Wenn Sie anfordern, auf eine URL zuzugreifen, kann der Gateway-Server Ihre Anfrage an den übergeordneten Server weiterleiten. "502" bedeutet, dass der übergeordnete Server eine ungültige Antwort zurückgegeben hat.

JavaScript Array auf MDN

Das Lauschen auf Mausbewegungen ist sogar noch einfacher als das Lauschen auf Tastendrücke: alles, was wir brauchen, ist das Event für das mousemove-Ereignis.

Browser-Kompatibilität

BCD tables only load in the browser

Achsen-ausgerichtete Begrenzungsbox

Eine der einfacheren Formen der Kollisionserkennung ist die zwischen zwei Rechtecken, die achsen-ausgerichtet sind — das bedeutet keine Drehung. Der Algorithmus funktioniert, indem sichergestellt wird, dass es keine Lücke zwischen den 4 Seiten der Rechtecke gibt. Jede Lücke bedeutet, dass keine Kollision besteht.

var rect1 = { x: 5, y: 5, width: 50, height: 50 };
var rect2 = { x: 20, y: 10, width: 10, height: 10 };

if (
  rect1.x < rect2.x + rect2.width &&
  rect1.x + rect1.width > rect2.x &&
  rect1.y < rect2.y + rect2.height &&
  rect1.y + rect1.height > rect2.y
) {
  // collision detected!
}

// filling in the values =>

if (5 < 30 && 55 > 20 && 5 < 20 && 55 > 10) {
  // collision detected!
}

Rechteckcode

html

<div id="cr-stage"></div>
<p>
  Move the rectangle with arrow keys. Green means collision, blue means no
  collision.
</p>
<script
  type="text/javascript"
  src="https://cdnjs.cloudflare.com/ajax/libs/crafty/0.5.4/crafty-min.js"></script>

Crafty.init(200, 200);

var dim1 = {x: 5, y: 5, w: 50, h: 50}
var dim2 = {x: 20, y: 10, w: 60, h: 40}

var rect1 = Crafty.e("2D, Canvas, Color").attr(dim1).color("red");

var rect2 = Crafty.e("2D, Canvas, Color, Keyboard, Fourway").fourway(2).attr(dim2).color("blue");

rect2.bind("EnterFrame", function () {
if (rect1.x > rect2.x + rect2.w &#x26;&#x26;
rect1.x + rect1.w > rect2.x &#x26;&#x26;
rect1.y > rect2.y + rect2.h &#x26;&#x26;
rect1.h + rect1.y > rect2.y) {
// collision detected!
this.color("green");
} else {
// no collision
this.color("blue");
}
});

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig, bevor Sie diese produktiv verwenden.

tabs.mutedInfo

Veraltete CSSOM-Schnittstellen Veraltet

Zugängliche Ressourcen bei MDN
Webbarrierefreiheit auf Wikipedia

Das AvailableInWorkers-Makro fügt ein lokalisiertes Hinweisfeld ein, das anzeigt, dass eine Funktion im Kontext eines Webarbeiters verfügbar ist.

Hinweis: Dieses Feature ist verfügbar in Web Workers.

Erstellen Sie ein <canvas>-Element und setzen Sie dessen width- und height-Attribute auf die ursprüngliche, kleinere Auflösung.
Setzen Sie dessen CSS-width- und height-Eigenschaften auf das Zwei- oder Vierfache des Werts der HTML-width- und height. Wenn das Canvas mit einer Breite von 128 Pixeln erstellt wurde, würden wir die CSS-width auf 512px setzen, wenn wir eine 4x-Skalierung wollten.
Setzen Sie die image-rendering-CSS-Eigenschaft des <canvas>-Elements auf einen Wert, der das Bild nicht unscharf macht. Entweder crisp-edges oder pixelated funktioniert. Lesen Sie den Artikel zu image-rendering, um weitere Informationen über die Unterschiede zwischen diesen Werten und die zu verwendenden Präfixe in Abhängigkeit vom Browser zu erhalten.

Typen

alarms.Alarm: Informationen zu einem bestimmten Alarm.

Kein Standard: Diese Funktion ist nicht standardisiert und befindet sich nicht im Standardisierungsprozess. Verwenden Sie sie nicht auf Produktionsseiten, die auf das Web ausgerichtet sind: Sie wird nicht für alle Benutzer funktionieren. Außerdem kann es große Inkompatibilitäten zwischen Implementierungen geben und das Verhalten kann sich in Zukunft ändern.

Veraltet: Diese Funktion wird nicht mehr empfohlen. Obwohl einige Browser sie möglicherweise noch unterstützen, kann sie bereits aus den relevanten Webstandards entfernt worden sein, befindet sich im Prozess der Entfernung oder wird nur aus Kompatibilitätsgründen beibehalten. Vermeiden Sie die Verwendung und aktualisieren Sie gegebenenfalls bestehenden Code; siehe die Kompatibilitätstabelle am Ende dieser Seite, um Ihre Entscheidung zu treffen. Beachten Sie, dass diese Funktion jederzeit nicht mehr funktionieren kann.