Canisoon - learn about upcoming browser features

CSS Logical Properties

(84.64)

::selection CSS pseudo-element

(83.16)

(82.63)

(82.17)

(81.71)

Media Source Extensions

(81.64)

Do Not Track API

(79.43)

Resource Hints: prefetch

(78.87)

CSS Gradients

(78.75)

Ogg Vorbis audio format

(78.36)

CSS3 Cursors (original values)

(78.25)

Media Queries: resolution feature

(77.97)

(77.92)

(77.85)

CSS grab & grabbing cursors

(77.77)

CSS3 Cursors: zoom-in & zoom-out

(77.62)

Web Notifications

(77.61)

Resource Hints: dns-prefetch

(77.47)

(77.43)

(77.42)

(77.37)

Blending of HTML/SVG elements

(77.14)

(77.1)

(77.09)

(77.01)

(76.84)

(76.76)

(76.68)

(76.6)

CSSOM Scroll-behavior

(76.56)

CSS Containment

(76.52)

Lookbehind in JS regular expressions

(76.23)

(76.14)

(76.06)

CSS background-attachment

(75.73)

CSS overflow-anchor (Scroll Anchoring)

(75.43)

CSS overscroll-behavior

(75.37)

(75.18)

(74.99)

(74.58)

CSS overflow: overlay

(74.33)

:focus-visible CSS pseudo-class

SVG favicons

(74.32)

HTML5 SVG

(74.28)

Date and time input types

(73.95)

Intrinsic & Extrinsic Sizing

(73.56)

Battery Status API

(73.3)

Resource Hints: prerender

CSS display: contents

(73.24)

(73.14)

(73.05)

(72.99)

(72.91)

(72.86)

(72.69)

Client Hints: DPR, Width, Viewport-Width

(72.6)

(72.48)

(72.46)

CSS Paged Media (@page)

(72.44)

Asynchronous Clipboard API

(72.39)

Server Timing

(72.31)

Filesystem & FileWriter API

(72.05)

Add to home screen (A2HS)

(71.86)

HTML5 Other

CSS overflow property

(71.84)

Web Bluetooth

(71.48)

Media Capture from DOM Elements API

(71.46)

(71.45)

(71.38)

Resource Hints: modulepreload

(71.2)

OffscreenCanvas

(71.08)

Signed HTTP Exchanges (SXG)

(70.89)

Lazy loading via attribute for images & iframes

IntersectionObserver V2

(70.89)

DOM JS API Security

Feature Policy

(70.89)

JS API Other Security

(70.63)

URL Scroll-To-Text Fragment

(70.23)

Trusted Types for DOM manipulation

(70.18)

DOM JS API Other Security

😎 Pretty well established

These 316 features that are supported by 90%+ of all browsers

PNG alpha transparency

(99.68)

PNG

CSS min/max-width/height

(99.68)

(99.68)

(99.67)

(99.67)

(99.67)

(99.66)

XHTML served as application/xhtml+xml

(99.64)

naturalWidth & naturalHeight image properties

(99.64)

DOMContentLoaded

(99.64)

Document Object Model Range

(99.64)

CSS3 Opacity

(99.64)

CSS Generated content for pseudo-elements

(99.64)

CSS2 CSS3

CSS first-line pseudo-element

(99.64)

EventTarget.addEventListener()

(99.64)

(99.63)

(99.63)

Server Name Indication

(99.63)

EventTarget.dispatchEvent

JSON parsing

(99.63)

(99.63)

CSS namespaces

(99.63)

getElementsByClassName

(99.62)

querySelector/querySelectorAll

CSS currentColor value

(99.62)

(99.62)

(99.62)

(99.61)

CSS3 Media Queries

(99.61)

CSS3 Multiple backgrounds

(99.6)

document.elementFromPoint()

(99.58)

document.head

(99.57)

Base64 encoding and decoding

(99.54)

::first-letter CSS pseudo-element selector

(99.53)

Element.getBoundingClientRect()

Inline SVG in HTML5

(99.52)

HTML5 SVG

(99.51)

Element.insertAdjacentHTML()

(99.47)

(99.45)

(99.44)

Attributes for form submission

(99.44)

input placeholder attribute

(99.43)

matchMedia

(99.41)

console.time and console.timeEnd

ECMAScript 5 Strict Mode

(99.4)

SVG filters

(99.4)

SVG

(99.4)

Typed Arrays

(99.38)

HTMLElement.innerText

(99.37)

Element.insertAdjacentElement() & Element.insertAdjacentText()

(99.36)

Search input type

(99.36)

readonly attribute of input and textarea elements

Window.devicePixelRatio

