dots Created with Sketch.
Yogesh Chauhan's Blog

Control rendering using CSS content-visibility property

in CSS on July 21, 2021

The content-visibility controls the the rendering of a content.

Well, it does more than that but in a nutshell that’s what it does.

You can ask user agents not to display a particular large layouts initially and render it later on. That’s the trick to make the page load faster.

values

The content-visibility property has 3 keyword values.

content-visibility: visible

This will load the content with a normal load.

content-visibility: auto

With this option set, element will only skip the contents if it’s not relevant to the user or is off-screen.

With this option the content is still available.


section {
  content-visibility: auto;
  contain-intrinsic-size: 0 1000px;
}

contain-intrinsic-size

Using contain-intrinsic-size you’re basically setting a placeholder where the content will be rendered later on.

If you don’t specify contain-intrinsic-size then the height will be set as 0, which is not the idea solution as per now. I’m sure w3c will come up with a better solution in future.

content-visibility: hidden

This is basically like setting the display property as none. If you set content-visibility as hidden then the element won’t render it’s content but it’ll preserve rendering state.

With this option the content is NOT available but can be made quickly available when needed.

To use content-visibility: hidden, we need to switch between classes to remove the “hidden” value.


section.auto {
  content-visibility: auto;
  contain-intrinsic-size: 0 1000px;
}
section.hidden {
  content-visibility: hidden;
  contain: style layout paint; //avoid layout shift
}

Web.dev and MDN both have really good articles to read more about it.

amazon

Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Jul 22 Is there a CSS parent selector? #Jul 22 Difference between :where and :is in CSS #Jul 22 Does :is() pseudo selector hint at CSS preprocessing in the future? #Jul 22 Control Scrolling with CSS Scroll Snap #Jul 21 Control rendering using CSS content-visibility property #Jul 21 How to use @supports rule in CSS?
You might also like these
The Drupal flowDrupal@forward modules with a prefix in SCSS (Sass)SCSSHow to get ACF values from custom post type?WordPressWhat is Prototypal Inheritance in JavaScript?JavaScriptGive buttons accessible namesUI/UXCheck if any column has NULL values in PostgresPostgres