removeEventListener, the [capture phase](https://dom.spec.whatwg.org/#dom-event-capturing_phase) of DOM event dispatch, as well as the
stopPropagation()and
preventDefault()event methods.
DOMTokenListobject.
background-position: right 5px bottom 5px;for positioning 5px from the bottom-right corner.
counter-resetand
counter-incrementproperties.
:defaultpseudo-class matches checkboxes and radio buttons which are checked by default,
<option>s with the
selectedattribute, and the default submit button (if any) of a form.
::first-linepseudo-element. Note that only a limited set of properties can be applied.
attr()notation in the
contentproperty.
<input>has
maxand/or
minattributes, then
:in-rangematches when the value is within the specified range and
:out-of-rangematches when the value is outside the specified range. If there are no range constraints, then neither pseudo-class matches.
:indeterminatepseudo-class matches indeterminate checkboxes, indeterminate
<progress>bars, and radio buttons with no checked button in their radio button group.
min/
max-resolutionfor this, some browsers support the older non-standard
device-pixel-ratiomedia query.
@namespaceat-rule, elements of other namespaces (e.g. SVG) can be targeted using the pipe (
|) selector.
:optionalpseudo-class matches form inputs (
<input>,
<textarea>,
<select>) which are not
:required.
overflowproperty is now a shorthand for
overflow-x&
overflow-y. The latest version of the specification also introduces the
clipvalue that blocks programmatic scrolling.
*(universal selector),
>(child selector),
:first-child,
:link,
:visited,
:active,
:hover,
:focus,
:lang(),
+(adjacent sibling selector),
[attr],
[attr="val"],
[attr~="val"],
[attr|="bar"],
.foo(class selector),
#foo(id selector)
[foo^="bar"],
[foo$="bar"],
[foo*="bar"],
:root,
:nth-child(),
:nth-last-child(),
:nth-of-type(),
:nth-last-of-type(),
:last-child,
:first-of-type,
:last-of-type,
:only-child,
:only-of-type,
:empty,
:target,
:enabled,
:disabled,
:checked,
:not(),
~(general sibling)
display: table-*properties as well as
display: inline-table
text-indentproperty applies indentation to lines of inline content in a block.
colorvalue to other properties like
background-color, etc.
<head>element
Function.prototype.bind, Array methods like
indexOf,
forEach,
map&
filter, Object methods like
defineProperty,
create&
keys, the
trimmethod on Strings and many more.
disabledattribute on the fieldset element itself.
flex, as well as
display: flex,
display: inline-flex,
align-content,
align-items,
align-self,
justify-contentand
order.
formaction,
formenctype,
formmethod,
formnovalidate, and
formtarget
checkValidity()method as well as support for the
:invalid,
:valid, and
:requiredCSS pseudo-classes.
hiddenattribute may be applied to any element, and effectively hides elements similar to
display: nonein CSS.
section,
article,
aside,
header,
footer,
nav,
figure,
figcaption,
time,
mark&
main.
autocompleteattribute for
inputelements indicates to the browser whether a value should or should not be autofilled when appropriate.
<input type="text">.
KeyboardEventproperty whose value is a string identifying the key that was pressed. Covers character keys, non-character keys (e.g. arrow keys), and dead keys.
localeCompare()method returns a number indicating whether a reference string comes before or after or is the same as the given string in sort order.
disabledattribute,
readonlyform controls are still included in form submissions and the user can still select (but not edit) their value text.
em, but relative only to the root element, not any parent element. Thus compounding does not occur as it does with
emunits.
Int8Array,
Uint8Array,
Uint8ClampedArray,
Int16Array,
Uint16Array,
Int32Array,
Uint32Array,
Float32Array&
Float64Array
non-scaling-strokevalue for the
vector-effectSVG attribute/CSS property makes strokes appear as the same width regardless of any transformations applied.
word-wrapproperty.
DOMParser,
XMLSerializer,
innerHTML,
outerHTMLand
insertAdjacentHTML.
Accelerometer,
LinearAccelerationSensorand
GravitySensorinterfaces for obtaining information about acceleration applied to the X, Y and Z axis of a device that hosts the sensor.
find()method returns the value of the first item in the array based on the result of the provided testing function.
findIndex()method returns the index of the first element in the array that satisfies the provided testing function.
indexOf).
=>syntax and lexical
thisbinding.
currentSrc,
currentTime,
paused,
playbackRate,
buffered,
duration,
played,
seekable,
ended,
autoplay,
loop,
controls,
volume&
muted
scroll(default),
fixedand
local.
navigator.sendBeacon, even after a page was closed. Useful for posting analytics data the moment a user was finished using the page.
beforeprintand
afterprintevents so the printed document can be annotated.
border-radiusas well as the long-hand properties (e.g.
border-top-left-radius)
width: calc(100% - 3em)
checkValidity(),
setCustomValidity(),
reportValidity()and validation states.
document.cookiemethod, the API provides a much more modern interface, which can also be used in service workers.
directionand
unicode-bidi.
:any-linkCSS pseudo-class matches all elements that match
:linkor
:visited
appearanceproperty defines how elements (particularly form controls) appear by default. By setting the value to
nonethe default appearance can be entirely redefined using other CSS properties.
caret-colorproperty allows the color to be set of the caret (blinking text insertion pointer) in an editable text area.
@layerat-rule allows authors to explicitly layer their styles in the cascade, before specificity and order of appearance are considered.
ibefore the
]in a CSS attribute selector causes the attribute value to be matched in an ASCII-case-insensitive manner. For example,
[b="xyz" i]would match both
<a b="xyz">and
<a b="XYZ">.
print-color-adjust(or
-webkit-print-color-adjustas prefixed in WebKit/Blink browsers) property is a CSS extension that can be used to force printing of background colors and images.
color()function allows the browser to display colors in any color space, such as the P3 color space which can display colors outside of the default sRGB color space.
cqw,
cqh,
cqi,
cqb,
cqmin, and
cqmax.
containproperty lets developers limit the scope of the browser's styles, layout and paint work for faster and more efficient rendering.
image-renderingproperty are
crisp-edgesand
pixelated.
A >> Bis equivalent to
A B.
@viewportrule, replacing Apple's own popular
<meta>viewport implementation. Includes the
extend-to-zoomwidth value.
:dir(ltr)matches elements which are Left-to-Right.
:dir(rtl)matches elements which are Right-to-Left.
display: contentscauses an element's children to appear as if they were direct children of the element's parent, ignoring the element itself. This can be useful when a wrapper element should be ignored when using CSS grid or similar layout techniques.
safe-area-inset-top.
filterproperty to elements, matching filters available in SVG. Filter functions include blur, brightness, contrast, drop-shadow, grayscale, hue-rotate, invert, opacity, sepia and saturate.
:focus-visiblepseudo-class applies while an element matches the
:focuspseudo-class, and the UA determines via heuristics that the focus should be specially indicated on the element (typically via a “focus ring”).
:focus-withinpseudo-class matches elements that either themselves match
:focusor that have descendants which match
:focus.
@font-palette-valuesat-rule, custom palettes can be defined.
@font-facedescriptor
font-displaythat allows control over how a downloadable font renders before it is fully loaded.
font-stretchproperty allows the appropriate one to be selected. The property in itself does not cause the browser to stretch to a font.
grid-*properties and the
frunit.
a:has(img)selects all
<a>elements that contain an
<img>child.
lch()and
lab()color functions are based on the CIE LAB color space, representing colors in a way that closely matches human perception and provides access to a wider spectrum of colors than offered by the usual RGB color space.
display: -webkit-box. It will end with ellipsis when
text-overflow: ellipsisis included.
writing-moderelative equivalents of their corresponding physical properties.
::markerpseudo-element allows list item markers to be styled or have their content value customized.
:is()(formerly
:matches(), formerly
:any()) pseudo-class checks whether the element at its position in the outer selector matches any of the selectors in its selector list. It's useful syntactic sugar that allows you to avoid writing out all the combinations manually as separate selectors. The effect is similar to nesting in Sass and most other CSS preprocessors.
calc()
pointer,
any-pointer,
hover, and
any-hovermedia features.
>,
<,
>=, or
<=. For example:
@media (100px <= width <= 1900px)is the equivalent of
@media (min-width: 100px) and (max-width: 1900px)`
offset-pathproperty. Originally defined as the
motion-pathproperty.
:not()pseudo-class to accept a single simple selector, which the element must not match any of. Thus,
:not(a, .b, [c])or
:not(a.b[c])did not work. Selectors Level 4 allows
:not()to accept a list of selectors. Thus,
:not(a):not(.b):not([c])can instead be written as
:not(a, .b, [c])and
:not(a.b[c])works as intended.
:nth-child()and
:nth-last-child()accept an optional
of Sclause which filters the children to only those which match the selector list
S. For example,
:nth-child(1 of .foo)selects the first child among the children that have the
fooclass (ignoring any non-
foochildren which precede that child). Similar to
:nth-of-type, but for arbitrary selectors instead of only type selectors.
overflow-anchoris
auto, it can mitigate this jarring user experience by keeping track of the position of an anchor node and adjusting the scroll offset accordingly
overlayvalue of the
overflowCSS property is a non-standard value to make scrollbars appear on top of content rather than take up space. This value is deprecated and related functionality being standardized as [the
scrollbar-gutterproperty](mdn-css_properties_scrollbar-gutter).
@page) to define page-specific rules when printing web pages, such as margin per page and page dimensions.
YYYY-MM-DDto clarify that numeric dates are to be entered in year-month-day order.
display:reverton a
<div>would result in
display:block. This is in contrast to the
initialvalue, which is simply defined on a per-property basis, and for
displaywould be
inline.
shape-outside,
shape-marginand
shape-image-threshold
text-alignis
justify.
text-align: justifyis set.
text-orientationproperty specifies the orientation of text within a line. Current values only have an effect in vertical typographic modes (defined with the
writing-modeproperty)
@elsestatements.
attr()is supported for effectively all browsers for the
contentproperty, CSS Values and Units Level 5 adds the ability to use
attr()on **any** CSS property, and to use it for non-string values (e.g. numbers, colors).
grab&
grabbingvalues for the
cursorproperty. Used to indicate that something can be grabbed (dragged to be moved).
zoom-in,
zoom-outvalues for the CSS3
cursorproperty.
@symbol and placed immediately before the code being extended.
::backdroppseudo-element for behind the element.
navigator.doNotTrack. Due to lack of adoption the Do Not Track specification was deprecated in 2018.
document.currentScriptreturns the
<script>element whose script is currently being processed.
document.scrollingElementrefers to the element that scrolls the document.
ChildNode.before,
ChildNode.after,
ChildNode.replaceWith,
ParentNode.prepend, and
ParentNode.append.
DOMMatrixinterface represents 4x4 matrices, suitable for 2D and 3D operations. Supersedes the
WebKitCSSMatrixand
SVGMatrixinterfaces.
scrollTop&
scrollLeftproperties, but also allows options to be passed to define the scroll behavior.
function*declaration.
<script type="module">Includes support for the
nomoduleattribute.
Numberbuilt-in object in ES6, including constant properties
EPSILON,
MIN_SAFE_INTEGER, and
MAX_SAFE_INTEGER, and methods
isFinite,
isInteger,
isSafeInteger, and
isNaN.
gapfor flexbox containers to create gaps/gutters between flex items
focusinand
focusoutevents fire just before the element gains or loses focus, and they bubble. By contrast, the
focusand
blurevents fire after the focus has shifted, and don't bubble.
font-familythat represents the default user interface font.
.heifor
.heicfile extensions.
performance.now()
history.pushState,
history.replaceStateand the
popstateevent.
srcattribute (if present) with HTML content within the attribute.
importstatements and
import()expressions.
date,
time,
datetime-local,
month&
week.
inputevent is fired when the user changes the value of an
<input>element,
<select>element, or
<textarea>element. By contrast, the "change" event usually only fires after the form control has lost focus.
<input type="file">dialog
webkitdirectoryattribute on the
<input type="file">element allows entire directory with file contents (and any subdirectories) to be selected.
inputmodeattribute specifies what kind of input mechanism would be most helpful for users entering content into the form control.
setSelectionRange()and the
selectionStart&
selectionEndproperties.
max-content,
min-content,
fit-contentand
stretch(formerly
fill) properties.
(?<= )) and negative lookbehind (
(?<! )) zero-width assertions in JavaScript regular expressions can be used to ensure a pattern is preceded by another pattern.
justify-contentproperty distributes the space between items evenly. It is similar to space-around but provides equal instead of half-sized space on the edges. Can be used in both CSS flexbox & grid.
text-rendering: optimizeLegibilityCSS property enables high-quality kerning and ligatures in certain browsers. Newer browsers have this behavior enabled by default.
KeyboardEventproperty that gives the Unicode codepoint number of a character key pressed during a
keypressevent.
KeyboardEventproperty representing the physical key that was pressed, ignoring the keyboard layout and ignoring whether any modifier keys were active.
KeyboardEventmethod that returns the state (whether the key is pressed/locked or not) of the given modifier key.
KeyboardEventproperty that indicates the location of the key on the input device. Useful when there are more than one physical key for the same logical key (e.g. left or right "Control" key; main or numpad "1" key).
KeyboardEventproperty that is equivalent to either
KeyboardEvent.keyCodeor
KeyboardEvent.charCodedepending on whether the key is alphanumeric.
loading](/loading-lazy-attr) attribute for the new standardized API.
.icoformat, the PNG format can be preferable.
.icoformat, the SVG format can be preferable to more easily support higher resolutions or larger icons.
<link rel="dns-prefetch" href="https://example.com/">
<link rel="modulepreload">, browsers can be informed to prefetch module scripts without having to execute them, allowing fine-grained control over when and how module resources are loaded.
<link rel="preconnect" href="https://example-domain.com/">
<link rel="prefetch" href="(url)">
<link rel="preload">, browsers can be informed to prefetch resources without having to execute them, allowing fine-grained control over when and how resources are loaded.
<link rel="prerender" href="(url)">
loadingattribute on images & iframes gives authors control over when the browser should start loading the resource.
<video>,
<audio>, or
<canvas>element via the
captureStreammethod, in the form of a
MediaStream
videoand
audioelements.
navigator.connection
Object.entries()method creates a multi-dimensional array of key value pairs from the given object.
Object.values()method returns an array of a given object's own enumerable property values.
$.one()feature.
onlineand
offlineevents) and the
navigator.onLineproperty to see current status.
outlineshorthand, as well as
outline-width,
outline-style,
outline-colorand
outline-offset.
padStart()and
padEnd()methods pad the current string with a given string (eventually repeated) so that the resulting string reaches a given length. The pad is applied from the start (left) of the current string for
padStart(), and applied from the end (right) of the current string for
padEnd().
pageshowand
pagehideevents.
passive: trueoption cannot cancel (
preventDefault()) the events they receive. Primarily intended to be used with touch events and
wheelevents. Since they cannot prevent scrolls, passive event listeners allow the browser to perform optimizations that result in smoother scrolling.
<portal>element (similar to an iframe) which can then seamlessly transition to the new navigated state when "activated".
navigator.registerProtocolHandler. This allows certain URLs to be opened by a given web application, for example
mailto:addresses can be opened by a webmail client.
window.opener
rel="noreferrer"set do not send the request's "referrer" header. This prevents the destination site from seeing what URL the user came from.
cancelAnimationFrame
cancelIdleCallback. The API has similarities with
requestAnimationFrame.
Element.scrollIntoView()method scrolls the current element into the visible area of the browser window. Parameters can be provided to set the position inside the visible area as well as whether scrolling should be instant or smooth.
Element.scrollIntoView()method.
window.getSelection()method, as well as the
selectstart&
selectionchangeevents on
document.
input/
textareafields to enable/disable the browser's spellchecker.
srcsetand
sizesattributes on
img(or
source) elements allow authors to define various image resources and "hints" that assist a user agent to determine the most appropriate image source to display (e.g. high-resolution displays, small monitors, etc).
DateAPI.
text-decoration: line-through dashed blue) or as single properties (e.g.
text-decoration-color: blue)
text-emphasisshorthand, and its
text-emphasis-styleand
text-emphasis-colorlonghands, can be used to apply marks to the text. The
text-emphasis-positionproperty, which inherits separately, allows setting the emphasis marks' position with respect to the text.
TextEncoderencodes a JavaScript string into bytes using the UTF-8 encoding and returns the resulting
Uint8Arrayof those bytes.
TextDecoderdoes the reverse.
transformas well as
transform-originproperties.
transformproperty. Includes support for the
perspectiveproperty to set the perspective in z-space and the
backface-visibilityproperty to toggle display of the reverse side of a 3D-transformed element.
unhandledrejectionevent is fired when a Promise is rejected but there is no rejection handler to deal with the rejection. The
rejectionhandledevent is fired when a Promise is rejected, and after the rejection is handled by the promise's rejection handling code.
font-variation-settingsproperty.
currentSrc,
currentTime,
paused,
playbackRate,
buffered,
duration,
played,
seekable,
ended,
autoplay,
loop,
controls,
volume&
muted
vwand
vhthat are based on shown or hidden browser UI states to address shortcomings of the original units. Currently defined as the
sv*units (
svb,
svh,
svi,
svmax,
svmin,
svw),
lv*units (
lvb,
lvh,
lvi,
lvmax,
lvmin,
lvw),
dv*units (
dvb,
dvh,
dvi,
dvmax,
dvmin,
dvw) and the logical
vi/
vbunits.
-webkit-user-dragCSS property can be used to either make an element draggable or explicitly non-draggable (like links and images). See the standardized [draggable attribute/property](/mdn-api_htmlelement_draggable) for the recommended alternative method of accomplishing the same functionality.