(99.36)

CSS DOM

(99.33)

progress element

(99.22)

CSS background-position edge offsets

SVG in HTML img element

(99.18)

SVG

(99.14)

Node.compareDocumentPosition()

(98.96)

wbr (word break opportunity) element

(98.93)

document.evaluate & XPath

(98.9)

CSS background-repeat round and space

Cross-document messaging

(98.89)

(98.85)

(98.83)

(98.81)

(98.73)

(98.7)

contenteditable attribute (basic support)

(98.66)

Web Storage - name/value pairs

(98.61)

(98.58)

(98.58)

(98.58)

Canvas (basic support)

(98.58)

Canvas HTML5

CSS3 Border-radius (rounded corners)

(98.58)

Selection controls for input & textarea

(98.57)

HTML5 JS API

CSS3 Box-shadow

(98.57)

Basic console logging functions

(98.57)

(98.57)

(98.56)

(98.55)

(98.53)

SVG vector-effect: non-scaling-stroke

(98.51)

(98.51)

(98.51)

Email, telephone & URL input types

(98.49)

(98.46)

(98.46)

WOFF - Web Open Font Format

(98.42)

defer attribute for external scripts

SVG in CSS backgrounds

(98.42)

CSS3 SVG

(98.42)

Reversed attribute of ordered lists

PageTransitionEvent

(98.42)

HTML5 JS API

(98.42)

maxlength attribute for input and textarea elements

(98.42)

DOM HTML5 JS API

async attribute for external scripts

(98.41)

CSS3 Transitions

(98.41)

CSS Repeating Gradients

(98.41)

CSS Animation

(98.41)

CSS pointer-events (for HTML)

(98.4)

(98.39)

(98.39)

Session history management

(98.38)

dataset & data-* attributes

(98.38)

(98.37)

(98.36)

:optional CSS pseudo-class

(98.36)

(98.34)

(98.34)

CSS Flexible Box Layout Module

(98.34)

Navigation Timing API

(98.28)

sandbox attribute for iframes

(98.28)

HTML5 Security

CSS Feature Queries

(98.27)

CSS3 Background-image options

(98.26)

Cross-Origin Resource Sharing

(98.24)

Online/offline status

(98.22)

letter-spacing CSS property

(98.22)

FileReaderSync

(98.21)

KeyboardEvent.charCode

(98.19)

background-position-x & background-position-y

(98.19)

Web Sockets

(98.15)

Strict Transport Security

(98.15)

Channel messaging

(98.14)

focusin & focusout events

requestAnimationFrame

(98.13)

(98.1)

(98.09)

(98.09)

ECMAScript 5

(98.08)

crypto.getRandomValues()

(98.03)

KeyboardEvent.location

(98)

PNG favicons

(97.99)

Pattern attribute for input fields

(97.99)

CSS3 object-fit/object-position

(97.98)

High Resolution Time API

(97.98)

DOM Parsing and Serialization

(97.92)

CSS font-feature-settings

(97.92)

WebGL - 3D Canvas graphics

(97.9)

(97.9)

(97.88)

TTF/OTF - TrueType and OpenType font support

(97.86)

Wav audio format

(97.82)

CSS outline properties

(97.81)

KeyboardEvent.getModifierState()

(97.8)

(97.8)

(97.79)

(97.76)

(97.67)

High-quality kerning pairs & ligatures

(97.66)

Server-sent events

(97.63)

disabled attribute of the fieldset element

(97.62)

Content Security Policy 1.0

(97.58)

CSS user-select: none

(97.56)

Resource Timing

(97.52)

Document.execCommand()

(97.51)

CSS writing-mode property

(97.51)

User Timing API

(97.5)

CSS text-stroke and text-fill

Link type "noreferrer"

(97.5)

DOM HTML5 Security

(97.46)

Background-clip: text

(97.46)

srcdoc attribute for iframes

Internationalization API

(97.45)

(97.45)

(97.39)

(97.35)

document.currentScript

(97.35)

Details & Summary elements

(97.35)

calc() as CSS unit value

(97.33)

CSS :any-link selector

(97.31)

CSS Filter Effects

(97.3)

HTML5 semantic elements

(97.29)

ChildNode.remove()

(97.29)

XMLHttpRequest advanced features

(97.27)

Viewport units: vw, vh, vmin, vmax

(97.27)

WebVTT - Web Video Text Tracks

Canvas blend modes

(97.26)

Canvas

classList (DOMTokenList)

(97.24)

(97.19)

(97.17)

(97.15)

(97.14)

(97.13)

(97.11)

SVG fragment identifiers

(97.08)

(97.06)

