Das MDN Content Kitchensink

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

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

Über diese Seite

Das kitchensink ist eine Seite, die versucht, jedes mögliche Inhalts-Element und Yari-Makro einzubinden.

Diese Seite versucht, die vollständige Schnittmenge aller anderen Seiten zu sein. Nicht in Bezug auf den Text, sondern in Bezug auf die Stile und Makros. Beginnen wir mit einigen Hinweisen…

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

Hinweis: Hier ist eine Notiz als Blockanzeige.

Warnung: Hier ist eine Warnung als Blockanzeige.

Vorher/Nachher-Schaltflächen

Noch eine…

Codeausschnitte

Klartext

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

HTML

html
<pre></pre>

JavaScript

js
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

Probieren Sie es aus

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 angibt, ob ein Abfrageergebnis verfügbar ist.
TIME_ELAPSED_EXT 0x88BF Vergangene Zeit (in Nanosekunden).
TIMESTAMP_EXT 0x8E28 Die aktuelle Zeit.
GPU_DISJOINT_EXT 0x8FBB Ein Boolean, der angibt, ob die GPU eine inkohärente Operation durchgeführt hat.

HTML-Tabelle

Inhaltskategorien Flow content, phrasing content, palpable content.
Erlaubter Inhalt Phrasing content.
Tag-Auslassung Keine, sowohl das Anfangs- als auch das End-Tag sind obligatorisch.
Erlaubte Eltern Jedes Element, das phrasing content akzeptiert.
Implizierte ARIA-Rolle Keine entsprechende Rolle
Erlaubte ARIA-Rollen Beliebige
DOM-Schnittstelle [`HTMLElement`](/de/docs/Web/API/HTMLElement)
Werte für den Inhalt des <meta name="viewport">
Wert Mögliche Unterwerte Beschreibung
width Eine positive Ganzzahl oder der Text device-width Definiert die Pixelbreite des Viewports, bei dem Sie möchten, dass die Website gerendert wird.
user-scalable Schreibgeschützt yes oder no Wenn auf no gesetzt, kann der Benutzer die Webseite nicht zoomen. 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 den anfänglichen 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 innerhalb der Anzeige umfasst.

Der Wert cover bedeutet, dass der Viewport so skaliert wird, dass er den Gerätemonitor ausfüllt. Es wird dringend empfohlen, die safe area inset-Variablen zu verwenden, um sicherzustellen, dass wichtige Inhalte nicht außerhalb der Anzeige enden.

Jedes Makro unter der Sonne

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

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

Ein Server kann als Gateway oder Proxy (Zwischenstation) zwischen einem Client (wie Ihrem Webbrowser) und einem anderen, vorgelagerten Server fungieren. Wenn Sie eine URL anfordern, kann der Gateway-Server Ihre Anfrage an den vorgelagerten Server weiterleiten. "502" bedeutet, dass der vorgelagerte 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 benötigen, ist ein Listener für das mousemove-Event.

Browser-Kompatibilität

BCD tables only load in the browser

Achsenausgerichtete Begrenzungsbox

Eine der einfachsten Formen der Kollisionsdetektion erfolgt zwischen zwei Rechtecken, die achsenausgerichtet sind – das heißt, sie sind nicht gedreht. Der Algorithmus funktioniert, indem sichergestellt wird, dass es keine Lücke zwischen den vier Seiten der Rechtecke gibt. Jede Lücke bedeutet, dass keine Kollision vorliegt.

js
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!
}

Rect-Code

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>
js
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 vor der Verwendung auf produktiven Webseiten.

tabs.mutedInfo

Veraltete CSSOM-Schnittstellen

Event UIEvent MouseEvent WheelEvent

Das AvailableInWorkers-Makro fügt eine lokalisiert angepasste Hinweisbox ein, die anzeigt, dass ein Feature im Kontext eines Web-Arbeiters verfügbar ist.

Hinweis: Diese Funktion ist in Web Workers verfügbar.

  • Erstellen Sie ein <canvas>-Element und setzen Sie dessen width- und height-Attribute auf die ursprüngliche, kleinere Auflösung.
  • Setzen Sie die CSS-width- und height-Eigenschaften auf den doppelten oder vierfachen Wert der HTML-Attribute width und height. Wenn das Canvas z. B. mit einer Breite von 128 Pixeln erstellt wurde, würden wir die CSS-width auf 512px setzen, wenn wir eine 4x-Skalierung wünschen.
  • Setzen Sie die CSS-Eigenschaft image-rendering des <canvas>-Elements auf einen Wert, der das Bild nicht verschwommen darstellt. Entweder crisp-edges oder pixelated funktioniert. Weitere Informationen zu den Unterschieden zwischen diesen Werten und den zu verwendenden Präfixen je nach Browser finden Sie im Artikel über image-rendering.

Typen

alarms.Alarm

Informationen zu einem bestimmten Alarm.

Nicht standardisiert: Diese Funktion ist nicht standardisiert und befindet sich nicht auf dem Weg zur Standardisierung. Verwenden Sie sie nicht auf Produktionsseiten, die dem Web ausgesetzt sind: Sie funktioniert nicht für alle Benutzer. Es kann auch 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, könnte sie bereits aus den relevanten Webstandards entfernt worden sein, in Kürze entfernt werden oder nur noch aus Kompatibilitätsgründen bestehen. Vermeiden Sie die Verwendung und aktualisieren Sie vorhandenen Code, falls möglich; siehe die Kompatibilitätstabelle am Ende dieser Seite, um Ihre Entscheidung zu unterstützen. Beachten Sie, dass diese Funktion jederzeit aufhören könnte zu funktionieren.

Eisberg-Bild