The 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.

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: Shift

Note: Here's a block indicator note.

Warning: Here's a block indicator warning.

Prev/Next buttons

Another one…

Code snippets

Plain 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'

Interactive Examples

Try it

Try it

Try it

Tables

Markdown table

Constant name Value Description
QUERY_COUNTER_BITS_EXT 0x8864 The number of bits used to hold the query result for the given target.
CURRENT_QUERY_EXT 0x8865 The currently active query.
QUERY_RESULT_EXT 0x8866 The query result.
QUERY_RESULT_AVAILABLE_EXT 0x8867 A Boolean indicating whether a query result is available.
TIME_ELAPSED_EXT 0x88BF Elapsed time (in nanoseconds).
TIMESTAMP_EXT 0x8E28 The current time.
GPU_DISJOINT_EXT 0x8FBB A Boolean indicating whether the GPU performed any disjoint operation.

HTML table

Content categories Flow content, phrasing content, palpable content.
Permitted content Phrasing content.
Tag omission None, both the starting and ending tag are mandatory.
Permitted parents Any element that accepts phrasing content.
Implicit ARIA role No corresponding role
Permitted ARIA roles Any
DOM interface HTMLElement
Values for the content of <meta name="viewport">
Value Possible subvalues Description
width A positive integer number, or the text device-width Defines the pixel width of the viewport that you want the website to be rendered at.
user-scalable Read only yes or no If set to no, the user is not able to zoom in the webpage. The default is yes. Browser settings can ignore this rule, and iOS10+ ignores it by default.
viewport-fit auto, contain or cover

The auto value doesn't affect the initial layout viewport, and the whole web page is viewable.

The contain value means that the viewport is scaled to fit the largest rectangle inscribed within the display.

The cover value means that the viewport is scaled to fill the device display. It is highly recommended to make use of the safe area inset variables to ensure that important content doesn't end up outside the display.

Every macro under the sun

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

An HTTP error code meaning "Bad Gateway".

A 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 URL, the gateway server can relay your request to the upstream server. "502" means that the upstream server has returned an invalid response.

  • JavaScript Array on MDN

Listening for mouse movement is even easier than listening for key presses: all we need is the listener for the mousemove event.

Browser compatibility

BCD tables only load in the browser

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.

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");
}
});

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

tabs.mutedInfo

Obsolete CSSOM interfaces

Event UIEvent MouseEvent WheelEvent

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

Note: This feature is available in Web Workers.

  • Create a <canvas> element and set its width and height attributes to the original, smaller resolution.
  • Set its CSS width and 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 <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 image-rendering article for more information on the differences between these values, and which prefixes to use depending on the browser.

Types

alarms.Alarm

Information about a particular alarm.

Non-standard: This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

Deprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

Iceberg pic