개발자가 JavaScript와 CSS를 혼합하여 웹사이트를 맞춤화할 수 있도록 돕기 위해 우리는 이제 널리 사용되는 브라우저를 지원하는 새로운 CSS 속성을 개발했습니다. 그 중 일부는 아래에 나열되어 있습니다.
요소 내의 포커스 접근성을 해결하도록 설계되었습니다.
이로 인해 기본 스크롤 및 속도 저하가 가능해집니다.
도움말 설정 사용자의 장치 기본 설정에 따라 페이지의 UI 및 UX를 조정하여 더 높은 수준의 개인화를 허용합니다.
* 밝기, 강제 색상, 색 구성표, 대비, 움직임 감소 및 투명도 감소를 표현할 수 있습니다.
UI를 뷰포트 내에 유지하려면
을 사용하면 요소 내부와 주위에 동적 방향 간격을 지정할 수 있습니다.
이 속성은 이제 Flexbox에서 사용할 수 있습니다. 간격은 각 하위 요소에 고유한 간격을 지정하는 대신 컨테이너에 간격을 갖도록 설정합니다.
는 요소의 뒷면 스타일을 편리하게 지정하는 데 사용됩니다.
CSS Houdini API개발자가 사용자 정의 CSS를 읽고 이해하는 방법을 브라우저에 알릴 수 있는 하위 수준 API입니다. 이제 개발자는 CSS 개체 모델에 더 쉽게 액세스할 수 있습니다. Layout API, Paint API, Parser API, Properties & Values API, AnimationWorklet, Typed OM 및 Font Metrics API가 이 범위에 속합니다.
미디어 크기 유지
하나의 속성에 높이와 너비 설정
모든 CSS 속성에 제약 조건 설정
요소에 더 잘 맞는 이중 값 구문
목록에 사용자 정의 스타일 추가
이제 JavaScript를 사용하여 로컬 또는 원격 파일에서 특정 모듈을 요청할 수 있습니다
콘텐츠가 포함된 영역 패딩
는 CSS 그리드의 마이크로 레이아웃을 사용하여 마이크로 레이아웃을 만드는 데 도움이 됩니다.
다음 예는 이러한 속성 중 일부를 보여줍니다. -
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>
그러면 다음과 같은 결과가 생성됩니다. -
위 내용은 2020년 웹 디자인을 위한 최신 CSS 속성 및 API의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!