Css Sprites là gì

CSS Sprites thật ra đã là một cái tên khá cũ rồi và mình viết bài viết này hy vọng nó sẽ hữu ích cho các anh em nào chưa bao giờ biết đến cái tên của nó.

Giới thiệu một tí đây là link bài viết gốc của mình ahihi

//hungphamdevweb.com/front-end-quan-ly-va-toi-uu-webpage-bang-css-sprites.html

Vậy CSS Sprites Là Gì ?

CSS Sprites hay còn có một cái tên cún cơm khác là CSS Image Sprites, nó là một phương thức dùng để gộp nhiều ảnh nền cần sử dụng vào một file hình duy nhất và thường sử dụng thuộc tính background-position để xác định vị trí thành phần ảnh nền cần sử dụng.

Tại Sao Lại Cần Sử Dụng Sprites ?

Một trang web có thể chứa từ vài chục thậm chí vài trăm bức ảnh, trong số đó thì sẽ có chứa một số lượng lớn các bức ảnh có kích thước nhỏ như icons, logo hay social buttons Và hãy tưởng tượng nếu các anh em có một webpage có hơn 100 icons độc lập và vô số hình ảnh đại diện cho bài viết, sau khi trình duyệt load xong mã HTML, nó sẽ gửi đi vô vàng request đến server để lấy các bức ảnh này.

Để giải quyết vấn đề trên ta chỉ cần gộp tất cả các icons thành một file ảnh duy nhất và gửi 1 request đến server khi cần.

css sprites facebook nhìn cool ngầu vãi

Cách Hiện Thực Sprites:

Ở đây mình sẽ có hai phương thức để hiện thực Sprite:

• Cách thứ nhất: dùng photoshop gộp tất cả các icon thành một file và dùng CSS để lấy các icons bằng thuộc tính background-position.
• Cách thức hai: mình sẽ dùng Gulp/Grunt/Node để tự động giúp mình gộp tất cả các file ảnh và sinh ra file CSS giúp mình.

Cách Đầu Tiên:

Giả sử mình có 1 file hình mà mình đã gộp tất cả icons như vầy.

Đầu tiên mình sẽ viết css load bức ảnh ở trên cho 3 icon: twitter, facebook, vimeo.

.icon-twitter, .icon-facebook, .icon-vimeo{ background-image: url['./css-sprite.png']; background-repeat: no-repeat; }

Ba icon sẽ load cùng bức ảnh ở trên và chứa tất cả các icon nằm hết ở trên bức ảnh này.

Để lấy được icon theo đúng ý mình muốn lúc này mình sẽ dùng thuộc tính background-position để xác định vị trí của icon, height và width là hai thuộc tính dùng để scale đúng icon trong bức ảnh.

.icon-twitter { height: 72px; width: 72px; background-position: -2px -3px; } .icon-facebook { height: 72px; width: 72px; background-position: -78px -3px; } .icon-vimeo { height: 72px; width: 72px; background-position: -231px -3px; }

Và dưới đây là ví dụ cụ thể, các anh em có thể xem thêm để hiểu rõ thêm nhé

Cách Thứ Hai:

Update Later

Mình sẽ update vào một ngày không xa.

Hãy để bình luận của các anh em bên dưới để chúng ta cùng đàm đạo nha.