Định dạng & Nén CSS

Định dạng CSS - Format và Làm đẹp CSS Online

Công cụ định dạng và làm đẹp CSS online mạnh mẽ giúp bạn format, làm đẹp và nén code CSS. Có tính năng tô sáng cú pháp, tùy chỉnh thụt lề và tùy chọn mở rộng selector. Hoàn hảo cho lập trình viên web, designer và bất kỳ ai làm việc với stylesheet.

Sự khác biệt giữa định dạng và rút gọn CSS là gì?

Định dạng (còn gọi là làm đẹp hoặc in đẹp) tổ chức lại bảng kiểu của bạn để con người dễ đọc: một khai báo trên mỗi dòng, thụt lề nhất quán, dòng trống giữa các khối quy tắc và dấu hai chấm được căn chỉnh. Rút gọn làm điều ngược lại — nó loại bỏ mọi byte mà trình duyệt không cần: khoảng trắng, chú thích, dấu chấm phẩy cuối của mỗi khối, dấu nháy thừa và các tiền tố nhà cung cấp không dùng. Một bảng kiểu cỡ Bootstrap điển hình co lại từ khoảng 180 KB định dạng xuống 140 KB rút gọn, và xuống khoảng 22 KB sau gzip ở trên. Luôn đưa phiên bản chưa rút gọn vào kiểm soát mã nguồn và rút gọn như một phần của pipeline xây dựng — gỡ lỗi CSS rút gọn trong DevTools rất đau đớn nếu không có source map.

CSS của tôi sẽ nhỏ hơn bao nhiêu sau khi nén, và tôi có thể tiết kiệm gzip bao nhiêu?

CSS viết tay thường giảm 20-40% khi nén — phần tiết kiệm đến từ việc loại bỏ thụt lề, ngắt dòng, chú thích và dấu chấm phẩy cuối của mỗi khối. CSS vốn đã gọn (hoặc đã nén) thì tiết kiệm ít hơn nhiều. Sau khi bạn nhấp Nén, công cụ hiển thị báo cáo trước/sau thực tế: kích thước gốc, kích thước đã nén, số byte và phần trăm chính xác tiết kiệm được, cùng kích thước gzip ước tính. Con số gzip quan trọng nhất với production vì máy chủ gần như luôn phục vụ CSS đã nén: văn bản như CSS rất lặp lại, nên gzip (hoặc Brotli) thường cắt thêm 70-80% kích thước đã nén, nghĩa là một stylesheet nén 140 KB thường truyền đi chỉ khoảng 20-30 KB qua mạng. Hãy coi con số gzip ở đây là ước tính từ một thuật toán dựa trên độ lặp, không phải kết quả chính xác từng byte — mức nén của máy chủ và lựa chọn Brotli hay gzip sẽ làm nó thay đổi đôi chút. Điểm mấu chốt: nén để giảm chi phí phân tích và kích thước nguồn, và luôn bật gzip/Brotli trên máy chủ để tiết kiệm phần lớn lượng truyền tải.

Công cụ này có thay đổi màu hex hoặc giá trị rgb của tôi không?

Không. Công cụ này giữ nguyên màu của bạn đúng như đã viết — #FFFFFF vẫn là #FFFFFF, rgb(255, 0, 0) giữ nguyên, và cú pháp dấu gạch chéo hiện đại rgb(255 0 0 / 0.5) được giữ nguyên văn. Ở đây định dạng chỉ căn chỉnh lại khoảng trắng, thụt lề và ngắt dòng; nén chỉ loại bỏ các byte mà trình duyệt không cần. Cả hai bước đều không viết lại token màu, nên các giá trị thương hiệu và mọi định dạng nhạy cảm với so sánh diff đều được giữ nguyên. Nếu bạn muốn chuẩn hóa màu (rút #aabbcc thành #abc, viết thường hex hoặc chuyển rgb() sang hex), hãy dùng trình tối ưu chuyên dụng như PostCSS với cssnano hoặc csso trong pipeline build — những công cụ đó thực hiện các tối ưu mà công cụ này cố ý để lại cho bạn quyết định. Lưu ý hex ba chữ số (#abc) chỉ bằng #aabbcc khi mỗi cặp giống hệt nhau, nên #336699 có thể rút thành #369 nhưng #336698 thì không.

Các bộ chọn CSS được định dạng như thế nào trong đầu ra?

