정찬명
IE를 버리면 사용할 수 있는 CSS 명세.
담당하던 서비스가 IE 브라우저를 지원하지 않게 됐는데 어떤 속성을 사용할 수 있는지 정리되어 있는 사이트를 찾지 못해서 직접 정리했다. SNS(페이스북, 트위터)를 통해 #css_props_ie11_not_supported 라는 해시 태그를 달아 공유했던 내용들을 이 페이지에 수록했다. 마이크로소프트는 2021년 부터 IE 브라우저를 더 이상 지원하지 않겠다고 발표했다.
background-clip:
background-clip 속성은 배경 영역을 설정한다.
background-clip: border-box;
background-clip: padding-box;
background-clip: content-box;
-webkit-background-clip: text; // ⚠️ 2021-07
background-clip: text;
border-box, padding-box, content-box, text⚠️ 중 하나의 값을 설정할 수 있다. 초기값은 border-box이다. text⚠️ 값은 실험중이기 때문에 속성 이름에 -webkit- 접두어를 붙여야 한다.
calc()
calc() 함수로 길이 단위에 계산식을 사용할 수 있다. 예를 들면 width: calc(100% - 3em)
width: calc(10px + 100px);
width: calc(100% - 30px);
width: calc(2em * 5); // 적어도 하나의 인자는 반드시 <number>.
width: calc(100% / 4); // 오른쪽 인자는 반드시 <number>.
width: calc(var(--variable-width) + 20px);
+, - 연산자는 좌우에 공백이 필수다. *, / 연산자는 좌우 공백이 필요하지 않지만 일관성을 위해 띄우는 편이 좋다.
ch unit
현재 글꼴에서 문자 ‘0’의 폭을 나타내는 단위로 주로 고정폭 글꼴에서 사용.
width: 80ch;
all:
all 속성은 모든 CSS 속성을 재설정하기 위한 단축 속성이다.
all: initial; // 모든 속성을 initial 값으로 재설정.
all: inherit; // 모든 속성을 부모 요소로부터 inherit.
all: unset; // 상속 가능한 속성은 inherit, 비상속 속성은 initial.
all: revert; // 상속 가능한 속성은 inherit, 비상속 속성은 UA 스타일로 초기화.
:any-link
:any-link 가상 클래스 선택자는 하이퍼링크 자원을 연결하는 역할을 하는 요소를 선택한다. 결과적으로 [href] 속성 선택자와 같다.
:any-link { color: red; }
<a href="https://ex.com/"> // :any-link 선택
<a href="#"> // :any-link 선택
<a> // :any-link 선택 안 함
appearance: ⚠️
주로 폼 콘트롤 요소의 기본 스타일을 제어하는 속성. 값을 none으로 설정하면 UA 스타일을 사용자 정의 스타일로 덮어 쓸 수 있다.
-webkit-appearance: none; // ⚠️실험중(2021-07)
appearance: none;
none 외에도 다양한 값이 있다. 자세한 내용은 w3c 명세 참고.
background-blend-mode:
배경에 쌓은 ‘이미지, 그라디언트, 색’을 혼합할 수 있다.
background-image:
linear-gradient(#f00, #f00), /* Red */
linear-gradient(#0f0, #0f0), /* Green */
linear-gradient(#00f, #00f); /* Blue */
background-blend-mode: normal; /* 초기 값; 혼합 X ➡️ Red */
background-blend-mode: multiply; /* 감산 혼합 ➡️ Black */
background-blend-mode: screen; /* 가산 혼합 ➡️ White */
다양한 <blend-mode> 값이 있다.
box-decoration-break: ⚠️
줄바꿈, 컬럼 나누기 등으로 박스가 분리되었을 때 절단된 가장자리를 처리하는 방식을 결정한다.
-webkit-box-decoration-break: slice; // ⚠️실험중(2021-07)
box-decoration-break: slice;
-webkit-box-decoration-break: clone; // ⚠️실험중(2021-07)
box-decoration-break: clone;
background, border, box-shadow 등의 속성에 영향을 준다. 초기값은 slice이다.
caret-color:
텍스트 입력이 가능한 곳에 표시하는 입력 커서의 색상을 설정할 수 있다.
caret-color: red;
초기값은 auto이며 보통 검은색이다. 대비를 보장하기 위해 다른 색을 표시할 수 있다.
case-insensitive attribute selector
속성 선택자를 기술할 때 대괄호 ] 종료 전 i를 포함하면 속성 값의 대소문자를 구별하지 않고 선택할 수 있다.
[data-case='a' i] // 아래 두 요소를 모두 선택한다.
<p data-case="a">
<p data-case="A">
i 대신 s 문자를 사용하면 대소문자를 구별해서 선택할 수 있다. 그러나 CSS 속성 선택자에서 속성 값은 기본적으로 대소문자를 구별하기 때문에 s 구문을 명시하는 경우는 드물다.
clip-path:
clip-path 속성은 모양을 지정하여 표시 영역을 정의하는 속성이다. 다양한 도형으로 잘라낸 표현을 할 수 있다.
clip-path: none; // 초기값; 적용 X
clip-path: inset(25% 35%); // 사각형
clip-path: circle(48px at center); // 원형
clip-path: polygon(50% 20%, 30% 80%, 70% 80%); // 다각형
clip-path: url(#clipPath); // <svg> 요소의 <clipPath> 참조
⚠️ 사파리, 삼성 인터넷 브라우저는 속성 이름에 -webkit- 접두어를 표시해야 한다.
conic-gradient()
conic-gradient() 함수는 원뿔형 색상 그라데이션을 생성할 수 있다.
background-image: conic-gradient(black, white); // 중심 축 우회전
background-image: conic-gradient(from 45deg, black, white); // 시작 각
background-image: conic-gradient(at 25% 75%, black, white); // 회전 축
background-image: conic-gradient(from 45deg at 25% 75%, black, white); // from at 순서 필수
:default
:default 기본 옵션 가상 클래스 선택자는 checked 속성을 가진 체크박스 또는 라디오 버튼을 선택한다. 또는 form 요소에서 submit 타입을 가진 첫 번째 버튼을 선택한다. 초기값을 사용자에게 인지시켜야 하는 맥락에서 유용하다. 예를 들면 초기값을 권장값으로 두거나 반드시 선택해야 하는 경우.
:default + label { ... } // == [checked] + label
button:default { ... } // == form button[type='submit']
사용자의 선택은 이 선택자의 선택 결과에 영향을 주지 않는다. 오직 HTML에 속성으로 명시한 checked 속성 또는 submit 타입을 선택한다.
env()
UA가 정의하는 환경 변수(safe-area-inset-*) 인자를 CSS 코드에 전달하는 함수. 사용자 속성(--*)을 인자로 취하는 var() 함수와 용법이 비슷하다.
/* 이 코드는 iPhone X 이상 사파리 브라우저에서 .fixed 요소가 단말기 하단 UA 인터페이스와 겹치지 않도록 배치한다. */
.fixed {
position: fixed;
bottom: env(safe-area-inset-bottom);
background: coral;
}
CSS 값을 사용할 수 있는 다양한 위치(예를 들면 @ 규칙 또는 calc() 함수 인자)에서 사용할 수 있다. env() 인자 작성 위치에 쉼표(,)를 사용하면 폴백으로 사용할 수 있는 값을 추가할 수 있다.
@supports
@supports 규칙은 기능 쿼리(feature queries)라고 부른다. CSS 속성과 값 지원 여부를 소괄호() 안에서 테스트하고 그 결과를 이용하여 중괄호{} 코드 블록의 적용 여부를 결정한다.
@supports (display: grid) {
.column { display: grid; }
}
@supports not (display: grid) {
.column { display: flex; }
}
@supports (*) and (*) or (*) {*} // 🚫
@supports (*) and ((*) or (*)) {*} // 👍
@supports (*) and not (*) {*} // 🚫
@supports (*) and (not (*)) {*} // 👍
미디어 쿼리 등 다른 규칙의 하위 규칙으로 사용할 수 있다. and, or, not 연산자를 사용할 수 있다. 종류가 다른 연산자를 함께 사용하는 경우 소괄호()로 우선 순위를 정의해야 한다.
filter:
카메라 필터 효과를 재현할 수 있다.
filter: blur(4px);
filter: grayscale(100%);
filter: brightness(50%);
취할 수 있는 값으로 grayscale, sepia, saturate, hue-rotate, invert, opacity, brightness, contrast, blur, drop-shadow 가 있다.
:focus-within
자신이 직접 초점을 받았거나 초점 받은 요소를 포함하고 있을 때 선택한다.
fieldset:focus-within { background: silver; }
예제는 fieldset 요소 내부에 초점 받은 요소가 있는 경우 선택한다.
font-display:
웹 폰트를 완전히 로딩하기 전 글꼴을 어떻게 표시할지 결정한다. @font-face 규칙에 사용할 수 있다. 보통 대체 글꼴 표시 후 로딩한 글꼴로 바꿔 표시하는 swap 값을 권장한다.
@font-face {
src: ...;
font-family: ...;
font-display: swap;
...
}
초기값은 auto로 UA가 결정하지만 대부분 block처럼 동작한다. block은 3초 동안 글꼴을 표시하지 않다가, 이후 대체 글꼴을 표시하고, 로딩 완료 후 웹 폰트를 표시한다. 3초 동안 FOIT(Flash Of Invisible Text) 현상을 유발하기 때문에 보통의 상황에서 권장하지 않는다. swap값은 먼저 대체 글꼴 표시 후, 로딩이 끝나면 웹 폰트를 표시한다. FOUT(Flash Of Unstyled Text) 방식이라고 부른다. fallback값은 먼저 대체 글꼴 표시 후, 웹 폰트 로딩이 3초(UA 권장) 안에 끝나면 웹 폰트를 로딩하고, 그렇지 않으면 영원히 대체 글꼴을 표기한다. optional값은 대체 글꼴 표시 후, 사용자의 회선 상태에 따라 웹 폰트 표시 여부를 웹 브라우저가 결정한다.
grid layout
격자를 이용하여 내용의 크기와 위치를 제어하고 배치하는 방법이다. flex가 하나의 축을 중심으로 내용을 배치하는데 반해 grid는 두 개의 축을 이용하여 내용을 배치한다. 특히 셀 병합과 같은 기능을 제공한다. 다른 수단에 비해 짧은 코드로 다양한 배치를 구현할 수 있다.
display: grid;
grid: auto / auto 1fr 25% 100px;
container, item, track, row, column, line, gutter, cell, area 개념을 사용한다. grid 키워드는 display 속성의 값이기도 하고 그리드 컨테이어에 적용하는 다양한 grid-*-* 속성의 단축 속성 이름이기도 하다.
image-set() ⚠️
해상력과 이미지 타입으로 CSS 배경 이미지를 분기할 수 있다.
background-image: url('fallback.png');
/* Supports retina image */
background-image: image-set(
'super.png' 2x,
'normal.png' 1x
);
/* Supports avif format */
background-image: image-set(
'super.avif' type('image/avif'),
'normal.jpg' type('image/jpeg')
);
제조사 접두어를 붙여야 한다. -webkit-image-set() ⚠️실험중(2021-07)
:in-range, :out-of-range
input 요소의 값을 min, max 속성으로 제한했을 때 value 값이 범위에 포함되는지 여부에 따라 선택한다. 값이 비어있는 경우에는 선택하지 않는다.
<label for="age">Age:</label>
<input id="age" type="number" min="1" max="99" placeholder="1~99">
#age:in-range { color: blue; }
#age:out-of-range { color: red; }
적절한 값을 입력했는지 시각적 단서를 제공하는 데 그쳐야 한다. 예를 들어 다음과 같이 가상 요소 선택자를 통해 메시지를 제공하는 코드는 보조 기기가 해석하지 않으므로 접근성이 없다.
<label for="age">DO NOT THIS:</label>
<input id="age" ... min ... max>
<p>Your value is </p>
#age:in-range + p::after { content: 'valid scope!'; } // 🚫
#age:out-of-range + p::after { content: 'out of scope!'; } // 🚫
:indeterminate
상태가 정해지지 않은 폼 콘트롤 요소를 선택한다. input 요소 중 checkbox 타입, radio 타입, progress 요소의 미정(indeterminate) 상태를 선택할 수 있다.
input:indeterminate { ... }
progress:indeterminate { ... }
checkbox 요소의 checked 상태가 true도 아니고 false도 아닐 때 선택. radio 그룹에서 어떤 요소도 checked 상태가 아닐 때 선택. progress 요소에 value 값을 지정하지 않았을 때 선택.
line-clamp: ⚠️
텍스트 콘텐츠가 박스를 넘치는 경우 설정한 위치에서 말줄임 기호를 표시할 수 있다.
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; /* Ellipsis position */
overflow: hidden;
text-overflow: ellipsis;
max-height: calc(16px * 1.5 * 3); /* Max height of the box */
font-size: 16px;
line-height: 1.5;
w3c 초안에서는 max-lines, block-ellipsis, continue의 단축 속성으로 설명하고 있지만 브라우저에서 아직 구현 전.(2021-07)
::marker
목록 마커 스타일 또는 마커 기호를 사용자 정의할 수 있다. 사파리 브라우저는 마커 스타일 변경을 지원하지만 content 변경을 지원하지 않는다.⚠️
li::marker {
font-size: 32px;
color: royalblue;
font-weight: 700;
}
li::marker {
content: '💁♀️ '; // Safari not supports ⚠️
}
min(), max(), clamp()
비교 함수라고 부른다. 계산식으로 구성한 여러 인자 중 하나의 값을 반환한다. min() 함수는 작은 값을 반환하고 max() 함수는 가장 큰 값을 반환한다. clamp() 함수는 ‘최솟값, 선호값, 최댓값’ 이렇게 3개의 인자로 구성한다.
width: min(240px, 48%); // 가장 작은 평가값 반환
width: max(240px, 48%, 72vw); // 가장 큰 평가값 반환
width: clamp(240px, 48%, 24vw * 3); // 최솟값 ~ 최댓값 사이의 선호값 반환
calc() 함수의 모든 인자 형식은 비교 함수에서도 사용할 수 있다. 선호값은 최솟값과 최댓값 사이를 벗어나지 않는다.
interaction @media features
상호작용 미디어 피처를 통해 포인팅 장치의 유무와 정확도 그리고 호버 가능 여부를 판단할 수 있다. 이 기능을 사용할 때 포인팅 장치를 사용할 수 없는 사용자를 차별하지 않도록 주의해야 한다.
@media (pointer: fine) {
/* 정밀한 포인팅 장치에 대응(마우스, 터치 패드, 스타일러스 펜) */
}
@media (pointer: coarse) { // coarse[kɔːrs] == '거친, 굵은'
/* 정밀하지 않은 포인팅 장치에 대응(스마트폰, 터치 스크린, 닌텐도) */
}
@media (pointer: none) {
/* 포인팅 불능 장치에 대응(방향 키패드) */
}
@media (hover: none) {
/* hover 불능 장치에 대응(방향 키패드) */
}
@media (hover) { // (hover: hover)의 약식 표기
/* hover 장치에 대응(마우스, 터치 패드, 스타일러스 펜, 닌텐도) */
}
any-pointer, any-hover 인자는 참으로 판단할 수 있는 상황을 더 확장하는 방향으로 작용하기 때문에 더욱 주의해서 사용해야 한다. 예1) 데스크톱/노트북이 터치 스크린을 지원할 때 pointer: coarse은 false로 평가하지만 any-pointer: coarse 인자는 true로 평가한다. 예2) 터치 스크린 장치(예: 태블릿)에 마우스를 연결한 경우 pointer: fine 인자는 false로 평가하지만 any-pointer: fine 인자는 true로 평가한다. 예3) 터치 스크린 장치(예: 태블릿)에 마우스를 연결한 경우 hover 인자는 false로 평가하지만 any-hover: hover 인자는 true로 평가한다.
::placeholder
자리 표시자 텍스트를 스타일링할 수 있다.
::placeholder {
font-size: 16px;
color: #767676; /* Contrast ratio required */
}
자리 표시자는 입력하는 순간 시야에서 사라지기 때문에 접근성 문제가 있다. 가능하다면 항상 힌트를 제공하는 방식을 추천한다. 닐슨 노먼 그룹의 자리 표시자 관련 기사를 참고하길 바란다.
:placeholder-shown
자리 표시자 화면 표시 상태를 선택한다. 사용자가 값을 입력하기 시작하면 자리 표시자가 사라지면서 선택을 해제한다. :not() 선택자를 이용하면 자리 표시자 비활성 상태를 선택하는 것도 가능하다.
:placeholder-shown {
/* 자리 표시자 활성 스타일 */
}
[placeholder]:not(:placeholder-shown) {
/* 자리 표시자 비활성 스타일 */
}
:read-only, :read-write
‘읽기 전용, 읽고 쓰기’ 요소를 선택할 수 있다. 선택하는 요소가 폼 콘트롤로 제한되어 있지 않다. 폼 콘트롤 아닌 대부분의 읽기 전용 요소는 :read-only로 선택된다. input, textarea 뿐만 아니라 contenteditable 속성이 있으면 :read-write 선택자로 선택한다. p, select 요소는 :read-only와 일치한다.
#rrggbbaa, #rgba
red, green, blue, alpha 색상을 16진수 방식으로 표기할 수 있다. 각 색상 채널은 00 ~ ff 까지 256 단계로 표현할 수 있다. alpha 채널은 00일 때 투명하고 ff일 때 불투명하다.
/* 알파값이 '00'이므로 완전 투명 */
background: rgba(0,0,0,0);
background: #00000000;
background: #0000;
/* 알파값이 '80'이므로 50% 투명 */
background: rgba(0,0,0,.5);
background: #00000080;
/* 알파값이 'ff'이므로 완전 불투명 */
background: rgba(255,255,255,1);
background: rgb(255,255,255);
background: #ffffffff;
background: #ffff;
background: #fff;
shape-outside:, shape-margin:, shape-image-threshold:
float 스타일을 확장하는 속성이다. float 요소 주변의 인라인 텍스트가 흐르는 형태를 정의한다. shape-outside 속성은 <basic-shape> 형태 함수를 지원한다. url() 값을 사용하면 이미지 알파 채널 기반으로 인라인 텍스트가 흐르도록 만드는 것도 가능하다.
/* <basic-shape> 기반 */
shape-outside: circle(120px at 0 -8px);
shape-margin: 16px;
/* 이미지 알파 채널 기반 */
shape-outside: url(...);
shape-margin: 16px;
shape-image-threshold: 0;
외부 이미지 자원은 이미지를 제공하는 서버측 CORS 설정에 따라 표시 여부가 결정된다. 외부 이미지 자원의 CORS가 허용되지 않으면 shape-outside 속성은 무시된다.
scroll-snap-type:, scroll-snap-align:
설정한 축(x, y, both…)으로 스크롤할 때 자손 아이템이 스크롤 컨테이너에 들러붙는 성질(proximity, mandatory)을 제어할 수 있다.
html {
scroll-snap-type: y proximity;
}
h1, h2, h3, h4, h5, h6 {
scroll-snap-align: start;
}
scroll-snap-type의 값은 none \| [x|y|block|inline|both] [mandatory|proximity]? 형식으로 표현할 수 있다. scroll-snap-align의 값은 [none|start|end|center]{1,2} 형식으로 표현할 수 있다.
scroll-margin, scroll-padding 속성으로 스냅 위치를 정밀하게 제어할 수 있다.
position: sticky
가장 가까운 스크롤 포트가 배치 기준. 부모 요소가 스크롤 포트에 보이는 동안 스크롤 포트(스크롤 컨테이너) 기준으로 고정. 부모 요소가 스크롤 밖으로 이탈하면 고정을 멈춤. 스크롤 포트, 부모 요소, 스티키 요소의 상태가 트리거.
.scroll { overflow: auto; } /* 스크롤 포트 */
.parent { ... } /* 이 요소가 보이면 .sticky 요소는 스크롤 포트에 고정 */
.sticky { position: sticky; top: 4px; } /* 고정하는 요소 */
text-orientation:
텍스트 방향(writing-mode)이 세로 모드인 경우 알파벳과 CJK 문자를 어떤 방향으로 회전하여 표시할지 결정하는 속성.
writing-mode: vertical-rl;
text-orientation: mixed | upright | sideways;
초깃값 mixed는 알파벳을 눕히고 CJK는 세움. upright 값은 세움으로 통일. sideways 값은 눕히는 방향으로 통일. W3C 명세 예시를 참고할 것.
var(–my-value, fallback)
재사용하려는 CSS 속성의 값을 변수에 담아 정의할 수 있다. 변수 이름은 이중 하이픈과 대소문자를 구별하는 문자의 조합(--*) 규칙을 따른다. 변수의 사용 범위는 선택자로 제한할 수 있다. 변수를 사용하려는 곳에서 var() 함수와 인자를 선언한다. 인자는 쉼표(,)와 함께 폴백을 제공할 수 있다.
/* Defining custom property */
:root { --main-color: navy; }
/* Using variable */
p { color: var(--main-color, black); }
var() 함수에 유효하지 않은 값이 들어있는 경우 제공한 폴백이 있는지, 상속 받은 값이 있는지 순서대로 확인하고 유효한 값이 없으면 마지막으로 initial에 해당하는 값을 적용한다.
tab-size:
탭 문자(U+0009)를 표시할 때 탭 문자의 크기를 결정하는 속성이다. 초깃값은 숫자 8으로 숫자 값은 공백 문자(U+0020)의 배수를 의미한다. 음수는 허용하지 않는다.
tab-size: <number> | <length>
일반적인 상황이라면 <number> 값을 사용하는 것이 적절해 보인다.
display: flow-root
블록 상태가 된다. block과 다른 점은 포함 콘텐츠가 새 블록 형식 문맥(block formatting context)을 형성한다. 자식 요소의 float, margin 속성을 다르게 처리한다. 컨테이너 끝에서 float은 해제되고, 부모와 자식 사이의 수직 margin은 병합하지 않는다.
.flow-root { display: flow-root; }
.float-child { float: left; } /* 부모 요소의 높이에 영향을 미침 */
.margin-child { margin: 32px; } /* 부모-자식 수직 마진 중첩 안 됨 */
font-family: system-ui
웹 글꼴을 OS(운영 체제) 기본 글꼴로 표시할 수 있다.
font-family: system-ui;
font-kerning: ⚠️
font-kerning 속성은 글자 모양 때문에 배열이 어색한 문자에 적당한 간격을 두어 시각적으로 매끄럽게 보이도록 조정한다. 커닝 활성화가 가능한 오픈타입(.otf)⚠️ 글꼴에만 적용할 수 있다. 초기값은 auto이고 브라우저 설정에 따르는데 보통은 normal과 같다. none 값은 글자 사이 간격을 보정하지 않는다.
font-kerning: auto | normal | none;
font-variant-numeric: ⚠️
오픈타입(.otf)⚠️ 글꼴에서 숫자의 모양을 제어할 수 있다. 오픈타입 글꼴은 다양한 변형을 제공하기 때문에 가변 글꼴이라고 부르기도 한다. 오픈타입 글꼴이라고 해서 모든 형태의 값을 지원하는 것은 아니다.
normal | [ <numeric-figure-values> || <numeric-spacing-values> || <numeric-fraction-values> || ordinal || slashed-zero ]
font-variant-numeric: normal; // 적용하지 않음
font-variant-numeric: lining-nums | oldstyle-nums; // 숫자의 수직 위치
font-variant-numeric: proportional-nums | tabular-nums; // 숫자의 폭
font-variant-numeric: diagonal-fractions | stacked-fractions; // 분수 표현
font-variant-numeric: ordinal; // 서수를 위첨자로
font-variant-numeric: slashed-zero; // 숫자 0에 슬래시 포함
justify-content: space-evenly
다중 열 컨테이너, 플렉스 컨테이너, 그리드 컨테이너에 적용할 수 있는 수평 정렬 옵션 중 하나로 컨테이너와 아이템 사이에 발생하는 모든 공간의 크기가 균일하다.
justify-content: space-evenly
object-fit:, object-position:
너비와 높이를 고정한 박스에서 이미지(img) 또는 영상(video) 콘텐츠의 ‘비율, 크기, 위치’를 결정한다. 콘텐츠의 비율을 원본과 동일하게 유지해 주는 contain, cover와 같은 값이 유용하다.
object-fit: contain | cover;
object-position: 80px 160px;
place-content:, place-items:, place-self:
주로 grid 또는 flexbox 컨테이너 또는 아이템에 사용한다. place-content 속성은 align-content, justify-content 속성의 단축 속성이다. place-items 속성은 align-items, justify-items 속성의 단축 속성이다. 여러 행 또는 열로 구성된 ‘콘텐츠’ 또는 ‘아이템’들의 배치 방향(흐름 방향 X)을 한 번에 설정할 수 있다. place-self 속성은 그리드 아이템과 블럭 수준의 박스에 적용할 수 있다.
place-content: <'align-content'> <'justify-content'>?
// Applies to block containers, flex containers, and grid containers.
place-items: <'align-items'> <'justify-items'>?
// Applies to all elements.
place-self: <'align-self'> <'justify-self'>?
// Applies to block-level boxes, absolutely-positioned boxes, and grid items.
두 번째 값을 생략하면 첫 번째 값이 복사된다. 값이 하나라도 유효하지 않으면 두 값을 모두 무시한다. flexbox에서는 place-items, place-self 속성의 두 번째 값에 해당하는 justify-items, justify-self 속성이 유효하지 않기 때문에 두 번째 값을 선언하면 모든 값을 무시한다.
prefers-color-scheme @media feature
사용자가 색상 테마를 운영 체제에 설정했는지 감지하는 미디어 쿼리.
@media (prefers-color-scheme: light) {
body {
background: yellow;
color: navy;
}
}
@media (prefers-color-scheme: dark) {
body {
background: navy;
color: yellow;
}
}
prefers-reduced-motion @media feature
사용자가 동작 줄이기를 운영 체제에 설정했는지 감지하는 미디어 쿼리.
@media (prefers-reduced-motion: no-preference) {
a:hover,
a:focus {
transform: scale(1.2);
transition: .4s;
}
}
@media (prefers-reduced-motion: reduce) {
a:hover,
a:focus { transition: 0s; }
}
text-decoration-*:, text-underline-position:
text-decoration 속성의 확장 속성과 값을 명시한다. 선의 위치, 종류, 색상을 설정할 수 있다.
text-decoration: <'text-decoration-line'> || <'text-decoration-style'> || <'text-decoration-color'>
text-decoration-line: none | [ underline || overline || line-through || blink ]
text-decoration-style: solid | double | dotted | dashed | wavy
text-decoration-color: <color>
text-underline-position: auto | [ under || [ left | right ] ]
text-emphasis-*:
텍스트에 강조 마크를 적용할 수 있다. dot, <string>, <color> 값이 유용해 보인다.
text-emphasis: <'text-emphasis-style'> || <'text-emphasis-color'>
text-emphasis-style: none | [ [ filled | open ] || [ dot | circle | double-circle | triangle | sesame ] ] | <string>
text-emphasis-color: <color>
text-emphasis-position: [ over | under ] && [ right⚠️ | left⚠️ ]?
text-emphasis-position 속성의 값인 right, left는 현재(2021-07) 파이어폭스와 사파리만 지원 중.
will-change:
어떤 스타일을 변경하는지 브라우저에 미리 알려주는 속성으로 렌더링 성능을 최적화할 수 있다. 너무 많이 선언하면 오히려 좋지 않다. 필요한 시점에만 이 속성을 추가한 다음 변경이 끝나면 제거하는 것이 좋다. 빈번한 변경이 예상되는 곳에는 영구적으로 선언하는 것이 좋다.
will-change: auto | <animateable-feature>#
<animateable-feature> = scroll-position | contents | <custom-ident>
<custom-ident> = transform | opacity ...
a {
transform: scale(1);
opacity: .75;
transition: opacity .2s;
}
a:hover,
a:focus { will-change: transform, opacity; }
a:active {
transform: scale(1.2);
opacity: 1;
}
inset:
top, right, bottom, left 속성의 값을 하나의 inset 단축 속성으로 선언할 수 있다. inset 속성은 position 속성이 relative, absolute, fixed인 경우에만 적용할 수 있다.
inset: 0;
==
inset: 0 0;
==
inset: 0 0 0 0;
==
top: 0;
right: 0;
bottom: 0;
left: 0;
inset 속성은 inset-*-* 속성의 단축형이다. inset 방향은 writng-mode, direction, text-orientation 속성에 따라 다르게 맵핑된다.
:is()⚠️, :not()⚠️, :has()⚠️, :where()⚠️
⚠️2021-07 현재 브라우저 구현이 미진해서 실무에 사용하기 조심스럽다. 선택자 목록을 인자로 취하는 함수형 가상 클래스 선택자. 인자로 받은 선택자 목록 중 오류가 있어도 다른 선택자는 유효하게 선택할 수 있어 기존의 선택자 그룹과 다르다. :is(), :not(), :has() 선택자는 스스로 특이성에 관여하지 않고 인자로 받은 선택자 목록 중 가장 특이성이 높은 선택자의 특이성 점수를 자신의 특이성 점수로 취한다. :where() 선택자는 :is() 선택자와 쓰임이 같지만 어떤 인자를 받아도 특이성 점수가 항상 ‘0’이다.
:is(#a, .a) // 일치하면 선택. [엣지, 삼성인터넷 선택자 목록 지원 안 함](https://caniuse.com/mdn-css_selectors_is_forgiving_selector_list).⚠️
:not(#a, .a) // 제외한 나머지 모두 선택. [삼성인터넷 선택자 목록 지원 안 함](https://caniuse.com/css-not-sel-list).⚠️
:has(#a, .a) // 자손을 포함하고 있으면 선택. [아직 지원 브라우저 없음](https://caniuse.com/css-has).⚠️
:where(#a, .a) // :is()와 용법 동일. 그러나 특이성에 관여하지 않음. [삼성인터넷 선택자 목록 지원 안 함](https://caniuse.com/mdn-css_selectors_where_forgiving_selector_list).⚠️
삼성인터넷이 선택자 목록을 지원하지 않기 때문에 단일 선택자만을 인자로 사용한다고 가정하면 :not()을 사용할 수 있고 구형 문법 :-webkit-any()을 사용한다면 :is() 까지 사용할 수 있다.(2021-07⚠️)
:focus-visible
키보드 초점을 받은 요소를 선택한다. :focus와 다른 점으로 :focus-visible은 마우스 클릭으로 초점을 받은 요소는 선택하지 않는다.
/* As is */
:hover,
:focus { ... }
/* To be */
:hover,
:focus-visible { ... }
:hover와 :focus를 같은 스타일로 처리하면 마우스를 사용하는 환경에서 클릭 받은 요소(:focus)와 호버(:hover) 스타일을 동시에 표시하기 때문에 문제가 될 수 있다. :focus-visible 선택자는 키보드 초점만 선택하기 때문에 마우스에 의해 두 요소가 동시(클릭 + 호버)에 초점 스타일을 표시하는 문제를 해결할 수 있다.