Wulin.com의 기사 소개 (www.vevb.com) : CSS Sprites의 장단점.
CSS 스프라이트의 장단점
이 기술과 관련하여 가장 큰 이점은 다음과 같습니다.
1. 웹 페이지가로드 될 때 HTTP 요청 수를 줄입니다. 이 상황은 초기 로딩과 같은 서버 측에서 자원을 다시 인쇄 해야하는 경우에만 적용되는 것 같습니다. 그러나 어쨌든 트래픽이 높거나 재 장전이 빈번한 웹 페이지에 여전히 매우 유용합니다.
2. 링크의 배경 이미지를 만들 때 a : 호버 할 때 배경 이미지를로드하여 배경 깜박임을 방지 할 수 있습니다. 나는 개인적으로 이것이 사용자 경험을 향상시키는 데 중요한 의미라고 생각합니다.
3. 사진은 관리하기 쉽습니다. 전제는 스티칭 사진에 특정 규칙이 있다는 것입니다. 아래 그림에서 볼 수 있듯이 모든 웹 사이트에서 사용하는 버튼 배경의 그림입니다. 이를 통해 웹 사이트의 모든 버튼 스타일을 직관적으로 볼 수 있습니다. (나는 개인적으로 그림의 특정 속성에 따라 그림을 철자하는 것을 좋아합니다. 한 그림은 아이콘 또는 BTN 배경입니다 ... 이런 식으로, 그림을 관리 할 수 있고, 특정 규칙을 가진 그림을 따라갈 수 있습니다. 물론, 물론, 모듈에 따라 그림을 생성하기 위해 그림이 생성 될 것입니다. 그것은 작은 아이콘을 사용하여 전체 큰 그림을 호출하는 문제를 효과적으로 방해 할 수 있습니다.)
CSS 스프라이트 응용 프로그램 범위 :
1. HTTP 요청 수를 줄여 웹 페이지 가속도를 완료해야합니다.
2. 웹 페이지에는 많은 작은 아이콘이 포함되어 있습니다. 또는 일부 아이콘은 매우 다재다능합니다.
3. 웹 페이지에 사전로드 해야하는 사진이 있습니다. 주로 A 및 A : 호버 배경 이미지와 관련이 있습니다. A와 A : 호버의 배경 이미지가 별도로로드되면 사용자의 마우스가 버튼으로 이동하고 버튼의 배경이 갑자기 사라지고 나타나서 플래시가 발생합니다. 버튼의 텍스트 색상이 배경과 동일하거나 비슷하면 더욱 부끄러워서 사람들이 버튼이 사라 졌다고 느낄 수 있습니다.
충족해야 할 조건
웹 페이지에서는이 기술을 통해 구성된 사진에 대한 규칙을 갖는 것이 가장 좋습니다. 너비 또는 높이를 설정하십시오. 너비와 높이를 설정하는 것이 가장 좋습니다. 타일이 필요한 그림은 분명히 스프라이트에 적합하지 않습니다.
위 그림에서 볼 수 있듯이 버튼은 고정 너비와 높이의 상황에 따라 결정됩니다.
고정 너비의 경우 몇 개의 작은 그림을 병렬로 배열 할 수 있습니다. 높이가 설정되면 작은 그림은 수직으로 배열됩니다.
배경이 고정 너비 나 고정 높이가 아닌 경우 고정 너비 나 고정 높이가없는 경우 CSS 스프라이트 기술을 쉽게 사용하기 쉽습니다. 높이가 강제로 설정되면 향후 유지 보수에는 매우 바람직하지 않습니다.
요약
이 기술이 좋든 나쁜지 여부는 일반화 될 수 없습니다. 웹 사이트의 특정 상황에 따라 다릅니다. 분석 할 때 먼저 필요한지 여부를 결정하고 개발 비용, 유지 보수 비용 및 기타 문제를 종합적으로 통합하십시오. 결정을 내리기 전에 실제 상황에 맞는 계획을 찾으십시오. 스프라이트를 제 시간에 사용하면 다양한 크기, 정렬 및 사용을 유지하기위한 극단적 인 방법으로 사진을 놓지 않는 것이 좋습니다. 이러한 극단은 HTTP 요청의 수를 줄이지 않고 향후 유지 보수에 숨겨진 위험이 있습니다.