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: 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
<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'
Formal syntax
The formal syntax must be taken from the spec and added to the MDN data repository. It is an important tool to get precise syntax information for advanced users.
<font-stretch-absolute>where
<font-stretch-absolute> = normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | <percentage>
Interactive Examples
Tables
Specification | Status | Comment |
---|---|---|
HTML Living Standard The definition of 'dns-prefetch' in that specification. |
Living Standard |
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 |
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 web site 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
The
The |
Fetch The definition of 'forbidden-response-header-name' in that specification. |
Living Standard |
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.
...just below the keyup 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.
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!
}
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
tabs.mutedInfo
Obsolete CSSOM interfaces
- 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.
Note: This feature is available in Web Workers
- Create a
<canvas>
element and set itswidth
andheight
attributes to the original, smaller resolution. -
Set its CSS
width
andheight
properties to be 2x or 4x the value of the HTMLwidth
andheight
. If the canvas was created with a 128 pixel width, for example, we would set the CSSwidth
to512px
if we wanted a 4x scale. -
Set the
<canvas>
element'simage-rendering
CSS property to some value that does not make the image blurry. Eithercrisp-edges
orpixelated
will work. Check out theimage-rendering
article for more information on the differences between these values, and which prefixes to use depending on the browser.
- MDN Web Docs Glossary:
- AJAX on Wikipedia
- Ajax
- Ajax - Getting started
XMLHttpRequest
Fetch API
- Using Fetch API
- Synchronous vs. Asynchronous Communications
<feGaussianBlur>
keySplines
SVG attributedir
lang
:dir
direction
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.
geckoRelease:
(Firefox 4) <- update this template reference to Gecko 2!