css guide

https://html5test.com/

접속한 PC & browser 가 html5 지원 여부를 보여준다

리스트의 항목은 지원 여부를 아이콘으로 보여주고 명세로 가는 링크를 제공한다

https://caniuse.com/

css keyword 를 입력 하면 관련 property 를 보여준다. 각 property 의 브라주여별 지원 여부를 보여준다

www.w3schools.com

브라우져별 css property 지원 여부 리스트

CSS Animatable

developer.mozilla.org

웹 개발자 안내서
CSS: Cascading Style Sheets
CSS Reference
상자_모델
Flexbox
CSS Flexible Box Layout
flexbox의 기본 개념
텍스트 표시 방향 제어하기
논리적 값 : writing-mode, inline-size
- IE 미 지원
콘텐츠 overflow
CSS 란 무엇입니까?
CSS 작동 방식
일반적인 CSS 문제 해결하기

내 생각 들

이미지에 border-radius 를 주는 방법

-   ## img 로 처리
-   background-image 로 처리
    -   img 의 사이즈 생각하지 않아도 된다 ??

flex item 최소 사이즈 지정

flex: 0 0 30px;

글 들

Sharing data between CSS and JavaScript using custom properties

getComputedStyle 와 CSSStyleDeclaration.setProperty() 를 사용하는 방법

let bg = getComputedStyle(document.documentElement).getPropertyValue('--pagebackground');

document.documentElement.style.setProperty('--pagebackground', 'firebrick');

하드 웨어 가속

CSS will-change 프로퍼티에 관해 알아둬야 할 것

will-change는 엘리먼트의 변경을 브라우저에 알려주는 이외에 엘리먼트 자체에 영향을 끼치는가?
너무 많은 속성이나 엘리먼트에 will-change를 사용하지 않는다
브라우저에 충분한 시간을 준다
변경이 종료되면 will-change를 삭제한다
스타일시트에서는 will-change를 소극적으로 사용한다
will-change 속성의 값

Chrome에서 가속화 된 렌더링

크롬에서 웹 컨텐츠의 하드웨어 가속 렌더링을 뒷바침하는 기본 모델에 대해 설명합니다.

가속 대상

RenderLayer에 포함되는 요소 가운데 다음의 조건 중 한 가지에 부합되면 GraphicsLayer로 설정된다.

CSS 3D Transform(translate3d, preserve-3d 등)이나 perspective 속성이 적용된 경우 <video> 또는 <canvas> 요소 CSS3 애니메이션함수나 CSS 필터 함수를 사용하는 경우자식 요소가 레이어로 구성된 경우 z-index 값이 낮은 형제 요소가 레이어로 구성된 경우. 레이어로 구성된 요소의 위에 위치하면 해당 요소도 레이어로 구성된다.

가속 대상 확인 방법

Show composited layer borders 옵션
- 못 찾음 (2021-06-20 기준)
Layers 탭좀 더 조사 필요

하드웨어 가속 사용 시 고려 사항

하드웨어 가속을 사용하면 웹 페이지의 렌더링 속도가 빨라지지만 잘못 사용하면 오히려 렌더링 속도가 느려지거나 브라우저에 문제가 일어날 수 있다. 하드웨어 가속을 사용할 때 주의할 점과 고려할 사항을 알아보겠다.

적용 시 고려 사항

하드웨어 가속을 사용할 때는 다음과 같은 점을 고려한다.

하드웨어 가속을 적용하는 요소의 크기는 작을수록 좋고, 요소의 개수는 화면에서 5~6개로 구성하는 것이 좋다
DOM 요소의 내용이 자주 변경되지 않는 영역에 하드웨어 가속을 적용한다.
기기에 따라 선별적으로 하드웨어 가속을 적용한다.

성능 향상

High Performance Animations

모던 브라우저들은 정말 저비용의 4가지 애니메이션 요소- 위치, (축소/확대) 비율, 회전과 투명도 -를 가지고 있습니다.

Position
Scale
Rotation
Opacity

Lee Junghan