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ảivà bộ 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-image
và background-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:
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.
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.