{"id":2865,"date":"2024-06-28T06:22:09","date_gmt":"2024-06-28T12:22:09","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=2865"},"modified":"2024-06-28T06:22:11","modified_gmt":"2024-06-28T12:22:11","slug":"browser-support-tests-in-javascript-for-modern-web-features","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/browser-support-tests-in-javascript-for-modern-web-features\/","title":{"rendered":"Browser Support Tests in JavaScript for Modern Web Features"},"content":{"rendered":"\n

This is just a no-frills post with code snippets showing how to test support for some newish features in HTML, CSS, and JavaScript. This is in no way comprehensive and doesn’t get into what these features do, which is better covered in other posts. It also doesn’t get into testing the support in any other language than JavaScript. Look to @supports<\/code> in CSS<\/a> for that, mostly. <\/p>\n\n\n\n

Feel free to chime in with more of your own so this can be as helpful of a resource as it can be! <\/p>\n\n\n\n

HTML Features<\/h2>\n\n\n\n

View Transitions<\/a><\/h3>\n\n\n
\/\/ Not Supported<\/span>\nif<\/span> (!document<\/span>.startViewTransition) {\n  updateTheDOMSomehow();\n} else<\/span> {\n  \/\/ Supported<\/span>\n  document<\/span>.startViewTransition(()<\/span> =><\/span> {\n    updateTheDOMSomehow()\n  });\n}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Popovers<\/a><\/h3>\n\n\n
\/\/ Supported<\/span>\nif<\/span> (HTMLElement.prototype.hasOwnProperty(\"popover\"<\/span>)) {\n\n}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
<dialog> Element<\/a><\/h3>\n\n\n
\/\/ Supported<\/span>\nif<\/span> (typeof<\/span> HTMLDialogElement === 'function'<\/span>) {\n \n}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Declarative Shadow DOM<\/a><\/h3>\n\n\n
\/\/ Supported<\/span>\nif<\/span> (!!Element.prototype.attachShadow) {\n\n}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Lazy Loading Images<\/a><\/h3>\n\n\n
\/\/ Supported<\/span>\nif<\/span> ('loading'<\/span> in<\/span> HTMLImageElement.prototype) {\n\n}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Lazy Loading Iframes<\/a><\/h3>\n\n\n
\/\/ Supported<\/span>\nif<\/span> ('loading'<\/span> in<\/span> HTMLIFrameElement.prototype) {\n\n}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
CSS Features<\/h2>\n\n\n\n
CSS selectors and property: value pairs can be tested with CSS.supports()<\/code> from JavaScript.<\/p>\n\n\n\n
:where()<\/a><\/h3>\n\n\n
\/\/ Supported<\/span>\nif<\/span> (CSS.supports('selector(:where(h1))'<\/span>)) {\n  document<\/span>.documentElement.classList.add(\"supports-where\"<\/span>);\n}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
:has()<\/a><\/h3>\n\n\n
\/\/ Supported<\/span>\nif<\/span> (CSS.supports('selector(:has(h1))'<\/span>)) {\n  document<\/span>.documentElement.classList.add(\"supports-has\"<\/span>);\n}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
@layer<\/a><\/h3>\n\n\n
\/\/ Supported<\/span>\nif<\/span> (typeof<\/span> CSSLayerBlockRule !== \"undefined\"<\/span>) {\n\n}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Anchor Positioning<\/a><\/h3>\n\n\n
\/\/ Supported<\/span>\nif<\/span> (CSS.supports(\"anchor-name: --anchor-el\"<\/span>)) {\n\n}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Subgrid<\/a><\/h3>\n\n\n
\/\/ Supported<\/span>\nif<\/span> (CSS.supports(\"grid-template-columns\"<\/span>, \"subgrid\"<\/span>)) {\n  \n}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
light-dark()<\/a><\/h3>\n\n\n
\/\/ Supported<\/span>\nif<\/span> (CSS.supports('color: light-dark(black, white)'<\/span>)) {\n\n}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
OKLCH Color<\/a><\/h3>\n\n\n
\/\/ Supported<\/span>\nif<\/span> (CSS.supports(\"color: oklch(0% 0 0\"<\/span>)) {\n\n}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
JavaScript Features<\/h2>\n\n\n\n
AbortController<\/a><\/h3>\n\n\n
\/\/ Supported<\/span>\nif<\/span> (typeof<\/span> AbortController === \"function\"<\/span>) {\n\n}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Promise.finally()<\/a><\/h3>\n\n\n
\/\/ Supported<\/span>\nif<\/span> (typeof<\/span> Promise<\/span>.prototype.finally === 'function'<\/span>) {\n  \n}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>","protected":false},"excerpt":{"rendered":"
Sometimes it’s good to know when a browser feature is supported or not so you can do something. Perhaps load a polyfill or just choose a slightly different approach. This post looks at newish features in browsers and shows the test.<\/p>\n","protected":false},"author":1,"featured_media":2874,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[72,3],"class_list":["post-2865","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog-post","tag-browser-support","tag-javascript"],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/06\/browser-support.jpg?fit=1000%2C500&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/2865","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/comments?post=2865"}],"version-history":[{"count":8,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/2865\/revisions"}],"predecessor-version":[{"id":2878,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/2865\/revisions\/2878"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media\/2874"}],"wp:attachment":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media?parent=2865"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/categories?post=2865"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/tags?post=2865"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
I’m really not sure how to test for @view-transition<\/a> support. <\/p>\n\n\n\n