2015 년 CSS3 이후 새로운 것은 무엇입니까?

CSS3의 영향은 부인할 수 없었습니다. 그라디언트, 애니메이션, 둥근 코너, 박스 그림자, 변형과 같은 풍부한 기능은 CSS 개발을 활용했습니다. CSS3 (및 관련 "HTML5"모니 커)의 광범위한 채택은 학습 자원의 홍수로 이어졌습니다. 그러나 많은 개발자들은 그 이후로 CSS 기술을 크게 업데이트하지 않았습니다. 이 기사는 그 격차를 해소합니다.

Scott Vandehey의 "Nutshell의 현대 CSS"는이 학습 곡선을 강조합니다. 그는 미래의 기능을위한 전처리 기자 (향후 기능을위한 autoprefixer 및 polyfills 포함)와 CSS-in-JS의 상황 별 관련성 (주로 JavaScript-Heaver Projects에서 유용함)에 대한 요구가 줄어 듭니다. 그는 사용자 정의 속성, Flexbox 및 Grid를 마스터하는 것의 중요성을 강조합니다.

이를 바탕으로 2015 년 이후 주요 CSS 진보를 탐색합시다.

CSSS3 개선 사항

레이아웃 혁명 : Flexbox 및 그리드

Flexbox 및 그리드는 현대 CSS의 기본입니다. 그리드의 전력은 서브 그리드 및 벽돌 레이아웃에 의해 증폭됩니다 (크로스 브라우저 안정성이 여전히 발전하고 있음).

 .card {
  디스플레이 : 그리드;
  그리드-템플릿-컬럼 : 150px 1fr;
  갭 : 1rem;
}
.card .nav {
  디스플레이 : Flex;
  갭 : 0.5rem;
}

CSS 사용자 정의 속성 : 설계 토큰 및 테마

사용자 정의 속성은 설계 토큰을 관리하고 일관성을 유지하고 유지 보수를 단순화하는 데 중요합니다. 다크 모드 구현이 대표적인 예입니다. 전체 사이트는 주로 사용자 정의 속성을 사용하여 스타일을 지정할 수 있으며 Tailwind CSS와 같은 프레임 워크를 보완합니다 (인기이지만 분열 적이지만 접근).

 html {
  -BGCOLOR : #70F1D9;
  -Font-Size-Base : 클램프 (1.833REM, 2VW 1REM, 3REM);
  -Font-Size-LRG : 클램프 (1.375REM, 2VW 1REM, 2.25REM);
}

html.dark {
  -BGCOLOR : #2D283E;
}

기본 설정 쿼리 : 사용자 중심 디자인

기존 미디어 쿼리를 확장하고 사용자 선호도를 감지하는 기본 설정 쿼리 (예 : prefers-reduced-motion prefers-color-scheme ). 이를 통해보다 액세스 가능하고 개인화 된 사용자 경험이 가능합니다.

 @Media (Prefers-Seeduced-Motion : Reduce) {
  * {
    애니메이션 기간 : 0.001s! 중요;
  }
}

@Media (Color-Scheme를 선호 : Dark) {
  : 루트 {
    ---BG : #222;
  }
}

향상된 색상 구문 및 새로운 색상 공간

Color Syntax는 함수 내에 직접 알파 값을 포함하도록 진화했습니다 (예 : rgb(0 0 255 / 0.5) ). 새로운 색상 공간 color() , lab() , lch() , hwb() - 확장 된 색상 표현 기능.

 .차단하다 {
  배경 : HSL (0 33% 53% / 0.5);
  배경 : RGB (255 0 0);
  배경 : 색상 (디스플레이 -P3 0.9176 0.2003 0.1386);
  배경 : 실험실 (52.2345% 40.1645 59.9971 / .5);
  배경 : HWB (194 0% 0% / .5);
}

가변 글꼴 : 향상된 타이포그래피

가변 글꼴은 기존 웹 글꼴에 비해 성능 향상 및 설계 유연성을 제공합니다. 컬러 글꼴이 존재하지만 광범위한 채택을 얻지 못했습니다.

 몸 {
  Font-Family : '재귀', Sans-Serif;
  글꼴 중량 : 950;
  글꼴 변성 세트 : '모노'1, 'casl'1;
}

경로, 클리핑 및 마스킹을 통한 SVG 통합

CSS는 이제 SVG와 원활하게 통합되어 모양 기반 클리핑 ( clip-path ), 마스킹 ( mask ), 경로 기반 애니메이션 ( offset-path ) 및 경로 조작 ( d 속성)이 가능합니다.

 .cut-out {
  클립 경로 : 다각형 (25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

CSS 필터 : 이미지 및 요소 조작

CSS 필터는 광범위한 이미지 조작 기능 ( filter ), 배경 블렌딩 ( background-blend-mode ), 배경 필터링 ( backdrop-filter ) 및 요소 블렌딩 ( mix-blend-mode )을 제공합니다.

 .장애를 입히다 {
  필터 : 블러 (1px) 그레이 스케일 (1);
}

Houdini : JavaScript로 CSS를 확장합니다

Houdini는 페인트 API, 속성 및 값 API, 레이아웃 API 및 애니메이션 API를 포함한 JavaScript 기반 CSS 확장 기능을 제공합니다. 브라우저 지원은 다양하지만 모듈성과 사용 편의성은 유망합니다.

 "https://unpkg.com/extra.css/confetti.js"가져 오기;

그림자 돔 및 웹 구성 요소 스타일

Shadow Dom은 스타일링 웹 구성 요소에 영향을 미치며 외부 스타일링 기술에 대한 이해가 필요합니다.

 내 구성 요소 {
  -BG : Lightgreen;
}

CSS의 미래

현재 기능을 따라 잡는 것이 중요하지만, 컨테이너 쿼리, 컨테이너 유닛, 독립 변환, 중첩, 캐스케이드 레이어, 개선 된 뷰포트 장치, :has() 선택기 및 스크롤 타임 라인 등 몇 가지 유망한 발전이 수평선에 있습니다.

이 개요는 CSS3 시대 이후 CSS 발전에 대한 포괄적 인 업데이트를 제공하여 개발자에게 현대적이고 효율적이며 사용자 친화적 인 웹 사이트를 구축 할 수있는 지식을 갖추고 있습니다.

위 내용은 2015 년 CSS3 이후 새로운 것은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!