Posts tagged ‘safari’

Chrome과 Safari에서만 적용되는 CSS

May 20, 2010, 8:51 pm

media query에 -webkit-min-device-pixel-ratio:0 요게 들어가 있으면 된다는데…

@media screen and (-webkit-min-device-pixel-ratio:0) {
     .myClass { background-color: #FF0000; }
     #myId {color: #0000FF;}
     p, a, li {text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.4);}
}

각 브라우저별 지원 버전 확인해 봐야겠음.
참조: http://www.evotech.net/blog/2010/04/hack-for-webkit-filter-for-chrome-and-safari/

Tags: , , , ,
Category: Front-end  |  1 Comment

CSS3: border-image

August 14, 2008, 3:04 pm

css

button { color:#ffffff; font-weight:bold; padding:0.2em;
font-size:30px; background:none; }
#button1 { -webkit-border-image: url(whiteButton.png) 12 / 12 stretch stretch; }

html

<p>
배경 이미지: <img src="whiteButton.png" /><br />
button: <button id="button2" type="button">이미지 배경이<br /> 들어간 버튼</button>
</p>

background image

screenshot - safari

border-image는 CSS3에 새롭게 추가된 속성으로 이미지 테두리를 사용할 수 있게 해 줍니다. 지금까지는 유연한 테두리를 만들기 위해 각 모서리별로 이미지를 자르고 그에 따라 태그를 여러번 중첩되게 작성해야 하는 문제점이 있었습니다. 물론 css sprite 기법을 이용해서 어느 정도 복잡성을 줄일 수 있긴 하지만 border-image를 사용할 경우 이미지, html, css 코드 모두 간결하면서도 효과적으로 작성할 수 있습니다. 또한 이미지를 여러개로 자름으로 인해 발생하는 http request의 증가를 없앨 수 있다는 장점도 있습니다.

현재 CSS3를 가장 많이 지원하는 브라우저는 Safari 인거 같습니다. Safari CSS Reference - Supported CSS Properties를 참조하시면 현재 Safari에서 지원하는 CSS3 속성들을 확인할 수 있습니다. Safari에서는 -webkit-border-image라는 속성을 이용해 border-image를 사용할 수 있습니다. Firefox의 경우 현재 개발중에 있는 3.1버전부터 사용이 가능하며, 현재 다운로드 가능한 alpha 2에서는 -moz-border-image 속성을 동일한 방법으로 사용할 수 있습니다.

-webkit-이라는 접두어는 해당 속성이 향후 변경될 수 있는 경우에 붙이는 것으로, 해당 속성이 정식 속성으로 고정될 경우 이 접두어는 사라집니다. 브라우저마다 실험적인 속성에 대해서는 고유의 접두어를 붙이고 있으며, Safari의 경우 -webkit- 을 사용합니다. 자세한 내용은 Site-point CSS reference에 있는 Vendor-specific Properties 페이지를 참고하세요.

border-image는 다음의 3가지 방법으로 사용될 수 있습니다.

border-image: uri top right bottom left x_repeat y_repeat
border-image: uri top right bottom left / border x_repeat y_repeat
border-image: uri top right bottom left / top_border right_border bottom_border left_border x_repeat y_repeat

여기서 top … left는 이미지상의 위치를 나타내며 number 혹은 % 값을 사용할 수 있습니다. 여기서 number는 단위가 붙지 않는 그냥 숫자로 이미지상에서의 pixel 단위 위치입니다(이 부분은 좀 이해가 잘 안되는 부분입니다. 자세한 내용은 CSS3 border-image working draft를 참조하세요). 이 위치는 다음 그림을 보면 이해할 수 있는데 Flash의 스킨 제작 시 사용되는 방법과 동일합니다. 즉 4개의 위치로 이미지를 9분할 해서 배치하는 방식입니다. 9분할 영역에서 외곽 부분은 테두리에 대응되며 중앙 부분은 배경 이미지로 대치됩니다.

/ 다음에 있는 top_border … left_border 는 각 위치의 테두리 두께를 나타내며 x_repeat, y_repeat는 테두리 두께가 해당 영역의 이미지 크기보다 클 경우 출력되는 방법을 나타냅니다. 여기에 가능한 값은 stretch, repeat 등이 가능합니다.

아무래도 정확히 이해하려면 다음 참고 문서들을 읽어보시고, 직접 해보시는게~~~

참고 문서

Tags: , ,
Category: Front-end  |  Comment