[css] Internet Explorer의 CSS 규칙 제한
Internet Explorer의 어리석은 CSS 제한에 관한 상충되는 정보를 읽었습니다. 나는 당신이 31 <style>과 <link>태그 (결합) 만 가질 수 있으며 각 시트는 최대 31 @import-s 를 가질 수 있음을 이해하고 있습니다 (31- <link>s, 각 31- @imports는 훌륭하지만 훌륭합니다).
그러나 4095 규칙은 명확하지 않습니다.이 4095 규칙이 문서 또는 시트 당입니까? 예를 들어, <link>각각 4000 개의 규칙이있는 두 개의 스타일 시트를 사용하여 작동시킬 수 있습니까?
타사 편집 2018
이 msdn 블로그 게시물 stylesheet-limits-in-internet-explorer에서 추가 정보가 제공됩니다.
답변
Microsoft에서 다음을 참조하십시오.
IE9 의 규칙 은 다음과 같습니다.
- 시트는 4095 선택기까지 포함 할 수 있습니다 (데모)
- 시트 31 장까지 @Import 수도
- @import nesting은 최대 4 단계의 깊이를 지원합니다
IE10 의 규칙 은 다음과 같습니다.
- 시트는 65534 선택기까지 포함 할 수 있습니다
- 시트는 4095 장까지 @import 수 있습니다
- @import nesting은 최대 4095 레벨까지 지원
시트 제한으로 4095 규칙 테스트
확인 을 위해 3 개의 파일 로 요점 을 만들었습니다 . 하나의 HTML과 두 개의 CSS 파일.
- 첫 번째 파일에는 4096 개의 선택기가 포함되어 있으며 마지막 선택기가 읽지 않음을 의미합니다.
- 두 번째 파일 (4095.css)에는 하나의 적은 선택기가 있으며 읽기가 가능하며 이전 파일에서 다른 4095 선택기를 이미 읽었음에도 불구하고 IE에서 완벽하게 작동합니다.
답변
CSS 규칙을 세는 자바 스크립트 스크립트 :
function countCSSRules() {
var results = '',
log = '';
if (!document.styleSheets) {
return;
}
for (var i = 0; i < document.styleSheets.length; i++) {
countSheet(document.styleSheets[i]);
}
function countSheet(sheet) {
if (sheet && sheet.cssRules) {
var count = countSelectors(sheet);
log += '\nFile: ' + (sheet.href ? sheet.href : 'inline <style> tag');
log += '\nRules: ' + sheet.cssRules.length;
log += '\nSelectors: ' + count;
log += '\n--------------------------';
if (count >= 4096) {
results += '\n********************************\nWARNING:\n There are ' + count + ' CSS rules in the stylesheet ' + sheet.href + ' - IE will ignore the last ' + (count - 4096) + ' rules!\n';
}
}
}
function countSelectors(group) {
var count = 0;
for (var j = 0, l = group.cssRules.length; j < l; j++) {
var rule = group.cssRules[j];
if (rule instanceof CSSImportRule) {
countSheet(rule.styleSheet);
}
if (rule instanceof CSSMediaRule) {
count += countSelectors(rule);
}
if( !rule.selectorText ) {
continue;
}
count += rule.selectorText.split(',').length;
}
return count;
}
console.log(log);
console.log(results);
};
countCSSRules();답변
위의 유사한 스 니펫에 대해 언급 할 담당자가 충분하지 않지만 @media 규칙을 계산합니다. Chrome 콘솔에 놓으십시오.
function countCSSRules() {
var results = '',
log = '';
if (!document.styleSheets) {
return;
}
for (var i = 0; i < document.styleSheets.length; i++) {
countSheet(document.styleSheets[i]);
}
function countSheet(sheet) {
var count = 0;
if (sheet && sheet.cssRules) {
for (var j = 0, l = sheet.cssRules.length; j < l; j++) {
if (!sheet.cssRules[j].selectorText) {
if (sheet.cssRules[j].cssRules) {
for (var m = 0, n = sheet.cssRules[j].cssRules.length; m < n; m++) {
if(sheet.cssRules[j].cssRules[m].selectorText) {
count += sheet.cssRules[j].cssRules[m].selectorText.split(',').length;
}
}
}
}
else {
count += sheet.cssRules[j].selectorText.split(',').length;
}
}
log += '\nFile: ' + (sheet.href ? sheet.href : 'inline <style> tag');
log += '\nRules: ' + sheet.cssRules.length;
log += '\nSelectors: ' + count;
log += '\n--------------------------';
if (count >= 4096) {
results += '\n********************************\nWARNING:\n There are ' + count + ' CSS rules in the stylesheet ' + sheet.href + ' - IE will ignore the last ' + (count - 4096) + ' rules!\n';
}
}
}
console.log(log);
console.log(results);
};
countCSSRules();출처 : https://gist.github.com/krisbulman/0f5e27bba375b151515d
답변
Internet Explorer 의 Stylesheet Limits 라는 제목의 MSDN IEInternals 블로그 페이지에 따르면 IE 9를 통해 IE 6에 적용되는 위에 표시된 제한 (31 시트, 시트 당 4095 규칙 및 4 수준)이 IE 9에서 다음과 같이 증가했습니다. :
- 시트에는 최대 65534 개의 규칙이 포함될 수 있습니다.
- 문서는 최대 4095 개의 스타일 시트를 사용할 수 있습니다
- @import 중첩은 4095 수준으로 제한됩니다 (4095 스타일 시트 제한으로 인해).
답변
그런트를 사용하는 사람들에게이 문제에 대한 좋은 해결책 :
답변
FireFox dev 에디션의 개발자 도구는 CSS 규칙을 보여줍니다
이전 IE 버전 / 큰 CSS 파일로 여전히 싸우는 사람들에게 유용 할 수 있습니다.
답변
288kb보다 큰 CSS 파일은 ~ 288kb까지만 읽을 수 있다는 점도 주목할 가치가 있다고 생각합니다. 이후의 모든 것은 IE <= 9에서 완전히 무시됩니다.
http://joshua.perina.com/africa/gambia/fajara/post/internet-explorer-css-file-size-limit
내 조언은 더 큰 응용 프로그램의 CSS 파일을 모듈 및 구성 요소로 나누고 파일 크기를 계속 주시하는 것입니다.
