개발자가 JavaScript와 CSS를 혼합하여 웹 사이트를 사용자 정의할 수 있도록 새로운 CSS 속성이 개발되었으며 이제 인기 있는 브라우저를 지원합니다. 이들 중 일부는 아래에 나열되어 있습니다 -
포커스 내
요소 내에서 포커스 접근성을 해결하는 것을 목표로 합니다.
스크롤 스냅
이렇게 하면 기본 스크롤 및 감속이 가능합니다.
@media(-* 선호)
사용자의 디바이스 선호도에 따라 페이지의 UI와 UX를 동시에 설정할 수 있도록 도와줌으로써 더 높은 수준의 개인화를 가능하게 합니다.
* 밝기 수준, 강제 색상, 색 구성표, 대비, 움직임 감소 및 투명도 감소를 나타낼 수 있습니다.
위치:고정
뷰포트 내에서 UI를 유지합니다.
표준 레이아웃을 위한 논리적 속성
요소 내 및 요소 주위에 동적 방향 간격을 가질 수 있습니다.
갭 속성
이 속성은 이제 flexbox에 사용할 수 있습니다. 간격은 각 자식 요소에 고유한 간격이 있는 대신 간격을 소유하도록 컨테이너를 설정합니다.
백프롭 필터
요소 뒤에 스타일을 편리하게 설정합니다.
CSS 후디니 API
개발자가 사용자 정의 CSS를 읽고 이해하는 방법을 브라우저에 알릴 수 있는 기능을 개발자에게 제공하는 저수준 API입니다. CSS 개체 모델은 이제 개발자가 더 소비 가능한 방식으로 액세스할 수 있습니다. Layout API, Paint API, Parser API, Properties &Values API, AnimationWorklet, Typed OM 및 Font Metrics API가 이 아래에 있습니다.
종횡비
미디어 크기 유지
크기
하나의 속성에서 높이와 너비 설정
최소(), 최대() 및 클램프()
모든 CSS 속성에 대한 제약 조건 설정
디스플레이:외부 내부
더 잘 맞는 요소를 위한 두 가지 값 구문
목록 스타일 유형
목록에 사용자 정의 스타일 추가
CSS 모듈
이제 JavaScript를 사용하여 로컬 또는 원격 파일에서 특정 모듈을 요청할 수 있습니다.
CSS 영역
콘텐츠로 영역 채우기
CSS 하위 그리드
CSS 그리드에서 마이크로 레이아웃으로 마이크로 레이아웃을 만드는 데 도움이 됩니다.
예시
다음 예는 이러한 속성 중 일부를 보여줍니다 -
<!DOCTYPE html>
<html>
<head>
<style>
* {
margin: 2%;
text-align: center;
}
:is(header, main, footer) span:after {
content: " Awesome!";
box-shadow: inset 0 0 8px lightgreen;
font-size: 1.2em;
font-family: Calibri;
}
:-webkit-any(header, div, section) span:after {
content: " Awesome!";
box-shadow: inset 0 0 8px lightgreen;
font-size: 1.2em;
font-family: Calibri;
}
:-moz-any(header, div, section) span:after {
content: " Awesome!";
box-shadow: inset 0 0 8px lightgreen;
font-size: 1.2em;
font-family: Calibri;
}
:matches(header, div, section) span:after {
content: " Awesome!";
box-shadow: inset 0 0 8px lightgreen;
font-size: 1.2em;
font-family: Calibri;
}
</style>
</head>
<body>
<header>
<span>:is() operator is</span>
</header>
<div>
<span>DEMO</span>
<span>Alt + F4</span>
<span>Enter</span>
</div>
<section>
<span>Howzit?</span>
</section>
</body>
</html> 출력
이것은 다음과 같은 결과를 생성합니다 -
예시
<html>
<head>
<style>
#parent {
margin: 8%;
background-image: url("https://images.unsplash.com/photo-1611081352477- 9f1477ec09ae?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&ixlib=rb1.2.1&q=80&w=400");
padding: 2%;
width: 200px;
height: 200px;
box-shadow: 0 0 20px rgba(100,0,40,0.8);
}
h2 {
margin-top: 20vh;
backdrop-filter: invert(1);
}
</style>
</head>
<body>
<div id="parent">
<div>
<h2>Watch this cool effect</h2>
</div>
</div>
</body> 출력
이것은 다음과 같은 결과를 생성합니다 -
