{"id":14990218,"url":"https://github.com/lbrian/content-visibility","last_synced_at":"2025-04-12T02:06:28.081Z","repository":{"id":40706905,"uuid":"326673316","full_name":"LBrian/content-visibility","owner":"LBrian","description":"Web Component uses CSS content-visibility and fallback Intersection Observer","archived":false,"fork":false,"pushed_at":"2023-03-05T18:43:35.000Z","size":36195,"stargazers_count":28,"open_issues_count":16,"forks_count":2,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-12T02:06:19.830Z","etag":null,"topics":["css","intersection-observer","intersectionobserver-api","javascript","lit-element","lit-html","typescript","webcomponent","webcomponents"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/LBrian.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-01-04T12:14:58.000Z","updated_at":"2025-02-19T08:42:25.000Z","dependencies_parsed_at":"2024-09-24T16:01:13.970Z","dependency_job_id":"2bca33d0-ef83-4ae3-84c5-b6aaa05cc8b8","html_url":"https://github.com/LBrian/content-visibility","commit_stats":{"total_commits":34,"total_committers":3,"mean_commits":"11.333333333333334","dds":"0.11764705882352944","last_synced_commit":"33f197373277f18cdf4dfa36d2b16769509fda20"},"previous_names":[],"tags_count":6,"template":false,"template_full_name":"lit/lit-element-starter-ts","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LBrian%2Fcontent-visibility","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LBrian%2Fcontent-visibility/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LBrian%2Fcontent-visibility/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LBrian%2Fcontent-visibility/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LBrian","download_url":"https://codeload.github.com/LBrian/content-visibility/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248505863,"owners_count":21115354,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","intersection-observer","intersectionobserver-api","javascript","lit-element","lit-html","typescript","webcomponent","webcomponents"],"created_at":"2024-09-24T14:19:43.640Z","updated_at":"2025-04-12T02:06:28.062Z","avatar_url":"https://github.com/LBrian.png","language":"HTML","readme":"# content-visibility \u003cimg src=\"./images/webcomponent_192x192.png\" alt=\"Chrome\" widht=\"20\" height=\"20\"\u003e\n\n[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/content-visibility)\n![npm 7.0.15](https://img.shields.io/badge/npm-7.0.15-blue)\n![Typescript](https://img.shields.io/badge/typescript-4.1.3-blue)\n![Lit-Element](https://img.shields.io/badge/LitElement-2.3.1-blue)\n\n`\u003ccontent-visibility\u003e` is a simple **web component** encapsulates modern CSS properties `content-visibility` and Web API **Intersection Observer API** to provide cross-browsers solution to skip rendering (layout \u0026 painting) elements until it is needed (appears on the viewport) to boosts page performance.\n\n\u003csup\u003eCSS `content-visibility` is only supported on Chrome 85+, Chrome Android 85+ and Opera 71+ but not Firefox, Safari and IE unfortunately, see [web.dev](https://web.dev/content-visibility/). **Intersection Observer API** supports pretty much all browsers except **IE**, thus an intersection observer [polyfill](https://www.npmjs.com/package/intersection-observer) is included for compatible on IE.\u003c/sup\u003e\n\nBasically, all children inside it will only be renderred after it appears on viewport.\n\n```html\n\u003ccontent-visibility\u003e\n  {children will not be rendered when outside the first viewport}\n\u003c/content-visibility\u003e\n```\n\n## Compatibility\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd valign=\"top\"\u003e\u003cimg src=\"./images/chrome_128x128.png\" alt=\"Chrome\" widht=\"30\" height=\"30\"\u003e\u003c/td\u003e\n    \u003ctd valign=\"top\"\u003e\u003cimg src=\"./images/safari_128x128.png\" alt=\"Safari\" widht=\"30\" height=\"30\"\u003e\u003c/td\u003e\n    \u003ctd valign=\"top\"\u003e\u003cimg src=\"./images/edge_128x128.png\" alt=\"Edge\" widht=\"30\" height=\"30\"\u003e\u003c/td\u003e\n    \u003ctd valign=\"top\"\u003e\u003cimg src=\"./images/internet-explorer_128x128.png\" alt=\"IE\" widht=\"30\" height=\"30\"\u003e\u003c/td\u003e\n    \u003ctd valign=\"top\"\u003e\u003cimg src=\"./images/firefox_128x128.png\" alt=\"Firefox\" widht=\"30\" height=\"30\"\u003e\u003c/td\u003e\n    \u003ctd valign=\"top\"\u003e\u003cimg src=\"./images/opera_128x128.png\" alt=\"Opera\" widht=\"30\" height=\"30\"\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n# Getting started\n\n## Install\n\n`npm i content-visibility --save`\n\n## Use in JSX (React/Preact)\n\n```jsx\nimport 'content-visibility';\n\nconst Content = () =\u003e {\n  return (\n    \u003ccontent-visibility\u003e\n      \u003cSection\u003e...\u003c/Section\u003e\n      \u003cSection\u003e...\u003c/Section\u003e\n      \u003cSection\u003e...\u003c/Section\u003e\n    \u003c/content-visibility\u003e\n  );\n};\n```\n\n## properties\n\n### `containIntrinsicSize`\n\nThis is will be set as CSS custom variable for `contain-intrinsic-size` if browsers support it. [see](https://web.dev/content-visibility/#specifying-the-natural-size-of-an-element-with-contain-intrinsic-size)\n\n```html\n\u003ccontent-visibility containIntrinsicSize=\"600px\"\u003e\n  {children}\n\u003c/content-visibility\u003e\n```\n\n# Performance results\n\n## Rendering frames\n\n**Safari** comes with `Rendering Frames Timeline` tool helps to measure rendering performance. Let's have a look the rendering frames **without** `\u003ccontent-visibility\u003e`, total `97` rendering frames happened on the first view.\n![Rendering Frames - no content-visibility](./images/no-content-visibility.gif?raw=true)\n\nOnly `47` rendering frames happened on the first view after integrated with `\u003ccontent-visibility\u003e`\n![Rendering Frames - content-visibility](./images/content-visibility-frames.gif?raw=true)\nthe rest of `50` rendering frames happened when **scorlling to the viewport**\n![Rendering Frames - content-visibility scroll](./images/content-visibility-frames-2.gif?raw=true)\n\n## Rendering \u0026 Layout time\n\nGenerally speaking, we can plausibly say rendering \u0026 layout time improved around `40%`, however benchmark results vary depends on sampling size, environments, tools, implementation and etc. Too many factors could impact benchmark results, so this is just a quick sample results to demonstrate the performance differences.\n\n### Chrome 87.0.4280.141\n\nCSS `content-visibility` and `contain-intrinsic-size`\n\n#### Before\n\n![Chrome Before](./images/chrome-before.png?raw=true)\n\n#### After\n\n**Rendering** and **Painting** time reduced around `50%`.\n\n![Chrome After](./images/chrome-after.png?raw=true)\n\n### Firefox 84.0.2\n\n#### Before\n\n![Firefox Before](./images/firefox-before.png?raw=true)\n\n#### After\n\n![Firefox After](./images/firefox-after.png?raw=true)\n\n# License\n\nCopyright (c) 2021 [Brian YP Liu](https://brianypliu.com/)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flbrian%2Fcontent-visibility","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flbrian%2Fcontent-visibility","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flbrian%2Fcontent-visibility/lists"}