Khi Định dạng, mỗi bộ chọn phân tách bằng dấu phẩy đi trên dòng riêng để một bộ chọn ghép dài như h1, h2, h3, h4, h5, h6 dễ quét và chỉnh sửa. Các bộ kết hợp (>, +, ~) và khoảng trắng hậu duệ được engine Prettier chuẩn hóa thành khoảng trắng đơn nhất quán. Các bộ chọn thuộc tính giữ nguyên cách trích dẫn gốc, và pseudo-class cùng pseudo-element vẫn gắn liền với phần tử trước đó mà không có khoảng trắng (a:hover, ::before). Các bộ chọn của bạn không bao giờ bị viết lại theo độ đặc thù: công cụ không loại bỏ bộ chọn phổ quát hay thay đổi những gì một bộ chọn khớp, nên :where() và :is() từ Selectors Level 4 được giữ nguyên đúng như đã viết (nhớ rằng :where có độ đặc thù bằng không trong khi :is lấy độ đặc thù cao nhất trong các đối số của nó). Nén giữ nguyên các bộ chọn và chỉ loại bỏ khoảng trắng xung quanh chúng.

Điều gì xảy ra với các tiền tố nhà cung cấp như -webkit- hoặc -moz- trong quá trình định dạng?

Chỉ riêng định dạng không bao giờ thêm hoặc loại bỏ tiền tố nhà cung cấp — nó chỉ căn chỉnh lại khoảng trắng. Công cụ tiền tố đi kèm là một bước tùy chọn riêng biệt. Khuyến nghị hiện đại theo caniuse.com là duy trì CSS nhắm vào ma trận trình duyệt được hỗ trợ của bạn và để Autoprefixer hoặc PostCSS chèn các tiền tố đúng vào thời điểm xây dựng từ cấu hình Browserslist. Đến năm 2026, hầu hết các tiền tố -webkit- cho biến đổi, chuyển tiếp, hoạt ảnh, gradient và flexbox là không cần thiết trên bất kỳ trình duyệt nào phát hành sau năm 2020; các tiền tố -ms- chỉ dành riêng cho IE 10-11 và Edge Legacy, cả hai đã hết vòng đời. Loại bỏ các tiền tố không sử dụng có thể tiết kiệm 5-15% kích thước CSS trên các codebase kế thừa. Công cụ này giữ nguyên mọi tiền tố bạn viết (cả Định dạng lẫn Nén đều để các khai báo -webkit-, -moz-, -ms- và -o- đúng như tác giả viết); để thực sự thêm hoặc loại bỏ tiền tố theo mục tiêu Browserslist, hãy chạy Autoprefixer hoặc PostCSS trong bước build.

Tôi nên dùng thuộc tính rút gọn như margin: 10px 20px hay dạng dài như margin-top, margin-right?

Rút gọn thắng về byte và khả năng đọc khi bạn đặt toàn bộ tập hợp cùng nhau: margin: 10px 20px là 18 byte so với 53 cho bốn khai báo dạng dài. Nhưng rút gọn có một bẫy ẩn: nó ĐẶT LẠI mọi dạng dài mà nó bao phủ, ngay cả những cái bạn không đề cập. Viết background: red sau này trong cascade sẽ xóa background-image, background-repeat, background-position — tất cả được đặt về giá trị ban đầu. Điều này khiến rút gọn nguy hiểm trong CSS thành phần nơi quy tắc cha có thể đã đặt các dạng dài riêng lẻ. Theo nguyên tắc: dùng rút gọn trong reset và lớp cơ sở nơi bạn cố ý bắt đầu từ con số không; dùng dạng dài trong ghi đè thành phần nơi bạn muốn thay đổi một trục mà không chạm vào các trục khác. Trình định dạng này không chuyển đổi giữa rút gọn và dạng dài — nó bảo toàn ý định tác giả của bạn.

Trình định dạng xử lý các tính năng CSS hiện đại như lồng nhau, thuộc tính tùy chỉnh và truy vấn container như thế nào?

