Front End – Quản Lý Và Tối Ưu Webpage Bằng CSS Sprites

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ó.

alt text

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

https://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.

alt textcss 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.

alt text

Đầ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 :smile: :smile: :smile:
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.

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Hùng Phạm

14 bài viết.
14 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
4 2
Webpack là một cái tên không quá mới nhưng mình nghĩ không ít lần các anh em đã nghe qua nó. Nhiệm vụ chính của Webpack trong hệ thống là dùng để đ...
Hùng Phạm viết 7 tháng trước
4 2
White
4 0
Trước khi bắt đầu viết tiếp phần 2, các anh em có thể xem lại Phần 1 của mình theo đường dẫn bên dưới: (Link) Hoặc là có thể xem bài viết full cả...
Hùng Phạm viết 6 tháng trước
4 0
White
4 4
Cũng như hôm bữa ( cách đây có 6 tháng trước chứ nhiêu :smile_cat: ) mình có kể là mình đang ở Mã để làm việc. Bài viết cũ còn đây mời cả nhà vô xe...
Hùng Phạm viết 1 tháng trước
4 4
Bài viết liên quan
White
4 0
Trước khi bắt đầu viết tiếp phần 2, các anh em có thể xem lại Phần 1 của mình theo đường dẫn bên dưới: (Link) Hoặc là có thể xem bài viết full cả...
Hùng Phạm viết 6 tháng trước
4 0
White
4 2
Webpack là một cái tên không quá mới nhưng mình nghĩ không ít lần các anh em đã nghe qua nó. Nhiệm vụ chính của Webpack trong hệ thống là dùng để đ...
Hùng Phạm viết 7 tháng trước
4 2
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
14 bài viết.
14 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!