콘텐츠
새로운 CSS : 빠른 링크기능 쿼리 (@supports)
CSS 그리드
CSS 필터
CSS 변수
배경 반복 (원형 및 공간)
종횡비 미디어 쿼리
혼합 모드
개체 맞춤
외형
currentColour
지켜봐야 할 더 많은 규칙
웹이 빠르게 발전함에 따라 사과적인 CSS가 남겨진 것처럼 보입니다. 매주 무언가가 발생하지만 인터페이스가 중요한 부분은 거의 없습니다. 인터넷은 애플리케이션에서 거의 영구적 인 수렴 후 분할 후 수렴 모델을 따르며 이제 CSS의 전환입니다.
더 많은 프레임 워크, 아이디어 및 표준이 등장함에 따라 점점 더 많은 도우미 기술이 필요에 따라 발명되면서 복잡성이 급증했습니다. 사람들이 더 많이 기대함에 따라 개발자에게는 상황이 훨씬 더 복잡해졌지만 이제는 공식 표준으로 CSS에 천천히 병합되고 있습니다. CSS는 1990 년대 초반부터 인식 할 수 없게되었습니다. 더 간단했으면 좋겠어요? 웹 사이트 빌더를 사용해보십시오.
그리고 미래는 무엇입니까? 우리는 아마도 미래의 CSS가 새로운 기술에도 다른 디지털 및 물리적 장치와 채널이 나타날 때 또 다른 차이를 보게 될 것이라고 말할 수 있습니다. 또한 CSS가 훨씬 더 풍부한 인터페이스에 대한 직접적인 액세스를 제공하고 개발 복잡성 및 개발 기능의 'S'곡선이 좁아지고 가파르게 될 것이라고 추측 할 수 있습니다 (복잡한 사이트를 구축하는 경우 웹 호스팅이 필요합니다. 디자인 파일을 저장하고 공유하기 위해 적절한 클라우드 스토리지를 유지할 수 있습니다.)
하지만 지금은 어떨까요? 이것들은 CSS에 대한 최신의 가장 훌륭하고 유용한 업데이트에 대한 우리의 선택입니다. 기능에 의존하기 전에 기능 쿼리를 사용하여 기능이 지원되는지 확인하는 방법을 알아 보려면 계속 읽으십시오. CSS 그리드로 사용자 지정 인쇄 스타일 레이아웃을 구축합니다. CSS 변수로 코드를 건조 시키십시오. 둘로 배경을 장악하다 백그라운드 반복 옵션 (일주 과 우주); 종횡비 기반 미디어 쿼리 탐색 독특한 비주얼 만들기 혼합 모드; 콘텐츠 상자를 채우기 위해 이미지를 조정합니다. 개체 맞춤; 그리고 더. 반대편의 빠른 링크 상자를 사용하여 원하는 섹션으로 이동하십시오.
기능 쿼리 (@supports)
새롭고 잠재적으로 지원되지 않는 기능을 사용하는 구성 요소를 빌드 할 때 대체 기능을 포함하는 것이 중요합니다. 최근까지 이것은 Modernizr와 같은 플러그인을 사용하여 JavaScript를 통한 기능 감지를 사용하여 달성되었습니다. 이제 새로운 @supports 구문 (기능 쿼리라고도 함)을 사용하여 CSS 내에서 직접 가능합니다.
추가로 @ 지원, 사용하려는 코드가 지원되는지 여부를 확인할 수 있습니다.
@supports (디스플레이 : 플렉스) {.hagrid {디스플레이 : 플렉스; }}
페이지가로드되면 사용중인 브라우저가 플렉스 기능을 지원하는지 확인하는 검사가 수행됩니다. 그럴 경우 지원 중괄호 내의 스타일이 브라우저에서 적용됩니다.
그렇지 않은 경우 무시됩니다. 쿼리중인 기능이 지원되지 않는 경우 대체 옵션을 사용하는 것이 좋습니다.
대체 코드를 포함하는 가장 적절한 방법은 프로젝트 및 변경되는 사항에 따라 다릅니다. @ 지원 기본 스타일을 무시하는 코드. 다른 경우에는 다른 것을 포함하는 것이 바람직 할 수 있습니다. @ 지원 코드가 지원되지 않는지 확인하십시오. 이것은 기능 쿼리를 부정함으로써 달성됩니다.
@supports not (display : flex) {.dobby {display : block; }}
여러 검사를 결합하여 모든 필수 기능이 동시에 지원되는지 확인하여 스타일 규칙을 모두 또는 전혀 적용하지 않을 수 있습니다. 이에 대한 구문은 특정 크기 사이의 장치에 스타일을 적용하는 것과 같이 미디어 쿼리를 결합하는 것과 매우 유사합니다. 이는 'and'연산자와 여러 기능 쿼리를 사용하여 수행됩니다.
@supports (display : flex) and (transform : scaleY (3)) {.fluffy {display : flex; 변환 : scaleY (3); }}
에 대한 대응 조합 쿼리 과 연산자는 또는 연산자, 기능 쿼리 중 하나가 일치하는지 확인하고 최소한 하나가 지원되는 경우 스타일을 적용합니다.
@supports (display : flex) 또는 (transform : scaleY (1.5)) {.grawp {display : flex; 변환 : scaleY (1.5); }}
이미 CSS 변수를 다뤘다는 점에서 유용한 것은 @ 지원 다음 접근 방식으로 수행 할 수있는 사용자 지정 속성이 지원되는지 여부를 확인할 수도 있습니다.
@supports (--ron : 주황색) {body {color : var (-ron); }}
위의 예에서는 사용자 정의 속성 조건이 지원되는지 확인하고 본문에 주황색 글꼴 색상이 적용되는지 확인합니다. @ 지원 Internet Explorer 9까지 지원해야하는 경우 일부 폴리 필을 사용할 수 있지만 IE 11 이하를 제외한 모든 브라우저에서 사용할 수 있습니다.
마지막 참고 : 이것은 새로운 스타일링 규칙을 구축하는 좋은 방법이지만 정상적으로 저하되는 웹 사이트를 구축하는데도 도움이됩니다. 사용하는 경우 @ 지원 그런 다음 브라우저가 CSS 규칙을 지원하지 않는지 확인하는데도 사용하십시오. 이렇게하면 작업 부하가 두 배로 늘어날 수 있지만 브라우저를 더 우아하게 축소하는 무언가를 만들 수 있습니다.
CSS 그리드
Flexbox가 출시됨에 따라 명확한 수정, 해킹 및 해결 방법으로 코드를 오염시키는 시간을 줄이고 간결한 CSS 및 HTML 작성에 더 집중할 수있었습니다. Flexbox는 모든 UI 개발자의 도구 상자에 필수적이지만 한 번에 한 방향으로 작업하는 데 가장 적합합니다. 이는 일반적으로 한 번에 하나의 축으로 만 제한되기 때문에 충분합니다 (예 : 페이지 너비는 제한되지만 높이는 제한되지 않음).
그러나 대시 보드 스타일 앱과 같이 두 차원 모두에서 제한된 경우 CSS Grid가 확실히 빛을 발합니다. 처음에는 그리드로 시작하는 것이 어려울 수 있지만 구문을 이해하면 순조롭게 진행됩니다. 다음과 같은 HTML 구조가 있다고 가정합니다.
div> div> Gryffindor / div> div> Slytherin / div> div> Ravenclaw / div> div> Hufflepuff / div> / div>
그리드를 정의하고 치수를 설정 한 다음 그리드 셀의 명명 된 영역을 정의 할 수 있습니다.
.container {디스플레이 : 그리드; 폭 : 100vw; 높이 : 100vh; } .container> div {border : 2px solid # 000; } .gryffindor {grid-area : gryffindor; 배경색 : # C91018; } .slytherin {그리드 영역 : slytherin; 배경색 : # 26A147; } .ravenclaw {grid-area : ravenclaw; 배경색 : # 005782; } .hufflepuff {grid-area : hufflepuff; 배경색 : # FFD63C; }
마지막으로 .컨테이너 우리는 사용할 수 있습니다 그리드 템플릿 영역 속성을 사용하여 그리드의 모양을 다음과 같이 배치합니다.
.container {디스플레이 : 그리드; 폭 : 100vw; 높이 : 100vh; grid-template-areas : "gryffindor slytherin slytherin ravenclaw" "gryffindor slytherin slytherin ravenclaw" "gryffindor hufflepuff hufflepuff ravenclaw"}
또한 그리드 표시를 미세 조정하기위한 추가 속성이 많이 있습니다. 몇 가지를 예로 들면 :
그리드-컬럼-갭 : 크기>; 열 사이의 거터
그리드 행 간격 : 크기>; 행 사이의 거터
그리드 템플릿 열 : 크기>; 열 너비, 다중 공간 분리
그리드 템플릿 행 : 크기>; 행 너비, 다중 공간 분리
정렬 항목 : 가운데 | 끝 | 시작>; 각 그리드 셀의 내용을 세로로 정렬
align-items : stretch>; 셀 전체를 세로로 채 웁니다.
정렬 항목 : 센터 | 끝 | 시작 | 스트레치>; 위와 같이 가로축을 따라
place-items : align-items> / justify-items>; 속기 표기, 결합 항목 정렬 과 정당화 항목
따라서 실제로 이전 그리드를 업데이트 할 수 있습니다.
.container {디스플레이 : 그리드; 폭 : 100vw; 높이 : 100vh; grid-template-areas : "gryffindor slytherin slytherin ravenclaw" "gryffindor slytherin slytherin ravenclaw" "gryffindor hufflepuff hufflepuff ravenclaw"; 그리드-컬럼-갭 : 10px; 그리드 행 간격 : 15px; 그리드 템플릿 열 : 200px 자동 자동 200px; 정렬 항목 : 늘이기; 양쪽 맞춤 : 늘이기; }
이것은 모두 CSS Grid의 가능성에 대한 표면을 거의 긁어 내지 않은 것입니다. 할 수있는 일이 훨씬 더 많습니다. 현재 이것은 모든 최신 브라우저에서 지원되며 IE11은 예외이지만 이전 구문을 지원합니다.
하지만 잠깐만 더 있습니다! CSS Grid를 사용하여 마침내 스트레스없이 콘텐츠를 중앙에서 정렬 할 수 있습니다.
.container {디스플레이 : 그리드; 높이 : 100vh; 장소 항목 : 센터 센터; }
다음 페이지 : CSS 필터 및 CSS 변수
