Trình rút gọn & nén CSS

Giới thiệu

Đoạn CSS lúc viết và đoạn CSS lúc đưa lên mạng không nhất thiết phải giống nhau. Trong lúc bạn còn làm việc với một tệp định kiểu, phần thụt đầu dòng, những dòng trống ngăn cách các quy tắc và các chú thích giải thích vì sao quy tắc đó tồn tại đều giúp mã nguồn dễ đọc và dễ bảo trì hơn. Nhưng không có thứ nào trong số đó giúp trình duyệt dựng trang nhanh hơn — trình duyệt chỉ cần bộ chọn, thuộc tính và giá trị hợp lệ, còn khoảng trắng hay lời giải thích thì nó không quan tâm. Việc rút gọn sẽ loại bỏ mọi thứ chỉ tồn tại để phục vụ người đọc, nhờ vậy cùng một bộ quy tắc vẫn đến được trình duyệt nhưng trong một tệp nhẹ hơn. Với một tệp định kiểu ngắn, phần tiết kiệm được có thể chỉ vài kilobyte; còn với một tệp đã lớn dần qua một dự án kéo dài, trải qua nhiều đợt chỉnh sửa và còn sót lại chú thích từ những lần thử nghiệm, mức cắt giảm phần phải tải về trước khi trang hiển thị đúng có thể đáng kể hơn nhiều.

Công cụ này rút gọn CSS của bạn như thế nào

Dán CSS vào rồi bấm “Rút gọn” không chỉ đơn thuần là xóa bớt khoảng trắng:

• Chú thích bị loại bỏ, trừ một trường hợp. Chú thích viết theo quy ước quen thuộc /*! ... */, hoặc có chứa từ @license hay @preserve, sẽ được giữ lại. Đây là cách chuẩn mực để đánh dấu một chú thích là ghi chú giấy phép hoặc ghi công tác giả mà các công cụ đóng gói không được phép cắt bỏ. Ngược lại, một chú thích giải thích thông thường như /* button hover state */ sẽ bị xóa — nếu bạn cần giữ phần đầu tệp ghi giấy phép, hãy viết nó theo một trong các dạng trên.
• Khoảng trắng, ngắt dòng và các quy tắc rỗng đều bị loại bỏ. Bất cứ thứ gì không cần thiết để tách thành phần này với thành phần kia đều bị cắt đi, và một khối quy tắc rỗng còn sót lại (một bộ chọn kiểu .old-banner {} mà bên trong không có gì) sẽ bị xóa hẳn thay vì giữ lại làm gánh nặng vô ích.
• Một số giá trị được viết ngắn lại mà không đổi ý nghĩa. Màu viết dưới dạng #ffffff trở thành #fff, các số 0 thừa được cắt bớt (0.500 thành .5, còn giá trị kiểu -0px thành 0), và hai từ khóa normal cùng bold dùng cho font-weight được đổi sang giá trị số tương đương là 400 và 700.
• Thuộc tính tùy chỉnh của CSS và biểu thức calc() được bảo vệ. Các biến khai báo với tiền tố -- (chẳng hạn --brand-color) và các biểu thức calc() phụ thuộc vào dấu câu và khoảng trắng, nếu bị nén như một giá trị thông thường thì chúng sẽ hỏng. Vì vậy chúng được tách riêng ra trước khi các bước dọn khoảng trắng và cắt số 0 chạy, rồi được trả lại nguyên vẹn sau đó.

Những điều nên biết trước khi rút gọn

Công cụ này không sắp xếp lại, không gộp và cũng không lược bỏ các quy tắc trùng nhau — kết quả vẫn giữ nguyên các bộ chọn theo đúng thứ tự cũ, chỉ là đã được nén lại. Nếu bạn cần một thứ có thể loại bỏ phần CSS mà trang của bạn thực ra không dùng đến, thì đó là một loại công cụ khác, không phải công cụ rút gọn. Vì ở đây việc rút gọn được thực hiện bằng cách cắt khoảng trắng và viết ngắn giá trị chứ không phải diễn giải lại cấu trúc quy tắc, nên phần nội dung lồng nhau — ví dụ các quy tắc nằm trong một truy vấn @media — vẫn nằm nguyên tại chỗ, và phần bên trong nó cũng được nén y như mọi phần khác.

Ở đây không có giới hạn dung lượng riêng như các công cụ tải tệp lên trên trang này: bạn dán trực tiếp văn bản chứ không tải tệp lên, nên mức trần trên thực tế chính là lượng nội dung mà trình duyệt của bạn xử lý thoải mái trong một ô văn bản, và mức đó thừa sức bao trùm mọi tệp định kiểu bạn thực sự viết tay. Với một tệp định kiểu thật sự lớn, chẳng hạn trọn gói một bộ khung giao diện chứ không phải phần định kiểu riêng của một trang hay một dự án, thì một bước đóng gói nằm trong quy trình xuất bản thường phù hợp hơn là dán vào một công cụ chạy trên trình duyệt.

