좌충우돌 웹퍼블리셔 일기

ie9 이하 버전에 셀렉터 제한이 있었다!!!!!

처음엔 라인 버그인줄 알고 이게 뭐지? 했었는데....셀렉터 제한이라니...-_-;ㅋ

이상한거 들어간 줄 알고 눈알 빠지게 찾을뻔 했구료.....

펌글 : http://mkyoon.com/105

원문 :

• http://joshua.perina.com/africa/gambia/fajara/post/2008/1/25/internet-explorer-css-file-size-limit
• http://www.agum.com/web/2008/03/11/internet-explorer-issue-maximum-of-32-css-import

CSS Limit #1.

하나의 CSS 파일의 크기가
288kb를 넘어설 경우,
인터넷 익스플로러에서는 읽어들이지 못하는 버그가 있다고 합니다.

CSS Limit #2.

CSS 선언. 즉, #selector { } 이러한 스타일 지정 갯수가
4096개를 넘어설 경우,
역시나 인터넷 익스플로러에서 읽어들이지 못하는 버그가 있다고 합니다.

CSS Limit #3.

@import 를 사용하여 여러 CSS 파일을 한 CSS 파일에 모아 관리할 수 있죠.

- style.css -
@import url("style_one.css");
@import url("style_two.css");

이러한 @import 갯수가 32개를 넘어설 경우,
그리고 그 depth 또한 3개의 chain을 넘어설 경우, (style.css>style_one.css>style_ie.css)
또 역시나 인터넷 익스플로러에서 읽어들이지 못하는 버그가 있다고 합니다.

위와 같은 수치 이상으로 늘어나지 않도록,
언제나 조심해야겠습니다.-_-; (언제나 신기한 IE.)

펌글 : http://invalid.kr/ie-css-selector-limit/

어제 트위터를 하다가 본 글인데

IE 9이하는 하나의 css파일에 선택자가 4095개 이상이면 더이상 적용이 안된다는 글을 보고 테스트 해봤다.

결과는 아래

ie에서는 4095까지만 css 가 적용되었고 4096이상은 적용되지 않았고 파이어폭스는 다 적용 되었다.
뭐지… 왜 이런 제한을 두지…??

하…노가다 할뻔 했는데 zen-coding

<style type="text/css">
  .set {float:left; height:100px; width:200px; background:#ccc;}
 </style> 

<script type="text/javascript">
  $(document).ready(function(){
   
   
   
   var totalWidth = 0;
   var set = $('.set')   
   
   set.each(function(){
    totalWidth = totalWidth + $(this).width();
   })
 
   
   $('.scroll').css('width', totalWidth)

  });  
   </script>

 <div class="scroll">
  <div class="set" style="width:250px">
  가나다
  </div>
 <div class="set" style="width:220px">
  가나다
  </div>
   <div class="set">
  가나다
  </div>
 
  <div class="set">
  가나다
  </div>
</div>

참고 사이트 : http://mediaqueri.es/

갤럭시s3 전까진 아래게 맞는거 같은데...요즘 해상도가 더 높은것들이 나와서...고민이다....

반응형 웹 디자인을 제작하기 위한 미디어쿼리 해상도 분기점 리스트 입니다.

resolution break point 라고도 합니다.

국내에도 다양한 해상도를 지닌 디바이스들이 존재하지만 현 디바이스 시장에서 가장 많이 사용되는 제품을 주로 하여,

해상도 분기점을 사용하는 편입니다.

꼭 위의 분기점들이 완벽하게 모든 기기들을 지원한다고 할 수는 없습니다. 그러나 css3 속성인 '미디어쿼리'를 지원하고 'viewport'를

사용한다면 현 시장에서 대중적으로 사용되는 디바이스에는 전부 지원이 가능한 분기점 리스트 입니다.