기존에 정리했던 내용을 한번에 모아서 다시 정리!

새로운 CSS

padding-block, padding-inline

padding: 10px; // top, right, bottom, left = 10px
padding: 12px 12px; // top, bottom = 12px  left, right = 12px
padding: 10px 50px 20px; // top = 10px  left, right = 50px  bottom = 20px
padding: 14px 14px 14px 14px; // top, right, bottom, left = 14px == padding: 14px

• padding 속성은 요소에 안쪽여백을 설정하는 속성

padding-block 과 padding-inline 은 어떤 여백을 설정해줄까요?

padding-block = padding-block-end, padding-block-start 속성의 단축 속성
padding-inline = padding-inline-end, padding-inline-start 속성의 단축 속성

• padding-block 과 padding-inline 속성은 writing-mode 속성에 대응하기 위해서 설계가 되었습니다.

.item {
    /* writing-mode: vertical-rl; */
    display:inline-block;
    background-color: #c8c800;
    padding: 20px;
}


<div>
	<div class="item">
  		example
	</div>
</div>

균일하게 div 요소에 안쪽여백이 20px로 설정이 되었습니다. 만약 여기서 writing-mode 를 변경하면 아래와 같은 결과가 나옵니다.

균일해서 뭐가 다른지 구분이 안됩니다. padding-top 만 적용을 해보도록 하겠습니다!

padding-top: 20px; 을 주었습니다.

writing-mode 를 변경하니, padding-top 은 무조건 상단에 여백 20px이 적용된게 확인이 가능합니다. 그런데 우리가 의도한 여백이 example 이라는 문자열 위여백이라면 어떻게 처리를 할까요?

padding-block: 20px 0;

여기서 writing-mode 를 주석처리하면 padding-top: 20px; 적용한 효과가 그대로 나타납니다.

이처럼 padding-block, padding-inline 은 요소의 쓰기모드 및 방향성, 텍스트 방향에 따라 여백을 쉽게 정의하도록 도와줍니다!

:is(), :where()

:is(), :where() 는 CSS의 가상클래스 입니다.
임의의 요소를 선택할때 유용하게 사용이 가능합니다. (IE 지원X)

<div class="box">
  <p>...</p>
</div>
<div class="box">
  <p>...</p>
</div>

.box p {
  margin : 0;
  padding : 0;
}

위와같은 마크업 구조라면, 복합 선택자로 .box 의 자손인 p 를 선택을 하실겁니다.
이걸 :is(), :where() 구문으로 변경이 가능합니다.

.box :is(p) {
  margin : 0;
  padding : 0;
}

.box :where(p) {
  margin : 0;
  padding : 0;
}

둘다 같은결과를 나타내지만, 차이점이 존재합니다. :where() 같은 경우는 특이성이 무조건 0 에서 시작을 삽니다. 그래서 스타일이 적용되는 순위가 달라집니다.
그래서 :where() 같은 경우는 되도록이면 아래에 작성하는게 좋습니다.
특이성은 CSS 적용 순위를 정합니다.

.main a:hover,
.sidebar a:hover,
.site-footer a:hover {
	color: red;
}

// :is()
:is(.main, .sidebar, .site-footer) a:hover {
	color: red;
}

// :where()
:where(.main, .sidebar, .site-footer) a:hover {
	color: blue;
}

@supports

• @supports CSS 규칙은 주어진 하나 이상의 CSS 기능을 브라우저가 지원하는지에 따라 다른 스타일 선언을 할 수 있는 방법을 제공
• @supports 는 브라우저에서 특정 셀렉터가 지원하는지도 확인이 가능

@supports (조건) { 적용할 css내용 }
@supports not (조건) { 적용할 css내용 }

/* 해당 브라우저에서 backdrop-filter 속성을 지원하면 css 적용 */
@supports (backdrop-filter: blur(10px)) {
  .container {
    backdrop-filter: blur(10px);
  }
}
/* 해당 브라우저에서 display: grid 속성을 지원하면 css 적용 */
@supports (display: grid) {
	.site-content {
		display: grid;
	}
}
/* class 선택자에 대한 동작 여부 예제 코드 */
@supports (selector(.container)) {
  .container {
    border: 10px solid black;
  }
}

flexbox gap

• flexbox 를 활용하여 레이아웃 만들때 gap 부분이 좀 아쉬었는데, 이제는 사용이 가능합니다.
• row-gap / column-gap / gap

<div class="flex-gap-test">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
</div>

.flex-gap-test {
	display: inline-flex;
	flex-wrap: wrap;
	row-gap: 10px;
    column-gap: 10px;
}

.flex-gap-test > div {
  border: 1px dotted blue;
  width: 200px;
  height: 200px;
}

custom Properties(or Variables)

• 과거에는 CSS 내에 따로 변수와 같은 속성들을 정의하지 못했습니다. CSS-preprocessor 도움을 구해야했는데, 이제는 기본기능으로 사용이 가능합니다.
• 정의하고자 하는 속성앞에 -- 붙여주면 됩니다.(대소문자 구분) / 정의를 하였으면 var() 를 통해서 문서 전체에서 사용이 가능합니다.
• :root 는 html 선택자와 동일합니다.

:root {
	--global--color-primary: #28303d;
}

a {
	color: var(--global--color-primary);
}

.social-icons a {
	background: var(--global--color-primary);
}

지원여부(https://caniuse.com/)

• padding-block, padding-inline
  IE 미지원 / Edge 87 / Chrome 87 / Safari 14.1

• :is(), :where()
  :is() : IE 미지원 / Edge 88 / Chrome 88 / Safari 14
  :where() : IE 미지원 / Edge 88 / Chrome 88 / Safari 14

• @supports
  IE 미지원 / Edge 83 / Chrome 83 / Safari 14.1

• flexbox gap
  row-gap : IE 미지원 / Edge 84 / Chrome 84 / Safari 14.1
  column-gap : IE 미지원 / Edge 84 / Chrome 84 / Safari 14.1
  gap : IE 미지원 / Edge 84 / Chrome 84 / Safari 14.1

• custom Properties(or Variables)
  IE 미지원 / Edge 16 / Chrome 49 / Safari 10
  :root : IE 9 ~ 11 / Edge 12 / Chrome 4 / Safari 3.1