{"id":30114,"date":"2017-06-02T18:01:25","date_gmt":"2017-06-02T10:01:25","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=30114"},"modified":"2017-12-07T05:11:55","modified_gmt":"2017-12-06T21:11:55","slug":"caniuse-tables-embed","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/caniuse-tables-embed\/","title":{"rendered":"Embed CanIUse Tables Into Your Website with This Tool"},"content":{"rendered":"<p>Every developer should know about <strong><a href=\"https:\/\/caniuse.com\/\" target=\"_blank\">CanIUse<\/a><\/strong>. It\u2019s an amazing resource that catalogs <strong>all the latest HTML, CSS, and JavaScript specs<\/strong> as they\u2019re adopted by the W3C. It also explains which browsers <strong>currently support<\/strong> these features to help you decide if they\u2019re worth using.<\/p>\n<p>Well, now you can embed data <strong>straight from the CanIUse website<\/strong> with this <strong><a href=\"https:\/\/caniuse.bitsofco.de\/\" target=\"_blank\">unofficial embed tool<\/a><\/strong>.<\/p>\n<p>It\u2019s completely free and works really well. It is by far the best way to <strong>include all support data<\/strong> for the top 10 major browsers of anything you like.<\/p>\n<p>All <strong>CSS3 attributes, selectors, and statements<\/strong> are supported. The same goes for <strong>HTML5 elements<\/strong> and <strong>JavaScript features<\/strong> such as the <strong>audio API<\/strong>.<\/p>\n<p>Everything is <strong>pulled straight<\/strong> from the CanIUse website, so it\u2019s robust and incredibly accurate. Just make sure you <strong>update the embed code<\/strong> to pull the latest source. These embed features include options for <strong>external linking<\/strong> and <strong>global percentage data<\/strong> for each browser.<\/p>\n<p>The only thing you need to get started is <strong><a href=\"https:\/\/github.com\/ireade\/caniuse-embed\" target=\"_blank\">this script<\/a><\/strong> that you can download locally or add to your site from that CDN link. From there, you can <strong>generate a custom embed code<\/strong> by selecting which feature you\u2019re targeting & how many browser levels you want.<\/p>\n<figure><a href=\"https:\/\/caniuse.bitsofco.de\/\" target=\"_blank\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/caniuse-tables-embed\/02-custom-embed-feature.jpg\" alt=\"CanIUse customizer\" width=\"800\" height=\"583\"><\/a><\/figure>\n<p>I\u2019ve seen these CanIUse tables added to dozens of web design & development blogs around the web. They\u2019re <strong>invaluable for tutorials<\/strong> and they can help developers make a case for using certain features in their projects.<\/p>\n<p>I mostly appreciate this embed tool for the detailed value and quality craftsmanship. Just like the CanIUse website itself, it\u2019s also fantastic and one of the best resources for any web developer.<\/p>\n<p>And, if you\u2019re a user of Web Components check out the <strong><a href=\"https:\/\/www.webcomponents.org\/element\/ireade\/caniuse-embed-polymer\" target=\"_blank\">CanIUse embed component<\/a><\/strong> that can save you a good amount of code.<\/p>\n<p>Just note this site is an <strong>unofficial resource<\/strong>, meaning it\u2019s <strong>not officially endorsed<\/strong> by the CanIUse team. But, the quality is so high that I\u2019d guarantee it\u2019ll be around for the long haul.<\/p>\n<p>To learn more, check out the <strong><a href=\"https:\/\/caniuse.bitsofco.de\/\" target=\"_blank\">embed project site<\/a><\/strong> or tweet the creator Ire Aderinokun on her Twitter account <a href=\"https:\/\/twitter.com\/ireaderinokun\" target=\"_blank\">@ireaderinokun<\/a>.<\/p>\n<p class=\"note\"> <strong>Recommended Reading:<\/strong> <a href=\"https:\/\/www.hongkiat.com\/blog\/css-supports-rule\/\">Detect Browser CSS Support With @supports Rule<\/a><\/p>","protected":false},"excerpt":{"rendered":"<p>Every developer should know about CanIUse. It\u2019s an amazing resource that catalogs all the latest HTML, CSS, and JavaScript specs as they\u2019re adopted by the W3C. It also explains which browsers currently support these features to help you decide if they\u2019re worth using. Well, now you can embed data straight from the CanIUse website with&hellip;<\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[3393],"tags":[511],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.8) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Embed CanIUse Tables Into Your Website with This Tool - Hongkiat<\/title>\n<meta name=\"description\" content=\"Every developer should know about CanIUse. It&#039;s an amazing resource that catalogs all the latest HTML, CSS, and JavaScript specs as they&#039;re adopted by the\" \/>\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.hongkiat.com\/blog\/caniuse-tables-embed\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Embed CanIUse Tables Into Your Website with This Tool\" \/>\n<meta property=\"og:description\" content=\"Every developer should know about CanIUse. It&#039;s an amazing resource that catalogs all the latest HTML, CSS, and JavaScript specs as they&#039;re adopted by the\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/caniuse-tables-embed\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2017-06-02T10:01:25+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-12-06T21:11:55+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/caniuse-tables-embed\/02-custom-embed-feature.jpg\" \/>\n<meta name=\"author\" content=\"Jake Rocheleau\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jake Rocheleau\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/caniuse-tables-embed\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/caniuse-tables-embed\\\/\"},\"author\":{\"name\":\"Jake Rocheleau\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\"},\"headline\":\"Embed CanIUse Tables Into Your Website with This Tool\",\"datePublished\":\"2017-06-02T10:01:25+00:00\",\"dateModified\":\"2017-12-06T21:11:55+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/caniuse-tables-embed\\\/\"},\"wordCount\":374,\"commentCount\":3,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/caniuse-tables-embed\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/caniuse-tables-embed\\\/02-custom-embed-feature.jpg\",\"keywords\":[\"Web Developers\"],\"articleSection\":[\"Toolkit\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/caniuse-tables-embed\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/caniuse-tables-embed\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/caniuse-tables-embed\\\/\",\"name\":\"Embed CanIUse Tables Into Your Website with This Tool - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/caniuse-tables-embed\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/caniuse-tables-embed\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/caniuse-tables-embed\\\/02-custom-embed-feature.jpg\",\"datePublished\":\"2017-06-02T10:01:25+00:00\",\"dateModified\":\"2017-12-06T21:11:55+00:00\",\"description\":\"Every developer should know about CanIUse. It's an amazing resource that catalogs all the latest HTML, CSS, and JavaScript specs as they're adopted by the\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/caniuse-tables-embed\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/caniuse-tables-embed\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/caniuse-tables-embed\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/caniuse-tables-embed\\\/02-custom-embed-feature.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/caniuse-tables-embed\\\/02-custom-embed-feature.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/caniuse-tables-embed\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Embed CanIUse Tables Into Your Website with This Tool\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\",\"name\":\"Jake Rocheleau\",\"description\":\"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers\",\"sameAs\":[\"https:\\\/\\\/www.hongkiat.com\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/jake\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Embed CanIUse Tables Into Your Website with This Tool - Hongkiat","description":"Every developer should know about CanIUse. It's an amazing resource that catalogs all the latest HTML, CSS, and JavaScript specs as they're adopted by the","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.hongkiat.com\/blog\/caniuse-tables-embed\/","og_locale":"en_US","og_type":"article","og_title":"Embed CanIUse Tables Into Your Website with This Tool","og_description":"Every developer should know about CanIUse. It's an amazing resource that catalogs all the latest HTML, CSS, and JavaScript specs as they're adopted by the","og_url":"https:\/\/www.hongkiat.com\/blog\/caniuse-tables-embed\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2017-06-02T10:01:25+00:00","article_modified_time":"2017-12-06T21:11:55+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/caniuse-tables-embed\/02-custom-embed-feature.jpg","type":"","width":"","height":""}],"author":"Jake Rocheleau","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Jake Rocheleau","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/caniuse-tables-embed\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/caniuse-tables-embed\/"},"author":{"name":"Jake Rocheleau","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a"},"headline":"Embed CanIUse Tables Into Your Website with This Tool","datePublished":"2017-06-02T10:01:25+00:00","dateModified":"2017-12-06T21:11:55+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/caniuse-tables-embed\/"},"wordCount":374,"commentCount":3,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/caniuse-tables-embed\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/caniuse-tables-embed\/02-custom-embed-feature.jpg","keywords":["Web Developers"],"articleSection":["Toolkit"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/caniuse-tables-embed\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/caniuse-tables-embed\/","url":"https:\/\/www.hongkiat.com\/blog\/caniuse-tables-embed\/","name":"Embed CanIUse Tables Into Your Website with This Tool - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/caniuse-tables-embed\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/caniuse-tables-embed\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/caniuse-tables-embed\/02-custom-embed-feature.jpg","datePublished":"2017-06-02T10:01:25+00:00","dateModified":"2017-12-06T21:11:55+00:00","description":"Every developer should know about CanIUse. It's an amazing resource that catalogs all the latest HTML, CSS, and JavaScript specs as they're adopted by the","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/caniuse-tables-embed\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/caniuse-tables-embed\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/caniuse-tables-embed\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/caniuse-tables-embed\/02-custom-embed-feature.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/caniuse-tables-embed\/02-custom-embed-feature.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/caniuse-tables-embed\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Embed CanIUse Tables Into Your Website with This Tool"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a","name":"Jake Rocheleau","description":"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers","sameAs":["https:\/\/www.hongkiat.com"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/jake\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-7PI","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/30114","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=30114"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/30114\/revisions"}],"predecessor-version":[{"id":42105,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/30114\/revisions\/42105"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=30114"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=30114"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=30114"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=30114"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}