(97.05)

(97.03)

CSS3 Overflow-wrap

(97.02)

CSS :read-only and :read-write selectors

(97)

CSS all property

(97)

MPEG-4/H.264 video format

(96.94)

KeyboardEvent.key

(96.93)

Crisp edges/pixelated images

indeterminate checkbox

(96.87)

(96.87)

(96.84)

(96.79)

(96.73)

Srcset and sizes attributes

(96.72)

(96.72)

(96.72)

CSS will-change property

(96.69)

ES6 Template Literals (Template Strings)

(96.69)

(96.69)

(96.67)

String.prototype.includes

(96.67)

HTTP/2 protocol

(96.65)

TextEncoder & TextDecoder

ES6 Generators

(96.64)

(96.63)

matches() DOM method

(96.6)

CSS background-blend-mode

(96.6)

WOFF 2.0 - Web Open Font Format

CSS Font Loading

(96.59)

CSS3 JS API

(96.57)

document.scrollingElement

(96.54)

(96.49)

(96.49)

Array.prototype.findIndex

(96.49)

navigator.hardwareConcurrency

(96.48)

(96.48)

(96.47)

(96.4)

(96.38)

(96.38)

(96.37)

Constraint Validation API

(96.36)

Font unicode-range subsetting

Array.prototype.includes

(96.34)

(96.32)

(96.31)

(96.3)

:indeterminate CSS pseudo-class

(96.3)

Element.closest()

(96.29)

ChaCha20-Poly1305 cipher suites for TLS

(96.29)

Case-insensitive CSS attribute selectors

ES6 classes

(96.25)

(96.19)

CSS font-variant-numeric

(96.17)

CSS text-orientation

(96.14)

:placeholder-shown CSS pseudo-class

(96.14)

Media Queries: interaction media features

(96.13)

COLR/CPAL(v0) Font Formats

(96.11)

Minimum length attribute for input fields

(96.09)

(96.08)

(96.07)

(96.06)

CSS Variables (Custom Properties)

(96.05)

::placeholder CSS pseudo-element

(96)

String.prototype.padStart(), String.prototype.padEnd()

let

(95.99)

Subresource Integrity

(95.98)

(95.93)

(95.93)

(95.91)

(95.87)

Brotli Accept-Encoding/Content-Encoding

(95.87)

getUserMedia/Stream API

(95.85)

Encrypted Media Extensions

(95.85)

:in-range and :out-of-range CSS pseudo-classes

ECMAScript 2015 (ES6)

(95.83)

(95.82)

FLAC audio format

(95.81)

CSS Grid Layout (level 1)

(95.81)

Referrer Policy

(95.79)

WebRTC Peer-to-peer connections

(95.75)

Passive event listeners

(95.75)

DOM manipulation convenience methods

(95.7)

"once" event listener option

(95.69)

(95.69)

(95.57)

(95.56)

unhandledrejection/rejectionhandled events

(95.55)

JS JS API

Upgrade Insecure Requests

(95.53)

(95.52)

(95.43)

:default CSS pseudo-class

(95.33)

Promise.prototype.finally

Animated PNG (APNG)

(95.27)

PNG

(95.26)

system-ui value for font-family

(95.13)

:focus-within CSS pseudo-class

relList (DOMTokenList)

(95.02)

(94.99)

(94.78)

(94.78)

(94.7)

(94.68)

CSS justify-content: space-evenly

Path2D

(94.59)

Canvas HTML5

(94.56)

#rrggbbaa hex color notation

(94.52)

JavaScript modules via script tag

(94.46)

(94.41)

(94.41)

(94.38)

(94.36)

JavaScript modules: dynamic import()

(94.36)

Intl.PluralRules API

(94.27)

JS JS

AbortController & AbortSignal

(94.26)

Resource Hints: preload

(94.24)

tabindex global attribute

(94.18)

Date.prototype.toLocaleDateString

(94.14)

(94.08)

(93.99)

CSS Environment Variables env()

(93.96)

AAC audio file format

(93.95)

prefers-reduced-motion media query

(93.94)

flat & flatMap array methods

(93.9)

display: flow-root

(93.72)

CSS CSS2

CSS Conical Gradients

(93.64)

(93.26)

(93.17)

Element.scrollIntoViewIfNeeded()

(93.16)

(93.14)

(93.13)

(93.08)

CSS Cross-Fade Function

(93.04)

Scroll methods on elements (scroll, scrollTo, scrollBy)

(92.93)

CSS position:sticky

(92.89)

'SameSite' cookie attribute

(92.85)

prefers-color-scheme media query

(92.83)

CSS ::marker pseudo-element

