1"use strict";(self.webpackChunkframeright_docs=self.webpackChunkframeright_docs||[]).push([[9841],{3905:(e,t,r)=>{r.d(t,{Zo:()=>c,kt:()=>d});var n=r(7294);function o(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function a(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function i(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?a(Object(r),!0).forEach((function(t){o(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):a(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function l(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},a=Object.keys(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}var s=n.createContext({}),p=function(e){var t=n.useContext(s),r=t;return e&&(r="function"==typeof e?e(t):i(i({},t),e)),r},c=function(e){var t=p(e.components);return n.createElement(s.Provider,{value:t},e.children)},m="mdxType",b={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},u=n.forwardRef((function(e,t){var r=e.components,o=e.mdxType,a=e.originalType,s=e.parentName,c=l(e,["components","mdxType","originalType","parentName"]),m=p(r),u=o,d=m["".concat(s,".").concat(u)]||m[u]||b[u]||a;return r?n.createElement(d,i(i({ref:t},c),{},{components:r})):n.createElement(d,i({ref:t},c))}));function d(e,t){var r=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var a=r.length,i=new Array(a);i[0]=u;var l={};for(var s in t)hasOwnProperty.call(t,s)&&(l[s]=t[s]);l.originalType=e,l[m]="string"==typeof e?e:o,i[1]=l;for(var p=2;p<a;p++)i[p]=r[p];return n.createElement.apply(null,i)}return n.createElement.apply(null,r)}u.displayName="MDXCreateElement"},2235:(e,t,r)=>{r.d(t,{P:()=>a});var n=r(7294),o=r(9960);function a(e){let{href:t}=e;return n.createElement(o.Z,{className:"github-corner-icon",href:t},n.createElement("img",{src:"/img/thirdparty/github-mark.svg",alt:"GitHub repository"}))}},583:(e,t,r)=>{r.r(t),r.d(t,{assets:()=>p,contentTitle:()=>l,default:()=>u,frontMatter:()=>i,metadata:()=>s,toc:()=>c});var n=r(7462),o=(r(7294),r(3905)),a=r(2235);const i={sidebar_position:50,tags:["explanation"]},l="Browser support",s={unversionedId:"web-component/browsers",id:"web-component/browsers",title:"Browser support",description:"Overview",source:"@site/docs/web-component/browsers.md",sourceDirName:"web-component",slug:"/web-component/browsers",permalink:"/web-component/browsers",draft:!1,editUrl:"https://github.com/frameright/docs.frameright.io/tree/main/docs/web-component/browsers.md",tags:[{label:"explanation",permalink:"/tags/explanation"}],version:"current",sidebarPosition:50,frontMatter:{sidebar_position:50,tags:["explanation"]},sidebar:"documentationSidebar",previous:{title:"Local demo",permalink:"/web-component/demo"},next:{title:"CSS styling",permalink:"/web-component/styling"}},p={},c=[{value:"Overview",id:"overview",level:2},{value:"<code>ResizeObserver</code> polyfill",id:"resizeobserver-polyfill",level:2},{value:"Missing CSS <code>contain</code>",id:"missing-css-contain",level:2}],m={toc:c},b="wrapper";
1function u(e){let{components:t,...r}=e;return(0,o.kt)(b,(0,n.Z)({},m,r,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("h1",{id:"browser-support"},"Browser support"),(0,o.kt)(a.P,{href:"https://github.com/Frameright/image-display-control-web-component",mdxType:"GitHubCornerIcon"}),(0,o.kt)("h2",{id:"overview"},"Overview"),(0,o.kt)("p",null,"The web component relies on a few browser features, the most recently\nimplemented being:"),(0,o.kt)("ul",null,(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("a",{parentName:"li",href:"https://developer.mozilla.org/en-US/docs/Web/CSS/basic-shape/inset"},"CSS ",(0,o.kt)("inlineCode",{parentName:"a"},"inset()")),"\n(Chrome 37+, Firefox 54+, Safari 10.1+, 2017+)"),(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("a",{parentName:"li",href:"https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver"},(0,o.kt)("inlineCode",{parentName:"a"},"ResizeObserver")),"\n(Chrome 64+, Firefox 69+, Safari 13.1+, 2020+)"),(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("a",{parentName:"li",href:"https://developer.mozilla.org/en-US/docs/Web/CSS/contain"},"CSS ",(0,o.kt)("inlineCode",{parentName:"a"},"contain")),"\n(Chrome 52+, Firefox 69+, Safari 15.4+, 2022+)")),(0,o.kt)("p",null,"If any of these features are not supported by the browser, the web component\nwill disable itself and fall back to behaving like a standard ",(0,o.kt)("inlineCode",{parentName:"p"},"<img>")," tag."),(0,o.kt)("p",null,"This behavior can be simulated by setting the ",(0,o.kt)("inlineCode",{parentName:"p"},'data-disabled="all"')," HTML\nattribute. See the ",(0,o.kt)("a",{parentName:"p",href:"/web-component/attribute-ref"},"attribute reference")," for more\ninformation."),(0,o.kt)("h2",{id:"resizeobserver-polyfill"},(0,o.kt)("inlineCode",{parentName:"h2"},"ResizeObserver")," polyfill"),(0,o.kt)("p",null,"In order to increase browser support, you can ship your web application with a\n",(0,o.kt)("a",{parentName:"p",href:"https://github.com/juggle/resize-observer"},(0,o.kt)("inlineCode",{parentName:"a"},"ResizeObserver")," polyfill"),". If your\nproject is using a bundler (e.g. ",(0,o.kt)("a",{parentName:"p",href:"https://webpack.js.org/"},"Webpack")," or\n",(0,o.kt)("a",{parentName:"p",href:"https://rollupjs.org/"},"Rollup"),"), add the polyfill to your project with:"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-bash"},"npm install @juggle/resize-observer\n")),(0,o.kt)("p",null,"and set it up right where you import the web component:"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-js"},"import '@frameright/image-display-control-web-component/image-display-control.js';\n\n// This is a ponyfill, i.e. a polyfill that doesn't touch the global window\n// object by default, see https://github.com/juggle/resize-observer\nimport { ResizeObserver as ResizeObserverPonyfill } from '@juggle/resize-observer';\nwindow.ResizeObserver = window.ResizeObserver || ResizeObserverPonyfill;\n")),(0,o.kt)("h2",{id:"missing-css-contain"},"Missing CSS ",(0,o.kt)("inlineCode",{parentName:"h2"},"contain")),(0,o.kt)("p",null,"Even if the browser does not support the ",(0,o.kt)("inlineCode",{parentName:"p"},"contain")," CSS property, it is possible\nto make use of the web component by telling it what to do instead when this\nbrowser feature isn't available. This can be done by setting the\n",(0,o.kt)("inlineCode",{parentName:"p"},"data-css-contain-fallback=")," HTML attribute. See\n",(0,o.kt)("a",{parentName:"p",href:"/web-component/css-containment"},"CSS containment")," and the\n",(0,o.kt)("a",{parentName:"p",href:"/web-component/attribute-ref"},"attribute reference")," for more information."))}u.isMDXComponent=!0}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.