1
다른 브라우저 유형에 대해 다른 CSS 파일을 사용하고 싶습니다. 다른 종류의 브라우저를 감지하고 이에 따라 CSS 파일을 포함 할 수있는 간단한 HTML 코드가 있습니까?다른 브라우저에 대해 다른 CSS 파일
A
답변
1
나는 단지 예를 알고 :
<!--[if IE]><link href="/ie.css" rel="stylesheet" type="text/css" /><![endif]-->
2
모든 브라우저에서 서버 측에서 사용해야합니다. 서버 측 방식을 선택하면 User-Agent 헤더를 구문 분석하고 해당 구문 분석에서 유효한 CSS를 추가해야합니다. 사용자 에이전트 파싱이 지루한 작업이고 브라우저 기발한 문제를 다루는보다 세련된 방법이 있기 때문에을 사용하지 말 것을 권합니다. 최대
<!--[if lte IE 6]>
하고 또한
이 참고 사항 :가치는 인터넷 익스플로러에 대한 관심 만 추가 특별 CSS 규칙 (파일)이있는 경우 특수 구문이 있음을 주목해야합니다 브라우저 규칙에 따르지 않도록하는 CSS 프레임 워크입니다. 내 생각에 가장 큰 것은 YUI 3 Grid입니다. 이렇게하면 제대로 사용하면 모든 브라우저에서 동일한 모양과 느낌을 갖게됩니다.
0
같은 스타일 시트 내에서 '해킹'을 사용하는 것이 더 쉽습니다.
(나는 :) 전도자에 의해 아래로 modded하게하지 않으로)이 사용을 용납하지 않는 것입니다
http://www.webmonkey.com/tutorial/Browser-Specific_CSS_Hacks
http://www.dynamicsitesolutions.com/css/filters/support-chart/
http://ajaxian.com/archives/css-browser-hacks
http://www.456bereastreet.com/archive/200411/the_underscore_hack/
다른 IE 버전 (일반적으로 가장 중요한)의 경우 http://www.quirksmode.org/css/condcom.html
3
이 자바 스크립트 타입 일 : 조립식는 많은 매개 변수의을 처리 할 수있는 조건 IE '경우'입니다. Javascript는 브라우저 선택에 매우 좋습니다. 브라우저 감지 기능을 사용하여 다른 CSS 파일을 가리 키십시오. 머리에이 같은
넣어 뭔가 :
<script type="text/javascript">
var browser=navigator.appName;
if browser == "Microsoft Internet Explorer" {
document.write("<link type=\"text/css\" rel=\"stylesheet\" href=\"IE.css\">");
}
else if browser == "Firefox" {
document.write("<link type=\"text/css\" rel=\"stylesheet\" href=\"FF.css\">");
}
else {
document.write("<link type=\"text/css\" rel=\"stylesheet\" href=\"generic.css\">");
}
</script>
은 내가 JS를 확인할 수 없습니다하지만 당신이해야 할 일의 라인을 따라입니다.
+0
사용자가 자바 스크립트를 사용 중지 한 경우 어떻게해야합니까? – Kezzer
+0
그런 다음
0
Internet Explorer 관련 CSS 파일을 포함시키려는 경우 조건부 HTML 주석이 작동합니다. 자세한 내용은 this quirksmode article을 참조하십시오.
다른 브라우저의 경우 JavaScript 또는 서버 측에서 방문자가 사용하는 브라우저를 감지하고 결과에 따라 적절한 CSS 파일을 포함시켜야합니다. quake 모드에 대한 또 다른 훌륭한 기사는 here입니다.
1)처럼 이미 당신이 IE 버전, 예를 감지하는 조건문을 사용할 수 있습니다 말했다
1
브라우저에 의존하는 스타일 시트에 대한 여러 가지 방법이 있습니다
2) PHP, Ruby 등의 서버 측 언어를 사용하는 경우 HTTP_USER_AGENT 서버 변수를 기반으로 브라우저를 검색 할 수 있습니다. 당신의 PHP 템플릿에 필요한 .CSS 파일을 사용하면 거의 모든 브라우저를 감지 할 수 있으며,이를 기반으로 포함시킬 수있는 (또는 인쇄, 정확하게하기 위해) 때문에
if(preg_match('/^Mozilla\/.*?Gecko/i',$agent)){
print "Firefox user."; $firefox = true;
// process here for firefox browser
}
이 기술은 강력하다. 예.
if ($firefox) print '<link rel="stylesheet" href="http://site.com/firefox.css">';
이 기술의 장점은 페이지가 사용자에게 전송하기 시작하고 매우 정확하게 브라우저 버전을 검색 할 수도 전에, 초기 발생한다는 것입니다.
3) 물론 자바 스크립트로 브라우저 버전을 감지 할 수 있습니다.
var browser=navigator.appName;
var b_version=navigator.appVersion;
var version=parseFloat(b_version);
그러나이 변수의 값을 분석하는 코드는 this example과 같이 사용해야합니다.
5
CSS 해킹이나 자바 스크립트를 사용하여 스타일 시트 등을 전환하지 마십시오.
다른 브라우저 나 잘못된 CSS 해킹을 위해 여러 개의 스타일 시트를 사용하지 않아 본 적이 없습니다.
필요하지 않습니다. 조건부 주석은 아마도 IE6 이하의 PNG 픽스에 유용하지만, CSS 및 다양한 브라우저 버그를 알고 있다면 많은 문제없이 IE 5.5 용으로 쉽게 XHTML과 CSS를 코딩 할 수 있습니다.
0
다른 브라우저에 대해 다른 스타일 시트를 사용하고 싶다면 변경해야합니다.
거의 모든 것이 모든 브라우저에서 동일한 스타일 시트로 할 수 있습니다. 깨끗한 마크 업을 만들고 강력한 스타일을 사용하려면 좀 더 많은 작업이 필요하지만 CSS 파일의 수는 적지 만 들어 본 적이없는 브라우저에서도 작동 할 가능성이 높은 페이지와 브라우저. 또한 잘 고안된 마크 업을 사용하면 블라인드 서퍼가 페이지를 액세스 할 수 있으며 검색 엔진에서 작업을 쉽게 수행 할 수 있으므로 더 많은 콘텐츠를 색인 할 수 있습니다.
이것이 내가 우리 회사의 웹 사이트에서 사용한 것입니다. 나는 IE 8이 출시되었을 때 작동하도록 한 가지를 바꿀 필요가 없었습니다. :)
브라우저간에 일관된 동작을 얻으려면 proper doctype이 중요합니다. 그것없이 IE는 incorrect box model을 포함하여 IE 4에서 대부분의 렌더링 오류를 에뮬레이션합니다.
0
<head>
<link rel="stylesheet" type="text/css" href="generic.css" />
<![if gte IE 6]>
<link rel="stylesheet" type="text/css" href="iespecific.css" />
<![endif]>
<![if !IE]>
<link rel="stylesheet" type="text/css" href="notie.css" />
<![endif]>
</head>
+5
@ Deepak- 안녕하세요. 당신은 당신이 당신의 답안에 제시 한 해결책에 대한 설명을 항상 포함시켜야합니다. – Michal
0
자바 스크립트를 사용하여 여러 브라우저에서 CSS를 감지하고 변경할 수 있지만 코드가 약간 부피가 있습니다.
<script type="text/javascript">
var nAgt = navigator.userAgent;
var browserName = navigator.appName;
var nameOffset,verOffset,ix;
// In Opera, the true version is after "Opera" or after "Version"
if ((verOffset=nAgt.indexOf("Opera"))!=-1) {
browserName = "Opera";
}
// In MSIE, the true version is after "MSIE" in userAgent
else if ((verOffset=nAgt.indexOf("MSIE"))!=-1) {
browserName = "Microsoft Internet Explorer";
}
// In Chrome, the true version is after "Chrome"
else if ((verOffset=nAgt.indexOf("Chrome"))!=-1) {
browserName = "Chrome";
}
// In Safari, the true version is after "Safari" or after "Version"
else if ((verOffset=nAgt.indexOf("Safari"))!=-1) {
browserName = "Safari";
}
// In Firefox, the true version is after "Firefox"
else if ((verOffset=nAgt.indexOf("Firefox"))!=-1) {
browserName = "Firefox";
}
// In most other browsers, "name/version" is at the end of userAgent
else if ((nameOffset=nAgt.lastIndexOf(' ')+1) <
(verOffset=nAgt.lastIndexOf('/')))
{
browserName = nAgt.substring(nameOffset,verOffset);
fullVersion = nAgt.substring(verOffset+1);
if (browserName.toLowerCase()==browserName.toUpperCase()) {
browserName = navigator.appName;
}
}
if (browserName == "Microsoft Internet Explorer") {
document.write("<link type=\"text/css\" rel=\"stylesheet\" href=\"../css/ms.css\">");
}
else if (browserName == "Firefox") {
document.write("<link type=\"text/css\" rel=\"stylesheet\" href=\"../css/ff.css\">");
}
else {
document.write("<link type=\"text/css\" rel=\"stylesheet\" href=\"../css/other.css\">");
}
</script>
관련 문제
- 1. 다른 브라우저에 대해 다른 CSS 파일을 사용하고 적절하게로드하는 것이 좋습니다.
- 2. 다른 브라우저에 대한 단일 CSS
- 3. Chrome은 브라우저에 대해 다른 GUI를 어떻게 만들었습니까?
- 4. 다른 레이아웃에 대해 다른 CSS 사용
- 5. IE를 제외한 다른 브라우저에 대한 CSS 조건부 주석?
- 6. 웹킷 브라우저에 대한 다른 여백
- 7. 모든 브라우저에 대해 서로 다른 CSS 재설정, 적은 노력으로 최대한의 호환성을 얻을 수있는 좋은 생각입니까?
- 8. 다른 구성에 대해 다른 구성
- 9. 하나의 CSS 파일과 다른 페이지의 복수 파일
- 10. 다른 설정을 가진 두 개의 CSS 파일
- 11. 모든 브라우저에 대해 window.href
- 12. 서버의 이벤트에 대해 브라우저에 알리기
- 13. 다른 파일에 대해 다른 EOL을받는 이유는 무엇입니까?
- 14. Xcelsius의 다른 구성 요소에 대해 다른 보안
- 15. 다른 설명 문구에 대해 iPhone이 다른 이미지
- 16. 다른 컴퓨터에서 동일한 culture에 대해 다른 DateTimeFormat
- 17. ... 다른 브라우저를 다운로드 번호를 하나의 브라우저에 문제가
- 18. 다른 브라우저에 가장 적합한 방화범 소리는 무엇입니까?
- 19. 다른 템플릿의 다른 .js 파일
- 20. 다른 버전의 다른 파일 확장자
- 21. django-tinymce : 다른 인스턴스에 대해 다른 옵션 사용
- 22. 다른 옵션 내 CSS
- 23. 다른 CSS 구현 페이지 :
- 24. 내가 다른 파일 형식에 대해 서로 다른 colorschemes을 사용하려면 다른 창
- 25. 각 속성에 대해 타이밍 기능이 다른 CSS 애니메이션을 어떻게 정의합니까?
- 26. CSS 동일한 필드에 대해 두 가지 다른 스타일
- 27. CSS 질문 - 서로 다른 방향의 두 이미지에 대해 x를 반복합니다.
- 28. 현재/활성 경로에 대해 다른 CSS 클래스로 JSF 탐색
- 29. 다른 화면 크기의 Android CSS
- 30. 다른 PHP 포함 파일에 대해 다른 스타일 시트를 연결하는 방법
'lte' == "작거나 같음"따라서 IE6 이상이고 작동하지 않을 것입니다. 'gte '는 IE6 이상입니다.YUI +1 (버전 3이 출시되었음을 유의하십시오) – peirix