მთავარ შინაარსზე გადასვლა
LibraTool logoLibraTool

CSS ბიუტიფაიერი უფასოდ

დააფორმატეთ შეკუმშული CSS თანმიმდევრული დაშორებებით ან შეკუმშეთ. თვისებების ალფაბეტური დახარისხება არჩევითია და ცვლილებებს უფრო ადვილად შესადარებელს ხდის.

მუშაობს ოფლაინ ჩატვირთვის შემდეგ

ჩააგდეთ ფაილი აქ ან დააწკაპუნეთ არჩევისთვის

CSS · მუშავდება თქვენს მოწყობილობაზე

ან დააჭირეთ Ctrl+V-ს ბუფერიდან ჩასასმელად

ფაილების დათვალიერება
გამართული CSS
გამოსავალი გამოჩნდება აქ...

გავრცელებული გამოყენება

  • Debug Production CSSდიახანა minified CSS production საიტი ბოლო ფორმატი რომ იპოვა და reverse-engineer styling.
  • Enforce Team CSS სტილიRun gundi-submitted CSS through თავდაჯერებული beautifier ისე diff-ი აკ მხედელობა არა ფორმატი.
  • ფორმატი Vendor-Prefixed CSSVendor-prefixed CSS (autoprefixer output) ხშირად გაქვთ უამრავი -webkit-, -moz-, -ms- variant-ი. ფორმატი მოწმივი.
  • პროფ CSS შეკერაშეკერა CSS ცნობილი ღირებულებ მხარდამჭერი თავიანი compiled output ფორმატი.
  • ფორმატი CSS Bug Report-იCSS bugs filed, formatted CSS ბევრი უფრო ადვილი reviewer-ი read გაიგო.

როგორ მუშაობს

ეს ხელსაწყო CSS-ს აფორმატებს ხელით დაწერილი რეკურსიული პარსერით, პირდაპირ გვერდში ჩაშენებული — მესამე-მხარის ბიბლიოთეკის, სერვერის გამოძახების გარეშე. პარსერი გადის თქვენს CSS-ზე სიმბოლო-სიმბოლოზე, სწორად ამუშავებს ბრჭყალებში სტრიქონებს, url() მნიშვნელობებს, ჩადგმულ at-წესებს და კომენტარებს, რომლებიც უფრო მარტივ, რეგულარულ-გამოსახულებაზე-დაფუძნებულ მიდგომებს დაბნევდა.

  1. 1
    სიმბოლოს-დონის ტოკენიზაცია
    walkCss ფუნქცია სკანირებს დაუმუშავებელ შეყვანას ერთი სიმბოლოთი ერთდროულად, აკვირდება ბრჭყალის მდგომარეობასა და ფრჩხილის სიღრმეს, ასე რომ წერტილ-მძიმეები ან ფრჩხილები url()-ის, სტრიქონის მნიშვნელობების ან კომენტარების შიგნით არასდროს ერევა სტრუქტურულ გამყოფებთან.
  2. 2
    ბლოკისა და დეკლარაციის გამოყოფა
    როცა სკანერი პოულობს ზედა-დონის გახსნის ფრჩხილს, ის ამოიღებს პრელუდიას (ამომრჩეველს ან at-წესის საკვანძო სიტყვას) და რეკურსიულად ამუშავებს ბლოკის შიგთავსს — რომელსაც შესაძლოა ჩადგმული წესები ჰქონდეს (@media, @supports, ბუნებრივი CSS ჩადგმულობა), დამუშავებული უფრო ღრმა რეკურსიის დონეზე.
  3. 3
    თვისების დალაგება და გამორჩევა
    თითოეულ ბლოკში დეკლარაციები იკრიბება მწკრივად, შემდეგ, არასავალდებულოდ, ანბანურად ილაგება თვისების სახელით, სანამ დაიწერება არჩეული გამორჩევის სიგანით (2 ან 4 ცარიელი ადგილი). Minify რეჟიმი მთლიანად გამოტოვებს ცარიელ ადგილებს და შლის კომენტარებს.
  4. 4
    მყისიერი გამომავალი ბრაუზერშივე
    შედეგები ჩნდება აკრეფისთანავე useMemo hook-ის მეშვეობით — არაფერი იგზავნება არსად. ფორმატირებული ან შემცირებული CSS შესაძლებელია დაკოპირდეს ბუფერში ან ჩამოტვირთოს .css ფაილად, ხოლო პანელი აჩვენებს ზომის სხვაობას ორიგინალთან შედარებით.

დაკავშირებული ინსტრუმენტები

🌐

HTML ბიუტიფაიერი და მინიფიკატორი

ლამაზად დაბეჭდეთ ან მინიფიცირება გაუკეთეთ HTML-ს სათანადო ჩადგმის შეწევებით. ინახავს კონტენტს <pre>, <script>, <style> ბლოკებში.

სცადე
🗄️

SQL ფორმატეტორი და ბიუტიფაიერი

ლამაზად დაბეჭდეთ SQL შეკითხვები სათანადო შეწევებით, კლავიატურის სიტყვის კონფიგურირებადი რეგისტრით და ხაზის გადაბრუნებებით მთავარ კლაუზებზე. მუშაობს ნებისმიერ SQL დიალექტთან.

სცადე
🗜️

CSS მინიფიკატორი და ბიუტიფაიერი

შეამცირეთ CSS ფაილის ზომა ან გაალამაზეთ მინიფიცირებული CSS წაკითხვადობისთვის. მყისიერი, ბრაუზერში.

სცადე

ხშირად დასმული კითხვები