2014-12-17 3 views
2

안녕하세요 여러분, 예를 들어 적은 코드를 사용하여 브라우저 버전을 감지하는 것이 가능합니다. IE8 브라우저에로드하고 싶지 않은 코드가 적어서 내가 생각하는 경비원을 덜 발견했습니다. 필요하지만 내 문제는 가드 매개 변수를 true 또는 false로 설정하기 위해 브라우저를 덜 탐지하는 방법입니다.LESS를 사용하여 브라우저 버전을 확인하십시오.

http://lesscss.org/features/#mixin-guards-feature

.my-optional-style() when (@my-option = true) { 
    button { 
    color: white; 
    } 
} 
.my-optional-style() 

;

+3

이 왜 파일을 붙이지에서 조건부 주석 내에서로드 HTML? – adeneo

+0

조건부 주석을 사용하는 것이 더 좋지 않습니까? 배포하기 전에 Less 파일을 CSS로 미리 컴파일하는 경우 전혀 가능하지 않습니다. 브라우저에서의 동적 컴파일은 실제로 많이 권장되지 않습니다. – Harry

답변

3

Javascript에 태그를 추가 했으므로 다음을 제공합니다. 참고로 이것이 기본 LESS 접근 방식은 아닙니다. 조건부 주석이 CSS 또는 가능한 대안의 다른 수를로드 할 대

당신이 결정하고 그러나 경우에 .... 이런 식으로 표적으로 브라우저를 사용하는 것이 좋습니다 wouldnt가, 여기 당신은 간다 :

를 사용하여 JS를 :

var b = document.documentElement; 
     b.setAttribute('data-useragent', navigator.userAgent); 
     b.setAttribute('data-platform', navigator.platform); 
     b.className += ((!!('ontouchstart' in window) || !!('onmsgesturechange' in window))?' touch':''); 

예 : 아래의 내용은 html 태그입니다.

data-useragent='Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C)' 
data-platform='Win32' 

예를 들어 다음과 같이 중첩 할 수 있습니다.

html:not([data-useragent*='IE/8']){ 
    // non IE8 styles 
} 
1

을 (아래 예 아니라, 규칙을 집중해야합니다) I했습니다 항상 스니핑 바로 접속 사용자 에이전트에 <html> 요소 접근 방식에 클래스를 추가하는 조건부 주석을 선택했습니다. 조건부 주석은 Internet Explorer에서만 표시되고 다른 브라우저에서는 무시되므로 IE의 지정된 버전 만 클래스 이름을 가져옵니다. 제게는 자바에 의존 할 필요가 없다는 것이 가장 큰 이점입니다.

그것은 조금 같이 작동

:

HTML :

<!--[if IE 8]><html class="ie8"><![endif]--> 
<!--[if gt IE 8]><!--><html><!--<![endif]--> 

LESS : 이하/사스에

.ie8 { 
    .selector { 
     color: red; 
    } 
} 

중첩는 모든 그룹에 쉽게 당신의 IE8은이 경우 스타일을 덮어 씁니다. 현재이 방법에 대한 자세한 읽을 수 있습니다 :

http://www.paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/

을 그리고 여기에 조건부 주석에 대한 좀 더 일반적인 정보입니다 :

http://msdn.microsoft.com/en-us/library/ms537512%28v=vs.85%29.aspx

관련 문제