{"id":7527,"date":"2019-11-01T23:01:34","date_gmt":"2019-11-01T23:01:34","guid":{"rendered":"http:\/\/putridparrot.com\/blog\/?p=7527"},"modified":"2019-11-01T23:01:34","modified_gmt":"2019-11-01T23:01:34","slug":"how-to-target-the-browsers-we-want-to-support","status":"publish","type":"post","link":"https:\/\/putridparrot.com\/blog\/how-to-target-the-browsers-we-want-to-support\/","title":{"rendered":"How to target the browsers we want to support"},"content":{"rendered":"<p>When developing a public facing web application we will usually want to try to be compatible with as large an audience and hence as large a selection of browsers (and their versions) as possible. Even within a private\/intranet web site we&#8217;ll want to set some compatibility level to work with. <\/p>\n<p>To that end, a useful addition to eslint is the eslint-plugin-compat plugin <a href=\"https:\/\/github.com\/amilajack\/eslint-plugin-compat\" rel=\"noopener noreferrer\" target=\"_blank\">eslint-plugin-compat plugin<\/a>.<\/p>\n<pre class=\"brush: java; title: ; notranslate\" title=\"\">\r\nyarn add eslint-plugin-compat -D\r\n<\/pre>\n<p>As per the <a href=\"https:\/\/github.com\/amilajack\/eslint-plugin-compat\" rel=\"noopener noreferrer\" target=\"_blank\">documentation<\/a> we should add the following to the .eslintrc.json file<\/p>\n<pre class=\"brush: java; title: ; notranslate\" title=\"\">\r\n{\r\n  &quot;extends&quot;: &#x5B;&quot;plugin:compat\/recommended&quot;],\r\n  &quot;env&quot;: {\r\n    &quot;browser&quot;: true\r\n  },\r\n  \/\/ ...\r\n}\r\n<\/pre>\n<p>and within the package.json file we add the browserslist array, the following is an example of a possible setup<\/p>\n<pre class=\"brush: java; title: ; notranslate\" title=\"\">\r\n{\r\n  &quot;browserslist&quot;: &#x5B;\r\n    &quot;&gt; 0.2%&quot;, \r\n     &quot;not dead&quot;,\r\n    &quot;not ie &lt;= 11&quot;,\r\n    &quot;not op_mini all&quot;  \r\n  ]\r\n}\r\n<\/pre>\n<p>The values within browserslist allow us to create a query that can reduce\/increase the number and types or browsers supported as we wish. <\/p>\n<p>For example the above suggests we want to support all browsers with more than 0.2% global usage statistics, where the data for this is taken from <a href=\"https:\/\/browserl.ist\/\" rel=\"noopener noreferrer\" target=\"_blank\">browserl.ist<\/a>. This site also allows us to type these <em>browserslist<\/em> values into the edit box (removing quotes and new lines), i.e. <\/p>\n<pre class=\"brush: java; title: ; notranslate\" title=\"\">\r\n&gt; 0.2%, last 2 versions, not dead, not op_mini all\r\n<\/pre>\n<p>Clicking <em>Show Browsers<\/em> will list the browsers that fall within the query range. <\/p>\n<p>We can also execute the following command from our shell\/terminal <\/p>\n<pre class=\"brush: java; title: ; notranslate\" title=\"\">\r\nnpx browserslist &quot;&gt; 0.2%, last 2 versions, not dead, not op_mini all&quot;\r\n<\/pre>\n<p>and this will also show you the browser that match that query also.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>When developing a public facing web application we will usually want to try to be compatible with as large an audience and hence as large a selection of browsers (and their versions) as possible. Even within a private\/intranet web site we&#8217;ll want to set some compatibility level to work with. To that end, a useful [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[273],"tags":[],"class_list":["post-7527","post","type-post","status-publish","format-standard","hentry","category-browsers"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/7527","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/comments?post=7527"}],"version-history":[{"count":5,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/7527\/revisions"}],"predecessor-version":[{"id":7577,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/7527\/revisions\/7577"}],"wp:attachment":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/media?parent=7527"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/categories?post=7527"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/tags?post=7527"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}