데꾸벅의 생각들

'IE7'에 해당되는 글 3건

2008.08.02 CSS Hack(핵) 정리 및 IE6,7,FF3 CSS맞추기
2008.06.13 IE8을 미리 대비하기
2008.03.12 IE7 / FF / Opera FLASH getURL 보안창뜰때

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)

, |

IE8을 미리 대비하기

Designer/UX / 2008. 6. 13. 09:10

IE7 나온지가 얼마나 됐다고 IE8 사용성 테스트를 해야 한다니..복장이 터질지경이다.

현재 프로젝트에서 사용자중 가장많이 차지하는 부분이 IE6인데..기본 개발 브라우저는
IE6,IE8,IE9, FF2,FF3, Opera9에서 까지 잘 보여야 한다니.....

일전에 포스팅한 IE8출시에 따른 호환성테스트 글에서 언급했지만
IE8에서 IE7과 같이 쓰려면 다음과 같은 Meta태그를 넣어주면된다.

출처 : MS IE Compatibility Site

아래 내용은 MS의 고객지원센터에서 발췌한 글이다.

'Designer > UX' 카테고리의 다른 글

UX 디자인 기획은 원맨쇼가 아니다 (6)	2009.03.04
2009년 유행할 웹디자인 트렌드 (14)	2009.01.19
PhotoshopExpress : 포토샵이 웹으로? (2)	2008.03.28
칼라에 대한 고찰 (0)	2008.02.21
IE6 PNG background없애기 (0)	2008.02.21

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

, |

IE7 / FF / Opera FLASH getURL 보안창뜰때

Designer/FLASH & FLEX / 2008. 3. 12. 23:44

파일 다운로드에 따른 getURL로 스크립트 호출하는 플래쉬 링크에러 를 먼저 참조하기 바란다.

플래쉬에서 외부 링크를 걸때 getURL("javascript:스크립트함수호출()") 과 같이 쓰는데
종종 getURL의 경우 링크가 안걸릴때도 있고 같이 페이지내 animated GIF를 멈추게 하는 경우도 있다.
이럴경우 다음과 같이 해보자.

[플래쉬 :]

import flash.external.*;
ExternalInterface.call("스크립트함수명");

[HTML]

javascript:스크립트함수명()

위와 같이 해봤는데도 IE7 / Opera / FF 브라우저 로컬에서 스크립트 엑세스 할경우
보안경고창이 뜨는데 기본적으로 같은 도메인상에 존재해야 getURL함수를 호출할수 있다고 한다. allowScriptAccess를 always를 줘도 마찬가지다..
관련글이 "쇽닥쇽닥"님의 블로그에 포스팅되어 있다.. 참고하도록 하자..

getURL의 단점이라면 위에서 봤던대로..자바스크립트를 호출하면 딸깍거리는 소리가 나기도 하고 gif애니메이션을 멈추게 하는 현상이 있는데.. 이러한 현상은 fscommand를 사용하면 모두 해결할수 있다.

네이버블로그의 FAS에 포스팅된 글(getURL --> fscommand로 바꿀려면)중에 다음과 같은 글이 있어 포스팅한다.

샘플파일

invalid-file

1. 버튼 이벤트에 fscommand( command ,args) 의 형태로 선언한다. 여기서 command 와 args 는 문자열로 전달변수와 전달값이라고 생각하시면됩니다. command 에서 지정해준 명령키워드를 html 에 선언된 자바스크립트 함수에서 조건으로 찾아 실행할수 있도록 하는역할이죠, args 는 command 명령시 전달될 값으로써 전달할 값이 없다면 "" 빈문자열로 처리해도 됩니다.

2. 퍼블리시 세팅에서 나오는 대화상자에서 format 탭의 html 부분에 체크한후 html 탭으로 가서 첫번째 옵션인 Template 드롭다운 메뉴를 누르면 여러가지 세팅이 나옵니다. 기본값은 Flash Only 인데 Flash with FSCommand 로 선택을 하신후 퍼블리싱 하시면 html 이 생성되며 자동으로 html 안에 fscommand 명령을 처리할수 있는 자바스크립트 함수가 선언이 됩니다.

