{"id":38037,"date":"2019-09-16T21:39:04","date_gmt":"2019-09-16T13:39:04","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=38037"},"modified":"2019-09-14T22:07:45","modified_gmt":"2019-09-14T14:07:45","slug":"css-scroll-snap-points","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/css-scroll-snap-points\/","title":{"rendered":"An Introduction to CSS Scroll Snap Points"},"content":{"rendered":"

The CSS Scroll Snap Module<\/a><\/strong> is a web standard that gives us some control over scrolling on a web page<\/strong> so that we can make users scroll to certain parts of a page rather than to just anywhere on it.<\/p>\n

Scrolling<\/strong> is one of the most performed actions on a website. Browsers, over the years, have improved their scrolling performance<\/strong> to match users\u2019 agile finger strength. And, developers have used scrolling creatively<\/strong> to achieve a better or an out-of-the-box user experience.<\/p>\n

However, when it comes to the correlation between coding and scrolling<\/strong>, only JavaScript seemed to have any amount of control over the latter. This was so for a long period of time, but with the introduction of scroll snap points<\/strong>, CSS began to catch up.<\/p>\n

Read Also:<\/strong> 15 Examples Of Scrolling Done Right In Website Designs<\/a><\/p>\n

Scrolling without scroll snap points<\/h2>\n

Typically, we don\u2019t scroll very slow, especially on phones. The faster you scroll, the less control you have over where on the screen you\u2019ll end up<\/strong> when you stopped scrolling.<\/p>\n

Imagine you are scrolling through an array of product image on a website, or a gallery of photos, or online slides. What you\u2019d prefer in such applications is to see the whole product, photo, or slide<\/strong> every time you scroll. Not only a part<\/em> of the product image, photo, or slide.<\/p>\n

For example, on the demo below you can see whenever the user stops scrolling, only about half of the image is visible<\/strong> at the bottom of the screen. However, most users would prefer to see the last image fully.<\/p>\n

\"Scrolling<\/figure>\n

Scrolling with scroll snap points<\/h2>\n

This is where we bring in CSS scroll snap points<\/strong>. The name is self-explanatory; it\u2019s a CSS standard that allows us to snap items into place<\/strong> when scrolling.<\/p>\n

There are five CSS properties<\/a><\/strong> that constitute this standard:<\/p>\n

    \n
  1. scroll-snap-type<\/code><\/li>\n
  2. scroll-snap-points-x<\/code><\/li>\n
  3. scroll-snap-points-y<\/code><\/li>\n
  4. scroll-snap-coordinate<\/code><\/li>\n
  5. scroll-snap-destination<\/code><\/li>\n<\/ol>\n

    Browser support<\/h3>\n

    The properties need -webkit<\/code> and -ms<\/code> prefixes<\/strong> for the relevant browsers. As of writing this article, CSS scroll snap is not supported in Chrome and Opera.<\/p>\n

    Note that the last four properties are likely to be dropped by user agents in the near future. Instead, new properties<\/strong>, namely scroll-snap-align<\/code>, scroll-snap-margin<\/code>, and scroll-snap-padding<\/code>, might be created<\/strong>, as defined in this specification<\/a>.<\/p>\n

    However, they will have a similar purpose<\/strong> as the former properties. Currently, the former set of properties will work just fine.<\/p>\n

    Properties<\/h3>\n

    You need to add the scroll-snap-type<\/code> property to the scroll container<\/strong> (the container element whose children are overflowing while it\u2019s scrolled). It specifies the strictness of the snap action<\/strong>. It can take three values:<\/p>\n

      \n
    1. mandatory<\/code><\/strong> \u2013 when the scrolling is finished, the scrolling will snap at a relevant snap point<\/strong><\/li>\n
    2. proximity<\/code><\/strong> \u2013 less strict than mandatory<\/code>; it will depend on the judgement of the UA<\/abbr><\/strong> whether the element will snap at a given snap point<\/li>\n
    3. none<\/code><\/strong> \u2013 no snapping is done<\/li>\n<\/ol>\n

      The scroll-snap-points-x<\/code><\/strong> and scroll-snap-points-y<\/code><\/strong> properties belong to the scroll container<\/strong>, too. They refer to points on the x- and y-axis where the snap points will exist. Their value is given by the repeat()<\/code><\/a> function<\/strong>. For instance, if you want to add snap points along the x-axis at the interval of 100px<\/code> you need to use the scroll-snap-points-x: repeat(100px)<\/code> rule.<\/p>\n

      The scroll-snap-destination<\/code><\/strong> property is also added to the scroll container. It defines a coordinate on the container<\/strong> where a snap destination lies. It is at this snap destination where the container\u2019s children will snap into place when scrolled.<\/p>\n

      You can use the scroll-snap-coordinate<\/code><\/strong> property in conjunction with scroll-snap-destination<\/code>. You need to add it to the container\u2019s child elements. It defines the coordinates of child elements<\/strong>, that will align with the destination coordinates of their scroll container when the user scrolls the screen.<\/p>\n

      Note you don\u2019t have to use all the properties at once. Only scroll-snap-type<\/code> is compulsory.<\/strong> Along with that, you can either define individual snap points or use the destination-coordinate combination.<\/p>\n

      Code example<\/h3>\n

      Here is an example code snippet for a typical scroll container<\/strong>, with scrolling in vertical direction & some images inside<\/strong>. It outputs the demo you can find in the beginning of this post.<\/p>\n

      \r\n<div>\r\n  <img src='Pizza.png' alt='pizza'>\r\n  <img src='Noodle.png' alt='noodle'>\r\n  <img src='Burger.png' alt='burger'>\r\n  <img src='Juice.png' alt='juice'>\r\n<\/div>\r\n<\/pre>\n
      \r\ndiv {\r\n  width: 300px;\r\n  height: 300px;\r\n  overflow: auto;\r\n  ...\r\n}\r\ndiv > img {\r\n  width: 250px;\r\n  height: 150px;\r\n  ...\r\n}\r\n<\/pre>\n
      Now, we add some snap points<\/strong> to the scroll container:<\/p>\n
      \r\ndiv {\r\n  width: 300px;\r\n  overflow: auto;\r\n  scroll-snap-points-y: repeat(150px);\r\n  scroll-snap-type: mandatory;\r\n}\r\n<\/pre>\n
      Below, you can see how the output looks like with CSS snap points added<\/strong>. Notice whenever the scrolling stops while the bottom image is only partially visible, the full image appears<\/strong> after the scrollport snaps into a snapping point above it.<\/p>\n
      \"Scrolling<\/figure>\n
      Read Also:<\/strong> JavaScript Libraries for Cool Scrolling Effects<\/a><\/p>","protected":false},"excerpt":{"rendered":"
      The CSS Scroll Snap Module is a web standard that gives us some control over scrolling on a web page so that we can make users scroll to certain parts of a page rather than to just anywhere on it. Scrolling is one of the most performed actions on a website. Browsers, over the years,…<\/p>\n","protected":false},"author":145,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3392],"tags":[507,4501],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"\nAn Introduction to CSS Scroll Snap Points - Hongkiat<\/title>\n<meta name=\"description\" content=\"The CSS Scroll Snap Module is a web standard that gives us some control over scrolling on a web page so that we can make users scroll to certain parts of\" \/>\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-scroll-snap-points\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"An Introduction to CSS Scroll Snap Points\" \/>\n<meta property=\"og:description\" content=\"The CSS Scroll Snap Module is a web standard that gives us some control over scrolling on a web page so that we can make users scroll to certain parts of\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/css-scroll-snap-points\/\" \/>\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=\"2019-09-16T13:39:04+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/css-scroll-snap-points\/css-scroll-snap-1.gif\" \/>\n<meta name=\"author\" content=\"Preethi Ranjit\" \/>\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=\"Preethi Ranjit\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 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-scroll-snap-points\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-scroll-snap-points\\\/\"},\"author\":{\"name\":\"Preethi Ranjit\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e981676afae36d1ff5feb75094950ab3\"},\"headline\":\"An Introduction to CSS Scroll Snap Points\",\"datePublished\":\"2019-09-16T13:39:04+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-scroll-snap-points\\\/\"},\"wordCount\":720,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-scroll-snap-points\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-scroll-snap-points\\\/css-scroll-snap-1.gif\",\"keywords\":[\"CSS\",\"CSS Tutorials\"],\"articleSection\":[\"Coding\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-scroll-snap-points\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-scroll-snap-points\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-scroll-snap-points\\\/\",\"name\":\"An Introduction to CSS Scroll Snap Points - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-scroll-snap-points\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-scroll-snap-points\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-scroll-snap-points\\\/css-scroll-snap-1.gif\",\"datePublished\":\"2019-09-16T13:39:04+00:00\",\"description\":\"The CSS Scroll Snap Module is a web standard that gives us some control over scrolling on a web page so that we can make users scroll to certain parts of\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-scroll-snap-points\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-scroll-snap-points\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-scroll-snap-points\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-scroll-snap-points\\\/css-scroll-snap-1.gif\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-scroll-snap-points\\\/css-scroll-snap-1.gif\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-scroll-snap-points\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"An Introduction to CSS Scroll Snap Points\"}]},{\"@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\\\/e981676afae36d1ff5feb75094950ab3\",\"name\":\"Preethi Ranjit\",\"description\":\"A .NET developer with a JavaScript background, Preethi is expert in front-end coding, JavaScript, HTML, and CSS.\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/preethi\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"An Introduction to CSS Scroll Snap Points - Hongkiat","description":"The CSS Scroll Snap Module is a web standard that gives us some control over scrolling on a web page so that we can make users scroll to certain parts of","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-scroll-snap-points\/","og_locale":"en_US","og_type":"article","og_title":"An Introduction to CSS Scroll Snap Points","og_description":"The CSS Scroll Snap Module is a web standard that gives us some control over scrolling on a web page so that we can make users scroll to certain parts of","og_url":"https:\/\/www.hongkiat.com\/blog\/css-scroll-snap-points\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2019-09-16T13:39:04+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/css-scroll-snap-points\/css-scroll-snap-1.gif","type":"","width":"","height":""}],"author":"Preethi Ranjit","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Preethi Ranjit","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/css-scroll-snap-points\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-scroll-snap-points\/"},"author":{"name":"Preethi Ranjit","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e981676afae36d1ff5feb75094950ab3"},"headline":"An Introduction to CSS Scroll Snap Points","datePublished":"2019-09-16T13:39:04+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-scroll-snap-points\/"},"wordCount":720,"commentCount":1,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-scroll-snap-points\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/css-scroll-snap-points\/css-scroll-snap-1.gif","keywords":["CSS","CSS Tutorials"],"articleSection":["Coding"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/css-scroll-snap-points\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/css-scroll-snap-points\/","url":"https:\/\/www.hongkiat.com\/blog\/css-scroll-snap-points\/","name":"An Introduction to CSS Scroll Snap Points - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-scroll-snap-points\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-scroll-snap-points\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/css-scroll-snap-points\/css-scroll-snap-1.gif","datePublished":"2019-09-16T13:39:04+00:00","description":"The CSS Scroll Snap Module is a web standard that gives us some control over scrolling on a web page so that we can make users scroll to certain parts of","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-scroll-snap-points\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/css-scroll-snap-points\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/css-scroll-snap-points\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/css-scroll-snap-points\/css-scroll-snap-1.gif","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/css-scroll-snap-points\/css-scroll-snap-1.gif"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/css-scroll-snap-points\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"An Introduction to CSS Scroll Snap Points"}]},{"@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\/e981676afae36d1ff5feb75094950ab3","name":"Preethi Ranjit","description":"A .NET developer with a JavaScript background, Preethi is expert in front-end coding, JavaScript, HTML, and CSS.","url":"https:\/\/www.hongkiat.com\/blog\/author\/preethi\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-9Tv","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/38037","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\/145"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=38037"}],"version-history":[{"count":2,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/38037\/revisions"}],"predecessor-version":[{"id":48701,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/38037\/revisions\/48701"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=38037"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=38037"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=38037"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=38037"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}