{"id":7871,"date":"2024-02-19T11:09:10","date_gmt":"2024-02-19T10:09:10","guid":{"rendered":"https:\/\/tw.bizbuilder.nl\/en\/?page_id=7871"},"modified":"2025-02-13T17:14:49","modified_gmt":"2025-02-13T17:14:49","slug":"cross-browser-compatibility","status":"publish","type":"page","link":"https:\/\/www.terluinwebdesign.nl\/en\/cross-browser-compatibility\/","title":{"rendered":"Cross browser compatibility"},"content":{"rendered":"<pre><prevent-autop><div class=\"row all content-in-container t__vertical m__vertical d__pad-left-0 v-stretch d__mar-top-l-n\" data-cache-vw-d=\"2543\" data-cache-h-d=\"3291.90625\" data-cache-vw-t=\"942\" data-cache-h-t=\"4500.9375\" data-cache-vw-m=\"702\" data-cache-h-m=\"10635.25\" data-layout-cache-h-id=\"7381-0\"><div class=\"col all w-1\/d\/4 d__mar-left-0 pad-0 border-rad-0 mar-bottom-0 color-scheme-dark__light bg-twDarkBlue__light\"><div class=\"row all d__sticky overflow-x-visible overflow-y-auto bg-transparent border-rad-0 pad-top-0\"><div class=\"col all\"><div class=\"row all d__sticky pos-top overflow-y-visible d__pad-top-m d__pad-left-m d__pad-right-m d__pad-bottom-0 t__pad-l m__pad-l d__mar-top-l-n mar-left-m-n mar-right-m-n d__mar-bottom-xl t__mar-bottom-m m__mar-bottom-m c border-rad-top-left-0 border-rad-top-right-0 border-rad-bottom-right-0 border-rad-bottom-left-0 bg-twDarkBlue__light color-scheme-dark__light\"><div class=\"col all mar-0 semi-small bor-twDarkCyan__light\"><h1 class=\"h2 relative\">Cross browser compatibility<\/h1><\/div><\/div><nav><tw-shortcode-wrapper data-id=\"9\" data-esi=\"0\"><tw-automatic-table-of-contents><\/tw-automatic-table-of-contents><\/tw-shortcode-wrapper><\/nav><\/div><\/div><\/div><div class=\"col all mar-top-l mar-bottom-l\"><div class=\"row all t__vertical m__vertical t__reverse m__reverse\"><div class=\"col all\"><h2>What is cross browser compatibility?<\/h2><p>Cross browser compatibility means to what degree websites, webshops, or other applications function on the world wide web (www) throughout multiple web browsers. Web browsers such as Google Chrome, Microsoft Edge, Mozilla Firefox, and Safari are the modern web browsers of this time period. Web browsers such as Microsoft Internet Explorer and Netscape are seen as older web browsers and do not support all the functions that modern web browsers do.<br><\/p><p>When a website has a certain functionality, that is not possible or should be developed differently on other (older) web browsers, is being programmed in a different way or an alternative solution, then that is an example of maintaining cross browser compatibility. Below are two examples where cross browser compatibility has been maintained by either developing in a different way or with alternatives.<br><\/p><\/div><div class=\"col all w-1\/d\/4\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2021\/02\/cross-browser-compatibility.png\" title=\"Google Chrome, Microsoft Edge, Mozilla Firefox, Safari and Microsoft Internet Explorer\" alt=\"Cross-browser compatibility between Chrome, Edge, Firefox, Safari and Internet Explorer\" width=\"479\" height=\"444\" srcset=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/plugins\/tw-builder\/access\/img\/tmp\/2021\/02\/cross-browser-compatibility-w341.png.webp\" data-img-vw-d=\"2543\" data-img-w-d=\"384.4270935058594\" data-img-h-d=\"356.2395935058594\" data-img-of-d=\"fill\" data-img-vw-t=\"942\" data-img-w-t=\"767.0729370117188\" data-img-h-t=\"710.8333740234375\" data-img-of-t=\"fill\" data-img-vw-m=\"702\" data-img-w-m=\"614.25\" data-img-h-m=\"569.2083740234375\" data-img-of-m=\"fill\"><\/div><\/div><h2>Examples of fixing cross browser compatibility<\/h2><p>Below we will show some examples that may occur whilst developing websites and webshops.<\/p><h3>WebP images are not supported by Microsoft Internet Explorer<\/h3><p>This website uses images with file type <i>WebP<\/i>. These images are much quicker to download in comparison to regular images, such as JPEG-images or PNG-images. That is great, but Microsoft Internet Explorer (an old web browser) does not recognize this file type as an image that can be drawn, so it can not do anything with it. The reason for this, is that WebP is a file type that was introduced by Google in 2010 and was not yet used by all other web browsers, because it had to prove itself to be a succes before they are willing to use such a product that has been developed by another company: Google.<br><\/p><p>This website offers multiple image file types, so the web browser can choose what file type to us. This will ensure that if a web browser does not support WebP, that they will choose for the JPEG or PNG file type. People who still make use of browsers that do not support WebP are not able to profit off of the reduced image file size benefit that WebP images offer, which would make websites faster, but luckily they can still see the JPEG or PNG images.<br><\/p><p>Since 2020 a new file type for images has been released: AVIF. Images of this type are even smaller in file size and therefore quicker to download in comparison to the WebP file type. WebP images are, on average, 30% lighter than JPEG images, while AVIF images are, on average, 50% lighter than JPEG images.<br><\/p><p class=\"SEMI-SMALL\">Source:&nbsp;<a href=\"https:\/\/www.ctrl.blog\/entry\/webp-avif-comparison.html\" target=\"_blank\" rel=\"noopener\">https:\/\/www.ctrl.blog\/entry\/webp-avif-comparison.html<\/a><\/p><h3>Text gradient is not possible in Microsoft Internet Explorer<\/h3><p>As you might have notived by now, Microsoft Internet Explorer is getting all the blame today. In Google Chrome it's possible to apply a gradient on texts. Unfortunately, this is not possible in Microsoft Internet Explorer, because this is a functionality that was introduced after the period of Microsoft Internet Explorer still being developed further; that is no longer the case, hence why this functionality is missing.<br><\/p><p>Fortunately, it is possible to check whether or not a web browser supports such a gradient. If a web browser does not support it, then a solid color is used and there will be no attempt to apply a gradient to the text in web browsers that do not support it. When this is attempted, however, what will happen is that the gradient gets applied to the background of the text instead of the text (which looks bad).<br><\/p><h3>More programming work while search through lists<\/h3><p>Imagine, this website needs to search for all images on the home page. Then, the website has to check what images are visible and which are not yet visible on your screen. To do this, the website has to loop through a list. This is easy to program for modern browsers. However, when dealing with older web browsers, it gets lot more lengthy (see the comparison below).<br><\/p><div class=\"row all m__vertical t__vertical\"><div class=\"col all\"><p>Code to iterate through a list of images for&nbsp;<b>modern web browser<\/b>:<\/p><tw-pre><code class=\"js-code\">var images = document.getElementsByTagName('img');\r\nimages.forEach(function(image) {\r\n  \/\/ .....\r\n});<\/code><\/tw-pre><\/div><div class=\"col all\"><p>Code to iterate through a list of images for&nbsp;&nbsp;<b>older web browsers<\/b>:<\/p><tw-pre><code class=\"js-code\">var images = document.getElementsByTagName('img');\r\nvar amountOfImages = images.length;\r\nvar iImage, image;\r\nfor(iImage = 0; iImage &lt; amountOfImages; iImage++) {\r\n  image = images.item(iImage);\r\n  \/\/ .....\r\n}<\/code><\/tw-pre><\/div><\/div><p>This is a big difference, since this sort of code is used pretty often by websites and webshops. This means that it is not logical to use the first example, because it does not work on older web browsers, unless there is no need to support the use of this web browser.<br><\/p><h2>How do we check our websites and on which web browsers?<\/h2><p>We develop your website or webshop while using Google Chrome, because that is the web browser is the most popular world-wide (66% market share at the end of 2020). Later, we check your website on Microsoft Edge, Mozilla Firefox, Safari, and Mobile Safari.<br><\/p><p>We check the design, the layout of elements and the functioning of your website or webshop, for instance whether or not the contact forms and&nbsp;<a href=\"https:\/\/www.terluinwebdesign.nl\/en\/services\/web-optimization\/responsive-web-design\/#how-we-make-your-website-responsive-fold-out-menu-and-product-filters\">expandable menu<\/a>s function properly.<\/p><p>We develop websites and webshops with cross browser compatibility in mind. When we add something, we also think about how this would function on other web browsers, namely those where we experience the most amount of website-related bugs (Safari).<\/p><\/div><\/div><\/prevent-autop><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Cross browser compatibilityWhat is cross browser compatibility?Cross browser compatibility means to what degree websites, webshops, or other applications function on the world wide web (www) throughout multiple web browsers. Web browsers such as Google Chrome, Microsoft Edge, Mozilla Firefox, and Safari are the modern web browsers of this time period. Web browsers such as Microsoft <a href=\"https:\/\/www.terluinwebdesign.nl\/en\/cross-browser-compatibility\/\" class=\"read-more-link block\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-7871","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Cross browser compatibility. What, how, why? Explained with examples.<\/title>\n<meta name=\"description\" content=\"What is cross browser compatibility? Simple explanation using real life examples. We&#039;d like to make your website cross browser compatible.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.terluinwebdesign.nl\/en\/cross-browser-compatibility\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Cross browser compatibility. What, how, why? Explained with examples.\" \/>\n<meta property=\"og:description\" content=\"What is cross browser compatibility? Simple explanation using real life examples. We&#039;d like to make your website cross browser compatible.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.terluinwebdesign.nl\/en\/cross-browser-compatibility\/\" \/>\n<meta property=\"og:site_name\" content=\"Terluin Webdesign\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/TerluinWebdesign\/\" \/>\n<meta property=\"article:modified_time\" content=\"2025-02-13T17:14:49+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2021\/02\/cross-browser-compatibility.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@terluinwdesign\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/cross-browser-compatibility\/\",\"url\":\"https:\/\/www.terluinwebdesign.nl\/en\/cross-browser-compatibility\/\",\"name\":\"Cross browser compatibility. What, how, why? Explained with examples.\",\"isPartOf\":{\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/cross-browser-compatibility\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/cross-browser-compatibility\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2021\/02\/cross-browser-compatibility.png\",\"datePublished\":\"2024-02-19T10:09:10+00:00\",\"dateModified\":\"2025-02-13T17:14:49+00:00\",\"description\":\"What is cross browser compatibility? Simple explanation using real life examples. We'd like to make your website cross browser compatible.\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.terluinwebdesign.nl\/en\/cross-browser-compatibility\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/cross-browser-compatibility\/#primaryimage\",\"url\":\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2021\/02\/cross-browser-compatibility.png\",\"contentUrl\":\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2021\/02\/cross-browser-compatibility.png\",\"width\":479,\"height\":444},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/#website\",\"url\":\"https:\/\/www.terluinwebdesign.nl\/en\/\",\"name\":\"Terluin Webdesign\",\"description\":\"Let your website work for you\",\"publisher\":{\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.terluinwebdesign.nl\/en\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/#organization\",\"name\":\"Terluin Webdesign\",\"url\":\"https:\/\/www.terluinwebdesign.nl\/en\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2019\/05\/terluin.png\",\"contentUrl\":\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2019\/05\/terluin.png\",\"width\":294,\"height\":674,\"caption\":\"Terluin Webdesign\"},\"image\":{\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/TerluinWebdesign\/\",\"https:\/\/x.com\/terluinwdesign\",\"https:\/\/www.instagram.com\/terluinwebdesign\/\",\"https:\/\/www.linkedin.com\/company\/terluin-webdesig\/\",\"https:\/\/www.youtube.com\/channel\/UCqaaHJh0caCmucUaWsewhKQ\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Cross browser compatibility. What, how, why? Explained with examples.","description":"What is cross browser compatibility? Simple explanation using real life examples. We'd like to make your website cross browser compatible.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.terluinwebdesign.nl\/en\/cross-browser-compatibility\/","og_locale":"en_US","og_type":"article","og_title":"Cross browser compatibility. What, how, why? Explained with examples.","og_description":"What is cross browser compatibility? Simple explanation using real life examples. We'd like to make your website cross browser compatible.","og_url":"https:\/\/www.terluinwebdesign.nl\/en\/cross-browser-compatibility\/","og_site_name":"Terluin Webdesign","article_publisher":"https:\/\/www.facebook.com\/TerluinWebdesign\/","article_modified_time":"2025-02-13T17:14:49+00:00","og_image":[{"url":"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2021\/02\/cross-browser-compatibility.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_site":"@terluinwdesign","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.terluinwebdesign.nl\/en\/cross-browser-compatibility\/","url":"https:\/\/www.terluinwebdesign.nl\/en\/cross-browser-compatibility\/","name":"Cross browser compatibility. What, how, why? Explained with examples.","isPartOf":{"@id":"https:\/\/www.terluinwebdesign.nl\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.terluinwebdesign.nl\/en\/cross-browser-compatibility\/#primaryimage"},"image":{"@id":"https:\/\/www.terluinwebdesign.nl\/en\/cross-browser-compatibility\/#primaryimage"},"thumbnailUrl":"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2021\/02\/cross-browser-compatibility.png","datePublished":"2024-02-19T10:09:10+00:00","dateModified":"2025-02-13T17:14:49+00:00","description":"What is cross browser compatibility? Simple explanation using real life examples. We'd like to make your website cross browser compatible.","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.terluinwebdesign.nl\/en\/cross-browser-compatibility\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.terluinwebdesign.nl\/en\/cross-browser-compatibility\/#primaryimage","url":"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2021\/02\/cross-browser-compatibility.png","contentUrl":"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2021\/02\/cross-browser-compatibility.png","width":479,"height":444},{"@type":"WebSite","@id":"https:\/\/www.terluinwebdesign.nl\/en\/#website","url":"https:\/\/www.terluinwebdesign.nl\/en\/","name":"Terluin Webdesign","description":"Let your website work for you","publisher":{"@id":"https:\/\/www.terluinwebdesign.nl\/en\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.terluinwebdesign.nl\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.terluinwebdesign.nl\/en\/#organization","name":"Terluin Webdesign","url":"https:\/\/www.terluinwebdesign.nl\/en\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.terluinwebdesign.nl\/en\/#\/schema\/logo\/image\/","url":"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2019\/05\/terluin.png","contentUrl":"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2019\/05\/terluin.png","width":294,"height":674,"caption":"Terluin Webdesign"},"image":{"@id":"https:\/\/www.terluinwebdesign.nl\/en\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/TerluinWebdesign\/","https:\/\/x.com\/terluinwdesign","https:\/\/www.instagram.com\/terluinwebdesign\/","https:\/\/www.linkedin.com\/company\/terluin-webdesig\/","https:\/\/www.youtube.com\/channel\/UCqaaHJh0caCmucUaWsewhKQ"]}]}},"_links":{"self":[{"href":"https:\/\/www.terluinwebdesign.nl\/en\/wp-json\/wp\/v2\/pages\/7871","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.terluinwebdesign.nl\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.terluinwebdesign.nl\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.terluinwebdesign.nl\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.terluinwebdesign.nl\/en\/wp-json\/wp\/v2\/comments?post=7871"}],"version-history":[{"count":2,"href":"https:\/\/www.terluinwebdesign.nl\/en\/wp-json\/wp\/v2\/pages\/7871\/revisions"}],"predecessor-version":[{"id":8921,"href":"https:\/\/www.terluinwebdesign.nl\/en\/wp-json\/wp\/v2\/pages\/7871\/revisions\/8921"}],"wp:attachment":[{"href":"https:\/\/www.terluinwebdesign.nl\/en\/wp-json\/wp\/v2\/media?parent=7871"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}