CSS Minifier - Nén Mã CSS Trực Tuyến

      
body {
    padding-left: 11em;
    font-family: Georgia, "Times New Roman", Times, serif;
    color: purple;
    background-color: #d8da3d
}

ul.navbar {
    position: absolute;
    top: 2em;
    left: 1em;
    width: 9em
}

h1 {
    font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif
}
      
    

Minification là gì?

Minification là quá trình giảm thiểu mã và đánh dấu trong các trang web và tệp kịch bản của bạn. Đây là một trong những phương pháp chính được sử dụng để giảm thời gian tải và sử dụng băng thông trên các trang web. Minification cải thiện đáng kể tốc độ và khả năng truy cập của trang, trực tiếp chuyển thành trải nghiệm người dùng tốt hơn. Nó cũng có lợi cho những người dùng truy cập trang web của bạn thông qua một gói dữ liệu hạn chế và muốn tiết kiệm băng thông khi lướt web.

Tại sao cần nén CSS?

Khi tạo CSS, các nhà phát triển thường sử dụng khoảng cách, chú thích và biến có tên rõ ràng để làm cho mã và đánh dấu dễ đọc cho chính họ. Nó cũng giúp những người khác có thể làm việc trên tài sản sau này. Mặc dù điều này là một điểm cộng trong giai đoạn phát triển, nhưng nó trở thành một điểm trừ khi phục vụ các trang của bạn. Máy chủ web và trình duyệt có thể phân tích nội dung tệp mà không cần chú thích và mã được cấu trúc tốt, cả hai đều tạo ra lưu lượng mạng bổ sung mà không cung cấp bất kỳ lợi ích chức năng nào.

Để nén các tệp CSS, cần loại bỏ chú thích và khoảng trắng thừa, cũng như rút gọn tên biến để giảm thiểu mã và giảm kích thước tệp. Phiên bản tệp đã nén cung cấp cùng một chức năng trong khi giảm băng thông của các yêu cầu mạng.

Ví dụ

Trước khi nén

      
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}
      
    

Sau khi nén

      
nav ul{margin:0;padding:0;list-style:none;}nav li{display:inline-block;}nav a{display:block;padding:6px 12px;text-decoration:none;}