데꾸벅의 생각들

'FF3'에 해당되는 글 2건

2008.08.02 CSS Hack(핵) 정리 및 IE6,7,FF3 CSS맞추기
2008.06.25 getBoundingClientRect in FF3 3

CSS Hack(핵) 정리 및 IE6,7,FF3 CSS맞추기

Publisher/CSS / 2008. 8. 2. 20:53

IE7 의 렌더링 방식이 IE6과 다르다.
CSS testing of Selector and Pseudo selectors 를 보면 IE7 은 FF 에 더 가까와 지고 있다.
그래서 바야흐로 브라우저 3개를 켜고 코딩을 해야하는 시대가 온 것이다.

이를 해결하기 위한 방법 중 하나는 Selector Hack 을 이용하는 것이다.

.context_bar_form_field
{
height: 15px; // 모든 브라우저
#height: 15px; // IE 전용
_height: 21px; // IE6.0 과 이전버젼용
}

우선 파폭에 맞추어 개발을 한 후 E7 에서 점검한다. 수정할 부분이 있다면 # 접두어를 붙여 수정해 준다. #이 붙은 것은 FF 에서 무시한다. 하지만 IE 는 재설정 해준다.
다음에 IE6 을 열고 수정하면서 _ 를 접두어로 붙여 새로 재설정 한다. IE7 은 '-' 가 붙은 것을 무시한다.

또 다른 방법은,

.title h3 {height: 21px; }
.title > h3 {height: auto; min-height: 21px; }

이렇게 하는 방법도있다. 맨 아래줄은 파이어폭스와 IE7만 적용된다.

한가지 주의할 점은

body
{
text-align:-moz-center; /*FF*/
#text-align:center; /*IE */
}
속성 키워드 자체가 다른 것이 많다. 주의 할 것!

위에서 처럼 속성값 자체가 다른 경우가 있다. 그러니 안된다고 hack 만 쳐다보고 있으면 밤세야 한다.

내가 보기에 가장 좋은 방법은 Conditional Comments 를 사용하는 것이다.
복잡하게 한 파일에 구질구질 작성하지 말고 파일을 분리해 버리는 것이다.

참고 :http://webborg.blogspot.com/2007/01/css-compatibility-ie6-ie7-firefox-and.html

<head>
<title>my css hacked page</title>
<link rel="stylesheet" type="text/css" href="styles.css" />

<body>
<div class="watermark">....</div>...

이렇게 분리해서 각개격파하는 것이 좋을 듯 싶다.

IE 용인 Expression을 사용하여 본다면

a { expression(어쩌구 문법) }

이렇게 해서 a 태그 즉, 링크에 걸린 항목에 대하여 Expression은 적용 시킬 수 있을것입니다.

그럼 예로.. 링크주소중에 pdf 라은 확장자가 있다면 링크 앞에 자동으로 PDF 아이콘을 띄워봅시다.

a {
   padding-left: expression(this.href.indexOf('.pdf') > 0 ? '20px' : '');
   background: expression(this.href.indexOf('.pdf')>0 ? 'transparent url(pdf.gif) no-repeat center left' : '');
}

이건 IE 용입니다. Firefox에선 이렇게 하시면 됩니다.

a[href $='.pdf']{
padding-left: 20px;
background: transparent url(pdf.gif) no-repeat center left;
}

음... 불여시에서 사용하는게 훨씬 간편하네요 @@;;

[href $='.pdf'] 이 구문에서 $는 .pdf로 끝나는 것을 의미합니다.

.pdf로 시작하는 것을 찾으려면 $대신에 ^을 사용하시면 됩니다.

[href ^='.pdf']가 되겠죠. 그냥 포함 되어 있는지를 찾는 거라면 *을 사용하시면 됩니다.

Netscape 4 제외시키기

Netscape 4은 media속성값에 "screen"이외의 값이 올 경우 읽어 들이지 못하는 것을 이용한 방법이다.

<link rel="stylesheet" type="text/css" href="/css/style.css" media="all" /> 이나

<link rel="stylesheet" type="text/css" href="/css/style.css" media="screen, tv" />

라고 지정할 경우 Netscape 4은 읽어 들이지 못한다.

