{"id":4302,"date":"2024-11-15T13:59:55","date_gmt":"2024-11-15T18:59:55","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=4302"},"modified":"2024-11-19T11:51:58","modified_gmt":"2024-11-19T16:51:58","slug":"showing-browser-support-for-web-platform-features-on-your-own-blog","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/showing-browser-support-for-web-platform-features-on-your-own-blog\/","title":{"rendered":"Showing Browser Support for Web Platform Features on Your Own Blog"},"content":{"rendered":"\n

It’s a responsible thing to do to mention the browser support of web platform features when you write about them. I could probably do better than I do. <\/p>\n\n\n\n

What I tend to do is go for what I feel like the biggest highlights, as well as stick to the Big Three: Chrome, Firefox, and Safari. Saying “this only works in Safari right now” is pretty important information to know, or, “this works in Chrome and Firefox and we’re waiting for Safari support.”<\/p>\n\n\n\n

That may be a bit simplistic. I’m aware Edge exists, for the record, it just uses Chromium so it doesn’t feel particularly notable to call that out. Same story with browsers like Opera, Samsung Internet, and Arc: it’s just Chrome. If there really was a big important difference between Regular Chrome and Samsung Internet or whatever, I’d call it out, it just seems awfully rare. I typically just say “Chrome ‘n’ Friends”. <\/p>\n\n\n\n

I mostly find Safari and Safari iOS not terribly different either, but if there was a serious difference it would definitely be worth calling out.<\/p>\n\n\n\n

I also like to link to a source that is known to update. That typically means whatever the relevant MDN page is or caniuse, which is more and more MDN powered anyway.<\/p>\n\n\n\n

I’ve been talking about scroll-driven animations a bunch, so linking to a highly relevant property like animation-timeline<\/code> on caniuse<\/a> I feel like is a pertinent thing to do, while also saying something like:<\/p>\n\n\n\n

\n

At the time of this writing, scroll-driven animations are only a Chrome ‘n’ Friends feature, but I see feature flags in both Safari and Firefox so it’s coming!<\/p>\n<\/blockquote>\n\n\n\n

That caniuse page pulls data directly from MDN anyway, so a link directly to the browser support for that property<\/a> is probably even better. That’s what hash links are for I suppose.<\/p>\n\n\n\n

What to Avoid<\/h2>\n\n\n\n

Screenshots of browser support tables. It’s just going to go out of date, probably faster than you think. <\/p>\n\n\n\n

Live Updating Embeds<\/h2>\n\n\n\n

Ire Aderinokun’s CanIUse Embed<\/a> takes this job on. It sucks the data in from caniuse (or MDN) then produces an iframe of that feature. Here’s what it produces for the text-decoration-skip-ink<\/code> feature:<\/p>\n\n\n\n