Nội dung tiếp thị

Cách sử dụng CSS Sprites với chế độ sáng và tối

CSS sprites là một kỹ thuật được sử dụng trong phát triển web để giảm số lượng HTTP yêu cầu được thực hiện bởi một trang web. Chúng liên quan đến việc kết hợp nhiều hình ảnh nhỏ thành một tệp hình ảnh lớn hơn và sau đó sử dụng CSS để hiển thị các phần cụ thể của hình ảnh đó dưới dạng các thành phần riêng lẻ trên trang web.

Lợi ích chính của việc sử dụng CSS sprites là chúng có thể giúp cải thiện thời gian tải trang cho một trang web. Mỗi khi một hình ảnh được tải trên một trang web, nó yêu cầu một yêu cầu HTTP riêng, điều này có thể làm chậm quá trình tải. Bằng cách kết hợp nhiều hình ảnh thành một hình ảnh sprite duy nhất, chúng tôi có thể giảm số lượng yêu cầu HTTP cần thiết để tải trang. Điều này có thể dẫn đến một trang web nhanh hơn và phản hồi nhanh hơn, đặc biệt đối với các trang web có nhiều hình ảnh nhỏ như biểu tượng và nút.

Sử dụng các họa tiết CSS cũng cho phép chúng tôi tận dụng bộ nhớ đệm của trình duyệt. Khi người dùng truy cập một trang web, trình duyệt của họ sẽ lưu vào bộ đệm hình ảnh sprite sau yêu cầu đầu tiên. Điều này có nghĩa là các yêu cầu tiếp theo đối với các phần tử riêng lẻ trên trang web đang sử dụng hình ảnh sprite sẽ nhanh hơn nhiều do trình duyệt đã có sẵn hình ảnh trong bộ đệm của nó.

CSS Sprites không còn phổ biến như trước đây

CSS sprites vẫn thường được sử dụng để cải thiện tốc độ trang web, mặc dù chúng có thể không còn phổ biến như trước đây. Vì băng thông cao, webp định dạng, Nén hình ảnh, mạng phân phối nội dung (CDN), lười tảibộ nhớ đệm mạnh công nghệ, chúng tôi không thấy nhiều họa tiết CSS như trước đây trên web… mặc dù đây vẫn là một chiến lược tuyệt vời. Điều này đặc biệt hữu ích nếu bạn có một trang tham chiếu vô số hình ảnh nhỏ.

Ví dụ CSS Sprite

Để sử dụng CSS sprite, chúng ta cần xác định vị trí của từng hình ảnh riêng lẻ trong tệp hình ảnh sprite bằng CSS. Điều này thường được thực hiện bằng cách thiết lập background-imagebackground-position thuộc tính cho từng phần tử trên trang web sử dụng hình ảnh sprite. Bằng cách chỉ định tọa độ x và y của hình ảnh trong sprite, chúng ta có thể hiển thị các hình ảnh riêng lẻ dưới dạng các thành phần riêng biệt trên trang. Đây là một ví dụ… chúng tôi có hai nút trong một tệp hình ảnh:

Ví dụ CSS Sprite

Nếu chúng tôi muốn hình ảnh bên trái được hiển thị, chúng tôi có thể cung cấp cho div arrow-left với tư cách là lớp nên tọa độ chỉ hiển thị bên đó:

.arrow-left {
  width: 200px;
  height: 200px;
  background: url('sprite.png') no-repeat 0 0;
}

Và nếu chúng tôi muốn hiển thị mũi tên bên phải, chúng tôi sẽ đặt lớp cho div của mình thành arrow-right.

.arrow-right {
  width: 200px;
  height: 200px;
  background: url('sprite.png') no-repeat -200px 0;
}

CSS Sprites cho chế độ sáng và tối

Một cách sử dụng thú vị của điều này là với các chế độ sáng và tối. Có lẽ bạn có một logo hoặc hình ảnh có chữ màu tối trên đó không hiển thị trên nền tối. Tôi đã làm ví dụ này về một nút có tâm màu trắng cho chế độ sáng và tâm tối cho chế độ tối.

css sprite ánh sáng tối

Sử dụng CSS, tôi có thể hiển thị nền hình ảnh phù hợp dựa trên việc người dùng đang sử dụng chế độ sáng hay chế độ tối:

:root {
  --sprite-image: url('sprite.png');
  --sprite-width: 200px;
  --sprite-height: 400px;
  --sprite-x-light: 0;
  --sprite-y-light: 0;
  --sprite-x-dark: -200px;
  --sprite-y-dark: 0;
}

@media (prefers-color-scheme: dark) {
  :root {
    --sprite-x-light: 200px;
    --sprite-x-dark: 0;
  }
}

.icon {
  width: 32px;
  height: 32px;
  background: var(--sprite-image) no-repeat var(--sprite-x-light) var(--sprite-y-light);
}

.icon:hover {
  background-position: var(--sprite-x-dark) var(--sprite-y-dark);
}

Ngoại lệ: Ứng dụng email có thể không hỗ trợ điều này

Một số ứng dụng email, chẳng hạn như Gmail, không hỗ trợ các biến CSS, được sử dụng trong ví dụ mà tôi đã cung cấp để chuyển đổi giữa chế độ sáng và tối. Điều này có nghĩa là bạn có thể cần sử dụng các kỹ thuật thay thế để chuyển đổi giữa các phiên bản khác nhau của hình ảnh sprite cho các cách phối màu khác nhau.

Một hạn chế khác là một số ứng dụng email không hỗ trợ một số thuộc tính CSS thường được sử dụng trong CSS sprite, chẳng hạn như background-position. Điều này có thể gây khó khăn cho việc định vị các hình ảnh riêng lẻ trong tệp hình ảnh sprite.

Douglas Karr

Douglas Karr là CMO của mởINSIGHTS và người sáng lập ra Martech Zone. Douglas đã giúp hàng chục công ty khởi nghiệp MarTech thành công, đã hỗ trợ thẩm định hơn 5 tỷ USD trong các thương vụ mua lại và đầu tư của Martech, đồng thời tiếp tục hỗ trợ các công ty triển khai và tự động hóa các chiến lược tiếp thị và bán hàng của họ. Douglas là một chuyên gia và diễn giả về chuyển đổi kỹ thuật số và MarTech được quốc tế công nhận. Douglas cũng là tác giả đã xuất bản sách hướng dẫn của Dummie và sách lãnh đạo doanh nghiệp.

Bài viết liên quan

Back to top
Đóng

Đã phát hiện ra khối quảng cáo

Martech Zone có thể cung cấp cho bạn nội dung này miễn phí vì chúng tôi kiếm tiền từ trang web của mình thông qua doanh thu quảng cáo, liên kết đơn vị liên kết và tài trợ. Chúng tôi sẽ đánh giá cao nếu bạn xóa trình chặn quảng cáo của mình khi bạn xem trang web của chúng tôi.