{"id":304342,"date":"2020-03-17T07:54:56","date_gmt":"2020-03-17T14:54:56","guid":{"rendered":"https:\/\/css-tricks.com\/?p=304342"},"modified":"2021-08-25T13:29:01","modified_gmt":"2021-08-25T20:29:01","slug":"how-to-create-a-skip-to-content-link","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/how-to-create-a-skip-to-content-link\/","title":{"rendered":"How to Create a \u201cSkip to Content\u201d Link"},"content":{"rendered":"\n<p>Skip links are little internal navigation links that help users move around a page. It\u2019s possible you\u2019ve never actually <em>seen<\/em> one before because they\u2019re often hidden from view and used as an accessibility enhancement that lets keyboard users and screen readers jump from the top of the page to the content without have to go through other elements on the page first.<\/p>\n\n\n\n<p>In fact, you can find one right here on CSS-Tricks if you crack DevTools open.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/02\/skip-01.png?ssl=1\" alt=\"\" class=\"wp-image-304345\" data-recalc-dims=\"1\"\/><\/figure>\n\n\n\n<!--more-->\n\n\n\n<p>In my opinion, the best way to implement a skip link is to hide it and then bring it into view when it is focused. So, let\u2019s say we have a link in the HTML:<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;a class=\"skip-to-content-link\" href=\"#main\">\n  Skip to content\n&lt;\/a><\/code><\/pre>\n\n\n\n<p>\u2026we can give it an absolute position and translate it off the screen:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.skip-to-content-link {\n  left: 50%;\n  position: absolute;\n  transform: translateY(-100%);\n}<\/code><\/pre>\n\n\n\n<p>Then we can bring it back into view when it\u2019s in focus and style it up a bit in the process:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.skip-to-content-link {\n  background: #e77e23;\n  height: 30px;\n  left: 50%;\n  padding: 8px;\n  position: absolute;\n  transform: translateY(-100%);\n  transition: transform 0.3s;\n}\n\n.skip-to-content-link:focus {\n  transform: translateY(0%);\n}<\/code><\/pre>\n\n\n\n<p>This will hide our link until it is focused and then put it into view when it becomes focused.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_vYOXVOM\" src=\"\/\/codepen.io\/anon\/embed\/vYOXVOM?height=400&amp;theme-id=1&amp;slug-hash=vYOXVOM&amp;default-tab=result\" height=\"400\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed vYOXVOM\" title=\"CodePen Embed vYOXVOM\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Now, allow me to elaborate, starting with this quote from Miles Davis:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p><em>Time isn\u2019t the main thing. It\u2019s the only thing<\/em>.<\/p><\/blockquote>\n\n\n\n<p>As I sit down to write this article in a rainy Ireland, I think of the challenge that many users face as they use the web that I take for granted. We put so much thought into creating a great user experience without thinking of <em>all<\/em> our users and how to meet their needs. Admittedly, a skip link was something I had never heard of until completing a course on<a href=\"https:\/\/frontendmasters.com\/courses\/javascript-accessibility\/\" rel=\"noopener\"> Frontend Masters by Marcy Sutton<\/a>. Since learning the power and simplicity of using a skip link, I decided to make it my mission to spread more awareness \u2014 and what platform better than CSS-Tricks!<\/p>\n\n\n\n<p>A solution is an answer to a problem, so what\u2019s the solution for helping keyboard users and screen readers find the content of a page quickly? In short, the solution is <em>time.<\/em> Giving users the ability to navigate to parts of our website that they are most interested in gives them the power to save valuable time.<\/p>\n\n\n\n<p>Take the <a href=\"https:\/\/news.sky.com\/\" rel=\"noopener\">Sky News<\/a> website as an example. It offers a \u201cSkip to content\u201d button that allows users to skip all the navigation items and jump straight to the main content.<\/p>\n\n\n\n<figure class=\"wp-block-video skip-video-margin\"><video controls src=\"https:\/\/css-tricks.com\/wp-content\/uploads\/2020\/02\/sky-news-skip-link-example.mp4\"><\/video><\/figure>\n\n\n\n<p>You can see this button by navigating to the top of the page using your keyboard. &nbsp;This is similar to the implementation shown above. The link is always in the document but only becomes visible when it\u2019s in focus.<\/p>\n\n\n\n<p>This is the type of skip link we are going to create together in this post.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"our-sample-website\"><strong>Our sample website<\/strong><\/h3>\n\n\n<p>I built a sample website that we will use to demonstrate a skip link.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_mdJyaNX\" src=\"\/\/codepen.io\/anon\/embed\/mdJyaNX?height=600&amp;theme-id=1&amp;slug-hash=mdJyaNX&amp;default-tab=result\" height=\"600\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed mdJyaNX\" title=\"CodePen Embed mdJyaNX\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>The website has a number of navigation links but, in the interest of time, there are only two pages: the <strong>home page<\/strong> and the <strong>blog page<\/strong>. This is all we need to see how things work.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"identifying-the-problem\">Identifying the problem<\/h3>\n\n\n<p>Here\u2019s the navigation we\u2019re working with:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/02\/image_preview-12.png?ssl=1\" alt=\"\" class=\"wp-image-304346\" data-recalc-dims=\"1\"\/><\/figure>\n\n\n\n<p>In total, we have eight navigation items that a keyboard user and screen reader must tab through before reaching the main content below the navigation.<\/p>\n\n\n\n<p>That\u2019s the problem. The navigation may be irrelevant for the user. Perhaps the user was given a direct link to an article and they simply want to get to the content.<\/p>\n\n\n\n<p>This is a perfect use case for a skip link.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"creating-the-link\">Creating the link<\/h3>\n\n\n<p>There are a couple of approaches to creating a Skip to content link. &nbsp;What I like to do is similar to the Sky News example, which is hiding the link until it is focused. &nbsp;That means we can drop the link at or near the top of the page, like inside the <code>&lt;header&gt;<\/code> element.<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;header>\n  &lt;a class=\"skip-link\" href='#main'>Skip to content&lt;\/a>\n  &lt;!-- Navigation-->\n&lt;\/header><\/code><\/pre>\n\n\n\n<p>This link has a <code>.skip-link<\/code> class so we can style it. The<code>href<\/code> attribute points to <code>#main<\/code>, which is the ID we will add to the <code>&lt;main&gt;<\/code> element that comes further down the page. That\u2019s what the link will jump to when clicked.<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;header>\n  &lt;a class=\"skip-link\" href='#main'>Skip to content&lt;\/a>\n  &lt;!-- Navigation-->\n&lt;\/header>\n\u2028\n&lt;!-- Maybe some other stuff... -->\n\u2028\n&lt;main id=\"main\">\n  &lt;!-- Content -->\n&lt;\/main><\/code><\/pre>\n\n\n\n<p>Here\u2019s what we have if we simply drop the link into the header with no styling.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_jOPBQZw\" src=\"\/\/codepen.io\/anon\/embed\/jOPBQZw?height=625&amp;theme-id=1&amp;slug-hash=jOPBQZw&amp;default-tab=result\" height=\"625\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed jOPBQZw\" title=\"CodePen Embed jOPBQZw\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>This does not look great, but the functionality is there. Try navigating to the link with your keyboard and pressing Enter when it\u2019s in focus.<\/p>\n\n\n\n<p>Now it\u2019s time to make it look pretty. We must first fix the positioning and only show our skip link when it is in focus.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.skip-link {\n  background: #319795;\n  color: #fff;\n  font-weight: 700;\n  left: 50%;\n  padding: 4px;\n  position: absolute;\n  transform: translateY(-100%);\n}\n\n.skip-link:focus {\n  transform: translateY(0%);\n}<\/code><\/pre>\n\n\n\n<p>The magic here is in the <code>transform<\/code> property, which is hiding and showing our skip link depending on whether it is focused or not. Let\u2019s make it look a little nicer with a quick transition on the <code>transform<\/code> property.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.skip-link {\n  \/* Same as  before *\/\n  transition: transform 0.3s;\n}<\/code><\/pre>\n\n\n\n<p>It will now transition into view which makes that bit better.<\/p>\n\n\n\n<p>You should now (hopefully) have what I have below:<\/p>\n\n\n\n<figure class=\"wp-block-video skip-link-video-wrapper\"><video controls src=\"https:\/\/css-tricks.com\/wp-content\/uploads\/2020\/02\/my-site-skip-link-example.mp4\"><\/video><figcaption><a href=\"https:\/\/cdpn.io\/team\/css-tricks\/debug\/OJVpazN\" rel=\"noopener\">Live Demo<\/a><\/figcaption><\/figure>\n\n\n\n<p>As you can see, the skip link bypasses the navigation and jumps straight down to the <code>&lt;main&gt;<\/code> element when clicked.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"its-ok-to-use-more-than-one-link\">It\u2019s OK to use more than one link!<\/h3>\n\n\n<p>Right now, the link only serves one purpose and that is skip to the content of our website. But we don\u2019t have to stop there.<\/p>\n\n\n\n<p>We can go even further and create a skip link that has more options, such as a way to jump to the footer of the site. As you might imagine, this is quite similar to what we\u2019ve already done.<\/p>\n\n\n\n<p>Let\u2019s make the blog page of the example site a little more usable by using multiple skip links. It\u2019s common for blogs to use AJAX that loads in more posts when reaching the bottom of the page. This can make it very difficult to get to the footer of the website. That\u2019s the problem we want to solve in this case.<\/p>\n\n\n\n<p>So let\u2019s add a second link that bypasses all that auto-loading business and jumps the user straight to a <code>#footer<\/code> element on the page.<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;div class=\"skip-link\" >\n  Skip to &lt;a href='#main'>content&lt;\/a> or &lt;a href='#footer'>footer&lt;\/a>\n&lt;\/div><\/code><\/pre>\n\n\n\n<p>We also need to amend our CSS a little and use the <a href=\"https:\/\/css-tricks.com\/almanac\/selectors\/f\/focus-within\/\"><code>:focus-within<\/code><\/a> pseudo selector.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.skip-link {\n  transform: translateY(-100%);\n}\n\n.skip-link:focus-within {\n  transform: translateY(0%);\n}<\/code><\/pre>\n\n\n\n<p>This is saying if <em>anything<\/em> within our .skip-link element has focus, then we show it. Sadly, neither Internet Explorer nor Opera Mini support focus-within, but its coverage is pretty darn good and there is a <a href=\"https:\/\/github.com\/matteobad\/focus-within-polyfill\" rel=\"noopener\">polyfill available<\/a>.<\/p>\n\n\n<div class=\"caniuse\"><div class=\"caniuse-header\"><p>This browser support data is from <a href=\"http:\/\/caniuse.com\/#feat=\u201dcss-focus-within\u201d\" rel=\"noopener\">Caniuse<\/a>, which has more detail. A number indicates that browser supports the feature at that version and up.<\/p><\/div><div class=\"caniuse-section\"><h4>Desktop<\/h4><table class=\"browser-support-table\"><thead><tr><th class=\"chrome\"><span>Chrome<\/span><\/th><th class=\"firefox\"><span>Firefox<\/span><\/th><th class=\"ie\"><span>IE<\/span><\/th><th class=\"edge\"><span>Edge<\/span><\/th><th class=\"safari\"><span>Safari<\/span><\/th><\/tr><\/thead><tbody><tr><td class=\"y yep\" title=\"Chrome - \"><span class=\"caniuse-agents-version version\">60<\/span><\/td><td class=\"y yep\" title=\"Firefox - \"><span class=\"caniuse-agents-version version\">52<\/span><\/td><td class=\"n nope\" title=\"IE - \"><span class=\"caniuse-agents-version version\">No<\/span><\/td><td class=\"y yep\" title=\"Edge - \"><span class=\"caniuse-agents-version version\">79<\/span><\/td><td class=\"y yep\" title=\"Safari - \"><span class=\"caniuse-agents-version version\">10.1<\/span><\/td><\/tr><\/table><\/div><div class=\"caniuse-section\"><h4>Mobile \/ Tablet<\/h4><table class=\"browser-support-table\"><thead><tr><th class=\"and_chr\"><span>Android Chrome<\/span><\/th><th class=\"and_ff\"><span>Android Firefox<\/span><\/th><th class=\"android\"><span>Android<\/span><\/th><th class=\"ios_saf\"><span>iOS Safari<\/span><\/th><\/tr><\/thead><tbody><tr><td class=\"y yep\" title=\"Android Chrome - \"><span class=\"caniuse-agents-version version\">124<\/span><\/td><td class=\"y yep\" title=\"Android Firefox - \"><span class=\"caniuse-agents-version version\">125<\/span><\/td><td class=\"y yep\" title=\"Android - \"><span class=\"caniuse-agents-version version\">124<\/span><\/td><td class=\"y yep\" title=\"iOS Safari - \"><span class=\"caniuse-agents-version version\">10.3<\/span><\/td><\/tr><\/table><\/div><\/div>\n\n\n\n<p>Last thing we need to do is make sure there&#8217;s an ID on our footer element so the link has something to jump to.<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;footer id=\"footer\"><\/code><\/pre>\n\n\n\n<p>Here&#8217;s what this gives us:<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/css-tricks.com\/wp-content\/uploads\/2020\/02\/skip-to-footer-example.mp4\"><\/video><\/figure>\n\n\n\n<p>If we wanted to go one step further (and I\u2019d encourage it), we could style each link a little differently so users can distinguish between the two. Both links in this example are plain white which works great for a single button that does a single thing, but it\u2019d be clearer that we\u2019re dealing with two links if they were presented differently.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"jumping-to-conclusions\">Jumping to conclusions<\/h3>\n\n\n<p>Are you using skip links on your site? Or, if not, does this convince you to use one? I hope it\u2019s clear that skip links are a great value add when it comes to the accessibility of a site. While it\u2019s not a silver bullet that solves every accessibility need, it does solve some use cases that make for a much more polished user experience.<\/p>\n\n\n\n<p>Here are some prominent sites that are using this or a similar technique:<\/p>\n\n\n\n<ul><li><a href=\"https:\/\/www.amazon.com\/\" rel=\"noopener\">Amazon<\/a><\/li><li><a href=\"https:\/\/www.chase.com\/\" rel=\"noopener\">Chase<\/a><\/li><li><a href=\"https:\/\/www.google.com\/search?q=css\" rel=\"noopener\">Google<\/a> (not a skip link, but a link to leave accessibility feedback)<\/li><li><a href=\"https:\/\/www.target.com\/\" rel=\"noopener\">Target<\/a><\/li><li><a href=\"https:\/\/www.nytimes.com\/\" rel=\"noopener\">The New York Times<\/a><\/li><li><a href=\"https:\/\/www.zillow.com\/\" rel=\"noopener\">Zillow<\/a><\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Skip links are little internal navigation links that help users move around a page. It\u2019s possible you\u2019ve never actually seen one before because they\u2019re often hidden from view and used as an accessibility enhancement that lets keyboard users and screen readers jump from the top of the page to the content without have to go [&hellip;]<\/p>\n","protected":false},"author":259169,"featured_media":273933,"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":[1277,466,1331,18913],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/07\/link-pattern.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":336902,"url":"https:\/\/css-tricks.com\/imagining-native-skip-links\/","url_meta":{"origin":304342,"position":0},"title":"Imagining native skip links","date":"March 23, 2021","format":false,"excerpt":"I love it when standards evolve from something that a bunch of developers are already doing, and making it easier and foolproof. Kitty Giraudel is onto that here with skip links, something that every website should probably have, and that has a whole checklist of things that we can and\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/07\/link-pattern.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":345154,"url":"https:\/\/css-tricks.com\/a-deep-dive-on-skipping-to-content\/","url_meta":{"origin":304342,"position":1},"title":"A Deep Dive on Skipping to Content","date":"August 3, 2021","format":false,"excerpt":"While most people browsing the web on a computer use a mouse, many rely on their keyboard instead. Theoretically, using a web page with the keyboard should not be a problem \u2014 press the TAB key to move the keyboard focus from one focusable element to the next then press\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/07\/Screen-Shot-2021-08-03-at-7.34.58-AM.png?fit=1200%2C731&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":264101,"url":"https:\/\/css-tricks.com\/improving-accessibility-24-ways\/","url_meta":{"origin":304342,"position":2},"title":"Improving the Accessibility of 24 ways","date":"January 3, 2018","format":false,"excerpt":"I\u2019ve been thinking recently about the nature of my work and which aspects of it I enjoy the most. In a role that will often straddle the realms of design and development, whether editing copy, evaluating the design of an interface or refactoring code, I've come to realize that my\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":264707,"url":"https:\/\/css-tricks.com\/small-tweaks-can-make-huge-impact-websites-accessibility\/","url_meta":{"origin":304342,"position":3},"title":"Small Tweaks That Can Make a Huge Impact on Your Website&#8217;s Accessibility","date":"January 11, 2018","format":false,"excerpt":"For a beginner, accessibility can be daunting. With all of the best intentions in the world, the learning curve to developing compliant, fully accessible websites and apps is huge. It's also hard to find the right advice, because it's an ever-changing and increasingly crowded landscape. I've written this post to\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":253531,"url":"https:\/\/css-tricks.com\/smooth-scrolling-accessibility\/","url_meta":{"origin":304342,"position":4},"title":"Smooth Scrolling and Accessibility","date":"April 14, 2017","format":false,"excerpt":"Smooth scrolling (the animated change of position within the viewport from the originating link to the destination anchor) can be a nice interaction detail added to a site, giving a polished feel to the experience. If you don't believe me, look at how many people have responded to the Smooth\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":352798,"url":"https:\/\/css-tricks.com\/working-with-built-in-graphql-directives\/","url_meta":{"origin":304342,"position":5},"title":"Working With Built-in GraphQL Directives","date":"October 1, 2021","format":false,"excerpt":"Directives are one of GraphQL\u2019s best \u2014 and most unspoken \u2014 features. Let's explore working with GraphQL\u2019s built-in schema and operation directives that all GraphQL spec compliant APIs must implement. They are extremely useful if you are working with a dynamic front-end because you have the control to reduce the\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/09\/graphql-directives-traffic-light.webp?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/304342"}],"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\/259169"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=304342"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/304342\/revisions"}],"predecessor-version":[{"id":350696,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/304342\/revisions\/350696"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/273933"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=304342"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=304342"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=304342"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}