일부 css 관련 지식 총결

1. @supports
간단한 소개

@supports는 css에서 브라우저가 어떤 css 문법 기능을 지원하는지 검사하는 데 사용되는 탭입니다. @media와 마찬가지로 or (또는), and (그리고), not (비) 키워드를 지원하여 논리적 판단을 합니다.다음은 supports를 사용하여 브라우저가 flex를 지원하는지 확인하는 예시 코드입니다:

@supports (display: -webkit-flex) or
          (display: -moz-flex) or
          (display: flex) {
    div { display: flex; }
}

현대 브라우저는 대부분 flex 문법을 지원하기 때문에 더 이상 supports로 판단할 필요가 없지만 앞으로도 새로운 문법이 추가되어 호환이 필요할 수 있다. 이것은 점진적인 강화와 우아한 강등 개념, 예를 들어 다음에 말한 아이폰X와 어울린다.

아이폰X

아이폰X가 출시된 후 특수한 핸드폰 스크린 때문에 특정한 어댑터를 만들어야 하기 때문에 여기서supports로 측정할 수 있다

/*     ios11 */
@supports (padding: constant(safe-area-inset-top)) or (padding: env(safe-area-inset-top)) {
  body > header {
    background: #fff;
    padding-top: constant(safe-area-inset-top);
    padding-top: env(safe-area-inset-top);
  }
}

위에는 우리 프로젝트에서 머리를 아이폰X에 맞게 하는 코드가 있는데 그중에constant과 env가 사용되었다. 새로운 방법으로 아이폰X의 맞춤법 문제를 해결하는 셈이다(구체적 용법은 나도 잘 모르겠다). 그리고 supports를 사용하여 지원 여부를 검사한다.

2. 스크롤 막대 숨기기

웹키 내장 브라우저에서 css 코드를 초기화할 수 있습니다.

::-webkit-scrollbar{
  display:none;
}
.className::-webkit-scrollbar{
  width: 0;
}

3. 컨텐츠 복제/선택 불가

페이지의 일부 내용을 선택할 수 없으면 사용자가 페이지 내용을 복사하는 것을 금지하고 다음과 같은 스타일을 추가할 수 있다.

p {
  -webkit-user-select: none; 
  -ms-user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  user-select: none;
}