Việc rút gọn ở đây không làm thay đổi cách CSS của bạn hoạt động, nhưng trước khi xuất bản hay nộp bài thì vẫn nên xem nhanh một trang đang dùng kết quả đã rút gọn — cũng là thói quen đọc soát lại mọi thứ trước khi gửi đi mà thôi.

Khi nào nên dùng công cụ này

• Chuẩn bị xuất bản một bài tập trên lớp hoặc một trang cá nhân. Tệp CSS nhỏ hơn thì tải nhanh hơn, và điều này quan trọng hơn ta tưởng khi dùng mạng của trường hoặc điện thoại chạy bằng dữ liệu di động.
• Nhìn tận mắt mã nguồn thật ngoài đời trông ra sao. Xem mã nguồn của một trang web thật, bạn thường bắt gặp thứ CSS chẳng giống chút nào với những gì học sinh viết trên lớp — tự rút gọn tệp định kiểu của mình rồi đặt cạnh bản gốc mà so sánh là cách rất cụ thể để hiểu vì sao lại như vậy, và việc này đi đôi rất tự nhiên với CSS Beautifier cho chiều ngược lại.
• Giảm dung lượng trang khi sắp đến hạn nộp hoặc khi nơi lưu trữ bị giới hạn. Một số dịch vụ lưu trữ do nhà trường cung cấp có hạn mức dung lượng hoặc băng thông khá chặt; rút gọn các tệp trước khi tải lên là cách nhanh gọn để không vượt quá mức đó.

Nếu bạn vẫn đang sửa tệp định kiểu, hãy tiếp tục làm việc với bản dễ đọc và chỉ rút gọn một lần duy nhất, ngay trước lúc xuất bản — rút gọn là bước cuối cùng, không phải định dạng để làm việc. Để hiểu đầy đủ hơn vì sao dung lượng tệp lại ảnh hưởng đến tốc độ trang, bạn có thể xem bài hướng dẫn về công cụ nén CSS giúp trang web tải nhanh hơn.

Ví dụ

Một học sinh hoàn thành trang web cá nhân cho môn thiết kế web: mỗi phần bố cục, bảng màu và quy tắc hiển thị theo kích thước màn hình nằm ở một tệp định kiểu riêng, tệp nào cũng còn sót chú thích từ những lần thử các ý tưởng khác nhau dọc đường. Trước khi nộp bài, bạn ấy gộp toàn bộ CSS lại rồi dán vào công cụ này. Sau đó trang vẫn hiển thị và hoạt động y hệt như trước, nhưng tệp đi kèm thì nhẹ hơn và không còn giữ lại những chú thích thử sai viết trong lúc dựng trang nữa.

Câu hỏi thường gặp

Rút gọn có làm thay đổi giao diện trang của tôi không?

Không. Các quy tắc, bộ chọn và giá trị đều được giữ nguyên — chỉ có cách trình bày, phần chú thích và một vài giá trị được viết ngắn lại (như mã màu thập lục phân và các số 0 thừa) là thay đổi, mà không thứ nào trong đó ảnh hưởng đến việc trang được dựng ra sao.

Chú thích trong CSS của tôi sẽ ra sao?

Chú thích thông thường bị loại bỏ. Chú thích viết dưới dạng /*! ... */, hoặc có chứa @license hay @preserve, thì được giữ lại — đây là quy ước chuẩn để đánh dấu một ghi chú giấy phép hoặc ghi công tác giả.

Công cụ có xử lý được biến CSS và calc() không?

Có. Thuộc tính tùy chỉnh và biểu thức calc() được bảo vệ trong quá trình rút gọn chứ không bị nén như những giá trị thông thường.

Có giới hạn dung lượng không?

Không có giới hạn cố định như các công cụ tải tệp lên trên trang này — ở đây bạn dán văn bản chứ không tải tệp lên. Những lần dán rất lớn, chẳng hạn trọn gói một thư viện, nên giao cho một công cụ đóng gói nằm trong quy trình xuất bản của bạn thì hợp lý hơn.

Mã của tôi có được lưu lại ở đâu không?

Không. Đoạn CSS bạn dán vào chỉ được xử lý để tạo ra kết quả đã rút gọn, không được lưu thành tệp và cũng không được giữ lại sau đó; hệ thống chỉ ghi nhận rằng công cụ đã được sử dụng, chứ không ghi lại phần mã.

Tôi có thể rút gọn nhiều tệp định kiểu cùng lúc không?

Mỗi lần hãy dán và rút gọn một khối CSS. Nếu cần rút gọn nhiều tệp chung với nhau, bạn hãy gộp chúng lại trước; còn không thì làm lần lượt với từng tệp.

Tôi có thể dùng thêm những công cụ liên quan nào?

Dùng CSS Beautifier để đảo ngược quá trình và làm cho đoạn CSS đã rút gọn dễ đọc trở lại, hoặc dùng HTML Minifier và JavaScript Beautifier cho những việc khác liên quan đến mã nguồn.