{"id":16333,"date":"2013-01-30T21:01:33","date_gmt":"2013-01-30T13:01:33","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=16333"},"modified":"2025-04-04T01:28:52","modified_gmt":"2025-04-03T17:28:52","slug":"modernizr","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/modernizr\/","title":{"rendered":"Getting Started with Modernizr JavaScript Library"},"content":{"rendered":"<p><strong><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/modernizr.com\/\">Modernizr<\/a><\/strong> is a JavaScript Library used by many popular websites including Twitter, USMagazine, Good.is, About.com, etc. In one of our <a href=\"https:\/\/www.hongkiat.com\/blog\/tag\/modernizr\/\">previous posts<\/a>, we have mentioned it several times, but we have not actually dug into what Modernizr is.<\/p>\n<p>So, in this post we will specifically discuss this JavaScript Library.<\/p>\n<div class=\"ref-block ref-block--post\" id=\"ref-post-1\">\n\t\t\t\t\t<a href=\"https:\/\/www.hongkiat.com\/blog\/twitter-bootstrap\/\" class=\"ref-block__link\" title=\"Read More: Getting Started with Twitter Bootstrap\" rel=\"bookmark\"><span class=\"screen-reader-text\">Getting Started with Twitter Bootstrap<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/twitter-bootstrap.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-16256 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/twitter-bootstrap.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">Getting Started with Twitter Bootstrap<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tBuilding a website from the ground up is very hard. Even some people who are able to code...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<h2>What is it?<\/h2>\n<p>First of all, let\u2019s get the essential question answered: <strong>what is Modernizr?<\/strong><\/p>\n<p>Based on the official site, Modernizr is <em>\u201cA JavaScript library that detects HTML5 and CSS3 features in the user\u2019s browser.\u201d<\/em><\/p>\n<p>Although <a href=\"https:\/\/www.hongkiat.com\/blog\/tag\/series-html5-css3-tuts\/\/\">HTML5 and CSS3<\/a> are great but many of the new features they have, as we already know by now, <a href=\"https:\/\/www.hongkiat.com\/blog\/complete-guide-to-cross-browser-compatibility-check\/\">are not much applicable in old browsers<\/a>.<\/p>\n<p>Modernizr, helps to address this problem by testing the user\u2019s browser on whether it supports a particular feature. If the feature is <strong>\u201cunsupported\u201d<\/strong>, then we can deliver an appropriate script or function to imitate the feature it lacks.<\/p>\n<p class=\"note\"><strong>Recommended Reading<\/strong>: <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/en.wikipedia.org\/wiki\/Modernizr#What_Modernizr_doesn.27t_do\">What Modernizr doesn\u2019t do?<\/a><\/p>\n<h2>Setting-up Modernizr<\/h2>\n<p>At the Modernizr official website, we will find two options to download the file, <strong>Development<\/strong> and <strong>Production<\/strong> version.<\/p>\n<p>The Development version is a full and uncompressed version consisting of all the primary feature tests; while in the Production version, we can select the feature tests that we only need.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/modernizr\/download-modernizr.jpg\" alt=\"modernizr download page\" width=\"1000\" height=\"561\"><\/figure>\n<p>As you can see, there are a lot of options for feature tests <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/modernizr.com\/download\/?setclasses\">in the download page<\/a>. In this example, we will select all the primary feature tests. Generate and grab the codes. Then, insert the file inside the <code>&lt;head&gt;<\/code> section.<\/p>\n<pre>\r\n &lt;script src=\"modernizr.js\" type=\"text\/javascript\"&gt;&lt;\/script&gt;\r\n <\/pre>\n<p>Lastly, we also need to add <code>no-js<\/code> class to the <code>&lt;html&gt;<\/code> tag.<\/p>\n<pre>\r\n &lt;html class=\"no-js\"&gt;\r\n <\/pre>\n<p>This class is necessary, in case the user\u2019s browser is running without the JavaScript enabled, we can add <a href=\"https:\/\/www.hongkiat.com\/blog\/css-javascript-fallback-methods\/\">an appropriate fallback<\/a> through this class. If it does, Modernizr will replace this class with just <code>js<\/code>.<\/p>\n<p>That\u2019s it, now we are all set up and ready to go with Modernizr.<\/p>\n<h2>Working with Classes<\/h2>\n<p>Now, if we do an <strong>Inspect Element<\/strong> on our webpage, you will see that there are many CSS classes added in the <code>&lt;html&gt;<\/code> tag. These classes are generated from Modernizr and will vary depending on the browser\u2019s capabilities.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/modernizr\/modernizr-inspect-element.jpg\" alt=\"modernizr inspect element\" width=\"500\" height=\"280\"><\/figure>\n<p>For instance, if the browser does not support <a href=\"https:\/\/www.hongkiat.com\/blog\/css3-animation-advanced-marquee\/\">CSS3 Animations<\/a>, then Modernizr will generate the<code>no-cssanimations<\/code> class.<\/p>\n<p>But when it does, it will remove the <code>no-<\/code> prefix and simply become <code>cssanimations<\/code>.<\/p>\n<p>Let\u2019s take a look at the code snippet below;<\/p>\n<pre>\r\n &lt;html class=\" js no-flexbox no-canvas no-canvastext no-webgl no-touch no-geolocation postmessage no-websqldatabase \r\n no-indexeddb no-hashchange no-history draganddrop no-websockets no-rgba no-hsla no-multiplebgs no-backgroundsize \r\n no-borderimage no-borderradius no-boxshadow no-textshadow no-opacity no-cssanimations no-csscolumns no-cssgradients \r\n no-cssreflections no-csstransforms no-csstransforms3d no-csstransitions fontface no-generatedcontent no-video \r\n no-audio no-localstorage no-sessionstorage no-webworkers no-applicationcache no-svg no-inlinesvg no-smil \r\n no-svgclippaths no-placeholder\"&gt;\r\n <\/pre>\n<p>The code above is taken from Internet Explorer 7 and as we can see from the generated classes, this browser clearly lacks in so many good new features, such as no support for CSS3 <code>border-radius<\/code>.<\/p>\n<p>So, in case we want to replace the border radius presentation, let\u2019s say, with <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.roundedcornr.com\/\">rounded corner images<\/a> in Internet Explorer 7, then we can use the <code>no-broderradius<\/code> class.<\/p>\n<pre>\r\n .no-borderradius div {\r\n \/*-- do some hacks here --*\/\r\n }\r\n <\/pre>\n<p>If you are wondering how far your current browser is able to handle new HTML5 and CSS3 technology, Modernizr has provided a test suit you can use. Visit this page (<a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.gla.ac.uk\/2t4\/js\/libs\/modernizr\/test\/\">Modernizr Test Suit<\/a>), and you will instantly see the output.<\/p>\n<div class=\"ref-block ref-block--post\" id=\"ref-post-2\">\n\t\t\t\t\t<a href=\"https:\/\/www.hongkiat.com\/blog\/css-priority-level\/\" class=\"ref-block__link\" title=\"Read More: A Guide to Understanding CSS Style Priorities\" rel=\"bookmark\"><span class=\"screen-reader-text\">A Guide to Understanding CSS Style Priorities<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/css-priority-level.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-14194 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/css-priority-level.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">A Guide to Understanding CSS Style Priorities<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tThe Cascading Style Sheet (CSS) is one of the simplest web-related languages. Hence, many beginners starting their web...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<h2>Browser Feature Test<\/h2>\n<p>Next, as mentioned above, Modernizr is made to detect or test browser features (easily). To test the browser feature we can use the following syntax;<\/p>\n<pre>\r\n Modernizr.featuretodetect\r\n <\/pre>\n<p>Assuming we want to test whether the browser supports <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/experiments.withgoogle.com\/search?q=WebGL\">WebGL<\/a> we can write;<\/p>\n<pre>\r\n if (Modernizr.webgl) {\r\n \/* Script A *\/\r\n } else {\r\n \/* Script B *\/\r\n }\r\n <\/pre>\n<p>We can also negate the statement, that way the result will return the opposite; it is <code>true<\/code>, when the browser doesn\u2019t support the feature;<\/p>\n<pre>\r\n if (!Modernizr.webgl) {\r\n }\r\n <\/pre>\n<p>Or, if we want to run different scripts depending on the result test, we can also extend the code, as follows;<\/p>\n<pre>\r\n if (Modernizr.webgl) {\r\n \/* Script A *\/\r\n } else {\r\n \/* Script B *\/\r\n }\r\n <\/pre>\n<p>The code above states that if the browser supports WebGL then <strong>Script A<\/strong> will run, if it does not, then <strong>Script B<\/strong> will run. That way, the script will only be loaded when the condition is met and the script is actually needed.<\/p>\n<h2>Modernizr.load<\/h2>\n<p>One more thing that we are going to take a look at from Modernizr is the <code>Modernizr.load<\/code>. <code>Modernizr.load<\/code> is a conditional resource (CSS and JS) loader that is based on <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/SlexAxton\/yepnope.js\/\">Yepnope<\/a>. Let\u2019s take a look at the following code;<\/p>\n<pre>\r\n Modernizr.load({\r\n test: Modernizr.webgl,\r\n yep : 'three.js', \/* JavaScript 3D Library *\/\r\n nope: 'jebgl.js' \/* *\/\r\n });\r\n <\/pre>\n<p>Similar to the previous section, in the example above, we run a test to see if the user\u2019s browser supports WebGL. If the result returns <strong>yep<\/strong> (it supports WebGL) then we will load <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/mrdoob\/three.js\/\">three.js<\/a>, but if it returns <strong>nope<\/strong> (it does not support WebGL) then we will load jebgl.js as the alternative.<\/p>\n<p>In case we only need one condition to load the script, we can remove the other one that we don\u2019t need. The following examples shows how we load <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/mattsparks\/placeMe.js\/wiki\/How-to-use-placeMe.js\">placeme.js<\/a>, if the user\u2019s browser does not support <code>placeholder<\/code> attribute and will load nothing when it does.<\/p>\n<pre>\r\n Modernizr.load({\r\n test: Modernizr.placeholder,\r\n nope: 'placeme.js'\r\n });\r\n <\/pre>\n<p>This practice, as in our previous discussion, will ensure that the users will have the best load performance by avoiding unnecessary bits to download \u2013 in other words, we will only load script, only when it is needed.<\/p>\n<p>For further advanced implementation of <code>Modernizr.load<\/code> you can refer to its official documentation or you can also refer to <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/yepnopejs.com\/\">Yepnope<\/a> documentation where it is originally derived from.<\/p>\n<h2>Final Thoughts<\/h2>\n<p>Modernizr has already done the hard work and save a lot of our time for us, so there is no reason to not include this JavaScript Library when you are working with HTML5 and CSS3, particularly when you need to fill in the gap between new technologies and old browsers.<\/p>","protected":false},"excerpt":{"rendered":"<p>Modernizr is a JavaScript Library used by many popular websites including Twitter, USMagazine, Good.is, About.com, etc. In one of our previous posts, we have mentioned it several times, but we have not actually dug into what Modernizr is. So, in this post we will specifically discuss this JavaScript Library. What is it? First of all,&hellip;<\/p>\n","protected":false},"author":113,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[352],"tags":[4117,2298],"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.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Getting Started with Modernizr JavaScript Library - Hongkiat<\/title>\n<meta name=\"description\" content=\"Modernizr is a JavaScript Library used by many popular websites including Twitter, USMagazine, Good.is, About.com, etc. In one of our previous posts, we\" \/>\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\/modernizr\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Getting Started with Modernizr JavaScript Library\" \/>\n<meta property=\"og:description\" content=\"Modernizr is a JavaScript Library used by many popular websites including Twitter, USMagazine, Good.is, About.com, etc. In one of our previous posts, we\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/modernizr\/\" \/>\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=\"2013-01-30T13:01:33+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-03T17:28:52+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/modernizr\/download-modernizr.jpg\" \/>\n<meta name=\"author\" content=\"Thoriq Firdaus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@tfirdaus\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thoriq Firdaus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/modernizr\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/modernizr\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"Getting Started with Modernizr JavaScript Library\",\"datePublished\":\"2013-01-30T13:01:33+00:00\",\"dateModified\":\"2025-04-03T17:28:52+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/modernizr\\\/\"},\"wordCount\":880,\"commentCount\":18,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/modernizr\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/modernizr\\\/download-modernizr.jpg\",\"keywords\":[\"Javascripts\",\"Modernizr\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/modernizr\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/modernizr\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/modernizr\\\/\",\"name\":\"Getting Started with Modernizr JavaScript Library - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/modernizr\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/modernizr\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/modernizr\\\/download-modernizr.jpg\",\"datePublished\":\"2013-01-30T13:01:33+00:00\",\"dateModified\":\"2025-04-03T17:28:52+00:00\",\"description\":\"Modernizr is a JavaScript Library used by many popular websites including Twitter, USMagazine, Good.is, About.com, etc. In one of our previous posts, we\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/modernizr\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/modernizr\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/modernizr\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/modernizr\\\/download-modernizr.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/modernizr\\\/download-modernizr.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/modernizr\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Getting Started with Modernizr JavaScript Library\"}]},{\"@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\\\/e7948c7a175d211496331e4b6ce55807\",\"name\":\"Thoriq Firdaus\",\"description\":\"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.\",\"sameAs\":[\"https:\\\/\\\/thoriq.com\",\"https:\\\/\\\/x.com\\\/tfirdaus\"],\"jobTitle\":\"Web Developer\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/thoriq\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Getting Started with Modernizr JavaScript Library - Hongkiat","description":"Modernizr is a JavaScript Library used by many popular websites including Twitter, USMagazine, Good.is, About.com, etc. In one of our previous posts, we","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\/modernizr\/","og_locale":"en_US","og_type":"article","og_title":"Getting Started with Modernizr JavaScript Library","og_description":"Modernizr is a JavaScript Library used by many popular websites including Twitter, USMagazine, Good.is, About.com, etc. In one of our previous posts, we","og_url":"https:\/\/www.hongkiat.com\/blog\/modernizr\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2013-01-30T13:01:33+00:00","article_modified_time":"2025-04-03T17:28:52+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/modernizr\/download-modernizr.jpg","type":"","width":"","height":""}],"author":"Thoriq Firdaus","twitter_card":"summary_large_image","twitter_creator":"@tfirdaus","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Thoriq Firdaus","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/modernizr\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/modernizr\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"Getting Started with Modernizr JavaScript Library","datePublished":"2013-01-30T13:01:33+00:00","dateModified":"2025-04-03T17:28:52+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/modernizr\/"},"wordCount":880,"commentCount":18,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/modernizr\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/modernizr\/download-modernizr.jpg","keywords":["Javascripts","Modernizr"],"articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/modernizr\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/modernizr\/","url":"https:\/\/www.hongkiat.com\/blog\/modernizr\/","name":"Getting Started with Modernizr JavaScript Library - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/modernizr\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/modernizr\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/modernizr\/download-modernizr.jpg","datePublished":"2013-01-30T13:01:33+00:00","dateModified":"2025-04-03T17:28:52+00:00","description":"Modernizr is a JavaScript Library used by many popular websites including Twitter, USMagazine, Good.is, About.com, etc. In one of our previous posts, we","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/modernizr\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/modernizr\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/modernizr\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/modernizr\/download-modernizr.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/modernizr\/download-modernizr.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/modernizr\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Getting Started with Modernizr JavaScript Library"}]},{"@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\/e7948c7a175d211496331e4b6ce55807","name":"Thoriq Firdaus","description":"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.","sameAs":["https:\/\/thoriq.com","https:\/\/x.com\/tfirdaus"],"jobTitle":"Web Developer","url":"https:\/\/www.hongkiat.com\/blog\/author\/thoriq\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-4fr","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/16333","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\/113"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=16333"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/16333\/revisions"}],"predecessor-version":[{"id":73568,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/16333\/revisions\/73568"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=16333"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=16333"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=16333"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=16333"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}