{"id":491,"date":"2024-01-16T23:14:17","date_gmt":"2024-01-16T23:14:17","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=491"},"modified":"2024-01-16T23:14:17","modified_gmt":"2024-01-16T23:14:17","slug":"minor-confusion-about-baseline","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/minor-confusion-about-baseline\/","title":{"rendered":"Minor Confusion about Baseline"},"content":{"rendered":"\n<p>Google has this little UI widget called <a href=\"https:\/\/web.dev\/blog\/introducing-baseline\">Baseline<\/a> that is intended to show you when Web Platform features are supported across a &#8220;baseline&#8221; of browser support. <\/p>\n\n\n\n<p>I&#8217;m a little confused by it. It could just be me. I suppose I&#8217;m looking either to be enlightened, or to offer this as feedback in case others share my confusion. <\/p>\n\n\n\n<p>Baseline looks like this:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"379\" src=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/01\/CleanShot-2024-01-16-at-09.25.25%402x.png?resize=1024%2C379&#038;ssl=1\" alt=\"\" class=\"wp-image-527\" srcset=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/01\/CleanShot-2024-01-16-at-09.25.25%402x.png?resize=1024%2C379&amp;ssl=1 1024w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/01\/CleanShot-2024-01-16-at-09.25.25%402x.png?resize=300%2C111&amp;ssl=1 300w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/01\/CleanShot-2024-01-16-at-09.25.25%402x.png?resize=768%2C285&amp;ssl=1 768w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/01\/CleanShot-2024-01-16-at-09.25.25%402x.png?resize=1536%2C569&amp;ssl=1 1536w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/01\/CleanShot-2024-01-16-at-09.25.25%402x.png?w=1986&amp;ssl=1 1986w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><figcaption class=\"wp-element-caption\">From <a href=\"https:\/\/developer.chrome.com\/blog\/css-wrapped-2023\">CSS Wrapped 2023<\/a><\/figcaption><\/figure>\n\n\n\n<p>ERRRR wait. No. That&#8217;s not baseline, that&#8217;s just a browser support widget thingy. I think it&#8217;s kinda conveying the same information, only better because it has more detail than Baseline, but I think this is actual the Baseline widget:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"406\" src=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/01\/CleanShot-2024-01-16-at-14.31.16%402x.png?resize=1024%2C406&#038;ssl=1\" alt=\"\" class=\"wp-image-528\" srcset=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/01\/CleanShot-2024-01-16-at-14.31.16%402x.png?resize=1024%2C406&amp;ssl=1 1024w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/01\/CleanShot-2024-01-16-at-14.31.16%402x.png?resize=300%2C119&amp;ssl=1 300w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/01\/CleanShot-2024-01-16-at-14.31.16%402x.png?resize=768%2C304&amp;ssl=1 768w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/01\/CleanShot-2024-01-16-at-14.31.16%402x.png?resize=1536%2C609&amp;ssl=1 1536w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/01\/CleanShot-2024-01-16-at-14.31.16%402x.png?w=1570&amp;ssl=1 1570w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><figcaption class=\"wp-element-caption\">From caniuse<\/figcaption><\/figure>\n\n\n\n<p>This UI widget is fairly new, and it&#8217;s used in a variety of places:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Google&#8217;s own sites, like web.dev, developer.chrome.com etc.<\/li>\n\n\n\n<li>MDN<\/li>\n\n\n\n<li>caniuse<\/li>\n<\/ul>\n\n\n\n<p>It&#8217;s neat that it has been adopted across several important web developer-focused sites. <\/p>\n\n\n\n<p>As best I can tell, <strong>Baseline is only shown by web platform features which <em>meet<\/em> the baseline<\/strong>, that is, are decently well-supported. You&#8217;ll never see a Baseline widget with big red \u274c&#8217;s on it saying the feature isn&#8217;t supported. <em>Do I have that right? <\/em><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">The Root of My Confusion<\/h2>\n\n\n\n<p>So, as a developer hopping around developer documentation sites, I know:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>If I \ud83d\udc41\ufe0f <strong>see<\/strong> the Baseline widget, I can go &#8220;<em>Cool!<\/em> This feature is pretty well supported. I&#8217;ll look at the details, but I can probably use this.&#8221;<\/li>\n\n\n\n<li>If I \ud83d\udeab\ud83d\udc41\ufe0f <strong>don&#8217;t see<\/strong> the Baseline widget, I can go &#8220;<em>Uh oh!<\/em> This feature isn&#8217;t very well supported, it doesn&#8217;t meet the baseline. I probably can&#8217;t use this&#8221;<\/li>\n<\/ul>\n\n\n\n<p>Except&#8230; I&#8217;m really just kidding about that second point. This widget hasn&#8217;t rolled out <em>absolutely everywhere<\/em>. It&#8217;s not even particularly easy to find examples of when specifically looking on sites that have it. Which is fine, I get that big initiatives take time to roll out. <\/p>\n\n\n\n<p>So we&#8217;ll never be able to say: &#8220;I don&#8217;t see a Baseline widget, this feature isn&#8217;t well supported&#8221;. We&#8217;ll just be in the same position we are now: &#8220;I&#8217;ll have to go research the browser support for this on my own.&#8221; <\/p>\n\n\n\n<p>The end result is that if we see the Baseline widget, we can get stoked. It&#8217;s a Badge of Ready to Use. <em>Do I have that right? <\/em>If I do, I feel like that&#8217;s&#8230; OK&#8230; but could be better.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Opinions<\/h2>\n\n\n\n<p>I remember Andrew Walpole once saying something like <em>I just need to know which of these things is true<\/em>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>I can use the feature<\/li>\n\n\n\n<li>I can use the feature, because it has a polyfill.<\/li>\n\n\n\n<li>I can&#8217;t use the feature.<\/li>\n<\/ul>\n\n\n\n<p>I think Baseline would be more useful if it was included near <em>any<\/em> Web Platform feature and said which one of those things applies. It&#8217;s such a little widget! I should go everywhere.<\/p>\n\n\n\n<p>The little browser support chart Google already uses is closer to that, listing the earliest version a feature is supported in (or that it isn&#8217;t!) <em>and<\/em> a link to a source for more detail.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"244\" src=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-2024-01-16-at-2.49.20%E2%80%AFPM.png?resize=1024%2C244&#038;ssl=1\" alt=\"\" class=\"wp-image-529\" srcset=\"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-2024-01-16-at-2.49.20%E2%80%AFPM.png?resize=1024%2C244&amp;ssl=1 1024w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-2024-01-16-at-2.49.20%E2%80%AFPM.png?resize=300%2C72&amp;ssl=1 300w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-2024-01-16-at-2.49.20%E2%80%AFPM.png?resize=768%2C183&amp;ssl=1 768w, https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/01\/Screenshot-2024-01-16-at-2.49.20%E2%80%AFPM.png?w=1358&amp;ssl=1 1358w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><figcaption class=\"wp-element-caption\">From <a href=\"https:\/\/developer.chrome.com\/blog\/css-wrapped-2023\">CSS Wrapped 2023<\/a><\/figcaption><\/figure>\n\n\n\n<p>Maybe some kind of hybrid is warranted. Maybe the browser detail isn&#8217;t as needed if the support is deep across the board, and only is shown in non-support situations. I wouldn&#8217;t want to advocate for too much complexity, as there is value in the simplicity of Baseline, but it doesn&#8217;t even get into mobile browsers which seem <em>pretty relevant<\/em> to web developers. Not to mention the browsers I need to support might be different than the browsers you need to support and a widget probably will never be able to address that (hence the need to link out for detail). <\/p>\n\n\n\n<p>They did just recently <a href=\"https:\/\/web.dev\/blog\/baseline-definition-update\">update the definition of Baseline<\/a> (saying when a feature is &#8220;newly available&#8221; vs &#8220;widely available&#8221;), so there is dedication to simplicity here trying to be balanced with at least some level of nuance.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Google has this little UI widget called Baseline that is intended to show you when Web Platform features are supported across a &#8220;baseline&#8221; of browser support. I&#8217;m a little confused by it. It could just be me. I suppose I&#8217;m looking either to be enlightened, or to offer this as feedback in case others share [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":533,"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":[73,72],"class_list":["post-491","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog-post","tag-baseline","tag-browser-support"],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/01\/baseline-thumb.jpg?fit=1000%2C500&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/491","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=491"}],"version-history":[{"count":8,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/491\/revisions"}],"predecessor-version":[{"id":534,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/491\/revisions\/534"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media\/533"}],"wp:attachment":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media?parent=491"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/categories?post=491"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/tags?post=491"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}