CSS for Retina Display (background)

IPhone4에서 웹페이지를 보다보면, 이미지가 살짝 깨져 보이는 경우가 있다.
Retina Display의 해상도 때문인데, 해결책은
2배 큰 이미지 만든 후,  Retina Display용 CSS 적용하면 된다.
1. 2배 큰 이미지 만들기
Retina Display가 기존 IPhone해상도의 2배로 커졌으니, 해당 이미지들도 2배 크게 만든 후 적용 시키면 된다.
예를들어 20×20 아이콘이었다면 40×40으로 만들면 된다.
2. 불러오기
자 그럼 Retina Display용 CSS는 어떻게 불러오느냐?

핵심은 Media Query!

Retina Display용 CSS의 Media Query를

screen and (-webkit-min-device-pixel-ratio: 2)
로 해주면 된다.

아이폰에서는 Safari로 접속을 하므로 Webkit CSS를 써도 무관하지만.. 이런식으로 특정 Browser에 Dependent된 기술은 바람직하지 않다고 생각한다. 이 문제는 할일이 없어 시간이 엄청 남아돌때 포스팅 하기로 하고..
CSS 로드 케이스별로 보면.

1. Retina Display용 CSS 파일을 만들경우
<link rel=”stylesheet” href=”retina.css” type=”text/css” media=”only screen and (-webkit-min-device-pixel-ratio: 2)” title=”title” charset=”utf-8″>

2. html안에서 Retina Display용 CSS를 추가할 경우
<style type=”text/css” media=”only screen and (-webkit-min-device-pixel-ratio: 2)“>
3. 일반 CSS안에 Retina Display용 CSS를 추가할 경우
@media screen and (-webkit-min-device-pixel-ratio:2) {
    #icon {
        ….
    }
}
이런 방식으로 추가를 하면 된다.
3. 적용 방법
마지막으로 적용방법이다.
기존의 코드는 손대지 말고, Retina Display용 CSS만 추가하면 된다.
background-image: url(“icon40x40.png”);
-webkit-background-size:20px 20px;

이런식으로 2배 커진 이미지를 배경이미지로 Overwrite하고,

배경 이미지 크기를 기존 아이콘의 사이즈로 적어주면 된다.
배경이 아닌 일반 이미지 또한 2배로 크게 만들고 강제로 기존 사이즈 적어주면 되긴 하는데..
이 경우는 접속 환경의 Retina Display인지 아닌지 구분할 수 없다는 문제점이 있다.
하지만 아래 나온 class 할당 방식으로 해결할 수 있긴 하지만 바람직한 방법은 아닌듯 하며,
번거롭지만 배경이미지로 바꾸는게 나아보인다.
배경이미지외
Retina Display에만 특별히 적용을 해야 할 경우  class를 부여해서 조절하는 방법이 있다.
.forWeb { display: block }
.onlyRetina { display: none }
@media screen and (-webkit-min-device-pixel-ratio:2) {
    .forWeb { display: none }
    .onlyRetina { display: block }
}

 

IE에서 fieldset bgcolor줄 경우 bgcolor가 legend까지 넘어가는 문제

IE7에서(6은 확인 못해봤습니다.) fieldset에 legend가 있을때 fieldset에 bgcolor 줄경우
fieldset border 안으로만 bg가 칠해지는게 아니라 legend의 영역까지 fieldset의 bgcolor가 칠해져 버린다.


legend의 bgcolor는 textNode가 있는 부분만 칠해지기때문에 해결책이 되지 못하고
legend width:100% 해도 왼쪽영역은 여전히 fieldset bgcolor가 먹혀져 있게 된다.
여기에 margin-left:-10px;padding-right:10px 같은 방식으로 장난을 쳐보면 해결이 된 것 같아 보이지만 fieldset의 border가 사라져 버리게 된다.

(그림판 역시 최고 ㅠ,.ㅠ)

이럴경우 fieldset position을 relative로 주고 legend의 position을 absolute로 줘서 positioning을 해 주면 해결이 된다. (CSS Position 을 참고)

fieldset {
background-color:yellow;
border:1px dashed black;
margin-top:15px;
/* ie */
*position: relative;
*padding-top:15px;
}
legend {
background-color:red;
/* ie */
*position: absolute;
*top: -8px;
*left: 10px;
}

 


(참고 http://www.communitymx.com/content/article.cfm?page=1&cid=DD9F3)