Die MDN Inhaltssammlung

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.

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

Über diese Seite

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

Diese Seite versucht, das vollständige Schnittpunkt von jeder anderen Seite zu sein. Nicht in Bezug auf den Text, sondern in Bezug auf die Stile und Makros. Lassen Sie uns mit einigen Notizen beginnen...

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

Hinweis: Hier ist eine Block-Notiz.

Warnung: Hier ist eine Block-Warnung.

Vorher/Nachher-Schaltflächen

Eine andere…

Code-Schnipsel

Reiner Text

  ___________________________
< 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

Name der Konstante Wert Beschreibung
QUERY_COUNTER_BITS_EXT 0x8864 Die Anzahl der Bits, die für die Abfrageergebnisse des gegebenen Ziels verwendet werden.
CURRENT_QUERY_EXT 0x8865 Die aktuell aktive Abfrage.
QUERY_RESULT_EXT 0x8866 Das Abfrageergebnis.
QUERY_RESULT_AVAILABLE_EXT 0x8867 Ein booleanischer Wert, der angibt, 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 booleanischer Wert, der angibt, ob die GPU eine getrennte Operation durchgeführt hat.

HTML-Tabelle

Inhaltskategorien Fließender Inhalt, Formulierungsinhalt, fassbarer Inhalt.
Erlaubter Inhalt Formulierungsinhalt.
Tag-Auslassung Keine, sowohl das Start- als auch das End-Tag sind obligatorisch.
Erlaubte Eltern Jedes Element, das Formulierungsinhalt akzeptiert.
Implizite ARIA-Rolle Keine entsprechende Rolle
Erlaubte ARIA-Rollen Beliebig
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 Ganzzahl oder der Text device-width Definiert die Pixelbreite des Viewports, bei der die Website gerendert werden soll.
user-scalable Schreibgeschützt yes oder no Wenn auf no gesetzt, kann der Benutzer nicht in die Webseite hineinzoomen. Standard 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 skaliert wird, um das größte in die Anzeige eingeschriebene Rechteck anzupassen.

Der Wert cover bedeutet, dass der Viewport skaliert wird, um die Gerätedisplay zu füllen. Es wird dringend empfohlen, die safe area inset Variablen zu verwenden, um sicherzustellen, dass wichtiger Inhalt nicht außerhalb der Anzeige landet.

Jedes Makro unter der Sonne

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

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

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

  • JavaScript Array auf MDN

Das Abhören von Mausbewegungen ist sogar noch einfacher als das Abhören von Tastendrücken: Wir benötigen lediglich den Listener für das mousemove-Ereignis.

Browser-Kompatibilität

BCD tables only load in the browser

Achsenbündige Begrenzungsbox

Eine der einfacheren Formen der Kollisionserkennung erfolgt zwischen zwei Rechtecken, die achsenparallel sind — d. h. ohne Rotation. 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 existiert.

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

Rechteck-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 ein lokalisiertes Hinweisfeld ein, das anzeigt, dass eine Funktion im Kontext eines Webarbeiters 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 dessen CSS-width- und height-Eigenschaften auf das 2- oder 4-fache des Wertes der HTML-Attribute width und height. Wenn das Canvas-Beispiel mit einer Breite von 128 Pixel erstellt wurde, würden wir die CSS-Breite auf 512px setzen, wenn wir eine Skalierung im 4-fachen wünschen.
  • Setzen Sie die CSS-Eigenschaft image-rendering des <canvas>-Elements auf einen Wert, der das Bild nicht verschwommen erscheinen lässt. Entweder crisp-edges oder pixelated funktionieren. Lesen Sie den Artikel über image-rendering, um mehr über die Unterschiede zwischen diesen Werten zu erfahren und welche Präfixe je nach Browser verwendet werden sollen.

Typen

alarms.Alarm

Informationen über einen 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