{"id":2526,"date":"2024-06-04T09:51:00","date_gmt":"2024-06-04T15:51:00","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=2526"},"modified":"2024-06-04T09:51:01","modified_gmt":"2024-06-04T15:51:01","slug":"deciding-on-using-a-browser-feature-via-baseline","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/deciding-on-using-a-browser-feature-via-baseline\/","title":{"rendered":"Deciding on Using a Browser Feature via Baseline"},"content":{"rendered":"\n

Google has this little widget called Baseline<\/a>. Here’s a screenshot example: <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

The idea is for it to accompany a web platform feature so you can have a sense of what browsers support it. Web developers are rightfully skeptical of new web tech, wanting to know when they can actually<\/em> use a feature, so this is helpful. <\/p>\n\n\n\n

But there is crucial information missing here. Developers don’t decide to use a feature only<\/em> based on browser support, but also:<\/p>\n\n\n\n

    \n
  1. Based on if that feature could be considered a progressive enhancement<\/li>\n\n\n\n
  2. Based on if that feature has a polyfill<\/li>\n<\/ol>\n\n\n\n\n\n\n\n

    Jeremy Keith brought this up and has a great point.<\/p>\n\n\n\n

    \n

    Not all browser features work the same way. For features that work as progressive enhancements you don\u2019t need to wait for them to be widely available.<\/p>\n<\/blockquote>\n\n\n\n

    For example, if you’re looking at the View Transitions API<\/a>, you’ll see:<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    And perhaps go awww bummer I can’t use it! <\/em>But that would be wrong. You can use it. The API is designed such that you can write code that will use it if it’s available or not if it’s not. It’s really not a big deal.<\/p>\n\n\n\n

    That’s a beautiful part of progressive enhancement, as Jeremy says:<\/p>\n\n\n\n

    \n

    … there\u2019s a real irony in a common misunderstanding around progressive enhancement: some people seem to think it\u2019s about\u00a0not<\/em>\u00a0being able to use advanced browser features. In reality it\u2019s the opposite. Progressive enhancement allows you to use advanced browser features even before they\u2019re widely supported.<\/p>\n<\/blockquote>\n","protected":false},"excerpt":{"rendered":"

    Google has this little widget called Baseline. Here’s a screenshot example: The idea is for it to accompany a web platform feature so you can have a sense of what browsers support it. Web developers are rightfully skeptical of new web tech, wanting to know when they can actually use a feature, so this is […]<\/p>\n","protected":false},"author":1,"featured_media":2555,"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":[29],"tags":[73,139,101],"class_list":["post-2526","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-the-beat","tag-baseline","tag-progressive-enhancement","tag-view-transitions"],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/06\/czNmcy1wcml2YXRlL3Jhd3BpeGVsX2ltYWdlcy93ZWJzaXRlX2NvbnRlbnQvam9iNjc5LTA4NS12LWwxNjd4enEwLmpwZw.webp?fit=1024%2C1024&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/2526","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=2526"}],"version-history":[{"count":2,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/2526\/revisions"}],"predecessor-version":[{"id":2556,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/2526\/revisions\/2556"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media\/2555"}],"wp:attachment":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media?parent=2526"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/categories?post=2526"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/tags?post=2526"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}