{"id":18360,"date":"2013-10-15T13:01:50","date_gmt":"2013-10-15T05:01:50","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=18360"},"modified":"2025-04-04T01:37:47","modified_gmt":"2025-04-03T17:37:47","slug":"css-automatic-vendor-prefix","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/css-automatic-vendor-prefix\/","title":{"rendered":"Adding CSS Vendor Prefix Automatically with Sublime Text"},"content":{"rendered":"<p>There are many CSS3 properties that are still experimental. An experimental CSS property uses vendor prefix, and as we already know, each browser has their own prefix; Firefox uses <code>-moz-<\/code>, Internet Explorer uses <code>-ms-<\/code>, Chrome and Safari use <code>-webkit-<\/code>, and Opera uses <code>-o-<\/code> (which has been switched to <code>-webkit-<\/code> as well).<\/p>\n<p>The problem is, unless you are utilizing <a rel=\"nofollow noopener\" target=\"_blank\" href=\"http:\/\/compass-style.org\/\">Compass<\/a>, including vendor prefix is tedious. The requirement is also varied for each browser, and whether we should include the prefix (or not) becomes a question worthy of consideration.<\/p>\n<p>If you are using Sublime Text though, here is an easier way.<\/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\/sublime-text-refresh-browser\/\" class=\"ref-block__link\" title=\"Read More: How to Refresh Changes on Browser with Sublime Text\" rel=\"bookmark\"><span class=\"screen-reader-text\">How to Refresh Changes on Browser with Sublime Text<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/sublime-text-refresh-browser.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-17502 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/sublime-text-refresh-browser.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">How to Refresh Changes on Browser with Sublime Text<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tAs web designers, we often do this: tweak the codes in the code editor, save the file, head...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<h2>Installing Node.js<\/h2>\n<p>First, we need <a href=\"https:\/\/www.hongkiat.com\/blog\/node-js-server-side-javascript\/\">Node.js<\/a> installed in our system. The installation package is available for Windows, OSX, and Linux, which you can <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/nodejs.org\/en\/download\/\">download here.<\/a> If you are unsure if you have it or not, run the following command in the Terminal.<\/p>\n<pre>\r\n node -v\r\n <\/pre>\n<p>If it is already installed, it should return the version, as shown below.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css-automatic-vendor-prefix\/nodejs-version.jpg\" alt=\"nodejs version\" width=\"500\" height=\"150\"><\/figure>\n<h2>Installing AutoPrefixer<\/h2>\n<p>The <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/postcss\/autoprefixer\">Autoprefixer<\/a> is developed by <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/sitnik.ru\/en\/\">Andrey Sitnik<\/a>. It is then ported to Sublime Text package by <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/twitter.com\/sindresorhus\">Sindre Sorhus<\/a>.<\/p>\n<p>I recommend that you install Package Control for easier package installation. You can go to <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/packagecontrol.io\">Wbond for the official instructions<\/a>. After that, you can hit the <span class=\"key\">Command<\/span> + <span class=\"key\">Shift<\/span> + <span class=\"key\">P<\/span> keys and select \u201cInstall Package\u201d. Then search for <strong><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/sindresorhus\/sublime-autoprefixer\">Autoprefixer<\/a><\/strong>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css-automatic-vendor-prefix\/install-package.jpg\" alt=\"install package\" width=\"500\" height=\"170\"><\/figure>\n<p>Hit <strong>enter<\/strong> to install.<\/p>\n<h2>Using AutoPrefixer<\/h2>\n<p><strong>AutoPrefixer<\/strong> comes with a default setting, as follows<\/p>\n<pre>\r\n {\r\n \"browsers\": [\"last 2 versions\"]\r\n }\r\n <\/pre>\n<p>But, we can personalize this to meet our own requirement.<\/p>\n<p>Autoprefixer uses the CanIUse.com database for adding the prefixes. CanIUse.com lists CSS3 as well as HTML5, JS and SVG support statistics in the browsers including the use of vendor prefixes. And as we can see from the default setting, Autoprefixer adds prefixes for the last 2 versions as well.<\/p>\n<p>If we take CSS3 Transition as an example, it will add the prefixes for the Webkit and Opera browsers.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css-automatic-vendor-prefix\/transition-prefix-2.jpg\" alt=\"transition prefix\" width=\"500\" height=\"170\"><\/figure>\n<p>And if we set it for 7 versions back, like so.<\/p>\n<pre>\r\n {\r\n \"browsers\": [\"last 7 versions\"]\r\n }\r\n <\/pre>\n<p>It will also include the <code>-moz-<\/code> for Firefox<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css-automatic-vendor-prefix\/transition-prefix-7.jpg\" alt=\"transition prefix\" width=\"500\" height=\"170\"><\/figure>\n<p>To include the prefix you can hit <span class=\"key\">Command<\/span> + <span class=\"key\">Shift<\/span> + <span class=\"key\">P<\/span> and select <strong>Autoprefix CSS<\/strong>, like so.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css-automatic-vendor-prefix\/add-prefix.jpg\" alt=\"add prefix\" width=\"500\" height=\"170\"><\/figure>\n<p>Now, you can simply write the standard CSS3 syntax, and this plugin will include the prefix for you in a snap.<\/p>","protected":false},"excerpt":{"rendered":"<p>There are many CSS3 properties that are still experimental. An experimental CSS property uses vendor prefix, and as we already know, each browser has their own prefix; Firefox uses -moz-, Internet Explorer uses -ms-, Chrome and Safari use -webkit-, and Opera uses -o- (which has been switched to -webkit- as well). The problem is, unless&hellip;<\/p>\n","protected":false},"author":113,"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":[352],"tags":[507,4501,2499],"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>Adding CSS Vendor Prefix Automatically with Sublime Text - Hongkiat<\/title>\n<meta name=\"description\" content=\"There are many CSS3 properties that are still experimental. An experimental CSS property uses vendor prefix, and as we already know, each browser has\" \/>\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\/css-automatic-vendor-prefix\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Adding CSS Vendor Prefix Automatically with Sublime Text\" \/>\n<meta property=\"og:description\" content=\"There are many CSS3 properties that are still experimental. An experimental CSS property uses vendor prefix, and as we already know, each browser has\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/css-automatic-vendor-prefix\/\" \/>\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-10-15T05:01:50+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-03T17:37:47+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/css-automatic-vendor-prefix\/nodejs-version.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=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-automatic-vendor-prefix\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-automatic-vendor-prefix\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"Adding CSS Vendor Prefix Automatically with Sublime Text\",\"datePublished\":\"2013-10-15T05:01:50+00:00\",\"dateModified\":\"2025-04-03T17:37:47+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-automatic-vendor-prefix\\\/\"},\"wordCount\":369,\"commentCount\":24,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-automatic-vendor-prefix\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-automatic-vendor-prefix\\\/nodejs-version.jpg\",\"keywords\":[\"CSS\",\"CSS Tutorials\",\"sublime text\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-automatic-vendor-prefix\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-automatic-vendor-prefix\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-automatic-vendor-prefix\\\/\",\"name\":\"Adding CSS Vendor Prefix Automatically with Sublime Text - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-automatic-vendor-prefix\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-automatic-vendor-prefix\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-automatic-vendor-prefix\\\/nodejs-version.jpg\",\"datePublished\":\"2013-10-15T05:01:50+00:00\",\"dateModified\":\"2025-04-03T17:37:47+00:00\",\"description\":\"There are many CSS3 properties that are still experimental. An experimental CSS property uses vendor prefix, and as we already know, each browser has\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-automatic-vendor-prefix\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-automatic-vendor-prefix\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-automatic-vendor-prefix\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-automatic-vendor-prefix\\\/nodejs-version.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-automatic-vendor-prefix\\\/nodejs-version.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-automatic-vendor-prefix\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Adding CSS Vendor Prefix Automatically with Sublime Text\"}]},{\"@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":"Adding CSS Vendor Prefix Automatically with Sublime Text - Hongkiat","description":"There are many CSS3 properties that are still experimental. An experimental CSS property uses vendor prefix, and as we already know, each browser has","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\/css-automatic-vendor-prefix\/","og_locale":"en_US","og_type":"article","og_title":"Adding CSS Vendor Prefix Automatically with Sublime Text","og_description":"There are many CSS3 properties that are still experimental. An experimental CSS property uses vendor prefix, and as we already know, each browser has","og_url":"https:\/\/www.hongkiat.com\/blog\/css-automatic-vendor-prefix\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2013-10-15T05:01:50+00:00","article_modified_time":"2025-04-03T17:37:47+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/css-automatic-vendor-prefix\/nodejs-version.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":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/css-automatic-vendor-prefix\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-automatic-vendor-prefix\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"Adding CSS Vendor Prefix Automatically with Sublime Text","datePublished":"2013-10-15T05:01:50+00:00","dateModified":"2025-04-03T17:37:47+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-automatic-vendor-prefix\/"},"wordCount":369,"commentCount":24,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-automatic-vendor-prefix\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/css-automatic-vendor-prefix\/nodejs-version.jpg","keywords":["CSS","CSS Tutorials","sublime text"],"articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/css-automatic-vendor-prefix\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/css-automatic-vendor-prefix\/","url":"https:\/\/www.hongkiat.com\/blog\/css-automatic-vendor-prefix\/","name":"Adding CSS Vendor Prefix Automatically with Sublime Text - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-automatic-vendor-prefix\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-automatic-vendor-prefix\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/css-automatic-vendor-prefix\/nodejs-version.jpg","datePublished":"2013-10-15T05:01:50+00:00","dateModified":"2025-04-03T17:37:47+00:00","description":"There are many CSS3 properties that are still experimental. An experimental CSS property uses vendor prefix, and as we already know, each browser has","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-automatic-vendor-prefix\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/css-automatic-vendor-prefix\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/css-automatic-vendor-prefix\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/css-automatic-vendor-prefix\/nodejs-version.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/css-automatic-vendor-prefix\/nodejs-version.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/css-automatic-vendor-prefix\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Adding CSS Vendor Prefix Automatically with Sublime Text"}]},{"@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-4M8","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/18360","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=18360"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/18360\/revisions"}],"predecessor-version":[{"id":73629,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/18360\/revisions\/73629"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=18360"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=18360"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=18360"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=18360"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}