PostCS로 다가오는 CSS 기능을 활성화합니다

이전 기사 "Postcss Guide : 개선 된 선택기 및 미디어 쿼리"에 상속 된이 기사는 CSS 기능을 확장하는 더 많은 PostCSS 플러그인을 탐색합니다. 이전 기사는 선택기 및 미디어 쿼리를 확장하여 스타일 시트 구조를 개선하는 데 중점을 두는 반면,이 기사는 다가오는 사양에서 새로운 속성과 값을 구현하는 방법에 중점을 둘 것입니다. 이 기사에 설명 된 플러그인은 귀하의 요구에 따라 효과적으로 또는 개별적으로 사용할 수있는 다양한 기능을 구현합니다.

내가 좋아하는 플러그인부터 시작하겠습니다.

키 포인트

PostCSS 플러그인은 다가오는 CSS 사양에서 새로운 속성과 값을 구현하는 데 사용될 수 있으며 CSS의 기능을 효과적으로 확장 할 수 있습니다. 이 플러그인은 개발자의 요구에 따라 함께 또는 개별적으로 사용할 수 있습니다.

postcss를 통해 개발자는 브라우저가 공식적으로 구현되기 전에 미래의 CSS 기능을 사용할 수 있습니다. 플러그인은 조합에 대한 지원을 추가하고 플러그인은 블록 레벨 및 구성 요소 레벨 요소의 스타일을 자동으로 재설정합니다.

플러그인은 개발자가 하나 이상의 "색상 조정기"기능을 사용하여 기본 색상을 수정할 수있는 새로운
• 기능을 구현합니다.
플러그인은 HWB 색상을 정의하기위한 새로운
• 기능을 구현합니다. postcss-initial postcss는 새로운 CSS 기능을 조기에 채택하고 평가할 수있는 유망한 기회를 제공합니다. 개발자는 완전히 새로운 관점에서 스타일 시트를 작성하고 생산성을 높일 수있는 사용 가능한 기능을 목록하는 것이 좋습니다. initial all: initial 재설정을 다음 레벨로 선택하십시오 CSS3에는 postcss-autoreset 속성이라는 두 가지 멋진 기능이 소개됩니다.
값은
• 및 postcss-color-function 속성은 속기 속성으로 사용되며,이 속성은 모든 속성을이 세 상태 중 하나에 재설정합니다. 둘 다 스스로 흥미롭지 만, 함께 사용하면 특정 요소의 모든 스타일을 신속하게 재설정하고 페이지의 상위 요소의 스타일을 상속하지 못하게 할 수 있습니다. 이것은 모듈 식 CSS를 작성하는 또 다른 단계입니다! color() 불행히도, 즉, IE는 여전히이 두 기능을 지원하지 않습니다. 그러나, 당신이 추측했듯이,이 문제를 해결하는 플러그인이 있습니다. postcss-color-hwb hwb() 조합에 대한 지원이 추가되었습니다. 작동하는 방법은 다음과 같습니다. postcss-color-gray gray() 컴파일 :
• 기본적 으로이 기능을 지원하는 기본 브라우저에서 사용하기 위해 원래 속성을 유지하고
를 유지합니다.

결과적으로 속성은 긴 재설정 속성 목록으로 변환됩니다.

는 다음과 같이 변환됩니다

(공간을 위해 이후의 확장 된 코드가 생략 됨) initial BEM 또는 Suit을 사용하는 경우이 플러그인은 와 잘 작동하며, 이는 블록 및 구성 요소 레벨 요소의 스타일을 자동으로 재설정합니다.

사용자 정의 속성 레이아웃으로 작업 할 때 스타일 시트에서 일부 값을 공유해야합니다. 예를 들어, 브랜드 색상은 버튼의 배경, 링크의 텍스트 색상 또는 텍스트 블록의 테두리로 사용할 수 있습니다. 현재이를 달성하려면 색상이 사용되는 각 장소를 여러 번 반복해야합니다. 이 반복은 애플리케이션에서 색상을 변경할 때 팔레트를 일관성있게 유지하는 것이 번거 롭습니다. postcss-autoreset Less 및 Sass와 같은 CSS 전 처리기는이 문제를 변수로 해결했습니다. 다행히도 W3C는 사용자 정의 속성이라는 유사한 개념을 연구하고 있습니다. 동일한 문제가 해결되지만 사전 처리기의 변수와 다르게 작동합니다. 작고 SASS 변수는 컴파일 시간에 구문 분석됩니다. CSS에 적은 또는 SASS를 컴파일하면 컴파일러는 현재 컴파일 범위에 해당하는 변수 선언을 찾고 각 인스턴스를 해당 값으로 바꿉니다. 이는 변수의 구문 분석 값이 전적으로 코드에서 사용되는 위치에 의존한다는 것을 의미합니다. 맞춤 속성은 DOM의 요소에 대해 정의되며 자녀 요소에 의해서만 액세스 할 수 있습니다. 이는 변수의 값이 DOM의 요소 위치에 따라 달라지며 런타임에만 구문 분석 할 수 있음을 의미합니다.

지금까지 눈살을 찌푸 리거나 눈썹을 올려야합니다. 변수의 값이 런타임에만 알려진 경우 PostCSS 플러그인은 어떻게 구문 분석합니까? 진실은 할 수 없다는 것입니다. 그러나 기능의 하위 집합을 사용하는 방법을 제공합니다. 모든 사용자 정의 속성을

요소로 정의하면 페이지의 모든 요소에 대해 이러한 속성을 사용할 수 있습니다. 이것은 우리가 컴파일 시간에 구문 분석 할 수 있음을 의미합니다.

다음은 다음과 같은 모습의 간단한 예입니다.