부분적으로 읽어들이지 못하게 하는 경우에는 Caio's hack인 /*/*/를 이용한다. 보통 코멘트는 */으로 닫지만 /*/으로 닫게 되면 Netscape 4에서는 인식되지 않는다. 그 뒤에 평상시의 코멘트 /* */를 적어두면 그 뒤의 스타일은 Netscape 4에서도 문제없이 적용된다.

p { /*/*/ color:white; /* */ }

Mac IE 4.5, Netscape 4 제외시키기

@import룰로 url()함수를 이용하여 외부 스타일시트를 이중인용부호로 지정한다.
Mac IE 4.5는 @import에 url()함수를 이용하는 경우, 단일 인용부호와 인용부호가 없는 것이 아니면 읽어 들이지 못한다. Netscape 4은 @import를 지원하지 않는다.

@import url("/css/style.css")

Mac IE 5 제외시키기

CSS소스 안의 코멘트 서식을 /* \*/ 이라는 방식으로 기술한다. holly hack이라고 하며 그 뒤에 평상시의 코멘트 /* */를 적어두면 그 뒤의 스타일은 Mac IE 5에서도 문제없이 적용된다.

p { /* \*/ color:white; /* */ }

Win IE 4~5 제외시키기

셀렉터 바로 뒤에 /**/라고 적는다.

p/**/ { color:white;}

Win IE 4~5, Mac IE 4.5~5 제외시키기

프로퍼티와 값을 구분하는 콜론(;) 앞에 코멘트에 스페이스를 포함하여 /* */라고 적는다.

p { color/* */:white;}

Win IE 4~6, Mac IE 4, Netscape 4 제외시키기

셀렉터 앞에 html>body를 붙인다.

html>body p { color:white;}

Win IE 6 제외시키기

프로퍼티와 값을 구분하는 콜론(;)의 앞에, 스페이스와 코멘트를 /**/라고 적는다.

p { color /**/:white;}

star hack

셀렉트 앞에 *html를 붙이면, Win IE 4~6, Mac IE 4~5 등에는 스타일이 적용되고, 그 외의 브라우저에서는 적용되지 않는다.

*html p { color:white; }

underscore hack

프로퍼티의 가장 앞부분에 언더스코어(_)를 붙이면, Win IE 4~6에서 스타일이 적용되고, 다른 브라우저에서는 적용되지 않는다.

p { _color:white; }

hash hack

