미디어쿼리 레벨4
반응형 웹 등을 가능케한 미디어쿼리의 새로운 버전 (css4)에 대해서 조금 알아보았습니다.
출처: http://dev.w3.org/csswg/mediaqueries4/#changes-2012
새로 추가된 feature 들로
script, pointer, hover, luminosity 등이 있다고 합니다.
script는 javascript 등의 사용여부를 css 레벨에서 체크하는 것으로, 나중에 사용될 예정으로 추가된것이라 큰 의미는 없고, 나머지 세가지, 특히 pointer와 hover 는 인풋 디바이스의 종류에 따라서 css를 설정할 수 있도록 제공하고 있네요.
pointer는 none, coarse, fine 세가지 값이 가능하고, coarse 와 fine 에 따라서 버튼의 크기등을 바꿀 수 있게 됩니다.
그리고 hover의 경우는 0 또는 1 값이 가능하여, 일반적인 마우스 후버가 되는 경우와 안되는 경우에 따라서 css를 적용할 수 있네요.
마지막으로 luminosity 의 경우는 주변 환경의 밝기에 따라서 반응할 수 있도록, dim (어두운 환경), normal, washed (태양광 등 너무 밝은 환경) 값에 따라서 반응할 수 있다고 하네요.
그밖에 새로운 selector 들도 준비되고 있다고 하니, js 일 중 동적인 아닌 부분은 점점 css로 넘어갈 것 같네요. ^^
출처: http://dev.w3.org/csswg/mediaqueries4/#changes-2012
새로 추가된 feature 들로
script, pointer, hover, luminosity 등이 있다고 합니다.
script는 javascript 등의 사용여부를 css 레벨에서 체크하는 것으로, 나중에 사용될 예정으로 추가된것이라 큰 의미는 없고, 나머지 세가지, 특히 pointer와 hover 는 인풋 디바이스의 종류에 따라서 css를 설정할 수 있도록 제공하고 있네요.
pointer는 none, coarse, fine 세가지 값이 가능하고, coarse 와 fine 에 따라서 버튼의 크기등을 바꿀 수 있게 됩니다.
/* Make radio buttons and check boxes larger if we have an inaccurate pointing device */
@media (pointer:coarse) {
input[type="checkbox"], input[type="radio"] {
min-width:30px;
min-height:40px;
background:transparent;
}
}
그리고 hover의 경우는 0 또는 1 값이 가능하여, 일반적인 마우스 후버가 되는 경우와 안되는 경우에 따라서 css를 적용할 수 있네요.
/* Only use a hover-activated drop down menu on devices that can hover. */
@media (hover) {
.menu > li {display:inline-block;}
.menu ul {display:none; position:absolute;}
.menu li:hover ul {display:block; list-style:none; padding:0;}
/* ... */
}마지막으로 luminosity 의 경우는 주변 환경의 밝기에 따라서 반응할 수 있도록, dim (어두운 환경), normal, washed (태양광 등 너무 밝은 환경) 값에 따라서 반응할 수 있다고 하네요.
@media (luminosity: normal) {
p { background: url("texture.jpg"); color: #333 }
}
@media (luminosity: dim) {
p { background: #222; color: #ccc }
}
@media (luminosity: washed) {
p { background: white; color: black; font-size: 2em; }
}그밖에 새로운 selector 들도 준비되고 있다고 하니, js 일 중 동적인 아닌 부분은 점점 css로 넘어갈 것 같네요. ^^
|
댓글을 작성하시려면 로그인이 필요합니다.
로그인
프로그램
태그 필터 (최대 3개)
전체
개발자
소스
기타
mysql
팁자료실
javascript
php
linux
flash
정규표현식
jquery
node.js
mobile
웹서버
os
프로그램
강좌
썸네일
이미지관련
도로명주소
그누보드5
기획자
견적서
계약서
기획서
마케팅
제안서
seo
통계
서식
통계자료
퍼블리셔
html
css
반응형
웹접근성
퍼블리싱
표준화
반응형웹
홈페이지기초
부트스트랩
angularjs
포럼
스크린리더
센스리더
개발자톡
개발자팁
퍼블리셔톡
퍼블리셔팁
기획자톡
기획자팁
프로그램강좌
퍼블리싱강좌
댓글 4개
아님, 정말 비지니스 로직쪽으로만 집중할 수 있게 되어간.. ^ㅆ^;
브라우져 들이 받아줄지도 모를 일이고요. ^^