각 브라우저마다 CSS가 다릅니 까?

Question

특정 브라우저에 대해 다른 CSS 파일을로드 할 수 있습니까? (가난한 의사 코드) 같은

: 당신이 원하는

if firefox 
<link rel="stylesheet" type="text/css" href="includes/MyCssFirefox.css" /> 
if chrome 
<link rel="stylesheet" type="text/css" href="includes/MyCssChrome.css" /> 
if Safari 
<link rel="stylesheet" type="text/css" href="includes/MyCssSafari.css" /> 

Answer 1

이상적인 해결책은 존재하지 않는 : 당신이 그것을 어떻게하려고하는 경우

불행하게도, 크로스 브라우저 솔루션이 존재하지 않습니다 HTML 자체. 그러나 대부분의 IE 버전에서 작동합니다. 그러한처럼 : 그래서 최선의 해결책

<!--[if IE]> 
<link rel="stylesheet" type="text/css" href="includes/myIEGeneralStyle.css" /> 
<![endif]--> 
<!--[if IE 6]> 
<link rel="stylesheet" type="text/css" href="includes/myIE6Style.css" /> 
<![endif]--> 
<!--[if IE 7]> 
<link rel="stylesheet" type="text/css" href="includes/myIE7Style.css" /> 
<![endif]--> 
<!--[if IE 8]> 
<link rel="stylesheet" type="text/css" href="includes/myIE8Style.css" /> 
<![endif]--> 

:

방법 등과 같은 자바 스크립트 솔루션에 대해 : Browser Detection. 더 명확히하기 위해이 클래스에 대해 조금 읽기, 무엇을 해당 파일이 기본적으로하고있는 것은 같은처럼 단순히 개념이다 :

var browser = navigator.userAgent.toLowerCase().indexOf('chrome') > -1 ? 'chrome' : 'other'; 

을 분명히, 그냥 브라우저의 종류를 감지보다 더 많은 작업을 수행합니다. 실제로, 그것은 버전, OS, 그리고 당신이 그 링크에서 읽을 수있는 더 많은 세부 사항을 알고 있습니다. 하지만, 'Chrome'을 'mozilla', 'explorer'등으로 바꾸어 모든 브라우저 유형을 확인합니다 ...

그런 다음 CSS 파일을 추가하려면 다음과 같은 조건문을 따르십시오. :

if (BrowserDetect.browser.indexOf("chrome")>-1) { 
document.write('<'+'link rel="stylesheet" href="../component/chromeCSSStyles.css" />'); 
} else if (BrowserDetect.browser.indexOf("mozilla")>-1) { 
    document.write('<'+'link rel="stylesheet" href="../component/mozillaStyles.css" />'); 
} else if (BrowserDetect.browser.indexOf("explorer")>-1) { 
    document.write('<'+'link rel="stylesheet" href="../component/explorerStyles.css" />'); 
} 

행운과 희망이 도움이됩니다!

Answer 2

조건부 주석을 사용하여 IE 브라우저를 타겟팅 할 수 있습니다. 이것 좀보세요 : http://css-tricks.com/how-to-create-an-ie-only-stylesheet/. firefox를 타겟팅하려면이 대답을 확인하십시오 : https://stackoverflow.com/a/953491/1941910. 하지만 파이어 폭스, 크롬 또는 사파리를 타겟팅 할 필요가 없다고 생각합니다. 모두 CSS를 적용하는 것이 좋습니다.

Answer 3

서버 측에서이 작업을 수행 할 수 있습니다.

if(Request.UserAgent is chrome){   
    //here output chrome stylesheet 
} 

Answer 4

그래,

<link rel="stylesheet" type="text/css" browser="mozillafirefox" href="includes/firefox.css" /> 
<link rel="stylesheet" type="text/css" browser="googlechrome" href="includes/chrome.css" /> 
<link rel="stylesheet" type="text/css" browser="msinternetexpl" href="includes/ie.css" />