CSS 최적화 문제

내가 정말 좋아하는 CSS 스트라이프 및 타일 조합을 발견했습니다. 문제는, 모든 것 정말, 정말 느립니다. 궁금 하네,이 CSS를 더 최적화하기 위해 사용해야하는 기술이 있습니까? 아니면 기술 자체가 너무 까다로운가?CSS 최적화 문제

나는 less을 사용합니다.

.head { 
    .stripes; 
    .angled; 
} 

.stripes {   
     -webkit-background-size: 50px 50px; 
     -moz-background-size: 50px 50px; 
     background-size: 50px 50px; /* Controls the size of the stripes */ 

     -moz-box-shadow: 1px 1px 8px gray; 
     -webkit-box-shadow: 1px 1px 8px gray; 
     box-shadow: 1px 1px 8px gray; 
    } 

.angled { 
     background-color: @light-blue; 
     background-image: -webkit-gradient(linear, 0 100%, 100% 0, 
           color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent), 
           color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)), 
           color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent), 
           to(transparent)); 
     background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, 
          transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, 
          transparent 75%, transparent); 
     background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, 
          transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, 
          transparent 75%, transparent); 
     background-image: -ms-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, 
          transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, 
          transparent 75%, transparent); 
     background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, 
          transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, 
          transparent 75%, transparent); 
     background-image: linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, 
          transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, 
          transparent 75%, transparent); 
    }

출처

2012-06-14 Phil

개봉 된 그라데이션 기능을 사용하지 않는 이유는 무엇입니까? – Rooster

오픈 소스 .css 파일을 사용하고 싶습니다. – poepje

나는 그것을 조사 할 것이다. 더 빠릅니까? – Phil

몇 주 전, 세로 줄무늬를 얻을 수있는 간단한 두 가지 색상의 그라데이션으로 파이어 폭스, 오페라와 크롬에이 기술을 테스트했다. 큰 배경 크기에서는 꽤 잘 작동하지만 브라우저를 몇 픽셀로 설정하면 브라우저를 렌더링 할 때 더 많은 시간이 필요합니다. 특히 창을 최대화 할 때 더욱 그렇습니다. Opera와 Chrome에서 잘 처리합니다. 때로는 CPU 사용 그래프에서 스파이크를 볼 수 있지만 그렇게 나쁘지는 않습니다. 반면에 파이어 폭스는 CPU에 미쳐 간다. 그라디언트와 배경 크기가 구현되는 방식에 문제가있을 수 있습니다. 적어도 지금은 이미지를 사용하는 것이 더 낫다고 생각합니다. 다른 요청을 피하려면 base64를 사용하고 CSS에 넣을 수 있습니다.

출처

2012-06-20 13:05:32 szym

CSS 최적화 문제

답변

관련 문제