CSS 스프라이트의 대안

CSS 스프라이트를 만들고 유지 관리하는 것은 많은 작업입니다. 스프라이트를 생성하고 CSS에 좌표를 작성하는 것은 부담입니다. SASS/Compass spriting과 같은 프런트 엔드 기술은 프론트 엔드에서 빌드 단계를 수행하는 데 도움이되지만 필요합니다. 혼전없이 하나의 HTTP 호출 만 필요로하는 spriting을위한 대안이 있습니까?CSS 스프라이트의 대안

예 : 한 번의 호출로 결합하고 싶지만 좌표를 결정할 필요가없는 모든 이미지를 포함하는 일종의 zip 형식을 갖는 것이 좋을 것입니다. 당신은 단순히 zip의 이미지를 가리키고 그것을 사용합니다. 이 작품에 뭔가가 있습니까?

편집 : 위의 지퍼 아이디어는 실제로 제작시 사양입니다. 여기에 대해 읽어보십시오 : http://limi.net/articles/resource-packages. 그들은 SPDY protocol과 HTTP pipelining을 선호하여 사양을 떨어 뜨리기로 결정했습니다. 따라서 작업이 완료되었지만 프로토콜 수준에서는 이전 버전과의 호환성을 유지할 수 있습니다.

출처

2014-05-24 koenpeters

방금 파일을 변환하는 데 도움이되는 [매우 간단한 데이터 -URL 변환기] (http://jsbin.com/tomale/1/)를 만들었습니다.나는 또한 아래 나의 대답에 그 링크를 포함시켰다. – Joeytje50

대체 방법 중 하나는 data uri scheme입니다. HTML 또는 CSS로 직접 이미지를 임베드 할 수 있습니다. 그러나 그것은 또한 유지 될 필요가있다. 제한 사항을 참조하십시오. 위키 피 디아에서 도난 예 :

HTML :

는

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA 
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO 
9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />

CSS : 당신이 혼란을 의지하지 않으면

ul.checklist li.complete { 
    padding-left: 20px; 
    background: white url('data:image/png;base64,iVBORw0KGgoAA 
AANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAD///+l2Z/dAAAAM0l 
EQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8yw83NDDeNGe4Ug9C9zwz3gVLMDA/A6 
P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC') no-repeat scroll left top; 
}

은 "정상"데이터의 URI와 CSS는, 당신은 전용 CSS를 만들 수 있습니다 - 이미지 파일 만 포함합니다. 단점 중 하나는 물론 트래픽입니다. 인코딩 된 데이터는 이진 데이터보다 많은 공간을 필요로합니다.

트래픽을 줄이려면 gzipped 파일을 전달할 수 있습니다. Some webservers에는 확장자가 있습니다.

출처

2014-05-24 17:02:17

각 아이콘을 단순히 데이터 URI로 변환하여 대신 사용할 수 있습니다. 거기에 당신이 당신의 아이콘을 업로드 할 수있는 데이터 - URI 변환기의 부하가 많이 있지만, 또한 파일을 선택하는 데 필요한 단지 자신 만의 매우 간단한 데이터 - URI 변환기 here을 만들었고 그것은 당신에게 데이터 URI를 제공합니다 바로 당장. 그런 다음 사용하여 배경 이미지로 스프라이트를 추가 할 수 있습니다이 :

#red-dot { 
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="); 
    width:5px; 
    height:5px; 
}

데이터 URI를 사용의 이점은 그들이 여분을 필요로하지 않는다는 것입니다

(URI는 wikipedia에서 찍은 데이터.) 요청을 브라우저에서 가져 오면 스타일 시트를로드 할 때 모든 데이터가 이미로드되어 있으므로 스프레드 시트의 속도를 늦추지 않습니다 (스프라이트와 완전히 똑같은 효과입니다). 이것은 현재 CSS 스프라이트를 사용하는 것 이외의 작은 아이콘을 포함하는 가장 일반적인 방법입니다. 개인적으로 데이터 URI를 선호합니다. 주로 질문에 설명 된 CSS 스프라이트의 유지 관리 문제 때문입니다.

출처

2014-05-24 17:03:27 Joeytje50

SVG를 사용하는 또 다른 방법은 모든 이미지가 동일한 영역에 id로 설정되어 각 부분을 display : none 또는 display : block/whatever로 설정하는 것입니다. an example on hover는 :

#plate, svg:hover #cup { 
    opacity:1; 
    transition:1s; 
} 
svg:hover #plate, #cup { 
    opacity:0; 
    transition:1s; 
} 
path { 
    fill:green 
} 
path:hover { 
    fill:yellow; 
}

장점은 변경된 전환 및 색상을받을 수 품질의 느슨한없이 조정할 수 있다는 것이다.

출처

2014-05-24 17:06:38

CSS 스프라이트의 대안

답변

관련 문제