728x90
300x250
'@supports'는 css 조건부 규칙 중 하나로, 특정한 css속성이나 값이 브라우저에서 지원되는지 여부를 확인하는데 사용된다.이를 통해서 특정 스타일을 지원하는 최신 브라우저에만 스타일을 적용하거나, 그렇지 않은 경우에는 대체 스타일이나 처리를 정의할 수 있다.
@supports (condition) {
/* condition이 참일 때 적용되는 스타일 */
}여기서 condition은 특정한 css 속성이나 값의 지원여부를 확인하는 조건을 나타낸다. 만약 조건이 참이면 괄호 안의 스타일이 적용되고, 그렇지 않으면 무시된다
예시
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
height: 100vh;
overflow: hidden;
}
#scrollable-list {
height: calc(100% - 50px);
overflow-y: auto;
border-bottom: 10px solid rgba(0, 0, 0, 0.1);
position: relative;
}
.list-item {
padding: 10px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
cursor: pointer;
}
.list-item a {
text-decoration: none;
color: inherit;
}
#scrollable-list::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 50px;
z-index: 1;
}
/* 미디어 쿼리: 최신 브라우저에서만 적용 */
@supports (background: linear-gradient(to top, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0))) {
#scrollable-list::after {
background: linear-gradient(to top, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0));
pointer-events: none; /* 최신 브라우저에서만 뿌옇게 처리된 하단 배경이 마우스 이벤트를 가로막지 않도록 함 */
}
}
</style>
</head>
<body>
<div id="scrollable-list">
<div class="list-item"><a href="#">리스트 아이템 1</a></div>
<div class="list-item"><a href="#">리스트 아이템 2</a></div>
<!-- 필요에 따라 더 많은 리스트 아이템 추가 -->
</div>
</body>
</html>
현재 브라우저가 (background: linear-gradient(to top, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0)))를 지원하는지 여부를 확인하고 만약 지원한다면 {}의 규칙이 적용된다.
728x90
반응형
'Front-end > CSS' 카테고리의 다른 글
| 상하 스크롤 하단 뿌옇게 처리하기 (0) | 2024.01.02 |
|---|---|
| 컨텐츠 너비에 따라 박스 크기 조정 width:min-content (0) | 2023.11.18 |
| 체크박스 클릭시 검정색 border 생기는 현상 해결방법 (0) | 2023.06.02 |
| 스크롤 모양 변경하기 (0) | 2023.05.01 |
| position sticky 안될때 사용법 (0) | 2022.08.06 |
댓글