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.


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

#Aug 15 Is PHP still good for back-end programming? #Aug 10 How to create a multisite network in WordPress? #Aug 3 How to create a circle that follows a cursor using JavaScript and CSS? #Aug 3 How to make a curtain slider using jQuery and CSS? #Aug 2 How to progressively load images and add a blurry placeholder? #Aug 1 How to create a placeholder loader (throbber) using CSS?
You might also like these
Solution to “Call to undefined function mysql_error()” in RevSlider WordPress PluginWordPressSolution for “Yarn build: Failed because of a stylelint error”WordPressHow to compile and watch Sass using Gulp in WordPress?SCSSCROSS JOIN in PostgresPostgresHow to uninstall Cocoapods from the Mac OS?Miscellaneous@forward modules with a prefix in SCSS (Sass)SCSS