CSS Хэлбэржүүлэгч ба Шахагч хэрэгслийн зорилго
Вэб хөгжүүлэлтийн явцад CSS буюу загварын хуудасны файлын хэмжээ болон уншигдах байдал нь чухал үүрэг гүйцэтгэдэг. "CSS Хэлбэржүүлэгч ба Шахагч" хэрэгсэл нь таны оруулсан CSS кодыг унших, засахад хялбар болгон дахин хэлбэржүүлэх, эсвэл файлын хэмжээг багасгаж вэб хуудсыг хурдан ачааллах зорилгоор нягтруулан шахах үүргийг гүйцэтгэдэг. Хэрэглэгч өөрийн хэрэгцээнд тохируулан кодыг хэрхэн боловсруулахыг сонгох боломжтой бөгөөд гарсан үр дүнг шууд хуулж авах эсвэл файл хэлбэрээр татаж авдаг.
Энэхүү хэрэгсэл нь дараах хэрэглэгчдэд тусгайлан зориулагдсан болно:
- Фронт-энд (front-end) хөгжүүлэгчид.
- Одоо байгаа загварын хуудсыг хариуцан ажиллаж, арчилгаа хийж буй хүмүүс.
- Шахсан төлөвтэй байгаа CSS кодыг хурдан унших шаардлагатай хэрэглэгчид.
- Эмх замбараагүй, орооцолдсон загварын хуудасны догол мөрийг цэгцэлж уншихыг хүссэн хүмүүс.
- Вэб хуудасны харагдах байдлыг өөрчлөхгүйгээр, үйлдвэрлэлийн (production) шатанд зориулж загварын хуудасны хэмжээг багасгах хүсэлтэй хэрэглэгчид.
Оролтын тохиргоо ба хязгаарлалт
Хэрэгслийг ашиглахын тулд дараах оролтын өгөгдөл болон тохиргоог тохируулна:
- CSS оролт: Хэрэглэгч өөрийн CSS кодыг энэ хэсэгт хуулж наах эсвэл шууд бичих боломжтой. Оруулах кодын дээд хэмжээ нь 500,000 тэмдэгт байна.
- Догол мөр: Кодыг хэлбэржүүлэхдээ дараах догол мөрний зайг сонгоно:
- 2 зай (2 spaces)
- 4 зай (4 spaces)
- tab
- Шахалт: Кодыг нягтруулах хоёр өөр түвшин бий:
- Аюулгүй: Зөвхөн хоосон зай болон тайлбарыг устгаж, утгуудыг богиносгоно. Энэ горим нь бичигдсэн дүрэм бүрийг яг байсан байрлалд нь хэвээр үлдээдэг.
- Оновчтой: Файлын хэмжээг илүү жижиг болгохын тулд давхардсан селектор болон дүрмүүдийг нэгтгэдэг бөгөөд ингэх явцад дүрмийн дарааллыг өөрчилж болзошгүй.
Гаралтын үзүүлэлтүүд ба үр дүнг авах
Кодыг боловсруулж дууссаны дараа систем дараах мэдээллийг харуулна:
- Мөр: Боловсруулсан CSS кодын нийт мөрийн тоо.
- Тэмдэгт: Боловсруулсан CSS кодын нийт тэмдэгтийн тоо.
- Хэмжээ: Боловсруулсан CSS кодын UTF-8 байтаар илэрхийлэгдсэн хэмжээ.
- Шахсан —
{pct}% жижиг болсон: CSS кодыг шахсан үед гарч ирэх бөгөөд хэмжээ хэдэн хувиар буурсныг илтгэнэ.
Үр дүнг дараах товчлууруудын тусламжтайгаар авна:
- Татах товчлуур: Боловсруулсан CSS кодыг
styles.cssнэртэй файл болгон татаж авна. - Хуулах товчлуур: Боловсруулсан CSS кодыг шууд санах ойдоо хуулж авна.
Код боловсруулах дүрэм ба онцгой тохиолдлууд
Хэрэгсэл нь кодыг хэлбэржүүлэх болон шахах явцдаа дараах дүрмүүдийг баримталдаг:
- Тусгай тайлбарыг хадгалах:
/*! … */гэж тэмдэглэсэн тайлбаруудыг "Аюулгүй" болон "Оновчтой" шахалтын аль алинд нь устгалгүй хэвээр үлдээдэг. - Хэлбэржүүлэх үйлдэл: Кодыг хэлбэржүүлэх явцад хэрэгсэл нь догол мөрийг дахин шинэчилж, загварын дүрмүүдийн хооронд зай авч өгдөг.
- Шахах үйлдэл: Шахах явцад хоосон зай болон энгийн тайлбаруудыг устгаж, өнгөний утга зэрэг шинж чанаруудыг богиносгодог (жишээ нь,
#ffffffгэсэн утгыг#fffболгож хувиргана). - Аюулгүй горимын онцлог: "Аюулгүй" горимд ажиллаж байх үед вендор угтварууд (vendor prefixes) болон орчин үеийн синтаксыг өөрчилдөггүй.
Боловсруулалтын явцад дараах алдааны мэдэгдлүүд гарч болно:
- Хэрэв оруулсан хэсэг хоосон байвал хэрэгсэл нь "Шахах CSS олдсонгүй — оролтын синтакс алдааг шалгана уу" гэсэн бичгийг харуулна.
- Хэрэв оруулсан CSS кодыг боловсруулах боломжгүй байвал "Энэ CSS-ийг боловсруулж чадсангүй" гэсэн алдааг заана.
- Хэрэв оруулсан CSS код нь 500,000 тэмдэгтийн хязгаарыг давсан тохиолдолд "Энэ загварын хуудас боловсруулахад хэтэрхий том байна. Жижиг файл сонгоно уу" гэсэн мэдэгдэл гарна.
- Хэрэв оролтын хэсэгт агуулга байгаа боловч шахагч нь хоосон үр дүн гаргавал энэ нь синтаксийн алдаа байгааг илтгэнэ.
Нууцлал ба өгөгдөл боловсруулалт
Таны оруулсан CSS кодыг хэлбэржүүлэх болон шахах үйл явц нь бүхэлдээ таны вэб хөтөч дотор хийгддэг. Таны кодоос ямар ч өгөгдөл BroBroGo руу илгээгдэхгүй буюу сервер рүү хуулагдахгүй.
Түгээмэл асуултууд (FAQ)
Хэлбэржүүлэх (beautify) болон шахах (minify) хоёрын ялгаа юу вэ?
Хэлбэржүүлэх (Beautify) нь таны загварын кодыг унших, засахад хялбар болгох үүднээс догол мөр, зай авдаг. Шахах (Minify) нь эсрэгээрээ — хөтчид шаардлагагүй хоосон зай, тайлбарыг устгаж, өнгөний утга зэргийг богиносгон файлыг жижиг хэмжээтэй, хурдан ачаалагддаг болгодог. Ажиллах явцдаа хэлбэржүүлж, бэлэн болгохдоо шахна уу.
Аюулгүй (Safe) болон Оновчтой (Optimized) шахалтын тохиргоонууд юу хийдэг вэ?
Аюулгүй (Safe) горим нь зөвхөн хоосон зай, тайлбарыг устгаж, утгуудыг богиносгодог бөгөөд дүрэм бүрийг бичсэн хэвээр нь үлдээдэг. Оновчтой (Optimized) горим нь илүү гүнзгийрч, давхардсан селектор болон дүрмүүдийг нэгтгэн файлыг улам жижиг болгодог — ингэхдээ дүрмийн дарааллыг өөрчилж болзошгүй тул ашиглахаас өмнө хурдан шалгаж үзэхэд гэмгүй. /*! … */ гэж тэмдэглэсэн тайлбарууд аль ч горимд хэвээр үлдэнэ.
Шахах нь миний хуудасны харагдах байдлыг өөрчлөх үү?
Аюулгүй (Safe) горимд үгүй — таны загварууд яг ижилхэн харагдана. Энэ нь хоосон зайг багасгаж, энгийн тайлбаруудыг хасаж, утгуудыг илүү богино эквивалент хэлбэрт оруулдаг (жишээ нь #ffffff-ийг #fff болгох), мөн таны вендор угтварууд болон орчин үеийн синтаксыг хэзээ ч өөрчилдөггүй. Оновчтой (Optimized) горим нь дүрмүүдийг нэгтгэдэг бөгөөд энэ нь бараг бүх загварын хуудас дээр ижил харагддаг ч хэрэв таны загвар дүрмийн дарааллаас хамаардаг бол нягталж үзэх нь зүйтэй.