는 다음으로 컴파일됩니다 :

변수는 정의되지 않으므로 20px의 폴백 값으로 대체됩니다. 여기서 모든 사용자 정의 속성을

내에 유지하는 것이 중요합니다. 플러그인이 적절하게 처리 할 수 ​​없기 때문에 다른 곳에 정의 된 속성은 무시됩니다. 여기서 시작할 수 있으며 더 많은 브라우저가 지원을 시작할 때 사용량을 확장 할 수 있습니다. 크롬은 버전 49 이후로 그들을 지원했습니다.

논리적 특성 다른 작문 방향 문화에 걸쳐 국제 웹 사이트를 개발 한 적이 있다면 여러 버전의 인터페이스 (예 : 왼쪽에서 오른쪽에서 오른쪽에서 왼쪽에서 왼쪽에서 왼쪽)를 유지하는 데 필요한 것이 무엇인지 알게 될 것입니다. 이러한 요구를 충족시키기 위해 W3C는 새로운 논리적 속성 개념을 소개했습니다. 물리적 방향 (오른쪽 또는 왼쪽과 같은)에 대해 생각하는 방법이 아니라 논리적 방향 (시작 및 끝). 사양은 여전히 ​​진행 중이지만 이미

플러그인으로 일부를 시도 할 수 있습니다. :root는 및

, 와 같은 특정 논리적 속성을 사용하여 왼쪽에서 오른쪽에서 오른쪽에서 오른쪽에서 오른쪽으로 오른쪽으로 웹 사이트 버전의 생성을 지원합니다. 이 속성은 왼쪽 또는 오른쪽 대안으로 컴파일됩니다. 스타일 시트의 LTR 및 RTL 버전을 컴파일하도록 플러그인에 지시 한 다음 사용자가 언어를 변경할 때 응용 프로그램에서 전환 할 수 있습니다. border-block-start 예를 들어, 다음 CSS가있는 경우 border-block-end 옵션으로 플러그인을 호출하면 다음 결과가 생성됩니다. offset-block-start offset-block-end를 사용하는 동안

는 미러 이미지를 제공합니다 :

새로운 색상 함수 postcss는 색상을 처리하기위한 새로운 기능을 제공하는 완전한 플러그인 세트를 제공합니다.

색상 조정

.article {
  font-size: initial;
  color: initial;
  padding: initial;
  margin: initial;
}

플러그인은 새로운

기능을 구현합니다. 이 기능을 사용하면 하나 이상의 "색상 조정기"기능을 사용하여 기본 색상을 수정할 수 있습니다. 각 색상 조정자는 특정 방식으로 색상을 조작 할 수 있습니다. { dir: 'LTR' } 사용 방법에 대한 몇 가지 예는 다음과 같습니다.

는 다음 색상으로 컴파일됩니다 :

.article {
  font-size: medium;
  font-size: initial;
  color: #000;
  color: initial;
  padding: 0;
  padding: initial;
  margin: 0;
  margin: initial;
}

색상 조정기의 전체 목록은

사양에서 찾을 수 있습니다. 이 플러그인은 사용자 정의 속성과 함께 매우 효율적으로 사용할 수 있습니다. 기본 색상 세트를 정의하고 그에 따라 다른 색상을 계산할 수 있습니다. 이렇게하면 기본 색상을 변경하기로 결정하면 나머지 팔레트가 그에 따라 업데이트됩니다. { dir: 'RTL' } HWB 색상 표기법 HWB는 색상을 정의하는 대안적인 방법입니다. 색상을 설명하기 위해 0에서 360까지의 색조 값을 사용한 다음 0% ~ 100% 백색도 및 흑암을 추가합니다. 이 표기법은 HSL과 유사하며 RGB보다 이해하기 쉽습니다. 플러그인은 HWB 색상을 정의하는 새로운 기능을 구현합니다. 몇 가지 예 :

다음 색상이 생성됩니다

.container {
  all: initial;
}

그레이 () 함수 CSS 색상 모듈은 편리한 기능을 도입합니다. RGB 색상의 세 채널과 같은 중복 정보를 지정하지 않고 회색을 생성하는 데 사용할 수 있습니다. 플러그인은이 기능의 폴리 필을 구현하며 사용하기가 매우 간단합니다.

위의 코드는 다른 색조의 회색을 생성합니다.

요약 이것은 결코 사용 가능한 모든 CSS 플러그인의 전체 목록이 아니라 더 흥미로운 플러그인을 선택하는 것입니다. Postcss.parts에서 더 많은 플러그인을 탐색 할 수 있습니다.

CSS는 호황을 누리고 있으며 Postcss는 호황을 누리고 있습니다. 그렇습니다. 우리는 브라우저의 이러한 새로운 기능에 대한 기본 지원을 간절히 기다리고 있지만 PostCSS는 이러한 기능을 조기에 채택하고 평가할 수있는 유망한 기회를 제공합니다. 여기서 전반적인 조언은 전 처리기의 친숙한 사용에서 물러나 새로운 관점에서 스타일 시트를 작성하는 것입니다. 생산성을 높이고 워크 플로우에 사용할 수있는 사용 가능한 기능을 나열하십시오. 당신은 이것이 바로 당신이 놓친 기능이라는 것을 곧 알게 될 것입니다.

postcss 를 사용하여 다가오는 CSS 기능을 활성화하는 것에 대해 자주 묻는 질문 (FAQ 부분은 기사가 너무 길고 의사 원리 목표와 일치하지 않기 때문에 여기서 생략됩니다. FAQ 부분은 필요에 따라 재구성 및 재 작성 될 수 있지만 원래 의도는 변경되지 않습니다.) .

위 내용은 PostCS로 다가오는 CSS 기능을 활성화합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!