{"id":14081,"date":"2011-09-05T20:53:30","date_gmt":"2011-09-06T03:53:30","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=14081"},"modified":"2022-01-03T17:07:22","modified_gmt":"2022-01-04T01:07:22","slug":"overflow","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/o\/overflow\/","title":{"rendered":"overflow"},"content":{"rendered":"\n<p>The <code>overflow<\/code> property controls what happens to content that breaks outside of its bounds: imagine a <code>div<\/code> in which you&#8217;ve explicitly set to be 200px wide, but contains an image that is 300px wide. That image will stick out of the div and be <code>visible<\/code> by default. Whereas if you set the <code>overflow<\/code> value to <code>hidden<\/code>, the image will cut off at 200px.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">div {\n  overflow:  visible | hidden | scroll | auto | inherit\n}<\/code><\/pre>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_ZEByxdq\" src=\"\/\/codepen.io\/anon\/embed\/ZEByxdq?height=1000&amp;theme-id=1&amp;slug-hash=ZEByxdq&amp;default-tab=result\" height=\"1000\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed ZEByxdq\" title=\"CodePen Embed ZEByxdq\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"css-values\">Values<\/h3>\n\n\n<ul><li><code>visible<\/code>: content is not clipped when it proceeds outside its box. This is the default value of the property<\/li><li><code>hidden<\/code>: overflowing content will be hidden.<\/li><li><code>scroll<\/code>: similar to hidden except users will be able to scroll through the hidden content.<\/li><li><code>clip<\/code>: content is clipped when it proceeds outside its box. This can be used with <code>overflow-clip-margin<\/code> to set the clipped area.<\/li><li><code>auto<\/code>: if the content proceeds outside its box then that content will be hidden whilst a scroll bar should be visible for users to read the rest of the content.<\/li><li><code>initial<\/code>: uses the default value which is <code>visible<\/code><\/li><li><code>inherit<\/code>: sets the overflow to the value of its parent element.<\/li><\/ul>\n\n\n\n<p>Remember that text will naturally wrap at the end of an element (unless <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/w\/whitespace\/\">white-space<\/a> is changed) so text will rarely be the cause of overflow. Unless a <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/h\/height\/\">height<\/a> is set, text will just push an element taller as well. Overflow comes into play more commonly when explicit widths and heights are set and it would be undesirable for any content to spill out, or when scrolling is explicitly being avoided.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"visible\"><code>visible<\/code><\/h3>\n\n\n<p>If you don&#8217;t set the overflow property at all, the default is visible. So in general, there is no reason to explicitly set this property to visible unless you are overriding it from being set elsewhere.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"570\" height=\"500\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/overflow-visible.png?resize=570%2C500&#038;ssl=1\" alt=\"\" class=\"wp-image-334949\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/overflow-visible.png?w=570&amp;ssl=1 570w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/overflow-visible.png?resize=300%2C263&amp;ssl=1 300w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>The important thing to remember here is that even though the content is visible outside of the box, that content does not affect the flow of the page. For example:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"570\" height=\"200\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/overlap.png?resize=570%2C200&#038;ssl=1\" alt=\"\" class=\"wp-image-334950\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/overlap.png?w=570&amp;ssl=1 570w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/overlap.png?resize=300%2C105&amp;ssl=1 300w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>Generally, you shouldn&#8217;t be setting static heights on boxes with web text in them anyway, so it shouldn&#8217;t come up.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"hidden\"><code>hidden<\/code><\/h3>\n\n\n<p>The opposite of the default visible is <strong>hidden<\/strong>. This literally hides any content that extends beyond the box.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"570\" height=\"461\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/css-overflow-hidden.png?resize=570%2C461&#038;ssl=1\" alt=\"\" class=\"wp-image-334951\" title=\"\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/css-overflow-hidden.png?w=570&amp;ssl=1 570w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/css-overflow-hidden.png?resize=300%2C243&amp;ssl=1 300w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>This is particularly useful in use with dynamic content and the possibility of an overflow causing serious layout problems. However, bear in mind that content that is hidden in this way is utterly inaccessible (short of viewing the source). So for example a user has their default font size set larger than you would expect, you may be pushing text outside of a box and hiding it completely from their view.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"scroll\"><code>scroll<\/code><\/h3>\n\n\n<p>Setting the overflow value of a box to scroll will hide the content from rendering outside the box, but will offer scrollbars to scroll the interior of the box to view the content.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"570\" height=\"540\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/css-scroll.png?resize=570%2C540&#038;ssl=1\" alt=\"\" class=\"wp-image-334952\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/css-scroll.png?w=570&amp;ssl=1 570w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/css-scroll.png?resize=300%2C284&amp;ssl=1 300w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>Of note with this value is that you get BOTH horizontal and vertical scrollbars no matter what, even if the content requires only one or the other.<\/p>\n\n\n\n<p>iOS\u2019 momentum scrolling can be enabled for this value with <a href=\"https:\/\/css-tricks.com\/snippets\/css\/momentum-scrolling-on-ios-overflow-elements\/\"><code>-webkit-overflow-scrolling<\/code><\/a>.<\/p>\n\n\n\n<p><strong>Note:<\/strong> In OS X Lion, when scrollbars are set to only show when being used, <code>scroll<\/code> behaves more like <code>auto<\/code>, in that only needed scrollbars will show up.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"auto\"><code>auto<\/code><\/h3>\n\n\n<p>Auto overflow is very similar to the scroll value, only it solves the problem of getting scrollbars when you don&#8217;t need them. The scrollbars will only show up if there is content that actually breaks out of the element.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"570\" height=\"540\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/css-overflow-auto.png?resize=570%2C540&#038;ssl=1\" alt=\"\" class=\"wp-image-334953\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/css-overflow-auto.png?w=570&amp;ssl=1 570w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/css-overflow-auto.png?resize=300%2C284&amp;ssl=1 300w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n<h3 class=\"wp-block-heading\" id=\"overflowx-and-overflowy\">overflow-x and overflow-y<\/h3>\n\n\n<p>It\u2019s also possible to manipulate the overflow of content horizontally or vertically with the <code>overflow-x<\/code> and <code>overflow-y<\/code> properties. For example in the demo below the horizontal overflow can be scrolled through whilst the text that extends beyond the height of the box is hidden:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.box {\n  overflow-y: hidden;\n  overflow-x: scroll;\n}<\/code><\/pre>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_5ff94380c4edf4d0b1409504ed1f3315\" src=\"\/\/codepen.io\/anon\/embed\/5ff94380c4edf4d0b1409504ed1f3315?height=450&amp;theme-id=1&amp;slug-hash=5ff94380c4edf4d0b1409504ed1f3315&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed 5ff94380c4edf4d0b1409504ed1f3315\" title=\"CodePen Embed 5ff94380c4edf4d0b1409504ed1f3315\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"clearing-floats\">Clearing floats<\/h3>\n\n\n<p>One of the more popular uses of setting overflow, strangely enough, is <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/f\/float\/\">float<\/a> clearing. Setting overflow doesn&#8217;t <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/c\/clear\/\">clear<\/a> the float <em>at<\/em> the element, it <em>self-clears<\/em>. This means that the element with overflow (any value except <code>visible<\/code>) will extend as large as it needs to encompass child elements inside that are floated (instead of collapsing), assuming that the height isn&#8217;t declared. Like this:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"570\" height=\"330\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/overflow-float.png?resize=570%2C330&#038;ssl=1\" alt=\"\" class=\"wp-image-334954\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/overflow-float.png?w=570&amp;ssl=1 570w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/overflow-float.png?resize=300%2C174&amp;ssl=1 300w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>A better float clearing technique is the <a href=\"https:\/\/css-tricks.com\/snippets\/css\/clear-fix\/\">clearfix<\/a>, as it doesn&#8217;t require you to alter the overflow property in a way you don&#8217;t need.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"generating-block-formatting-context\">Generating block formatting context<\/h3>\n\n\n<p>It\u2019s interesting to note that <code>overflow<\/code> will also create a new <a href=\"http:\/\/www.w3.org\/TR\/CSS2\/visuren.html#block-formatting\" rel=\"noopener\">block formatting context<\/a> which is useful if we want to align a block element next to a floated one. In the example below we show how a number of paragraphs will interact with a floated image by default and then we use <code>overflow: hidden<\/code> to align the text within its own box:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_bNZmqr\" src=\"\/\/codepen.io\/anon\/embed\/bNZmqr?height=450&amp;theme-id=1&amp;slug-hash=bNZmqr&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed bNZmqr\" title=\"CodePen Embed bNZmqr\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>This comes from a <a href=\"http:\/\/www.stubbornella.org\/content\/2009\/07\/23\/overflow-a-secret-benefit\/\" rel=\"noopener\">great post<\/a> by Nicole Sullivan which went on to inspire the <a href=\"http:\/\/www.stubbornella.org\/content\/2010\/06\/25\/the-media-object-saves-hundreds-of-lines-of-code\/\" rel=\"noopener\">media object<\/a>.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"can-scrollbars-be-styled-with-css\">Can scrollbars be styled with CSS?<\/h3>\n\n\n<p>You used to be able to <a href=\"http:\/\/www.spectrum-research.com\/V2\/projects_scrollbar_generator.asp\" rel=\"noopener\">style scrollbars in IE<\/a> (v5.5?) but no more. You can <a href=\"https:\/\/css-tricks.com\/custom-scrollbars-in-webkit\/\">style them now again in WebKit<\/a> browsers. If you need cross-browser custom scrollbars, <a href=\"http:\/\/manos.malihu.gr\/tuts\/jquery_custom_scrollbar.html\" rel=\"noopener\">look to JavaScript<\/a>.<\/p>\n\n\n\n<p>If an element needs to have scrollbars appended to honor the overflow value, Firefox puts them outside the element, keeping the visible width\/height as declared. IE puts the scrollbars inside, keeping the overall width\/height as declared.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"demo\">Demo<\/h3>\n\n\n<p>Demos for this article taken from <a href=\"https:\/\/codepen.io\/chriscoyier\/pen\/ZEByxdq\" rel=\"noopener\">this sample page<\/a>.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"browser-support\">Browser Support<\/h3>\n\n<div class=\"caniuse\"><div class=\"caniuse-header\"><p>This browser support data is from <a href=\"http:\/\/caniuse.com\/#feat=css-overflow\" 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\">90<\/span><\/td><td class=\"y yep\" title=\"Firefox - \"><span class=\"caniuse-agents-version version\">81<\/span><\/td><td class=\"a yep-nope yep-nope-partial\" title=\"IE - \"><span class=\"caniuse-agents-version version\">11<\/span><\/td><td class=\"y yep\" title=\"Edge - \"><span class=\"caniuse-agents-version version\">90<\/span><\/td><td class=\"y yep\" title=\"Safari - \"><span class=\"caniuse-agents-version version\">16.0<\/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\">123<\/span><\/td><td class=\"y yep\" title=\"Android Firefox - \"><span class=\"caniuse-agents-version version\">124<\/span><\/td><td class=\"y yep\" title=\"Android - \"><span class=\"caniuse-agents-version version\">123<\/span><\/td><td class=\"y yep\" title=\"iOS Safari - \"><span class=\"caniuse-agents-version version\">16.0<\/span><\/td><\/tr><\/table><\/div><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"more-information\">More information<\/h3>\n\n\n<ul><li><a href=\"http:\/\/fuseinteractive.ca\/blog\/understanding-humble-clearfix#.VRlRV5PF_fE\" rel=\"noopener\">Understanding the Humble Clearfix<\/a><\/li><li><a href=\"http:\/\/www.stubbornella.org\/content\/2009\/07\/23\/overflow-a-secret-benefit\/\" rel=\"noopener\">Overflow: a secret benefit<\/a><\/li><li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/overflow\" rel=\"noopener\">Overflow on MDN<\/a><\/li><li><a href=\"http:\/\/www.w3.org\/TR\/CSS21\/visufx.html#overflow-clipping\" rel=\"noopener\">Overflow on W3C<\/a><\/li><li><a href=\"https:\/\/css-tricks.com\/findingfixing-unintended-body-overflow\/\">Finding\/fixing unintended body overflow<\/a><\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"<p>The overflow property controls what happens to content that breaks outside of its bounds: imagine a div in which you&#8217;ve explicitly set to be 200px wide, but contains an image that is 300px wide. That image will stick out of the div and be visible by default. Whereas if you set the overflow value to [&hellip;]<\/p>\n","protected":false},"author":1036,"featured_media":0,"parent":13939,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"page-almanac-single.php","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":""},"tags":[1000,754],"acf":[],"jetpack-related-posts":[{"id":21524,"url":"https:\/\/css-tricks.com\/snippets\/css\/momentum-scrolling-on-ios-overflow-elements\/","url_meta":{"origin":14081,"position":0},"title":"Momentum Scrolling on iOS Overflow Elements","date":"May 4, 2013","format":false,"excerpt":"Web pages on iOS by default have a \"momentum\" style scrolling where a flick of the finger sends the web page scrolling and it keeps going until eventually slowing down and stopping as if friction is slowing it down. Like if you were to push a hockey puck across the\u2026","rel":"","context":"With 105 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":365263,"url":"https:\/\/css-tricks.com\/almanac\/properties\/g\/grid-template-rows\/","url_meta":{"origin":14081,"position":1},"title":"grid-template-rows","date":"April 25, 2022","format":false,"excerpt":"The grid-template-rows CSS property is part of the CSS Grid Layout specification, defining the rows of a grid container by specifying the size of the grid tracks and its line names. .app-layout { display: grid; grid-template-rows: auto 1fr auto; } One thing to cover before we jump into the grid-template-rows\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":359742,"url":"https:\/\/css-tricks.com\/almanac\/properties\/o\/overflow-clip-margin\/","url_meta":{"origin":14081,"position":2},"title":"overflow-clip-margin","date":"January 3, 2022","format":false,"excerpt":"The CSS overflow-clip-margin property determines how far the overflow of an element can go beyond the element's box before being clipped. This area is called the overflow clip edge. .element { height: 100px; overflow: clip; \/* required *\/ overflow-clip-margin: 20px; } overflow: clip; clips the element's content while overflow-clip-margin sets\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":14119,"url":"https:\/\/css-tricks.com\/almanac\/properties\/t\/text-overflow\/","url_meta":{"origin":14081,"position":3},"title":"text-overflow","date":"September 6, 2011","format":false,"excerpt":"The text-overflow property in CSS deals with situations where text is clipped when it overflows the element's box. It can be clipped (i.e. cut off, hidden), display an ellipsis ('\u2026', Unicode Range Value U+2026) or display an author-defined string (no current browser support for author-defined strings). .ellipsis { text-overflow: ellipsis;\u2026","rel":"","context":"With 18 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":20775,"url":"https:\/\/css-tricks.com\/snippets\/wordpress\/shrink-the-admin-bar-expand-on-hover\/","url_meta":{"origin":14081,"position":4},"title":"Shrink the Admin Bar \/ Expand on Hover","date":"March 25, 2013","format":false,"excerpt":"A mini plugin:","rel":"","context":"With 8 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":362360,"url":"https:\/\/css-tricks.com\/almanac\/properties\/g\/grid-template-columns\/","url_meta":{"origin":14081,"position":5},"title":"grid-template-columns","date":"April 25, 2022","format":false,"excerpt":"The grid-template-columns CSS property is part of the CSS Grid Layout specification, defining the columns of a grid container by specifying the size of the grid tracks and its line names. .sidebar-layout { display: grid; grid-template-columns: 300px 1fr; } It\u2019s worth noting the difference between grid lines and grid tracks\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14081"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/1036"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=14081"}],"version-history":[{"count":9,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14081\/revisions"}],"predecessor-version":[{"id":360498,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14081\/revisions\/360498"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13939"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=14081"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=14081"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}