Định dạng CSS
Thụt lề một stylesheet để bạn đọc được, hoàn toàn trong trình duyệt. Không có gì bị đổi tên, rút gọn hay chuẩn hóa.
Chạy hoàn toàn trong trình duyệt của bạn. Không có gì được tải lên, ghi log hay lưu trữ.
Dán một stylesheet đã minify hoặc thụt lề lộn xộn và đọc nó cho đàng hoàng. Việc định dạng diễn ra trong trình duyệt của bạn, và stylesheet không bị thay đổi gì ngoài khoảng trắng.
Cách hoạt động
Stylesheet được tách thành các mảnh — chú thích, chuỗi, địa chỉ, tên, số, ngoặc đơn và ngoặc nhọn — rồi được viết lại. Mỗi quy tắc có khối riêng, mỗi selector trong một danh sách có dòng riêng, và mỗi khai báo có dòng riêng bên trong quy tắc. Các quy tắc lồng nhau, media query và keyframes được lồng theo.
Khoảng trắng được giữ lại trừ khi chứng minh được là nó không mang ý nghĩa gì. Điều này ngược với cách làm của gần như mọi công cụ định dạng, và là có chủ ý: trong CSS, một dấu cách giữa hai selector là bộ kết hợp hậu duệ (descendant combinator), nên “.a .b” và “.a.b” chọn những phần tử khác nhau. Khoảng trắng chỉ bị bỏ trước dấu phẩy, dấu chấm phẩy hoặc dấu đóng, và sau dấu mở, những chỗ mà CSS không thể hiểu nó thành bất cứ thứ gì.
Khoảng trắng duy nhất được thêm vào là sau dấu hai chấm của một khai báo. Việc phân biệt dấu hai chấm đó với dấu hai chấm của một pseudo-class là lý do công cụ nhìn trước đến dấu đóng hoặc dấu chấm phẩy tiếp theo rồi mới quyết định mình đang đọc gì.
Ví dụ
| Trường hợp | Dữ liệu nhập | Kết quả |
|---|---|---|
| Một quy tắc viết trên một dòng | a{color:red;margin:0} | a { color: red; margin: 0; } |
Câu hỏi thường gặp
Stylesheet của tôi có bị gửi đi đâu không?
Không. Công cụ định dạng là JavaScript chạy trên trang này. Không có gì được tải lên, ghi log hay lưu trữ: bạn có thể ngắt mạng và công cụ vẫn hoạt động.
Nó có nén (minify) luôn không?
Không, và đó là một quyết định chứ không phải một thiếu sót. Minify CSS nghĩa là quyết định khoảng trắng nào có nghĩa và khoảng trắng nào không, và sai ở chỗ đó sẽ thay đổi việc một quy tắc áp dụng cho phần tử nào, một cách âm thầm và theo kiểu bạn chỉ phát hiện ra trên môi trường production. Đó là một việc khác, và đáng được làm cho đúng hoặc không làm.
Nó có sửa hay sắp xếp các giá trị của tôi không?
Không. Nó sẽ không chuyển mã màu hex sang chữ thường, không rút gọn #ffffff, không bỏ số 0 ở đầu, không sắp xếp lại các khai báo hay thêm tiền tố nhà cung cấp (vendor prefix). Mỗi việc đó là một quan điểm về mã của bạn chứ không phải vấn đề bố cục, và một số còn thay đổi hành vi. Chỉ có khoảng trắng được di chuyển.
Nó có hiểu Sass hay Less không?
Một phần, và nói thật: nó sắp xếp các quy tắc lồng nhau, điều mà các ngôn ngữ đó có chung với CSS hiện đại. Nó hoàn toàn không biết mixin, biến hay chỉ thị điều khiển nghĩa là gì, nên nó xử lý chúng như những token mà chúng vốn là. Không có gì bị mất, nhưng đừng mong nó biết @if mở ra một nhánh.
Còn data URI thì sao?
Vẫn nguyên vẹn. Một url() không có dấu nháy được đọc thành một mảnh duy nhất cho đến dấu ngoặc đóng của nó, vì data URI thường chứa dấu chấm phẩy và nếu đọc dấu đó là chỗ kết thúc khai báo thì giá trị sẽ bị cắt làm đôi.
Cần biết
- Kết quả chứa đúng những mảnh mà dữ liệu nhập chứa. Thứ duy nhất được thêm vào là dấu chấm phẩy ở khai báo cuối cùng của một khối, điều an toàn ở mọi nơi và giữ cho kết quả ổn định khi sau này quy tắc dài thêm một dòng.
- Một chuỗi, một chú thích hoặc một url() không được đóng sẽ bị từ chối thay vì được định dạng lại, vì từ chỗ đó trở đi công cụ không còn phân biệt được mã với văn bản.
- Bố cục mang tính tất định: cùng một stylesheet với cùng tùy chọn luôn cho cùng một kết quả, và định dạng một stylesheet đã được định dạng sẽ không thay đổi gì.