프로퍼티의 앞에 샾(#)을 붙이면, Win IE 4~6, Mac IE 5, Opera 7, Mozilla, Firefox에서는 스타일이 적용되고, 다른 브라우저에는 적용되지 않는다.

p { #color:white; }

star 7 hack

셀렉트의 앞에 html*을 붙이면, Win IE 5.5~6, Mac IE 5, Safari 등에서 스타일이 적용되고, 다른 브라우저에서는 적용되지 않는다. html*과 셀렉터사이에 스페이스를 넣지 않는다.

html*p { color:white; }

xmlns hack

속성셀렉터를 이용하여, html요소에 붙이는 xmlns속성을 스타일적용을 위하여 사용하는 방법.
Mozilla, Fire-fox, Opera 7/8, Safari 등 속성셀렉터를 서포트하는 브라우저에서는 스타일이 적용되고, 다른 브라우저에서는 적용되지 않는다.

html[xmlns] h1 { color:red; }

:root hack

셀렉터의 앞에 :root를 붙이면, Mozilla, Firefox, Mac IE 5, Safari 등 :root유사클래스를 지원하는 브라우저에만 스타일이 적용되고, 다른 브라우저에서는 적용되지 않는다.

:root h1 { color:red; }

Tantek box model hack

voice-family프로퍼티를 이용한 가장 유명한 박스모델핵.

div#content { width:500px; voice-family: ""}""; voice-family:inherit; width:400px; }

Win IE 5용 패스필터

@media tty { i{content:"";/*" "*/}}; @import '/css/style.css'; {;}/*";} }/* */

Win IE 5.5용 패스필터

@media tty { i{content:"";/*" "*/}}@m; @import '/css/style.css';/*";} }/* */

Win IE 5-5.5용 패스필터

@media tty { i{content:"";/*" "*/}}@import '/css/style.css';/*";} }/* */

모던브라우저용 패스필터

@import "null?"{"; @import "/css/style.css"; @import "null?"}";

이 이외에도 많은 핵(hack)이 존재한다. CSS Filters (dithered.com)에 다양한 CSS hack이 잘 정리되어 있으므로 참고하시길…

IE7에만 적용

*+html body

IE7를 포함한 모든 IE에만 적용하는 방법은

*+html body, * html body

IE7을 포함한 모던브라우저에 적용(IE6이하를 제외)

html>body

IE7을 제외한 모던브라우저에만 적용

html>/**/body

위의 내용은 썬샤인님의 블로그에서 꿈쳐온 것입니다.. 
나이가 먹다보니 가끔 치매끼가 있어서.. 잊어버릴것 같아 살포시... ^^

'Publisher > CSS' 카테고리의 다른 글

safari 및 google Chrome에서의 Fieldset CSS버그 (2)	2008.09.08
PNG(setPNG)를 이용시 이미지 토글 이벤트 먹는 경우 (2)	2008.08.13
웹폰트로 이쁜 웹페이지를 꾸며보자 (4)	2008.07.23
CSS 2.0 표준 Reference (0)	2008.04.15
CSS를 이용한 XHTML1 strict 모드의 height100% (3)	2008.04.08

Post by 넥스트리소프트 데꾸벅(techbug)

, |

getBoundingClientRect in FF3

Scripter/JAVASCRIPT / 2008. 6. 25. 13:14

IE5에서 첫선을 보인 객체.getBoundingClientRect는 객체의 offset의 top, left,width,height를 반환하는 멋진놈이다.
일반적으로 gecko 엔진을 사용하는 FF2에서는 getBoxObjectFor(객체)를 사용했으나
FF3에서는 getBoundingClientRect도 지원한다.

FF3가 출시되자 마자 기존 스크립트들을 많이 바꾸고 있는데 이중에 getBoundingClientRect가 포함되었다.
드디어 FF도 IE의 손을 들어준것인가? IE8에서는 얼마만큼 오픈소스진영의 손을 들어줄것인지 귀추가 주목된다.

Mozilla사이트의 getBoundingClientRect에 관련된 Reference 참조

John Resig의 getBoundingClientRect is Awesome 포스트 참조

데꾸벅이 사용하는 객체의 offset left,top,width, height반환하는 함수

/**
* tag 객체의 위치값 및 너비/높이값을 반환한다.
* @param {objId} DOM객체 : document.getElementById()
* @return {ret} left,top,width,height 를 반환한다.
* @author 데꾸벅
*/
function getBoundsObject(objId){
var techbug = new Object();
var tag = document.getElementById(objId);

if(tag !=null && tag != undefined ){
if(tag.getBoundingClientRect){ //IE, FF3
var rect = tag.getBoundingClientRect();
techbug.left = rect.left + (document.documentElement.scrollLeft || document.body.scrollLeft);
techbug.top = rect.top + (document.documentElement.scrollTop || document.body.scrollTop);
techbug.width = rect.right - rect.left;
techbug.height = rect.bottom - rect.top +1; // +1 = Moz와 맞춤
} else if (document.getBoxObjectFor) { // gecko 엔진 기반 FF3제외
var box = document.getBoxObjectFor(tag);
techbug.left = box.x;
techbug.top = box.y;
techbug.width = box.width;
techbug.height = box.height;
}else {
techbug.left = tag.offsetLeft;
techbug.top = tag.offsetTop;
techbug.width = tag.offsetWidth;
techbug.height = tag.offsetHeight + 3; // +1 = Moz와 맞춤
var parent = tag.offsetParent;
if (parent != tag) {
while (parent) {
techbug.left += parent.offsetLeft;
techbug.top += parent.offsetTop;
parent = parent.offsetParent;
}
}
// 오페라와 사파리의 'absolute' postion의 경우 body의 offsetTop을 잘못 계산 보정
var ua = navigator.userAgent.toLowerCase();
if (ua.indexOf('opera') != -1 || ( ua.indexOf('safari') != -1 && getStyle(tag, 'position') == 'absolute' )) {
techbug.top -= document.body.offsetTop;
}

}
return techbug;
}
}

'Scripter > JAVASCRIPT' 카테고리의 다른 글

자바스크립트 최적화(반복문) (0)	2008.07.30
자바스크립트 코딩가이드 #1 (1)	2008.07.02
FF3에서의 window.showModalDialog (0)	2008.06.24
IE6에서 CSS로 fixed로 했을경우 고정되지 안는 문제 (2)	2008.05.12
Mouse wheel programming in JavaScript (0)	2008.05.08