Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |
Tags
- 코딩테스트
- 웹폰트
- 코드다이어리
- HASH
- Pseudo
- row-gap
- 코딩일기
- sass
- CSS
- tailwindcss
- 코딩퀴즈
- property
- JavaScript
- column-gap
- display
- 친해지기
- DOM
- HTML
- Flex
- Coda
- Grid
- js
- 코딩문제
- regexp
- 코드일기
- 가상클래스
- CLASS
- 선택자
- frontend
- 정규식표현
Archives
- Today
- Total
< Code diaries />
@support 본문
1. 브라우저의 css 속성 지원여부에 따라 다른 값을 지정할 수 있다.
// 모든 브라우저에 적용되는 기본값 지정
.wrap {
display:flex;
}
// 만약 브라우저가 grid를 지원한다면
@supports(display:grid) {
.wrap {
display:grid;
}
}
// 만약 브라우저가 flex를 지원하지 않는다면
@supports not ( display:flex ) {
.wrap {
float:left;
}
}
2. 논리 연산자 사용가능
// 부정을 부정하여 무효화 하기 가능
@supports not ( not( display:flex ) ) {
}
// 논리연산자 함께 쓰기
// flex와 grid를 둘다 지원하지 않는다면
@supports not ( (display:flex) and (display:grid) ) {
}
// flex 또는 grid를 둘중 하나라도 지원하지 않는다면
@supports not ( (display:flex) or (display:grid)) {
}
3. Selector 지원여부 확인 가능
// 브라우저가 :first-chlid 가상클래스를 지원한다면
@supports selector(:first-child) {
div:first-child {
color:tomato;
}
}
반응형
'CSS - Advanced' 카테고리의 다른 글
@at-rule - @property - css 변수를 효율적으로 관리 (0) | 2024.06.08 |
---|---|
:is() - 의사클래스 함수 (0) | 2024.06.08 |