IE 11 용 CSS 핵을 작성하는 방법? [복제]
이 질문에는 이미 답변이 있습니다.
IE 11 전용 CSS를 해킹하거나 작성할 수 있습니까? IE 11에서 좋지 않은 웹 사이트가 있습니다. 여기서 검색하지만 아직 해결책을 찾지 못했습니다.
CSS 선택기가 있습니까?
Microsoft 특정 CSS 규칙의 조합을 사용하여 IE11을 필터링하십시오.
<!doctype html>
<html>
<head>
<title>IE10/11 Media Query Test</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style>
@media all and (-ms-high-contrast:none)
{
.foo { color: green } /* IE10 */
*::-ms-backdrop, .foo { color: red } /* IE11 */
}
</style>
</head>
<body>
<div class="foo">Hi There!!!</div>
</body>
</html>
다음과 같은 이유로이 필터가 작동합니다.
사용자 에이전트가 선택자를 구문 분석 할 수없는 경우 (즉, 올바른 CSS 2.1이 아님) 선택기 및 다음 선언 블록 (있는 경우)도 무시해야합니다.
<!doctype html>
<html>
<head>
<title>IE10/11 Media Query Test</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style>
@media all and (-ms-high-contrast:none)
{
.foo { color: green } /* IE10 */
*::-ms-backdrop, .foo { color: red } /* IE11 */
}
</style>
</head>
<body>
<div class="foo">Hi There!!!</div>
</body>
</html>참고 문헌
- Internet Explorer 특정 CSS 또는 Internet Explorer 특정 JavaScript 코드와 같은 특정 상황에서 Internet Explorer 10 만 대상으로 지정하려면 어떻게합니까?
- CSS에 대한 Microsoft 확장
- CSS 2.1 : 규칙 세트, 선언 블록 및 선택기
진화하는 실에 비추어 아래를 업데이트했습니다.
IE 11 이상
_:-ms-fullscreen, :root .foo { property:value; }
IE 10 이상
_:-ms-lang(x), .foo { property:value; }
또는
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.foo{property:value;}
}
IE 10 만
_:-ms-lang(x), .foo { property:value\9; }
IE 9 이상
@media screen and (min-width:0\0) and (min-resolution: +72dpi) {
//.foo CSS
.foo{property:value;}
}
IE 9 및 10
@media screen and (min-width:0\0) {
.foo /* backslash-9 removes.foo & old Safari 4 */
}
IE 9 만
@media screen and (min-width:0\0) and (min-resolution: .001dpcm) {
//.foo CSS
.foo{property:value;}
}
IE 8,9 및 10
@media screen\0 {
.foo {property:value;}
}
IE 8 표준 모드 만
.foo { property /*\**/: value\9 }
IE 8
html>/**/body .foo {property:value;}
또는
@media \0screen {
.foo {property:value;}
}
IE 7
*+html .foo {property:value;}
또는
*:first-child+html .foo {property:value;}
IE 6, 7 및 8
@media \0screen\,screen\9 {
.foo {property:value;}
}
IE 6 및 7
@media screen\9 {
.foo {property:value;}
}
또는
.foo { *property:value;}
또는
.foo { #property:value;}
IE 6, 7 및 8
@media \0screen\,screen\9 {
.foo {property:value;}
}
IE 6
* html .foo {property:value;}
또는
.foo { _property:value;}
자바 스크립트 대안
모 더니 저
Modernizr은 기능을 감지하기 위해 페이지로드시 빠르게 실행됩니다. 그런 다음 결과가 포함 된 JavaScript 객체를 만들고 html 요소에 클래스를 추가합니다.
사용자 에이전트 선택
자바 스크립트 :
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; M.foo 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'
매우 대상이 지정된 CSS 선택기 허용 : 예 :
html[data-useragent*='Chrome/13.0'] .nav{
background:url(img/radial_grad.png) center bottom no-repeat;
}
각주
가능하면 해킹없이 문제를 식별하고 수정하십시오. 점진적인 향상 과 우아한 성능 저하를 지원합니다 . 그러나 이것은 항상 얻을 수있는 '이상적인 세계'시나리오입니다. 위와 같은 방법은 좋은 옵션을 제공하는 데 도움이됩니다.
Attribution / Essential Reading
Here is a two steps solution here is a hack to IE10 and 11
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/* IE10+ specific styles go here */
}
because IE10 and IE11 Supports -ms-high-cotrast you can take the advantage of this to target this two browsers
and if you want to exclude the IE10 from this you must create a IE10 specific code as follow it's using the user agent trick you must add this Javascript
var doc = document.documentElement;
doc.setAttribute('data-useragent', navigator.userAgent);
and this HTML tag
<html data-useragent="Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)">
and now you can write your CSS code like this
html[data-useragent*='MSIE 10.0'] h1 {
color: blue;
}
for more information please refer to this websites,wil tutorail, Chris Tutorial
And if you want to target IE11 and later,here is what I've found:
_:-ms-fullscreen, :root .selector {}
Here is a great resource for getting more information: browserhacks.com
I have been writing these and contributing them to BrowserHacks.com since the fall of 2013 -- this one I wrote is very simple and only supported by IE 11.
<style type="text/css">
_:-ms-fullscreen, :root .msie11 { color: blue; }
</style>
and of course the div...
<div class="msie11">
This is an Internet Explorer 11 CSS Hack
<div>
So the text shows up in blue with internet explorer 11. Have fun with it.
-
More IE and other browser CSS hacks on my live test site here:
UPDATED: http://browserstrangeness.bitbucket.io/css_hacks.html
MIRROR: http://browserstrangeness.github.io/css_hacks.html
(If you are also looking for MS Edge CSS Hacks, that is where to go.)
You can use the following code inside the style tag:
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/* IE10+ specific styles go here */
}
Below is an example that worked for me:
<style type="text/css">
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/* IE10+ specific styles go here */
#flashvideo {
width:320px;
height:240;
margin:-240px 0 0 350px;
float:left;
}
#googleMap {
width:320px;
height:240;
margin:-515px 0 0 350px;
float:left;
border-color:#000000;
}
}
#nav li {
list-style:none;
width:240px;
height:25px;
}
#nav a {
display:block;
text-indent:-5000px;
height:25px;
width:240px;
}
</style>
Please note that since (#nav li) and (#nav a) are outside of the @media screen ..., they are general styles.
You can use js and add a class in html to maintain the standard of conditional comments:
var ua = navigator.userAgent,
doc = document.documentElement;
if ((ua.match(/MSIE 10.0/i))) {
doc.className = doc.className + " ie10";
} else if((ua.match(/rv:11.0/i))){
doc.className = doc.className + " ie11";
}
Or use a lib like bowser:
Or modernizr for feature detection:
So I found my own solution to this problem in the end.
After searching through Microsoft documentation I managed to find a new IE11 only style msTextCombineHorizontal
In my test, I check for IE10 styles and if they are a positive match, then I check for the IE11 only style. If I find it, then it's IE11+, if I don't, then it's IE10.
Code Example: Detect IE10 and IE11 by CSS Capability Testing (JSFiddle)
I will update the code example with more styles when I discover them.
NOTE: This will almost certainly identify IE12 and IE13 as "IE11", as those styles will probably carry forward. I will add further tests as new versions roll out, and hopefully be able to rely again on Modernizr.
I'm using this test for fallback behavior. The fallback behavior is just less glamorous styling, it doesn't have reduced functionality.
I found this helpful
<?php if (strpos($_SERVER['HTTP_USER_AGENT'], 'Trident/7.0; rv:11.0') !== false) { ?>
<script>
$(function(){
$('html').addClass('ie11');
});
</script>
<?php } ?>
Add this under your <head> document
참고URL : https://stackoverflow.com/questions/20541306/how-to-write-a-css-hack-for-ie-11
'Programing' 카테고리의 다른 글
| UDP 대 TCP, 얼마나 빠릅니까? (0) | 2020.05.17 |
|---|---|
| 시스템 재시작시 영구 자동 시작 (노드) (0) | 2020.05.17 |
| 리눅스 : 백그라운드 작업 종료 (0) | 2020.05.17 |
| 포드 설치 -bash : 포드 : 명령을 찾을 수 없음 (0) | 2020.05.17 |
| 인덱스 배열을 1-hot 인코딩 된 numpy 배열로 변환 (0) | 2020.05.17 |