{"id":342681,"date":"2021-06-21T12:36:30","date_gmt":"2021-06-21T19:36:30","guid":{"rendered":"https:\/\/css-tricks.com\/?page_id=342681"},"modified":"2021-07-01T08:36:40","modified_gmt":"2021-07-01T15:36:40","slug":"content-visibility","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/c\/content-visibility\/","title":{"rendered":"content-visibility"},"content":{"rendered":"\n<p>The <code>content-visibility<\/code> property in CSS indicates to the browser whether or not an element\u2019s contents should be rendered at initial load time. So, as the browser starts loading content and is playing it on the screen, this property allows us to step in and tell the browser <em>not<\/em> to load the contents of an element until it\u2019s needed. Think of it <em>sort of<\/em> like lazy loading in the sense that an off-screen element\u2019s children are not rendered until they enter the viewport.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.element {\n  content-visibility: hidden;\n}<\/code><\/pre>\n\n\n\n<p>The main point of using <code>content-visibility<\/code> is performance. It can help to speed up page load because the browser is able to defer rendering elements that are not in the user\u2019s viewport until the user scrolls to them. The results can be dramatic. <a href=\"https:\/\/web.dev\/content-visibility\/\" rel=\"noopener\">Here are the results of a performance test<\/a> that Una Kravets and Vladimir Levin put together showing the difference that <code>content-visibility<\/code> can make on a typical webpage.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/06\/A460107B-EC0F-46F4-9D1B-CC8461B28F33.jpeg?resize=1050%2C727&#038;ssl=1\" alt=\"\" class=\"wp-image-342683\" width=\"1050\" height=\"727\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/06\/A460107B-EC0F-46F4-9D1B-CC8461B28F33.jpeg?w=1600&amp;ssl=1 1600w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/06\/A460107B-EC0F-46F4-9D1B-CC8461B28F33.jpeg?resize=300%2C208&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/06\/A460107B-EC0F-46F4-9D1B-CC8461B28F33.jpeg?resize=1024%2C709&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/06\/A460107B-EC0F-46F4-9D1B-CC8461B28F33.jpeg?resize=768%2C532&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/06\/A460107B-EC0F-46F4-9D1B-CC8461B28F33.jpeg?resize=1536%2C1064&amp;ssl=1 1536w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/06\/A460107B-EC0F-46F4-9D1B-CC8461B28F33.jpeg?resize=1000%2C693&amp;ssl=1 1000w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><figcaption>Source: <a href=\"https:\/\/web.dev\/content-visibility\/\" rel=\"noopener\">web.dev<\/a><\/figcaption><\/figure>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-syntax\">Syntax<\/h3>\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">content-visibility: [visible | auto | hidden];<\/code><\/pre>\n\n\n\n<ul class=\"ticss-f33ad05a\"><li><strong>Initial value:<\/strong> <code>visible<\/code><\/li><li><strong>Applies to:<\/strong> elements for which layout containment can apply<\/li><li><strong>Inherited:<\/strong> no<\/li><li><strong>Computed value:<\/strong> as specified<\/li><li><strong>Animation type:<\/strong> not animatable<\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-values\">Values<\/h3>\n\n\n<p>The <code>content-visibility<\/code> property accepts one of three values:<\/p>\n\n\n\n<ul><li><code>hidden<\/code>: The element bypasses its contents (kind of similar to applying <code>display: none;<\/code> to the contents).<\/li><li><code>visible<\/code>: There is no effect and the element is rendered as normal.<\/li><li><code>auto<\/code>: The element has layout, style, and paint containment. The browser gets to determine if this content is relevant to the user and, if it isn\u2019t, then the browser will skip it. At the same time, the element is still focusable, selectable and accessible to things like tabbing and in-page search.<\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-content-visibility-hidden\"><code>content-visibility: hidden;<\/code><\/h3>\n\n\n<p>I mentioned above it\u2019s sort of similar to <code>display: none;<\/code> because the element is not painted to the page at all.<\/p>\n\n\n\n<p>When the rule is removed, the browser has to render the element and its contents. With <code>content-visibility: hidden;<\/code>, however, the element is hidden, but its <strong>rendered state is cached<\/strong>. So when the rule is removed, the browser does not have to render the element from scratch. So you might use this on something that is hidden by default, but there is a high chance that you\u2019ll show it at some point in the lifecycle of the page (e.g. a commonly used modal). That way, the element loads much faster on subsequent visits when it does render.<\/p>\n\n\n\n<p>The note in the spec is clear on the accessibility of the <code>hidden<\/code> value:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>The <a href=\"https:\/\/www.w3.org\/TR\/css-contain-2\/#skips-its-contents\" rel=\"noopener\">skipped contents<\/a> must not be accessible to user-agent features, such as find-in-page, tab-order navigation, etc., nor be selectable or focusable.<\/p><\/blockquote>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-content-visibility-auto\"><code>content-visibility: auto;<\/code><\/h3>\n\n\n<p>You could think of this sort of like <strong>lazy loading<\/strong> for entire parts of the DOM.<\/p>\n\n\n\n<p>If an element is below the fold, and has the <code>content-visibility: auto;<\/code> rule, the browser does not consider any of its contents. Hence, rendering for that element is skipped. As the user scrolls to the element, the browser paints its contents and the rendering is done soon enough for the user. The heuristics on when the browser decides to render are unclear and likely left up to the browser to decide.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-accessibility-concerns\">Accessibility concerns<\/h4>\n\n\n<p>Careful when using <code>content-visibility: hidden<\/code>. That not only tells the browser to skip an element from rendering on initial page load, but also removes the element from being read by assistive technology, like screen readers.<\/p>\n\n\n\n<p>Conversely, the <code>auto<\/code> keyword tells the browser that an element\u2019s content isn\u2019t needed on initial page load as long as it\u2019s off screen. In other words, that element is skipped, just like it is when we use the <code>hidden<\/code> keyword.<\/p>\n\n\n\n<p>However, <code>auto<\/code> also indicated that the element <strong>should still be available to the user<\/strong> rather than completely ignoring the element in the DOM. What this means is that the element and its content should be focusable, selectable, tabbable, and searchable via the browser\u2019s find-in-page feature. Again, the spec is super clear on that point:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>Unlike <code>hidden<\/code>, the skipped contents must still be available as normal to user-agent features such as find-in-page, tab order navigation, etc., and must be focusable and selectable as normal.<\/p><\/blockquote>\n\n\n\n<p>In addition, off-screen elements that have been hidden with CSS (e.g. <code>display: none;<\/code>), should have <code>aria-hidden=\"true\"<\/code> applied to them since the browser has not rendered them. This way, they are still present in the accessibility tree.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-ux-concerns\">UX concerns<\/h4>\n\n\n<p>You can imagine if large chunks of a web page are not rendered, the length of a scrollbar might indicate the page has much less content on it than it actually does. Alex Russell talks about (and has) solutions for this in his \u201c<a href=\"https:\/\/infrequently.org\/2020\/12\/content-visibility-scroll-fix\/\" rel=\"noopener\">content-visiblity Without Jittery Scrollbars<\/a>\u201d post.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-performance\">Performance<\/h4>\n\n\n<p>Again, this property is all about buying performance. The results can be significant. See this video with Jake Archibald and Surma where they implement it and see big changes:<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Slashing layout cost with content-visibility - HTTP 203\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/FFA-v-CIxJQ?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-the-contain-intrinsic-size-property\">The <code>contain-intrinsic-size<\/code> property<\/h3>\n\n\n<p>Naturally, when a browser renders all of a webpage\u2019s content initially, it knows the height that\u2019s needed to display everything (based on the aggregate of the individual heights of all the page\u2019s sections) and scrolling will be seamless. However, <code>content-visibility: auto;<\/code>, when applied to an element, treats the element as though it has an height of 0 (assuming the <code>height<\/code> property was not explicitly set). When the user scrolls and the element comes into view (and the browser starts to paint it), the actual height is calculated and this causes a layout shift on the page. Scrolling might make the webpage a little janky too \u2014 something known as <strong>Cumulative Layout Shift<\/strong> (CLS) which is considered a big deal for search engine optimization, as Google now includes it in its <a href=\"https:\/\/blog.chromium.org\/2020\/05\/introducing-web-vitals-essential-metrics.html\" rel=\"noopener\">Core Web Vitals metrics<\/a> for measuring the performance of a site.<\/p>\n\n\n\n<p>The solution to big layout shifts is to pair <code>content-visibility: auto;<\/code> with <code>contain-intrinsic-size<\/code>, giving the browser a predictable height to use as a placeholder for the element when it paints.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.off-screen-parent {\n  content-visibility: auto;\n  contain-intrinsic-size: 4800px; \/* A guess at the height of it *\/\n}<\/code><\/pre>\n\n\n\n<p><code>contain-intrinsic-size<\/code> acts as a placeholder for the not-yet-rendered content. Thereby curbing the scroll and layout shift issues. So if you <em>know<\/em> the exact height, you can use that as the value. If not, make an estimate. When the section is being rendered, if the height you set is not the actual height, then there will be a little layout shift but it will not be as pronounced as without the <code>contain-intrinsic-size<\/code> property.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-demo\">Demo<\/h3>\n\n\n<p>I created a <a href=\"https:\/\/idorenyinudoh.github.io\/content-visibility-check\/\" rel=\"noopener\">basic website<\/a> with dummy text and a total of 185 images.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/paper-attachments.dropbox.com\/s_FF01C52762296DE1D98559B42832DD86BCC3B374EEED6053FEA93B4D9F0A48D9_1621707324464_cv+site+ss.jpg\" alt=\"A screenshot of the site\"\/><\/figure>\n\n\n\n<p>I used <a href=\"https:\/\/pages.github.com\/\" rel=\"noopener\">GitHub Pages<\/a> for the hosting. One branch has the <code>content-visibility<\/code> and <code>contain-intrinsic-size<\/code> properties and the other does not. So, I compared the both:<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-1 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"629\" height=\"233\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/06\/9F87E048-779A-4560-8F6E-D20CFECABD25.jpeg?resize=629%2C233&#038;ssl=1\" alt=\"\" class=\"wp-image-342687\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/06\/9F87E048-779A-4560-8F6E-D20CFECABD25.jpeg?w=629&amp;ssl=1 629w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/06\/9F87E048-779A-4560-8F6E-D20CFECABD25.jpeg?resize=300%2C111&amp;ssl=1 300w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><figcaption>The results without <code>content-visibility<\/code> applied to the element.<\/figcaption><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"629\" height=\"234\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/06\/866B51C2-9558-4297-93FD-0BD068BA7A75.jpeg?resize=629%2C234&#038;ssl=1\" alt=\"\" class=\"wp-image-342711\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/06\/866B51C2-9558-4297-93FD-0BD068BA7A75.jpeg?w=629&amp;ssl=1 629w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/06\/866B51C2-9558-4297-93FD-0BD068BA7A75.jpeg?resize=300%2C112&amp;ssl=1 300w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><figcaption>The page with <code>content-visibility<\/code> rendered in about a quarter of the time.<\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-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=\u201dcss-content-visibility\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\">85<\/span><\/td><td class=\"y yep\" title=\"Firefox - \"><span class=\"caniuse-agents-version version\">124<\/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\">85<\/span><\/td><td class=\"y yep\" title=\"Safari - \"><span class=\"caniuse-agents-version version\">TP<\/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=\"n nope\" title=\"iOS Safari - \"><span class=\"caniuse-agents-version version\">No<\/span><\/td><\/tr><\/table><\/div><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-more-information\">More information<\/h3>\n\n\n    \t\t\n    <div class=\"in-article-cards\">\n      <article class=\"in-article-card article\" id=\"mini-post-342681\">\n\n  <time datetime=\"2020-09-14\" title=\"Originally published Jun 21, 2021\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Sep 14, 2020  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/content-visibility-the-new-css-property-that-boosts-your-rendering-performance\/\">\n      content-visibility: the new CSS property that boosts your rendering performance    <\/a>\n  <\/h3>\n\n  \n      <div class=\"tags\">\n      <a href=\"https:\/\/css-tricks.com\/tag\/content-visibility\/\" rel=\"tag\">content-visibility<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card article\" id=\"mini-post-342681\">\n\n  <time datetime=\"2020-10-28\" title=\"Originally published Jun 21, 2021\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Oct 28, 2020  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/more-on-content-visibility\/\">\n      More on content-visibility    <\/a>\n  <\/h3>\n\n  \n      <div class=\"tags\">\n      <a href=\"https:\/\/css-tricks.com\/tag\/content-visibility\/\" rel=\"tag\">content-visibility<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card link\" id=\"mini-post-342681\">\n\n  <time datetime=\"2021-02-16\" title=\"Originally published Jun 21, 2021\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Feb 18, 2021  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/maximally-optimizing-image-loading-for-the-web-in-2021\/\">\n      Maximally optimizing image loading for the web in 2021    <\/a>\n  <\/h3>\n\n  \n      <div class=\"tags\">\n      <a href=\"https:\/\/css-tricks.com\/tag\/content-visibility\/\" rel=\"tag\">content-visibility<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n    <\/div>\n  \n\n\n<h3 class=\"wp-block-heading\" id=\"h-related-properties\">Related properties<\/h3>\n\n\n    \t\t\n    <div class=\"in-article-cards\">\n      <article class=\"in-article-card \" id=\"mini-post-342681\">\n\n  <time datetime=\"2011-09-05\" title=\"Originally published Jun 21, 2021\">\n    <strong>\n                \n      Almanac\n      <\/strong>\n\n    on\n\n    Oct 15, 2021  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/d\/display\/\">\n      display    <\/a>\n  <\/h3>\n\n      <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/d\/display\/\" class=\"almanac-example\">\n      <code class=\"language-css\">.element { display: inline-block; }<\/code>\n    <\/a>\n  \n      <div class=\"tags\">\n      <a href=\"https:\/\/css-tricks.com\/tag\/content-visibility\/\" rel=\"tag\">content-visibility<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/saracope\/\" aria-label=\"Author page of Sara Cope\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/84da92f298e5b124d92fb581b82cfdf4?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/84da92f298e5b124d92fb581b82cfdf4?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/saracope\/\">\n      Sara Cope    <\/a>\n  <\/div>\n\n<\/article>\n    <\/div>\n  \n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The content-visibility property in CSS indicates to the browser whether or not an element\u2019s contents should be rendered at initial load time. So, as the browser starts loading content and is playing it on the screen, this property allows us to step in and tell the browser not to load the contents of an element [&hellip;]<\/p>\n","protected":false},"author":280207,"featured_media":297221,"parent":13915,"menu_order":0,"comment_status":"closed","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":[18639],"acf":[],"jetpack-related-posts":[{"id":197380,"url":"https:\/\/css-tricks.com\/almanac\/properties\/w\/will-change\/","url_meta":{"origin":342681,"position":0},"title":"will-change","date":"March 5, 2015","format":false,"excerpt":"The will-change property in CSS optimizes animations by letting the browser know which properties and elements are just about to be manipulated, potentially increasing the performance of that particular operation. Syntax will-change: <animateable-feature> = scroll-position | contents | <custom-ident> Initial value: autoApplies to: all elementsInherited: noPercentages: n\/aComputed value: specific valuedAnimation\u2026","rel":"","context":"In \"animation\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":307236,"url":"https:\/\/css-tricks.com\/almanac\/properties\/c\/contain\/","url_meta":{"origin":342681,"position":1},"title":"contain","date":"May 8, 2020","format":false,"excerpt":"The contain property in CSS indicates to the browser that the element and its descendants are considered independent of the document tree as much as possible. This potentially provides performance benefits with calculations in layout, style, paint, size, or any combination for a limited area of the DOM and not\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":350656,"url":"https:\/\/css-tricks.com\/almanac\/properties\/o\/outline-color\/","url_meta":{"origin":342681,"position":2},"title":"outline-color","date":"September 1, 2021","format":false,"excerpt":"The outline-color CSS property specifies the color of an element's outline. What\u2019s an outline? An outline is a line that is drawn around elements \u2014 outside the border edge \u2014 that is used for accessibility or decoration purposes when that element is in focus. button { outline-color: #e435; } outline-color\u2026","rel":"","context":"In \"outline\"","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":13980,"url":"https:\/\/css-tricks.com\/almanac\/properties\/b\/backface-visibility\/","url_meta":{"origin":342681,"position":3},"title":"backface-visibility","date":"August 31, 2011","format":false,"excerpt":"The backface-visibility property relates to 3D transforms. With 3D transforms, you can manage to rotate an element so what we think of as the \"front\" of an element no longer faces the screen. For instance, this would flip an element away from the screen: .flip { transform: rotateY(180deg); } It\u2026","rel":"","context":"In \"3d\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":334229,"url":"https:\/\/css-tricks.com\/almanac\/properties\/b\/border-boundary\/","url_meta":{"origin":342681,"position":4},"title":"border-boundary","date":"February 9, 2021","format":false,"excerpt":"The border-boundary property in CSS set constraints to the bounds of an element that affects how the element's borders behave. It's defined in the CSS Round Display Level 1 specification, which is currently in Working Draft status. That means things can change between now and formal candidate recommendation. .element {\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/border-boundary-mockup.jpg?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":356331,"url":"https:\/\/css-tricks.com\/almanac\/properties\/s\/scale\/","url_meta":{"origin":342681,"position":5},"title":"scale","date":"November 10, 2021","format":false,"excerpt":"The scale property in CSS resizes an element\u2019s width and height in proportion. So, if we have an element that\u2019s 100 pixels square, scaling it up by a value of 2 doubles the dimensions to 200 pixels square. Similarly, a scale value of .5 decreases the dimensions in half, resulting\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\/342681"}],"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\/280207"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=342681"}],"version-history":[{"count":9,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/342681\/revisions"}],"predecessor-version":[{"id":342712,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/342681\/revisions\/342712"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13915"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/297221"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=342681"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=342681"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}