2020년 웹 디자인을 위한 최신 CSS 속성 및 API-CSS 튜토리얼-php.cn

2020년 웹 디자인을 위한 최신 CSS 속성 및 API

WBOY

풀어 주다： 2023-09-08 14:53:01

앞으로

1080명이 탐색했습니다.

개발자가 JavaScript와 CSS를 혼합하여 웹사이트를 맞춤화할 수 있도록 돕기 위해 우리는 이제 널리 사용되는 브라우저를 지원하는 새로운 CSS 속성을 개발했습니다. 그 중 일부는 아래에 나열되어 있습니다.

focus-within

요소 내의 포커스 접근성을 해결하도록 설계되었습니다.

scroll-snap

이로 인해 기본 스크롤 및 속도 저하가 가능해집니다.

@media(prefers-*)

도움말 설정 사용자의 장치 기본 설정에 따라 페이지의 UI 및 UX를 조정하여 더 높은 수준의 개인화를 허용합니다.

* 밝기, 강제 색상, 색 구성표, 대비, 움직임 감소 및 투명도 감소를 표현할 수 있습니다.

위치: 고정

UI를 뷰포트 내에 유지하려면

표준 레이아웃의 논리 속성

을 사용하면 요소 내부와 주위에 동적 방향 간격을 지정할 수 있습니다.

gap 속성

이 속성은 이제 Flexbox에서 사용할 수 있습니다. 간격은 각 하위 요소에 고유한 간격을 지정하는 대신 컨테이너에 간격을 갖도록 설정합니다.

backfrop-filter

는 요소의 뒷면 스타일을 편리하게 지정하는 데 사용됩니다.

CSS Houdini API

개발자가 사용자 정의 CSS를 읽고 이해하는 방법을 브라우저에 알릴 수 있는 하위 수준 API입니다. 이제 개발자는 CSS 개체 모델에 더 쉽게 액세스할 수 있습니다. Layout API, Paint API, Parser API, Properties & Values API, AnimationWorklet, Typed OM 및 Font Metrics API가 이 범위에 속합니다.

종횡비

미디어 크기 유지

size

하나의 속성에 높이와 너비 설정

min(), max() 및 클램프()

모든 CSS 속성에 제약 조건 설정

디스플레이: 외부 내부

요소에 더 잘 맞는 이중 값 구문

list-style-type

목록에 사용자 정의 스타일 추가

CSS 모듈

이제 JavaScript를 사용하여 로컬 또는 원격 파일에서 특정 모듈을 요청할 수 있습니다

CSS 영역

콘텐츠가 포함된 영역 패딩

CSS subgrid

는 CSS 그리드의 마이크로 레이아웃을 사용하여 마이크로 레이아웃을 만드는 데 도움이 됩니다.

Example

다음 예는 이러한 속성 중 일부를 보여줍니다. -

Live Demo

<!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>

로그인 후 복사