{"id":26221738,"url":"https://github.com/push-based/css-contain-and-content-visibility-research","last_synced_at":"2025-04-17T08:47:20.231Z","repository":{"id":37443617,"uuid":"470664415","full_name":"push-based/css-contain-and-content-visibility-research","owner":"push-based","description":"🕵️‍♀️ CSS Contain and Content Visibility","archived":false,"fork":false,"pushed_at":"2024-01-11T21:41:31.000Z","size":14960,"stargazers_count":30,"open_issues_count":0,"forks_count":2,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-07T01:49:48.380Z","etag":null,"topics":["css","performance","performance-analysis","performance-tuning"],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/push-based.png","metadata":{"files":{"readme":"Readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-03-16T16:27:22.000Z","updated_at":"2025-01-19T17:08:50.000Z","dependencies_parsed_at":"2022-08-19T17:00:46.736Z","dependency_job_id":null,"html_url":"https://github.com/push-based/css-contain-and-content-visibility-research","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/push-based%2Fcss-contain-and-content-visibility-research","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/push-based%2Fcss-contain-and-content-visibility-research/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/push-based%2Fcss-contain-and-content-visibility-research/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/push-based%2Fcss-contain-and-content-visibility-research/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/push-based","download_url":"https://codeload.github.com/push-based/css-contain-and-content-visibility-research/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249326685,"owners_count":21251755,"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","performance","performance-analysis","performance-tuning"],"created_at":"2025-03-12T16:29:21.043Z","updated_at":"2025-04-17T08:47:20.212Z","avatar_url":"https://github.com/push-based.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# `contain` and `content-visibility` - Research\r\n![CSS-Contain-Content-Visibility-concepts - _michael-hladky](https://user-images.githubusercontent.com/10064416/159817327-bb2a7e22-99e9-4f71-be77-84f2dfadf435.png)\r\n\r\n\r\n## Audits\r\nA set of performance audits applying these properties.\r\n\r\n- 🔥 [Angular Movies App](https://github.com/push-based/angular-movies-audits/blob/main/Readme.md)\r\n- 🔥🔥 [Observable HQ - HTML/CSS only Performance Audit ](https://github.com/push-based/observable-hq--audit)\r\n\r\n\r\n## Measures\r\nDifferent Lab measures to understand the impact.\r\n\r\n- [[1.] Lab - Correct usage and debugging](https://github.com/push-based/css-contain-research/blob/master/usage-and-debugging)\r\n- **[[2.] Lab - Bootstrap -- none vs contain vs content-visibility v1](https://github.com/push-based/css-contain-research/tree/master/bootstrap-v1) (partially invalidated by [3.])** 👍\r\n- **[[3.] Lab - Offscreen vs onscreen -- none vs contain vs content-visibility](https://github.com/push-based/css-contain-research/tree/master/offscreen)** 👍\r\n- [[4.] Work Specific - pain, layout](https://github.com/push-based/css-contain-research/tree/master/contain-impact-properties)\r\n- [[5.] content-visibility](https://github.com/push-based/css-contain-research/tree/master/content-visibility-impact-properties)\r\n\r\n## Overview of the properties\r\n\r\n![CSS-contain--comparison](https://user-images.githubusercontent.com/10064416/159817372-ea9178ed-c466-454b-8e6f-83a02ef5ad6e.png)\r\n![CSS-content-visibility--comparison](https://user-images.githubusercontent.com/95690470/159824234-5ce4dc89-45a2-4a15-81e2-4e33dace104c.png)\r\n\r\n## Can I Use\r\n\r\n![caniuse-contain](https://user-images.githubusercontent.com/95690470/159102200-d3232902-b71f-413d-a473-36994e26f4e9.PNG)\r\n\r\n![caniuse-content-visibility](https://user-images.githubusercontent.com/95690470/159102242-d328c5c5-d0ba-44ad-a969-02d58a938a5e.PNG)\r\n\r\n## Documentation\r\n\r\n**Code samples**\r\n- 🔥🔥🔥 [css-containment-debug](https://stackblitz.com/edit/css-containment-debug)\r\n- [css-containment-demo](https://stackblitz.com/edit/css-containment-demo)\r\n- [movies app](https://github.com/tastejs/angular-movies)\r\n\n**Talks**\n- [Next generation CSS performance](https://youtu.be/adRawKeHi90?si=qv64I7DE0Vu3I46J)\n\n\r\n**Slides**\r\n- [Lab Measure Slides](https://docs.google.com/presentation/d/1lgPbQqK2TgrP0rt3CCVpwA-LwBj3GERxjNUGF0193aM/edit?usp=sharing)\r\n- 🔥🔥 [CSS Contain \u0026 Content Visibility - Talk](https://docs.google.com/presentation/d/1PWzVz1eqo78WpTgXuihBfnA8Fb4qDbZHVjSzk-m82qY/edit?usp=sharing)\r\n\r\n**Contain**\r\n- [CSS Containment Module Level 1](https://www.w3.org/TR/css-contain-1/) - official spec  \r\n- [CSS Containment Module Level 2](https://www.w3.org/TR/css-contain-2/)\r\n- [CSS Containment Module Level 3](https://www.w3.org/TR/css-contain-3/)\r\n- [The stacking context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context)\r\n- [caniuse](https://caniuse.com/mdn-css_properties_contain) - `contain` browser support   \r\n- [css-tricks - almanac - contain](https://css-tricks.com/almanac/properties/c/contain/) - by far best demos and visuall eplaination\r\n- [smashingmagazine - browsers-containment-css-contain-property](https://www.smashingmagazine.com/2019/12/browsers-containment-css-contain-property/) - good demo o visual limitations\r\n- [offscreen improvements](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Containment#paint_containment)\r\n\r\n**Content Visibility**\r\n- [caniuse](https://caniuse.com/css-content-visibility) - `content-visibility` browser support  \r\n- [web.dev - content-visibility](https://web.dev/content-visibility/)\r\n- [chromestatus - `contain-intrinsic-size:auto`](https://chromestatus.com/feature/6740477866934272#:~:text=Feature%3A%20auto%20keyword%20for%20contain,through%20content%2Dvisibility%3A%20auto.)\r\n\r\n**General**\r\n- 🔥 [Paul Irish - What forces layout / reflow?](https://gist.github.com/paulirish/5d52fb081b3570c81e3a)\r\n- [Paul Lewis \u0026 Surma - CSS trigger](https://csstriggers.com/)\r\n- [web page geometry](https://docs.google.com/document/d/1WZKlOSUK4XI0Le0fgCsyUTVw0dTwutZXGWwzlHXewiU)\r\n- chrome graphics feature set `chrome://gpu/`\r\n- chrome flags `chrome://flags/`\r\n\r\n---\r\n\r\nmade with ❤ by [push-based.io](https://www.push-based.io)\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpush-based%2Fcss-contain-and-content-visibility-research","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpush-based%2Fcss-contain-and-content-visibility-research","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpush-based%2Fcss-contain-and-content-visibility-research/lists"}