<script language="JavaScript">
<!--
var isInternetExplorer = navigator.appName.indexOf("Microsoft") != -1;
// Handle all the FSCommand messages in a Flash movie.
function fscommand_DoFSCommand(command, args) {
        var fscommandObj = isInternetExplorer ? document.all.fscommand : document.fscommand;
        //
        if(command == "msg"){
                alert(args)
        }
        //
}
// Hook for Internet Explorer.
if (navigator.appName && navigator.appName.indexOf("Microsoft") != -1 && 
navigator.userAgent.indexOf("Windows") != -1 && navigator.userAgent.indexOf("Windows 3.1") == -1) {
        document.write('<script language=\"VBScript\"\>\n');
        document.write('On Error Resume Next\n');
        document.write('Sub fscommand_FSCommand(ByVal command, ByVal args)\n');
        document.write('	Call fscommand_DoFSCommand(command, args)\n');
        document.write('End Sub\n');
        document.write('</script\>\n');
}
//-->
</script>

위에 내용중에서 분홍색음영으로 처리된 부분이 플래시에서 넘겨받은 command 에 따라 실행을 한 예입니다.

그렇다면 플래시안에서 각기 다른 명령어에 따라 다른 결과를 만들어낼수도 있겠죠.. 조건문을 통해서.. ^^

** 보안억세스 설정

이렇게 만 했다고 해서 바로 실행되지는 않습니다.

플래시와 html의 자바스크립트와의 통신을 하는것이기 때문에 플래시8 이후 부터 변경된 보안정책에 의해서 외부스크립트와의 통신이 기본적으로 막아놓은 상태입니다. 그래서 플래시 오브젝트에서 allowScriptAccess 값을 always 로 설정하셔야됩니다.

플래시가 들어가는 오브젝트 태그에 보시면 <param name="allowScriptAccess" value="always" /> 라는 부분과 allowScriptAccess="always" 라는 부분이 있는데 기본값은 sameDomain 으로 되어 있을겁니다. 이것을 always로 바꾸시면 문제없이 자바스크립트를 호출할수 있습니다.

** 플래시 8 부터 제공되는 ExternalInterface.call
플래시 8 부터는 좀더 나이스하게 자바스크립트를 다룰수 있는 액션이 추가되었습니다.

바로 ExternalInterface.call 인데요.. 이것과 함께 ExternalInterface.addCallback 을 통해서 플래시에서 자바스크립트함수를... 반대로 자바스크립트에서 플래시안의 함수를 호출할수도 있게 되었습니다. 여기에 대한 자세한 강좌는 왼쪽 스터디 메뉴의 퍼온강좌에서 확인할수 있습니다. 강좌 링크는 다음과 같습니다.

http://cafe.naver.com/fas/901
http://cafe.naver.com/fas/902

'Designer > FLASH & FLEX' 카테고리의 다른 글

파일다운로드에 따른 플래쉬 링크 에러 (5)	2008.04.03
드디어 Adobe AIR v1.0 & Flex3.0 릴리즈 (2)	2008.02.26

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

, |

«이전 1 다음»

카테고리

최근에 올라온 글

최근에 달린 댓글

링크

'IE7'에 해당되는 글 3건

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

Netscape 4 제외시키기

Mac IE 4.5, Netscape 4 제외시키기

Mac IE 5 제외시키기

Win IE 4~5 제외시키기

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

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

Win IE 6 제외시키기

star hack

underscore hack

hash hack

star 7 hack

xmlns hack

:root hack

Tantek box model hack

Win IE 5용 패스필터

Win IE 5.5용 패스필터

Win IE 5-5.5용 패스필터

모던브라우저용 패스필터

IE7에만 적용

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

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

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

IE8을 미리 대비하기

'Designer > UX' 카테고리의 다른 글

IE7 / FF / Opera FLASH getURL 보안창뜰때

'Designer > FLASH & FLEX' 카테고리의 다른 글

티스토리툴바