2017년에 배울 새로운 CSS기능 3가지
원문
Ire Aderinokun, https://bitsofco.de/3-new-css-features-to-learn-in-2017/ 해당 글은 Ire Aderinokun이 bitsofco.de에 발행한 "3 New CSS Features to Learn in 2017"을 번역한 것입니다. 원문은 여기서 확인할 수 있습니다.
새해가 되면서 새로 배워야 할 것들이 많이 늘었다. 올해 CSS에 채택된 새로운 기능들이 많지만, 필자는 다음 3가지 기능이 가장 흥미롭다.
1. 기능 질의
얼마 전, 필자는 실제로 필자가 원했던 CSS 기능 중 하나인 기능 질의에 대해 썼다. 하지만 지금은 기본적으로 지원된다! 이제는 Internet Explorer 이외의 모든 주요 브라우저(Opera Mini 포함)에서 지원된다.
기능 질의는 @supports조건부 블록으로 CSS를 감싸는데, 이 내부 코드는 현재 사용자 에이전트가 특정 CSS 속성-값 쌍을 지원하는 경우에만 적용된다. 아래의 예제는 display: flex을 지원하는 브라우저에만 Flexbox 스타일을 적용한다.
@supports ( display: flex ) {
.foo { display: flex; }
}또한 and와 not 같은 연산자를 사용하면 보다 복잡한 기능 질의 작성할 수 있다. 아래의 예제는 브라우저가 이전의 Flexbox 구문만 지원하는지 탐지한다.
@supports ( display: flexbox )
and
( not ( display: flex ) ) {
.foo { display: flexbox; }
}브라우저 지원 범위
2. 그리드 레이아웃
CSS 그리드 레이아웃 모듈은 그리드 기반 레이아웃을 생성하기 위한 시스템을 정의한다. 이 레이아웃은 유연한 상자 레이아웃 모듈과 유사하지만 페이지 레이아웃 용으로 특별히 설계되어 있으므로 다양한 기능을 제공한다.
명시적 항목 배치
그리드는 그리드 컨테이너(display: grid로 생성된 요소)와 그리드 아이템(그 자식 요소들)으로 구성된다. 다음 CSS를 통해 마크업 배치와 독립적으로 그리드 항목의 배치와 순서를 쉽고 명확하게 결정할 수 있다.
한가지 예로, 필자의 글 CSS Grid를 사용한 성배 레이아웃에서 이 모듈을 사용하여 악명 높은 "성배 레이아웃"을 만드는 방법을 보여주었다.
아래의 CSS는 31줄 밖에 되지 않는다.
.hg__header { grid-area: header; }
.hg__footer { grid-area: footer; }
.hg__main { grid-area: main; }
.hg__left { grid-area: navigation; }
.hg__right { grid-area: ads; }
.hg {
display: grid;
grid-template-areas: "header header header"
"navigation main ads"
"footer footer footer";
grid-template-columns: 150px 1fr 150px;
grid-template-rows: 100px
1fr
30px;
min-height: 100vh;
}
@media screen and (max-width: 600px) {
.hg {
grid-template-areas: "header"
"navigation"
"main"
"ads"
"footer";
grid-template-columns: 100%;
grid-template-rows: 100px
50px
1fr
50px
30px;
}
}유연한 길이
CSS 그리드 모듈은 새로운 길이 단위로 fr을 도입했는데, 이 단위는 그리드 컨테이너에 남아있는 여유 공간의 비율을 나타낸다.
이를 통해 그리드 컨테이너의 사용 가능한 공간에 따라 그리드 항목의 높이와 너비를 배분할 수 있다. 예를 들어, 필자는 성배 레이아웃에서 두 main섹션이 양옆의 나머지 공간을 모두 차지 하길 원했고, 다음과 같이 간단히 작성했다.
.hg {
grid-template-columns: 150px 1fr 150px;
}거터
이제 grid-row-gap, grid-column-gap, grid-gap 속성들을 사용하여 그리드 레이아웃에 대한 거터를 구체적으로 정의할 수 있다. 이 속성들은 값으로
예를 들어 5%의 거터를 가지려면 다음과 같이 작성하면 된다.
.hg {
display: grid;
grid-column-gap: 5%;
}브라우저 지원
CSS 그리드 모듈은 이르면 올해 3월에 사용할 수 있을 것이다.
3. 네이티브 변수들
마지막으로 소개할 기능은 내장 CSS 변수들이다(캐스케이딩 변수 모듈의 사용자 정의 속성). 이 모듈은 CSS 속성에 값으로 할당할 수 있는 작성자 정의 변수를 만드는 방법을 도입했다.
예를 들어, 우리가 스타일 시트의 곳곳에서 동일한 테마 색상을 사용한다면 실제 변수의 값을 여러 번 적기보다는 한 개의 변수를 참조하도록 추상화할 수 있다.
:root {
--theme-colour: cornflowerblue;
}
h1 { color: var(--theme-colour); }
a { color: var(--theme-colour); }
strong { color: var(--theme-colour); } 이것은 SASS와 같은 CSS 전처리기의 도움을 통해 이미 가능했지만 내장 CSS 변수는 브라우저안에 존재한다는 장점이 있다. 즉, 해당 값을 실시간으로 업데이트할 수 있다. 다음과 같이 --theme-colour 값을 변경할 수 있다.
const rootEl = document.documentElement;
rootEl.style.setProperty('--theme-colour', 'plum'); 브라우저 지원범위
지원은 되고있는가?
여러분도 보시다시피 위의 기능들은 모든 브라우저에서 지원되지 않는데 제품을 개발하면서 어떻게 맘 편히 사용할 수 있을까? 점진적 향상(원문: Progressive Enhancement)이 있지 않은가! 필자는 작년 Fronteers Conference에서 CSS에 점진적 향상을 적용하는 방법에 대해 이야기했다. 아래의 주소에서 내용을 확인 할 수 있다.
[영상] Ire Aderinokun — Progressive Enhancement and CSS
올해 여러분이 가장 배우고싶은 CSS 기능은 무엇인가?