(92.63)

IndexedDB

(92.54)

selector list argument of :not()

(92.39)

CSS math functions min(), max() and clamp()

(92.35)

(92.33)

(92.31)

(92.25)

CSS3 image-orientation

(92.23)

CSS touch-action property

(92.15)

MediaRecorder API

(91.85)

Content Security Policy Level 2

(91.34)

Resource Hints: preconnect

(91.15)

Datalist element

(90.54)

:is() CSS pseudo-class

(90.36)

CSS Backdrop Filter

(90.02)

HTTP Live Streaming (HLS)

🥱 Still cooking.

These 126 features that are supported by less than 70% of all browsers

CSS content-visibility

(69.88)

(69.84)

(69.61)

(69.4)

(69.28)

(69.28)

(68.87)

(68.48)

(68.43)

(68.43)

(68.43)

(60.98)

autocomplete attribute: on & off values

(60.09)

(58.82)

(57.99)

Multiple file selection

(56.87)

(55.92)

(55.74)

(55.22)

(53.88)

(51.23)

(48.9)

(41.48)

(41.42)

accept attribute for file input

(40.78)

CSS color-adjust

(40.66)

Network Information API

(40.21)

Directory selection from file input

(40.17)

Ogg/Theora video format

(37.95)

(37.02)

(36.98)

Custom protocol handling

(36.38)

(31.44)

(29.94)

(29.94)

Offline web applications

(27.33)

CSS3 Multiple column layout

(24.66)

MathML

(23.91)

CSS font-variant-alternates

(23.56)

text-emphasis styling

(23.54)

(21.42)

(20.49)

(20.42)

(20.05)

JPEG 2000 image format

(19.45)

Video Tracks

(19.39)

selector list argument of :nth-child and :nth-last-child CSS pseudo-classes

(19.29)

CSS filter() function

(19.29)

CSS hanging-punctuation

(19.15)

HEVC/H.265 video format

(18.88)

Synchronous Clipboard API

(18.84)

ui-serif, ui-sans-serif, ui-monospace and ui-rounded values for font-family

(17.93)

LCH and Lab color values

(11.43)

CSS color() function

(11.43)

CSS box-decoration-break

(5.25)

SVG effects for HTML

(4.5)

SVG

CSS element() function

(4.48)

(4.43)

(4.41)

:dir() CSS pseudo-class

(4.4)

Ruby annotation

(4.27)

CSS -webkit-user-drag property

(4.13)

(4.13)

(4.01)

CSS clip-path property (for HTML)

(4.01)

(4)

(3.98)

(3.91)

(3.72)

SDCH Accept-Encoding/Content-Encoding

(3.71)

Shadow DOM (deprecated V0 spec)

(3.3)

Custom Elements (deprecated V0 spec)

(3.15)

HTML Imports

(2.93)

HTTP Public Key Pinning

(2.6)

X-Frame-Options HTTP header

display: run-in

(2.32)

CSS CSS2

(1.3)

CSS page-break properties

(1.09)

JPEG XR image format

(0.78)

EOT - Embedded OpenType fonts

(0.75)

Efficient Script Yielding: setImmediate()

(0.71)

CSS Exclusions Level 1

(0.71)

Resource Hints: Lazyload

(0.68)

Input Method Editor API

(0.68)

Object.observe data binding

(0.52)

(0.42)

(0.38)

text-decoration styling

(0.3)

Ambient Light Sensor

(0.29)

DeviceOrientation & DeviceMotion events

(0.08)

Dynamic Adaptive Streaming over HTTP (MPEG-DASH)

(0.06)

Object RTC (ORTC) API for WebRTC

(0.05)

CSS Cascade Layers

(0.04)

COLR/CPAL(v1) Font Formats

(0.04)

(0.02)

(0)

(0)

(0)

WAI-ARIA Accessibility features

(0)

Large, Small, and Dynamic viewport units

(0)

Temporal

(0)

JS JS API

Speech Recognition API

(0)

(0)

(0)

JS API Other Security

File System Access API

(0)

Context menu item (menuitem element)

(0)

(0)

(0)

seamless attribute for iframes

(0)

HEIF/ISO Base Media File Format

(0)

(0)

(0)

(0)

(0)

(0)

CSS3 attr() function for all properties

(0)

CSS @when / @else conditional rules

(0)

CSS text-indent

(0)

:has() CSS relational pseudo-class

CSS scrollbar styling

(0)

(0)

(0)

(0)

(0)

CSS Device Adaptation

(0)

Explicit descendant combinator >>

(0)

CSS Container Queries

(0)

CSS Counter Styles

(0)