Lồng nhau CSS (trở thành Baseline 2023, không cần bộ tiền xử lý) được định dạng với mỗi quy tắc lồng được thụt lề một cấp dưới cha của nó, và bộ chọn & được bảo toàn nguyên văn. Các thuộc tính tùy chỉnh (--màu-của-tôi: xanh) và tham chiếu var() được giữ nguyên — ngay cả các giá trị bất thường như calc(var(--x) + 10px) cũng giữ khoảng trắng nội bộ, vì giá trị thuộc tính tùy chỉnh CSS là bảo toàn token. Truy vấn container (@container) được định dạng khối giống như truy vấn @media và @supports, bao gồm mọi điều kiện container-name. Các lớp cascade (@layer base, components, utilities) bảo toàn thứ tự khai báo, có ý nghĩa ngữ nghĩa — sắp xếp lại các lớp sẽ thay đổi cascade. Đăng ký @property CSS Houdini và khối @scope được nhận diện và định dạng với thụt lề phù hợp.

Tại sao các chú thích của tôi biến mất hoặc bị di chuyển trong quá trình định dạng?

CSS tiêu chuẩn chỉ hỗ trợ chú thích /* ... */ — // không hợp lệ trong CSS thuần (đó là tính năng Sass/Less). Công cụ này tuân theo quy ước của hầu hết các bộ nén: khi Nén, chú thích /* thông thường */ bị loại bỏ để tiết kiệm byte, nhưng chú thích giấy phép bắt đầu bằng /*! được giữ nguyên văn để các tiêu đề ghi công và giấy phép tồn tại trong production. Khi Định dạng, mọi chú thích đều được giữ và đặt trên dòng riêng phía trên hoặc bên cạnh quy tắc mà chúng mô tả. Nếu bạn thấy chú thích hành xử bất ngờ, hãy kiểm tra xem nguồn của bạn có bao gồm template literal CSS-in-JS hoặc cú pháp Sass — những thứ đó yêu cầu công cụ khác. Vì định dạng chỉ sắp xếp lại khoảng trắng, định dạng cùng một đầu vào hai lần sẽ cho kết quả giống hệt nhau.

Sự khác biệt giữa các hàm calc(), clamp() và min()/max() là gì?

Cả bốn đều là các hàm toán học được định nghĩa trong CSS Values and Units Module 4, được chấp nhận trong bất kỳ ngữ cảnh độ dài, phần trăm, số hoặc góc nào. calc(100% - 20px) thực hiện số học qua các đơn vị mà trình duyệt không thể giải quyết trước. min(50vw, 800px) trả về giá trị nhỏ hơn trong hai giá trị — hữu ích để giới hạn chiều rộng linh hoạt. max(16px, 1rem) trả về giá trị lớn hơn — hữu ích cho các giá trị tối thiểu khả năng tiếp cận trên các giá trị nhạy cảm với zoom của người dùng. clamp(16px, 4vw, 32px) là tổ hợp giết người: nó trả về giá trị giữa khi đối số thứ hai nằm giữa cái thứ nhất (tối thiểu) và cái thứ ba (tối đa), khiến nó là cách chuẩn để viết kiểu chữ linh hoạt mà không cần media query. Cho phép lồng nhau: calc(min(100%, 1200px) - 2rem). Trình định dạng bảo toàn khoảng trắng bên trong các hàm này vì các toán tử yêu cầu khoảng trắng cả hai bên theo đặc tả.

Tính năng chính

• Định dạng CSS với thụt lề tùy chỉnh (2, 4, 8 khoảng trắng hoặc tab)
• Nén CSS để giảm kích thước file cho production
• Báo cáo tiết kiệm khi nén: kích thước gốc và sau nén, số byte tiết kiệm, phần trăm giảm và kích thước gzip ước tính
• Giữ nguyên chuỗi, url() và URI data: khi nén
• Giữ truy vấn @media, @supports và @container hợp lệ
• Giữ chú thích giấy phép /*! trong khi loại bỏ chú thích thường khi nén
• Tô sáng cú pháp cho selector, thuộc tính, giá trị và màu sắc
• Thống kê cho kết quả (ký tự, dòng, kích thước)
• Sao chép CSS đã định dạng vào clipboard
• Tải xuống CSS đã định dạng dưới dạng file .css
• Tải lên file CSS để định dạng
• Hỗ trợ chế độ tối
• Không giới hạn kích thước file
• Xử lý 100% phía client - code của bạn không bao giờ rời khỏi trình duyệt
• Hoạt động offline sau khi tải lần đầu
• Thiết kế responsive thân thiện với mobile
• Giữ nguyên vendor prefix và các tính năng CSS hiện đại