코드스피츠76 - CSS Rendering을 보고 정리한 글 입니다.
CSS는 아래 내용을 표현하는 하나의 언어라고 할 수 있다.
- 그래픽을 고정되어 있는 숫자를 사용하지 않고, 계산된 체계로 어떻게 표현할까
- 지오메트릭의 영역을 어떻게 표현할까
- 색칠 할 때는 어떻게 표현할까
즉 CSS를 배운다는 것은 속성, 값이 구체적으로 발현될 때 어떠한 방식이 계산되서 표현되는지에 대해 이해하는 것이다.
css는 브라우저 시스템에 렌더링 시스템의 추상적인 내용을 적용하기 위해서 다른 시스템에 있던 렌더링 시스템을 차용해 왔다. 웹의 CSS 렌더링 시스템은 수 많은 렌더링 시스템을 받아들였고(렌더링 시스템 중에서도 늦게 발현된 시스템) 그로 인해 일관성이 없고 난잡하다 할 수 있다.(어떤 부분은 이론에 의해, 관념적인 계산 방법에 의해 만들어졌다.)
복잡한 체계를 맞는 구현인지 틀린 구현인지 판단하는 것은 사양서이며,
사양이 맞게 되어있으면 맞는거면 브라우저가 틀린 것이고, 결국 브라우저가 작동하는게 맞는지 틀린지는 사양서를 보면 된다.
표준이 무엇인지 알아야 표준을 구현하고 사용하고, 나머지 예외를 폴리필 할 수 있다.
CSS는 버전이 아니라 Level이라는 단어를 사용한다. W3C에 있는 모든 것에 level을 사용하는 것은 아니다.
CSS Level 1
HTML안에 그림과 관련된 모든 것을 넣었더니 구분이 안되어 복잡하고 가독성이 떨어져 CSS Level1 탄생!
CSS Level 2 + Module
그림과 관련된 모든 것을 CSS2 하나의 단일 사양으로 관리하기 어렵기 때문에 사양을 따로 관리하는 모듈화 시작(다양한 분야(윈도우, 모델링, 맥 등..)별로 렌더링 시스템을 차용했기 때문에 사양을 관리하기 어려움)
이 때 CSS Level2가 발표되면서 CSS Level2에 있는 모든 사양의 Module 탄생!(CSS Level2부터 ms 등 브라우저가 개입됐다.)
CSS Level 2.1(흔히 알고 있는 CSS3)
CSS에 따라 Level3를 발표한 Module이 있었고, 모든 기능이 다같이 모듈 level up하기 어렵다(새로 만들어진 모듈이 생길 수도 있고)고 표준사항위원회에서 판단했다. 이후 CSS Level은 Module Level로 변경된다.
2. level2.1을 발표해야 할 모듈이지만 3를 발표한 모듈 리스트
- Syntax 3
- Cascade 3
- Color 3
- Selectors 3
- Background 3
- Values 3
- Text 3
- Text Decor 3
- Fonts 3
- UI 3
Module Level
더이상 css 통합 레벨은 존재하지 않고, 새로운 모듈(module level 1)이 탄생!
- Transforms 1
- Compositing 1
- Effects 1
- Masking 1
- Flexbox 1
- Grid 1
이후 CSS는 새로운 모듈이 생기거나, 기존 사양들과의 새로운 모듈의 호환성을 위해 각 모듈이 업데이트 된다.
CSS 사양의 세계는 끊임없이 업데이트 되고, 새로운 모듈이 생성될 때마다 기존 모듈과의 호환성을 위해 다 재 검토 된다.
CSS가 브라우저마다 다른 이유?
CSS가 난잡하고 어렵게 만들어졌기 때문에 브라우저 제조사가 최신을 따라가기 당연히 힘든 것(ms사에서 일을 안하는게 아님)
