Nén CSS

Nén CSS Là Gì?

Nén CSS là quá trình loại bỏ tất cả các ký tự không cần thiết khỏi stylesheet mà không làm thay đổi hành vi của nó. Điều này bao gồm việc xóa khoảng trắng, ngắt dòng, chú thích và cú pháp dư thừa như dấu chấm phẩy cuối cùng và dấu ngoặc kép không cần thiết. Trình duyệt phân tích CSS đã nén giống hệt với bản gốc. W3C CSS Syntax Module định nghĩa ngữ pháp; khoảng trắng giữa các token là tùy chọn trừ khi nó phân tách các định danh. Quá trình nén khai thác điều này bằng cách thu gọn mọi thứ xuống mức ký tự tối thiểu cần thiết.

Công cụ nén CSS trực tuyến nhận stylesheet đã định dạng của bạn và tạo ra phiên bản gọn nhẹ được tối ưu hóa cho kích thước truyền tải. Mức tiết kiệm thông thường dao động từ 15% đến 40% tùy thuộc vào lượng khoảng trắng và số lượng chú thích trong nguồn. Với một stylesheet 50 KB, điều đó tương đương 7–20 KB byte ít hơn được gửi qua mạng trong mỗi lần tải trang. Kết hợp với nén gzip hoặc Brotli trên máy chủ, quá trình nén CSS làm giảm kích thước truyền tải cuối cùng hơn nữa vì đầu ra đã nén của CSS đã được thu nhỏ nhỏ hơn so với nén bản gốc có định dạng.

Nén CSS là một bước tiêu chuẩn trong pipeline build front-end. Các công cụ như cssnano, clean-css và esbuild chạy quá trình nén như một phần của build. Nhưng trong quá trình phát triển, bạn thường cần nén một đoạn code đơn lẻ để kiểm tra, nhúng một khối critical CSS, hoặc kiểm tra mức độ thu nhỏ của stylesheet trước khi thêm vào cấu hình bundle. Đó là lúc công cụ nén CSS trên trình duyệt phát huy tác dụng: dán CSS vào, nhận kết quả đã nén, sao chép và tiếp tục.

/* Main navigation styles */
.nav {
  display: flex;
  align-items: center;
  padding: 1rem 2rem;
  background-color: #1e293b;
}

/* Links inside nav */
.nav a {
  color: #e2e8f0;
  text-decoration: none;
  margin-right: 1.5rem;
  transition: color 0.2s ease;
}

.nav a:hover {
  color: #818cf8;
}

.nav{display:flex;align-items:center;padding:1rem 2rem;background-color:#1e293b}.nav a{color:#e2e8f0;text-decoration:none;margin-right:1.5rem;transition:color .2s ease}.nav a:hover{color:#818cf8}

Tại Sao Dùng Công Cụ Nén CSS Này?

Dán bất kỳ đoạn CSS nào và nhận kết quả đã nén trong vài mili giây. Không cần cấu hình build tool, không cần lệnh CLI, không cần tạo tài khoản.

Các Trường Hợp Sử Dụng Công Cụ Nén CSS

Các Kỹ Thuật Nén CSS

Công cụ nén CSS áp dụng nhiều phép biến đổi để giảm kích thước file. Mỗi kỹ thuật nhắm vào một loại dư thừa khác nhau trong nguồn. Bảng dưới đây liệt kê các kỹ thuật chính và mức tiết kiệm thông thường trên một stylesheet có định dạng:

Tỷ lệ tiết kiệm thay đổi theo dữ liệu đầu vào. Các file có nhiều chú thích hưởng lợi nhiều hơn từ việc xóa chú thích, trong khi các file đã gọn nhẹ sẽ thấy mức giảm nhỏ hơn. Lợi ích đáng tin cậy nhất đến từ việc xóa khoảng trắng và tối ưu hóa shorthand. Các công cụ nén nâng cao như cssnano còn gộp các selector trùng lặp, thu gọn các thuộc tính longhand thành shorthand (margin-top + margin-right + margin-bottom + margin-left thành margin), và xóa các khai báo bị ghi đè.

Nén CSS và Nén Gzip

Nén CSS và nén dữ liệu là bổ sung cho nhau, không thể thay thế nhau. Chúng hoạt động ở các lớp khác nhau và có thể kết hợp:

Ví Dụ Code

Cách nén CSS theo chương trình trong các ngôn ngữ và môi trường khác nhau:

import postcss from 'postcss'
import cssnano from 'cssnano'

const input = `
.nav {
  display: flex;
  padding: 0px 1rem;
  color: #ffffff;
  /* TODO: update color */
}
`

const result = await postcss([cssnano]).process(input, { from: undefined })
console.log(result.css)
// → ".nav{display:flex;padding:0 1rem;color:#fff}"

import csscompressor

css = """
.nav {
  display: flex;
  padding: 0px 1rem;
  color: #ffffff;
  /* navigation styles */
}
"""

minified = csscompressor.compress(css)
print(minified)
# → ".nav{display:flex;padding:0 1rem;color:#fff}"

package main

import (
	"fmt"
	"github.com/tdewolff/minify/v2"
	"github.com/tdewolff/minify/v2/css"
)

func main() {
	m := minify.New()
	m.AddFunc("text/css", css.Minify)

	input := ".nav { display: flex; padding: 0px 1rem; color: #ffffff; }"
	output, _ := m.String("text/css", input)
	fmt.Println(output)
	// → ".nav{display:flex;padding:0 1rem;color:#fff}"
}

# Using cssnano via PostCSS CLI
npx postcss styles.css --use cssnano -o styles.min.css

# Using clean-css CLI
npx clean-css-cli styles.css -o styles.min.css

# Quick one-liner with Node.js
node -e "const CleanCSS=require('clean-css');console.log(new CleanCSS().minify('body { margin: 0px; }').styles)"
# → "body{margin:0}"

Câu Hỏi Thường Gặp