{"id":306971,"date":"2020-04-24T12:29:00","date_gmt":"2020-04-24T19:29:00","guid":{"rendered":"https:\/\/css-tricks.com\/?p=306971"},"modified":"2022-07-12T09:25:01","modified_gmt":"2022-07-12T16:25:01","slug":"how-to-make-a-css-only-carousel","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/how-to-make-a-css-only-carousel\/","title":{"rendered":"How to Make a CSS-Only Carousel"},"content":{"rendered":"\n<p>We mentioned a way to make a CSS-only carousel in <a href=\"https:\/\/css-tricks.com\/newsletters\/\">a recent issue of the  newsletter<\/a> and I thought that a more detailed write up would be interesting and capture some of my thoughts on making one.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p>So, here\u2019s what we\u2019re making today:<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/css-tricks.com\/wp-content\/uploads\/2020\/04\/fancy-carousel-1.mp4\" playsinline><\/video><\/figure>\n\n\n\n<p>There\u2019s no JavaScript here, whatsoever! No jQuery plugins. No trickiness. Just a couple of new-ish CSS properties that I\u2019ve been experimenting with as well as some basic HTML.<\/p>\n\n\n\n<p>OK to start, we need to focus on the markup. The design includes a left navigation made up of images and a large image gallery on the right that lets us scroll through each image individually. We\u2019ll also need a wrapper to help us organize the layout:<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;div class=\"wrapper\">\n  &lt;nav class=\"lil-nav\">&lt;\/nav>\n  &lt;div class=\"gallery\">&lt;\/div>\n&lt;\/div><\/code><\/pre>\n\n\n\n<p>Next, we can add images! For this little example, I checked out our list of sites with <a href=\"https:\/\/css-tricks.com\/sites-with-high-quality-photos-you-can-use-for-free\/\">high quality images that you can use for free<\/a> and went with <a href=\"https:\/\/unsplash.com\/\" rel=\"noopener\">Unsplash<\/a>.<\/p>\n\n\n\n<p>After saving images with the CodePen asset manager, I started adding the URLs to the <code>nav<\/code> element:<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;nav class=\"lil-nav\">\n  &lt;a href=\"#image-1\">\n    &lt;img class=\"lil-nav__img\" src=\"...\" alt=\"Yosemite\" \/>\n  &lt;\/a>\n  &lt;a href=\"#image-2\">\n    &lt;img class=\"lil-nav__img\" src=\"...\" alt=\"Basketball hoop\" \/>\n  &lt;\/a>\n  &lt;!-- more images go here --> \n&lt;\/nav><\/code><\/pre>\n\n\n\n<p>See that the <code>href<\/code> to each of these links is pointing to an ID? That\u2019s because if we look at the demo again, we want to be able to click an image and then we want to it to hop to the larger version of that image in the gallery to the right.<\/p>\n\n\n\n<p>So, now we can start to add these images to the large gallery, too\u2026<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;div class=\"gallery\">\n  &lt;img class=\"gallery__img\" id=\"image-1\" src=\"...\" alt=\"Yosemite\" \/>\n  &lt;img class=\"gallery__img\" id=\"image-2\" src=\"...\" alt=\"Basketball hoop\" \/>\n  &lt;!-- more images go here --> \n&lt;\/div><\/code><\/pre>\n\n\n\n<p>Nifty. Next is the fun part: styling this bad boy. We can use a grid layout the parent <code>.wrapper<\/code> and set some smart defaults for the <code>img<\/code> element:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">img {\n  display: block;\n  max-width: 100%;\n}\n\n.wrapper {\n  display: grid;\n  grid-template-columns: 1fr 5fr;\n  grid-gap: 20px;\n}<\/code><\/pre>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_bGVpeeE\" src=\"\/\/codepen.io\/anon\/embed\/bGVpeeE?height=600&amp;theme-id=1&amp;slug-hash=bGVpeeE&amp;default-tab=result\" height=\"600\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed bGVpeeE\" title=\"CodePen Embed bGVpeeE\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>So far, we have our layout sorted and our links set up. Next, let&#8217;s account for overflow that might spill outside our wrapper and make sure that the nav and the gallery are scrollable:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"5, 6\"><code markup=\"tt\">.wrapper {\n  display: grid;\n  grid-template-columns: 1fr 5fr;\n  grid-gap: 10px;\n  overflow: hidden;\n  height: 100vh; \n}\n\n.gallery {\n  overflow: scroll;\n}\n\n.lil-nav {\n  overflow-y: scroll;\n  overflow-x: hidden;\n}<\/code><\/pre>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_GRpZjVQ\" src=\"\/\/codepen.io\/anon\/embed\/GRpZjVQ?height=600&amp;theme-id=1&amp;slug-hash=GRpZjVQ&amp;default-tab=result\" height=\"600\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed GRpZjVQ\" title=\"CodePen Embed GRpZjVQ\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>We can scroll through each image in the gallery now, but if this was a production website we\u2019d probably want to make sure that folks can scroll passed this carousel a bit more easily. <a href=\"https:\/\/trentwalton.com\/2013\/04\/11\/responsive-maps\/\" rel=\"noopener\">Trent Walton wrote about<\/a> this very problem several years ago and I think it\u2019s always worth keeping in mind.<\/p>\n\n\n\n<p>Next up, let\u2019s focus on the carousel snap of each image in the gallery. To do that we\u2019ll need to use the <code>scroll-snap-type<\/code> and <code>scroll-snap-align<\/code> property like this:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.gallery {\n  overflow: scroll;\n  scroll-snap-type: x mandatory;\n}\n\n.gallery__img {\n  scroll-snap-align: start;\n  margin-bottom: 10px;\n}<\/code><\/pre>\n\n\n\n<p>Now try scrolling through the gallery on the right-hand side again:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_jObqVRW\" src=\"\/\/codepen.io\/anon\/embed\/jObqVRW?height=600&amp;theme-id=1&amp;slug-hash=jObqVRW&amp;default-tab=result\" height=\"600\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed jObqVRW\" title=\"CodePen Embed jObqVRW\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>If you want to learn more about these properties I\u2019d highly recommend this piece about <a href=\"https:\/\/css-tricks.com\/practical-css-scroll-snapping\/\">practical CSS scroll snapping<\/a> which digs into the nitty-gritty of these properties.<\/p>\n\n\n\n<p>We have a pretty dang usable carousel! From here, all we have to do is tidy up the design because the gallery image isn\u2019t the full height of the screen. To do that we can use <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/o\/object-fit\/\"><code>object-fit<\/code><\/a> and give each image a <code>min-height<\/code> with the <a href=\"https:\/\/css-tricks.com\/fun-viewport-units\/\"><code>vh<\/code><\/a> unit, just like this:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.gallery__img {\n  scroll-snap-align: start;\n  margin-bottom: 10px;\n  min-height: 100vh;\n  object-fit: cover;\n}<\/code><\/pre>\n\n\n\n<p>Now the big gallery images will always be the full size of the screen and will scale to take up the width and height. Let\u2019s move on and tackle the style of the little navigation images:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.lil-nav {\n  overflow-y: scroll;\n  overflow-x: hidden;\n}\n\n.lil-nav a {\n  height: 200px;\n  display: flex;\n  margin-bottom: 10px;\n}\n\n.lil-nav__img {\n  object-fit: cover;\n}<\/code><\/pre>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_bGVpgqp\" src=\"\/\/codepen.io\/anon\/embed\/bGVpgqp?height=600&amp;theme-id=1&amp;slug-hash=bGVpgqp&amp;default-tab=result\" height=\"600\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed bGVpgqp\" title=\"CodePen Embed bGVpgqp\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>At first, I made this little nav act like a carousel too, but it felt really weird. I\u2019m just keeping the default <code>scroll<\/code> behavior for now. In that demo above, though, try clicking an image. Notice how it jumps to that image in the carousel immediately? It would be nice if we could animate that transition a bit \u2014 and we can!<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"4\"><code markup=\"tt\">.gallery {\n  overflow: scroll;\n  scroll-snap-type: x mandatory;\n  scroll-behavior: smooth;\n}<\/code><\/pre>\n\n\n\n<p>That <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/s\/scroll-behavior\/\"><code>scroll-behavior<\/code><\/a> CSS property is super handy for this and so now the whole thing will animate if you click one of the nav items:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_yLYOgPz\" src=\"\/\/codepen.io\/anon\/embed\/yLYOgPz?height=600&amp;theme-id=1&amp;slug-hash=yLYOgPz&amp;default-tab=result\" height=\"600\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed yLYOgPz\" title=\"CodePen Embed yLYOgPz\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Nifty, eh? One more tiny thing we could do here is throw a filter on the nav items to make them black and white and then animate them on hover:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.lil-nav__img {\n  object-fit: cover;\n  filter: saturate(0);\n  transition: 0.3s ease all;\n}\n\n.lil-nav__img:hover {\n  transform: scale(1.05);\n  filter: saturate(1);\n}<\/code><\/pre>\n\n\n\n<p>I\u2019m sure there\u2019s a lot more we could do here but I think this works quite nicely!<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_eYpZgrM\" src=\"\/\/codepen.io\/anon\/embed\/eYpZgrM?height=600&amp;theme-id=1&amp;slug-hash=eYpZgrM&amp;default-tab=result\" height=\"600\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed eYpZgrM\" title=\"CodePen Embed eYpZgrM\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>We could even throw a tiny bit of JavaScript into the mix to show which image is active, but I reckon that folks know that just from looking at the gallery.<\/p>\n\n\n\n<p>That\u2019s it! We now have a carousel that\u2019s pretty dang good for progressive enhancement and it means we don\u2019t have to load a library of JavaScript or write a bunch more code than we really need to.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"making-the-carousel-responsive\">Making the carousel responsive\u2026<\/h3>\n\n\n<p>Let\u2019s go one step further though and make this chap responsive. What we want to do is reverse the order of our grid by moving all of our current styles into a media query that is only activated at larger screens.<\/p>\n\n\n\n<p>You might want to open up this demo in a new tab and decrease\/increase the size of the browser to see the changes take place:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_YzyqNJK\" src=\"\/\/codepen.io\/anon\/embed\/YzyqNJK?height=600&amp;theme-id=1&amp;slug-hash=YzyqNJK&amp;default-tab=result\" height=\"600\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed YzyqNJK\" title=\"CodePen Embed YzyqNJK\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>If you load this demo on a mobile device you should see how the layout switches between the two modes. This is done by using a single media query on the <code>.wrapper<\/code> element. Note that we\u2019re using Sass:<\/p>\n\n\n\n<pre rel=\"SCSS\" class=\"wp-block-csstricks-code-block language-scss\" data-line=\"\"><code markup=\"tt\">$large: 1200px;\n\n.wrapper {\n  overflow: hidden;\n  height: 100vh;\n  display: grid;\n  grid-template-rows: 2fr 1fr;\n  grid-gap: 10px;\n\n  @media screen and (min-width: $large) {\n    grid-template-columns: 1fr 5fr;\n    grid-template-rows: auto;\n  }\n}<\/code><\/pre>\n\n\n\n<p>Let&#8217;s add one on the navigation, too. But this time, we need to tell the navigation to start on the second row so it moves to the bottom of the screen:<\/p>\n\n\n\n<pre rel=\"SCSS\" class=\"wp-block-csstricks-code-block language-scss\" data-line=\"\"><code markup=\"tt\">.lil-nav {\n  overflow-x: scroll;\n  overflow-y: hidden;\n  display: flex;\n  grid-row-start: 2;\n\n  @media screen and (min-width: $large) {\n    overflow-y: scroll;\n    overflow-x: hidden;\n    display: block;\n    grid-row-start: auto;\n  }\n}<\/code><\/pre>\n\n\n\n<p>With the gallery we need to switch around the <code>scroll-type<\/code> for larger screens and reverse the <code>overflow<\/code> property as well:<\/p>\n\n\n\n<pre rel=\"SCSS\" class=\"wp-block-csstricks-code-block language-scss\" data-line=\"\"><code markup=\"tt\">.gallery {\n  overflow-x: scroll;\n  overflow-y: hidden;\n  scroll-snap-type: x mandatory;\n  scroll-behavior: smooth;\n  display: flex;\n\n  @media screen and (min-width: $large) {\n    display: block;\n    overflow-y: scroll;\n    overflow-x: hidden;\n    scroll-snap-type: y mandatory;\n  }\n}<\/code><\/pre>\n\n\n\n<p>That\u2019s the bulk of the changes we\u2019ve had to make and I quite like it! If we wanted to make this production-ready, we would think about accessibility (e.g. we probably don\u2019t want screen readers to read out all the images in both the nav <em>and<\/em> gallery). Then there&#8217;s performance \u2014 we might consider lazy-loading so the images are only rendered when they&#8217;re needed.<\/p>\n\n\n\n<p>Either way, this is a good start !<\/p>\n","protected":false},"excerpt":{"rendered":"<p>We mentioned a way to make a CSS-only carousel in a recent issue of the newsletter and I thought that a more detailed write up would be interesting and capture some of my thoughts on making one.<\/p>\n","protected":false},"author":223806,"featured_media":306992,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[1462],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/04\/robin-css-carousel.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":247145,"url":"https:\/\/css-tricks.com\/carousels-dont-complicated\/","url_meta":{"origin":306971,"position":0},"title":"Carousels Don\u2019t Have to be Complicated","date":"October 28, 2016","format":false,"excerpt":"Over on the MediaTemple blog, I show you how you can make a pretty decent little carousel with just a few lines of code. Here's the entire premise: Every time a carousel is mentioned in a blog post, it\u2019s a requirement to mention that\u2026 say it with me now: You\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":300964,"url":"https:\/\/css-tricks.com\/css-only-carousel\/","url_meta":{"origin":306971,"position":1},"title":"CSS-Only Carousel","date":"January 10, 2020","format":false,"excerpt":"It's kind of amazing how far HTML and CSS will take you when building a carousel\/slideshow. Setting some boxes in a horizontal row with CSS Flexbox is easy.Showing only one box at a time with overflow and making it swipable with overscroll-behavior\u00a0is easy.You can make the \"slides\" line up nicely\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/carousel-slides.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":335385,"url":"https:\/\/css-tricks.com\/a-super-flexible-css-carousel-enhanced-with-javascript-navigation\/","url_meta":{"origin":306971,"position":2},"title":"A Super Flexible CSS Carousel, Enhanced With JavaScript Navigation","date":"March 5, 2021","format":false,"excerpt":"Not sure about you, but I often wonder how to build a carousel component in such a way that you can easily dump a bunch of items into the component and get a nice working carousel \u2014 one that allows you to scroll smoothly, navigate with the dynamic buttons, and\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/scroll-snap-carousel.gif?fit=900%2C450&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":304193,"url":"https:\/\/css-tricks.com\/creating-a-modal-image-gallery-with-bootstrap-components\/","url_meta":{"origin":306971,"position":3},"title":"Creating a Modal Image Gallery With Bootstrap Components","date":"March 6, 2020","format":false,"excerpt":"Have you ever clicked on an image on a webpage that opens up a larger version of the image with navigation to view other photos? Some folks call it a pop-up. Others call it a lightbox. Bootstrap calls it a modal. I mention Bootstrap because I want to use it\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/02\/bootstrap-modal-carousel.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":269784,"url":"https:\/\/css-tricks.com\/museum-of-websites\/","url_meta":{"origin":306971,"position":4},"title":"Museum of Websites","date":"April 16, 2018","format":false,"excerpt":"The team at Kapwing has collected a lot of images from the Internet Archive\u2019s Wayback Machine and presented a history of how the homepage of popular websites like Google and the New York Times have changed over time. It\u2019s super interesting. I particularly love how Amazon has evolved from a\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/04\/amazon-wayback-archive.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":649,"url":"https:\/\/css-tricks.com\/javascript-page-slider-roundup\/","url_meta":{"origin":306971,"position":5},"title":"Javascript Page Slider Roundup","date":"March 27, 2008","format":false,"excerpt":"\"Page Sliders\" are a bit like Tabbed Boxes, only the content appears to slide by instead of be instantly replaced. This is a pretty nice effect and like tabbed boxes, it can help you get a lot of content onto a single page without risking visual clutter. There are a\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/04\/robin-css-carousel.png?fit=1024%2C512&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/306971"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/223806"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=306971"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/306971\/revisions"}],"predecessor-version":[{"id":366900,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/306971\/revisions\/366900"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/306992"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=306971"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=306971"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=306971"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}