အဓိကအကြောင်းအရာသို့ ကျော်သွားရန်
LibraTool logoLibraTool

အခမဲ့ CSS လှပဆင်စက်

ချုံ့ထားသော CSS ကို တသမတ်တည်း အင်ဒင့်တင်ဖြင့် ဖတ်ရှုလွယ်အောင်ပြုပါ၊ သို့မဟုတ် ချုံ့ပါ။ ခန့်မှန်းနိုင်သော ကွာခြားချက်များအတွက် ရွေးချယ်စရာအဖြစ် property များကို အက္ခရာစဉ်စီနိုင်သည်။

Load ပြီးသည်နှင့် offline အလုပ်လုပ်သည်

ဖိုင်ကို ဤနေရာသို့ ချပါ သို့မဟုတ် ရွေးရန် နှိပ်ပါ

CSS · သင့်စက်ထဲတွင်သာ လုပ်ဆောင်ပါသည်

သို့မဟုတ် ကလစ်ဘုတ်မှ ကူးထည့်ရန် Ctrl+V နှိပ်ပါ

ဖိုင်များ ကြည့်ရှုပါ
CSS ဖော်မတ်ချပြီး
ရလဒ် ဤနေရာတွင် ပေါ်လာမည်…

အသုံးများသော အသုံးပြုမှုများ

  • Production CSS ကို Debug လုပ်ပါပုံစံချမှုများကို ရှာဖွေခွဲခြမ်းရန် production ဝဘ်ဆိုက်များမှ minified CSS ကို ဖတ်ရလွယ်သော ပုံစံဖြင့် ကြည့်ပါ။
  • အဖွဲ့၏ CSS စတိုင်ကို တူညီစေပါအဖွဲ့ဝင်များတင်သော CSS ကို တူညီသော beautifier ဖြင့် ဖြတ်သန်းစေခြင်းဖြင့် diff များသည် format မဟုတ်ဘဲ အကြောင်းအရာနှင့်သာ ဆိုင်စေပါ။
  • Vendor-Prefixed CSS ကို Format လုပ်ပါVendor-prefixed CSS (autoprefixer output) တွင် -webkit-၊ -moz-၊ -ms- ပုံစံများ များစွာပါလေ့ရှိသည်။ စစ်ဆေးရန် format လုပ်ပါ။
  • ပရိုအဆင့် CSS မှ သင်ယူပါကျော်ကြားသော design system များ၏ compile လုပ်ပြီး CSS ကို format လုပ်ကာ လေ့လာပါ။
  • Bug Report များအတွက် CSS ကို Format လုပ်ပါCSS bug များကို တင်ပြသည့်အခါ format လုပ်ထားသော CSS သည် သုံးသပ်သူများ ဖတ်ရန်နှင့် နားလည်ရန် ပိုလွယ်ကူပါသည်။

မည်သို့ အလုပ်လုပ်သည်

ဤကိရိယာသည် စာမျက်နှာထဲသို့ တိုက်ရိုက် တည်ဆောက်ထားသော ကိုယ်တိုင်ရေးထားသော recursive parser ကို သုံး၍ CSS ကို ဖော်မတ်ချသည် — ပြင်ပ library၊ server call မပါဝင်ပါ။ Parser သည် သင့် CSS ကို character တစ်ခုချင်း လျှောက်ကာ ရိုးရှင်းသော regex-based နည်းလမ်းများကို ရှုပ်ထွေးစေနိုင်သော quoted string များ၊ url() တန်ဖိုးများ၊ nested at-rule များနှင့် comment များကို မှန်ကန်စွာ ကိုင်တွယ်သည်။

  1. 1
    အက္ခရာအဆင့် တိုကင်ခွဲခြင်း
    walkCss function သည် raw input ကို character တစ်ခုချင်း scan လုပ်ပြီး quote ဒသအခြေအနေနှင့် parenthesis depth ကို track လုပ်သဖြင့် url()၊ string တန်ဖိုးများ သို့မဟုတ် comment များအတွင်းရှိ semicolon သို့မဟုတ် brace များကို ဖွဲ့စည်းပုံ delimiter များအဖြစ် ဘယ်တော့မှ မှားယွင်း မမှတ်ပါ။
  2. 2
    Block နှင့် declaration ခွဲခြားမှု
    Scanner သည် top-level opening brace တစ်ခုကို တွေ့သောအခါ prelude (selector သို့မဟုတ် at-rule keyword) ကို ထုတ်ယူပြီး block body ကို ထပ်ခါထပ်ခါ လုပ်ဆောင်သည် — ၎င်းတွင် nested rule (@media, @supports, native CSS nesting) များ ပါဝင်နိုင်ပြီး recursion depth ပိုနက်ရှိုင်းသည့်နေရာတွင် ကိုင်တွယ်သည်။
  3. 3
    Property sorting နှင့် indentation
    Block တစ်ခုစီရှိ declaration များကို run တစ်ခုအဖြစ် စုစည်းပြီး ရွေးချယ်ထားသော indent width (space 2 (သို့) 4) ဖြင့် ရေးမီ property အမည်ဖြင့် အက္ခရာစဉ် sort လုပ်နိုင်သည်။ Minify mode သည် whitespace ကို လုံးဝ ကျော်ပြီး comment များကို ဖယ်ရှားသည်။
  4. 4
    Browser ထဲတွင် ချက်ချင်း output
    ရလဒ်များသည် useMemo hook တစ်ခုမှတစ်ဆင့် သင်ရိုက်နေစဉ် ပေါ်လာသည် — ဘာမှ ဘယ်နေရာကိုမှ မပို့ပါ။ ဖော်မတ်ချထားသော သို့မဟုတ် minify ထားသော CSS ကို clipboard သို့ ကူးယူ (သို့) .css ဖိုင်အဖြစ် ဒေါင်းလုဒ်ဆွဲနိုင်ပြီး panel သည် မူရင်းနှင့် နှိုင်းယှဉ်ထားသော size ကွာခြားချက်ကို ပြသသည်။

ဆက်နွှယ်သော ကိရိယာများ

🌐

HTML လှပဆင်/ချုံ့စက်

မှန်ကန်သော nesting indentation ဖြင့် HTML ကို pretty-print သို့မဟုတ် minify ပြုလုပ်ပါ။ <pre>, <script>, <style> block အတွင်း အကြောင်းအရာ ထိန်းသိမ်းသည်。

ကြိုးစားပါ
🗄️

SQL ဖော်မတ်ချ/လှပဆင်စက်

မှန်ကန်သော indentation, configurable keyword case နှင့် major clause တွင် ကြောင်းဆင်းမှုဖြင့် SQL query pretty-print ပြုလုပ်ပါ။ မည်သည့် SQL dialect မဆို အလုပ်လုပ်သည်。

ကြိုးစားပါ
🗜️

CSS ချုံ့/လှပဆင်စက်

ဖိုင်အရွယ်အစား လျှော့ချရန် CSS minify ပြုလုပ်ပါ သို့မဟုတ် ဖတ်နိုင်ရေးအတွက် minified CSS ကို beautify ပြုလုပ်ပါ။ ချက်ချင်း၊ browser တွင်。

ကြိုးစားပါ

မကြာခဏ မေးလေ့မေးထရှိသော မေးခွန်းများ