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 How to add Read More Read Less Button using JavaScript? #3 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #4 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #5 How to uninstall Cocoapods from the Mac OS? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

#Apr 8 JSON.stringify() in JavaScript #Apr 7 Middleware in NextJS #Jan 17 4 advanced ways to search Colleague #Jan 16 Colleague UI Basics: The Search Area #Jan 16 Colleague UI Basics: The Context Area #Jan 16 Colleague UI Basics: Accessing the user interface
You might also like these
for @each loop in SCSSSCSSALTER DATABASE in PostgreSQLPostgresFile System Integrity: How to Keep an Eye on Your Files and Folder Change?MiscellaneousGap in Flex?CSSWordPress: How to change a blog address (URL)?WordPressHow to compress images with gulp in WordPress?WordPress