일부 css 관련 지식 총결

1467 단어
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;
}
    ASP.NET MVC 통합 예외 처리
    EXT 3.x 자세히 설명된 Ext.History 브라우저의 앞뒤로 기능(1) 사용

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage