{"id":17166,"date":"2013-05-17T21:01:59","date_gmt":"2013-05-17T13:01:59","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=17166"},"modified":"2025-04-24T17:08:23","modified_gmt":"2025-04-24T09:08:23","slug":"css-orientation-styles","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/css-orientation-styles\/","title":{"rendered":"Optimizing UI Design: How to Apply CSS Based on Screen Orientation"},"content":{"rendered":"<p>Thanks to <a href=\"https:\/\/www.hongkiat.com\/blog\/tag\/css\/\">CSS3<\/a> Media Queries, we can now easily adjust and apply CSS styles depending on the size of the device\u2019s screen or viewport.<\/p>\n<p>This article explores how to use <code>min-width<\/code> and <code>max-width<\/code> declarations within Media Queries to apply styles based on viewport dimensions. This is an extension of our <a href=\"https:\/\/www.hongkiat.com\/blog\/tag\/rwd\/\">Responsive Design Series<\/a>.<\/p>\n<div class=\"button\">\n    <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/hongkiat.github.io\/css-orientation-styles\/\">View Demo<\/a>\n<\/div>\n<h2>Understanding Device Orientation<\/h2>\n<p>Mobile devices offer two orientations: Portrait and Landscape. Sometimes, you may need to apply styles based on the device\u2019s orientation, in addition to its viewport width. Here\u2019s how you can do it:<\/p>\n<pre>\n  &lt;link rel=\"stylesheet\" media=\"all and (orientation:portrait)\" href=\"portrait.css\"&gt;\n  &lt;link rel=\"stylesheet\" media=\"all and (orientation:landscape)\" href=\"landscape.css\"&gt;\n<\/pre>\n<p>This method works across various platforms like iPad, iPhone, Android, Safari, and Firefox. You can also include the orientation declaration within Media Queries as shown below.<\/p>\n<pre>\n  @media all and (orientation:portrait) {\n      \/* Styles for Portrait screen *\/\n  }\n\n  @media all and (orientation:landscape) {\n      \/* Styles for Landscape screen *\/\n  }\n<\/pre>\n<p>As defined by <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.w3.org\/TR\/css3-mediaqueries\/#orientation\">W3C<\/a>, the orientation is considered <code>portrait<\/code> when the viewport height is greater than the width. Conversely, it\u2019s <code>landscape<\/code> when the width is greater than the height.<\/p>\n<h2>Preview Examples<\/h2>\n<p>Here are some test previews on iPhone, iPad, and Desktop in both Landscape and Portrait orientations:<\/p>\n<figure class=\"screenshot-mobile-portrait\">\n  <img loading=\"lazy\" decoding=\"async\" alt=\"iPhone Portrait Orientation Preview\" height=\"500\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css-orientation-styles\/iphone-portrait.jpg\" width=\"290\"><figcaption>iPhone Portrait Orientation Preview<\/figcaption><\/figure>\n<figure class=\"screenshot-mobile-portrait\">\n  <img loading=\"lazy\" decoding=\"async\" alt=\"iPhone Landscape Orientation Preview\" height=\"296\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css-orientation-styles\/iphone-landscape.jpg\" width=\"500\"><figcaption>iPhone Landscape Orientation Preview<\/figcaption><\/figure>\n<figure class=\"screenshot-mobile-portrait\">\n  <img loading=\"lazy\" decoding=\"async\" alt=\"iPad Portrait Orientation Preview\" height=\"500\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css-orientation-styles\/ipad-portrait.jpg\" width=\"384\"><figcaption>iPad Portrait Orientation Preview<\/figcaption><\/figure>\n<figure class=\"screenshot-mobile-portrait\">\n  <img loading=\"lazy\" decoding=\"async\" alt=\"iPad Landscape Orientation Preview\" height=\"382\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css-orientation-styles\/ipad-landscape.jpg\" width=\"500\"><figcaption>iPad Landscape Orientation Preview<\/figcaption><\/figure>\n<figure class=\"screenshot-mobile-portrait\">\n  <img loading=\"lazy\" decoding=\"async\" alt=\"Desktop Portrait Orientation Preview\" height=\"480\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css-orientation-styles\/desktop-portrait.jpg\" width=\"279\"><figcaption>Desktop Portrait Orientation Preview<\/figcaption><\/figure>\n<figure class=\"screenshot-mobile-portrait\">\n  <img loading=\"lazy\" decoding=\"async\" alt=\"Desktop Landscape Orientation Preview\" height=\"344\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css-orientation-styles\/desktop-landscape.jpg\" width=\"500\"><figcaption>Desktop Landscape Orientation Preview<\/figcaption><\/figure>\n<p>Feel free to check out the demo and download the source code to see these orientations in action.<\/p>\n<div class=\"button\">\n  <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/hongkiat.github.io\/css-orientation-styles\/\">View Demo<\/a>\n  <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/hongkiat\/css-orientation-styles\/\">Download Source<\/a>\n<\/div>\n<h2>Additional Resources<\/h2>\n<ul>\n<li><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/cloudfour.com\/thinks\/ipad-orientation-css\/\">iPad Orientation CSS<\/a> \u2013 Cloud Four<\/li>\n<li><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.w3.org\/TR\/css3-mediaqueries\/\">CSS3 Media Queries<\/a> \u2013 W3C<\/li>\n<\/ul>","protected":false},"excerpt":{"rendered":"<p>Thanks to CSS3 Media Queries, we can now easily adjust and apply CSS styles depending on the size of the device\u2019s screen or viewport. This article explores how to use min-width and max-width declarations within Media Queries to apply styles based on viewport dimensions. This is an extension of our Responsive Design Series. View Demo&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":[507,506,2016,3416],"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.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Optimizing UI Design: How to Apply CSS Based on Screen Orientation - Hongkiat<\/title>\n<meta name=\"description\" content=\"Thanks to CSS3 Media Queries, we can now easily adjust and apply CSS styles depending on the size of the device&#039;s screen or viewport. This article\" \/>\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-orientation-styles\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Optimizing UI Design: How to Apply CSS Based on Screen Orientation\" \/>\n<meta property=\"og:description\" content=\"Thanks to CSS3 Media Queries, we can now easily adjust and apply CSS styles depending on the size of the device&#039;s screen or viewport. This article\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/css-orientation-styles\/\" \/>\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-05-17T13:01:59+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-24T09:08:23+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/css-orientation-styles\/iphone-portrait.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-orientation-styles\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-orientation-styles\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"Optimizing UI Design: How to Apply CSS Based on Screen Orientation\",\"datePublished\":\"2013-05-17T13:01:59+00:00\",\"dateModified\":\"2025-04-24T09:08:23+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-orientation-styles\\\/\"},\"wordCount\":235,\"commentCount\":7,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-orientation-styles\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-orientation-styles\\\/iphone-portrait.jpg\",\"keywords\":[\"CSS\",\"HTML\",\"HTML5 \\\/ CSS3 Tutorials\",\"ui\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-orientation-styles\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-orientation-styles\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-orientation-styles\\\/\",\"name\":\"Optimizing UI Design: How to Apply CSS Based on Screen Orientation - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-orientation-styles\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-orientation-styles\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-orientation-styles\\\/iphone-portrait.jpg\",\"datePublished\":\"2013-05-17T13:01:59+00:00\",\"dateModified\":\"2025-04-24T09:08:23+00:00\",\"description\":\"Thanks to CSS3 Media Queries, we can now easily adjust and apply CSS styles depending on the size of the device's screen or viewport. This article\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-orientation-styles\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-orientation-styles\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-orientation-styles\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-orientation-styles\\\/iphone-portrait.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-orientation-styles\\\/iphone-portrait.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-orientation-styles\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Optimizing UI Design: How to Apply CSS Based on Screen Orientation\"}]},{\"@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":"Optimizing UI Design: How to Apply CSS Based on Screen Orientation - Hongkiat","description":"Thanks to CSS3 Media Queries, we can now easily adjust and apply CSS styles depending on the size of the device's screen or viewport. This article","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-orientation-styles\/","og_locale":"en_US","og_type":"article","og_title":"Optimizing UI Design: How to Apply CSS Based on Screen Orientation","og_description":"Thanks to CSS3 Media Queries, we can now easily adjust and apply CSS styles depending on the size of the device's screen or viewport. This article","og_url":"https:\/\/www.hongkiat.com\/blog\/css-orientation-styles\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2013-05-17T13:01:59+00:00","article_modified_time":"2025-04-24T09:08:23+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/css-orientation-styles\/iphone-portrait.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-orientation-styles\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-orientation-styles\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"Optimizing UI Design: How to Apply CSS Based on Screen Orientation","datePublished":"2013-05-17T13:01:59+00:00","dateModified":"2025-04-24T09:08:23+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-orientation-styles\/"},"wordCount":235,"commentCount":7,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-orientation-styles\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/css-orientation-styles\/iphone-portrait.jpg","keywords":["CSS","HTML","HTML5 \/ CSS3 Tutorials","ui"],"articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/css-orientation-styles\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/css-orientation-styles\/","url":"https:\/\/www.hongkiat.com\/blog\/css-orientation-styles\/","name":"Optimizing UI Design: How to Apply CSS Based on Screen Orientation - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-orientation-styles\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-orientation-styles\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/css-orientation-styles\/iphone-portrait.jpg","datePublished":"2013-05-17T13:01:59+00:00","dateModified":"2025-04-24T09:08:23+00:00","description":"Thanks to CSS3 Media Queries, we can now easily adjust and apply CSS styles depending on the size of the device's screen or viewport. This article","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-orientation-styles\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/css-orientation-styles\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/css-orientation-styles\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/css-orientation-styles\/iphone-portrait.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/css-orientation-styles\/iphone-portrait.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/css-orientation-styles\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Optimizing UI Design: How to Apply CSS Based on Screen Orientation"}]},{"@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-4sS","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/17166","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=17166"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/17166\/revisions"}],"predecessor-version":[{"id":74099,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/17166\/revisions\/74099"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=17166"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=17166"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=17166"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=17166"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}