2017 년 배 울 만 한 3 가지 CSS 특성

원문:https://bitsofco.de/3-new-css-features-to-learn-in-2017/번역문:http://caibaojian.com/3-new-css-features-to-learn-in-2017.html전단 개발 블 로그 (채 보 견)
허가 없 이 전재 가 금지 되 어 있 으 며, 타당 하지 않 은 점 이 있 으 면 시정 을 환영 합 니 다.
새해 복 많이 받 으 세 요!새로운 한 해 가 다가 오 면서 우 리 는 새로운 것 한 세트 를 가지 고 공 부 를 시작 해 야 한다.올 해 는 새로운 특성 이 많 지만 세 가지 새로운 특성 이 가장 설 렌 다.
1.Feature Queries
얼마 전에 나 는 '내 가 가장 원 하 는 CSS 특성 중 하나' 라 는 Feature Queries 에 관 한 글 을 쓴 적 이 있다.자, 이제 이곳 에 나 타 났 습 니 다.IE 브 라 우 저 를 제외 한 모든 주류 브 라 우 저 (Opera Mini 포함) 를 지원 합 니 다.
Feature Queries, 이 @supports 규칙 을 사용 하면 CSS 를 하나의 조건 블록 에 포함 시 킬 수 있 지만 현재 사용자 클 라 이언 트 가 특별한 CSS property - value 를 지원 해 야 유효 합 니 다.간단 한 예 를 들 어 display:flex 를 지원 하 는 브 라 우 저 만 Flexbox 스타일 을 사용 합 니 다.

@supports ( display:flex ){
    .foo { display:flex; }
}

또한 and 와 not 와 같은 조작 자 를 사용 하면 더욱 복잡 한 특성 조 회 를 만 들 수 있 습 니 다.예 를 들 어, 우 리 는 브 라 우 저 에서 오래된 Flexbox 문법 만 지원 하 는 것 을 검사 할 수 있 습 니 다 -

@supports ( display: flexbox ) 
          and 
          ( not ( display: flex ) ) {
  .foo { display: flexbox; }
}

상황 을 겸용 하 다
2. Grid 레이아웃
CSS 격자 레이아웃 모듈 은 격자 생 성 을 기반 으로 한 레이아웃 시스템 을 정의 합 니 다.플 렉 스 비 블 박스 레이아웃 모듈 과 비슷 하지만 페이지 레이아웃 을 위 한 디자인 이 많아 다양한 특성 을 가지 고 있 습 니 다.
뚜렷 한 항목 배치
하나의 격자 는 Grid Container display: grid 와 Grid 항목 (이것 은 하위 항목) 으로 구성 되 어 있 습 니 다.우리 의 CSS 에서 우 리 는 태그 에 있 는 배치 와 순 서 를 상관 하지 않 고 쉽게 조직 할 수 있 습 니 다.
예 를 들 어 제 글 에서 'CSS 격자 의 성 배 레이아웃 을 사용 합 니 다. 이 구성 요 소 를 사용 하여 비슷 한' 성 배 레이아웃 '을 만 드 는 방법 을 보 여 드 리 겠 습 니 다.
다음은 이 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 속성 을 사용 하여 격자 레이아웃 의 구체 적 인 정의 간격 을 사용 할 수 있 습 니 다. 이 속성 들 은 하나의 length-percentage 데이터 형식 을 값 으로 받 아들 이 고 백분율 은 내용 에 대응 하 는 구역 입 니 다.
예 를 들 어 5% 의 간격 이 있 으 면 우 리 는 이렇게 쓸 수 있다.

.hg {
    display: grid;
    grid-column-gap: 5%;
}

상황 을 겸용 하 다
CSS 격자 구성 요 소 는 이 르 면 올해 3 월 브 라 우 저 에서 사용 할 수 있 습 니 다.
3. 원생 변수
최근, 네 이 티 브 CSS 변수 (css 변수 구성 요소 사용자 정의 속성) 입 니 다. 이 구성 요 소 는 CSS 속성 에 값 을 부여 할 수 있 는 사용자 정의 변 수 를 만 드 는 방법 을 소개 합 니 다.
예 를 들 어 스타일 시트 의 여러 곳 에서 colour 를 사용 해 야 한다 면 실제 값 을 여러 번 쓰 지 않 고 변수 로 사용 할 수 있 습 니 다.

:root {
  --theme-colour: cornflowerblue;
}

h1 { color: var(--theme-colour); }  
a { color: var(--theme-colour); }  
strong { color: var(--theme-colour); } 

현재 많은 CSS 프로세서 가 이 점 을 할 수 있 지만, CSS 변 수 는 브 라 우 저가 지원 하 는 장점 이 있 습 니 다. 이것 은 그들의 값 을 실시 간 으로 업데이트 할 수 있다 는 것 을 의미 합 니 다. 아래 의 속성 --theme-colour 을 바 꾸 기 위해 서, 예 를 들 어 우리 가 해 야 할 일 은 다음 과 같 습 니 다.

const rootEl = document.documentElement;  
rootEl.style.setProperty('--theme-colour', 'plum'); 

상황 을 겸용 하 다
호환성 이 무엇 입 니까?
보시 다시 피 모든 기능 이 모든 브 라 우 저 에 의 해 지원 되 는 것 은 아 닙 니 다. 그래서 우 리 는 어떻게 생산 에 적합 하 게 사용 해 야 합 니까? 좋 습 니 다. 점진 적 으로 강화 하 세 요. 지난 1 년 동안 저 는 Frontiers 회의 에서 CSS 에서 점진 적 으로 증가 하 는 강연 을 어떻게 사용 하 는 지 에 대해 이야기 하 였 습 니 다. 아래 의 이것 을 보 세 요.