The MDN Content Kitchensink

[!WARNING] Don't delete this page. It's used by mdn/yari for its automation.

About this page

The kitchensink is a page that attempts to incorporate every possible content element and Yari macro.

This page attempts to be the complete intersection of every other page. Not in terms of the text but in terms of the styles and macros. Let's start with some notes…

Text that uses the <kbd> tag: <kbd>Shift</kbd>

[!NOTE] Here's a block indicator note.

[!WARNING] Here's a block indicator warning.

Prev/Next buttons

{{PreviousMenuNext("Games/Techniques/Control_mechanisms/Desktop_with_mouse_and_keyboard", "Games/Techniques/Control_mechanisms/Other", "Games/Techniques/Control_mechanisms")}}

Another one…

{{PreviousNext("Games/Tutorials/2D_breakout_game_Phaser/Extra_lives", "Games/Tutorials/2D_breakout_game_Phaser/Buttons")}}

Code snippets

Plain text

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

HTML

<pre></pre>

JavaScript

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

CSS

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

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

WebAssembly

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

Rust

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

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'

Interactive examples

{{InteractiveExample("HTML Demo: <data>", "tabbed-shorter")}}

<p>New Products:</p>
<ul>
  <li><data value="398">Mini Ketchup</data></li>
  <li><data value="399">Jumbo Ketchup</data></li>
  <li><data value="400">Mega Jumbo Ketchup</data></li>
</ul>

data:hover::after {
  content: " (ID " attr(value) ")";
  font-size: 0.7em;
}

{{InteractiveExample("JavaScript Demo: Set.prototypeSymbol.iterator")}}

const set = new Set();

set.add(42);
set.add("forty two");

const iterator = set[Symbol.iterator]();

console.log(iterator.next().value);
// Expected output: 42

console.log(iterator.next().value);
// Expected output: "forty two"

{{InteractiveExample("CSS Demo: filter")}}

filter: url("/shared-assets/images/examples/shadow.svg#element-id");

filter: blur(5px);

filter: contrast(200%);

filter: grayscale(80%);

filter: hue-rotate(90deg);

filter: drop-shadow(16px 16px 20px red) invert(75%);

<section id="default-example">
  <div class="example-container">
    
  </div>
</section>

.example-container {
  background-color: white;
  width: 260px;
  height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#example-element {
  flex: 1;
  padding: 30px;
}

Tables

Markdown table

HTML table

Every macro under the sun

Well, almost every macro. Hopefully only the ones that are in active use.

An {{Glossary("HTTP")}} error code meaning "Bad Gateway".

A {{Glossary("Server", "server")}} can act as a gateway or proxy (go-between) between a client (like your Web browser) and another, upstream server. When you request to access a {{Glossary("URL")}}, the gateway server can relay your request to the upstream server. "502" means that the upstream server has returned an invalid response.

• JavaScript {{jsxref("Array")}} on MDN

Listening for mouse movement is even easier than listening for key presses: all we need is the listener for the {{domxref("Element/mousemove_event", "mousemove")}} event.

Browser compatibility

{{Compat}}

Axis-Aligned Bounding Box

One of the simpler forms of collision detection is between two rectangles that are axis aligned — meaning no rotation. The algorithm works by ensuring there is no gap between any of the 4 sides of the rectangles. Any gap means a collision does not exist.

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

<div id="cr-stage"></div>
<p>
  Move the rectangle with arrow keys. Green means collision, blue means no
  collision.
</p>
<script 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 &&
    rect1.x + rect1.w > rect2.x &&
    rect1.y > rect2.y + rect2.h &&
    rect1.h + rect1.y > rect2.y
  ) {
    // collision detected!
    this.color("green");
  } else {
    // no collision
    this.color("blue");
  }
});

{{EmbedLiveSample('Rect_code', '700', '300') }}

{{SeeCompatTable}}

{{WebExtAPIRef("tabs.mutedInfo")}}

Obsolete CSSOM interfaces {{deprecated_inline}}

{{InheritanceDiagram("WheelEvent")}}

{{EmbedGHLiveSample("web-tech-games/index.html", '100%', 820)}}

• Accessibility resources at MDN
• Web accessibility on Wikipedia

The AvailableInWorkers macro inserts a localized note box indicating that a feature is available in a Web worker context.

{{AvailableInWorkers}}

• button
• checkbox
• menuitem
• menuitemcheckbox
• menuitemradio
• option
• radio
• switch
• tab
• treeitem

• Create a {{htmlelement("canvas")}} element and set its width and height attributes to the original, smaller resolution.
• Set its CSS {{cssxref("width")}} and {{cssxref("height")}} properties to be 2x or 4x the value of the HTML width and height. If the canvas was created with a 128 pixel width, for example, we would set the CSS width to 512px if we wanted a 4x scale.
• Set the {{htmlelement("canvas")}} element's image-rendering CSS property to some value that does not make the image blurry. Either crisp-edges or pixelated will work. Check out the {{cssxref("image-rendering")}} article for more information on the differences between these values, and which prefixes to use depending on the browser.

• MDN Web Docs Glossary:

  • {{Glossary("XMLHttpRequest", "XHR")}}

• AJAX on Wikipedia

• Learn: Making network requests with JavaScript

• {{DOMxRef("XMLHttpRequest")}}

• {{DOMxRef("Fetch API")}}

• Using Fetch API

• Synchronous vs. Asynchronous Communications

• {{SVGElement("feGaussianBlur")}}
• {{SVGAttr("keySplines")}} SVG attribute
• dir
• lang
• {{cssxref(":dir")}}
• {{cssxref("direction")}}

Types

• {{WebExtAPIRef("alarms.Alarm")}}
  • : Information about a particular alarm.

{{Non-standard_Header}} {{Deprecated_Header}}