🌈 CSS property: content-visibility

content-visibility

• 2020/08/25 크롬85에 추가된 content-visibility
• content-visibility는 UserAgent가 layout, painting을 포함한 요소의 렌더링 작업을 필요로할 때까지 생략할 수 있도록 함
• 콘텐츠의 대부분이 화면 밖에 있을 때, content-visibility을 활용해서 렌더링을 생략하게 되면 사용자의 초기 로드 시간이 훨씬 빨라집니다. 또한, 화면 내 콘텐츠와 더 빠르게 상호작용할 수 있음

can i use?

구글에서 만든 거니깐 크롬이 지원하는 것은 당연한 것 같고
오~~~ Edge! 분발중이군염!
IE대신에 Edge라도 써주세요 젭알

Reference

• content-visibility: the new CSS property that boosts your rendering performance (https://wit.nts-corp.com/2020/09/11/6223?utm_source=gaerae.com&utm_campaign=%EA%B0%9C%EB%B0%9C%EC%9E%90%EC%8A%A4%EB%9F%BD%EB%8B%A4&utm_medium=social&fbclid=IwAR2dR0AMspEgo8Bbo1a1mRxyWl3KL3X9MKd22hR3azt3Fhzy68KXu62EXGM)
• https://web.dev/content-visibility/