什麼是 CSS 格式化程式?
CSS 格式化程式讀取樣式表並以一致的間距、縮排和換行符重寫它,因此易於讀取和維護。它將CSS 解析為其規則、選擇器、聲明、at 規則和註解的底層結構,然後使用可預測的佈局列印該結構:每行一個聲明,每個冒號後面有一個空格,每個嵌套區塊縮排一個比其父級更深。樣式規則保持相同,但作為一條不間斷的長行到達的文件將成為您可以掃描和編輯的內容。
該工具與 CSS 縮小器的工作原理相反。縮小瀏覽器不需要的每個空格、製表符、換行符和(可選)註釋,將樣式表折疊為最小的位元組對應值。一旦空白消失,格式良好的 6 KB 樣式表通常會降至 4 KB 以下,這意味著網路上的位元組數更少,首次繪製速度更快。在編寫和調試時進行美化;將您運送到生產中的副本縮小。
這個格式化程式理解 CSS 中那些絆倒天真的查找和替換腳本的部分。像@media 和@supports 這樣的嵌套at 規則保持其內部規則正確縮進,保留帶有百分比步驟的@keyframes 區塊,內容和url () 值中的字串文字完全按書面形式保留,並且根據要求保留或刪除註釋。所有內容都完全在您的瀏覽器中運行,因此您的樣式表(包括任何專有設計令牌或內部類別名稱)永遠不會上傳,並且即使沒有連接,該工具在頁面加載後仍繼續工作。
一個小測試顯示了這個 CSS 格式化程式在線上執行的操作。貼上@media (max-width:600px){.nav a,.nav button{padding:8px 12px;color:#333}} 並按一下 Beautify with 2 個空格。媒體查詢開啟自己的區塊,。nav a 和。nav 按鈕在單獨的行上進入一層,每個聲明位於自己的行上,冒號後面有一個空格。尺寸徽章上寫著 73 B → 98 B,+34%,因為縮排增加了位元組。按一下該輸出上的 Minify,它就會回到原來的 73 位元組。
如何使用CSS格式化程式?
貼上你的 CSS
將樣式表貼上或鍵入到輸入區域。縮小、手寫或匯出 CSS 所有工作,包括帶有 @media、@keyframes 和評論的文件。
選擇美化或縮小
點擊美化以重新縮排 CSS 進行讀取,或按一下 Minify 以剝離空白以進行運輸。選擇 2 個空格、4 個空格或選項卡進行美化佈局。
查看結果
格式化的 CSS 出現在右側,帶有顯示位元組變更的大小徽章。任何解析通知(例如未關閉的支撐)都會被列為警告。
複製或下載
將輸出複製到剪貼簿或將其作為。css 檔案下載,準備放入專案或建置管道。
主要特點
美化和縮小
一個工具會重新縮排 CSS 以供讀取,然後將其拆下來以便運輸,因此您永遠不需要兩個獨立的實用程式
嵌套規則感知
正確縮排@media、@supports 和@keyframe 內的規則,而不是壓平或損壞它們
字串和網址()安全
使引用的字串和 url () 值的內容保持不變,因此內容文字和資料 URI 在格式化過程中保持完整
可配置縮排
使用兩個空格、四個空格或選項卡格式以符合您的專案樣式或編輯器設定
Frequently Asked Questions
Related Tools
Chmod Calculator
Convert Unix file permissions between octal, symbolic and rwx checkboxes. Toggle read, write and execute for owner, group and others, plus setuid, setgid and sticky, and copy the chmod command - all in your browser.
JSON Formatter
Format, validate, and minify JSON data
YAML Validator
Validate YAML syntax and convert to JSON format
CSS Minifier & Beautifier
Minify CSS to cut file size or beautify minified stylesheets for debugging
Comments
0 comments
No comments yet. Be the first to share your thoughts!