የ CSS ማስዋቢያ እና ማሳነሻ ዓላማ
የ CSS ማስዋቢያ እና ማሳነሻ መሣሪያ እርስዎ የሚያቀርቡትን የ CSS ኮድ ወስዶ በቀላሉ እንዲነበብና እንዲስተካከል አድርጎ መልሶ የሚቀርጽ፣ ወይም የፋይሉ መጠን አነስተኛ እንዲሆንና በፍጥነት እንዲጫን አድርጎ የሚያሳንስ መገልገያ ነው። መሣሪያው የእርስዎን CSS እንዴት ማቀናበር እንዳለበት መምረጥ እንዲችሉ የሚያደርግ ሲሆን፣ በመጨረሻም የተገኘውን ውጤት መቅዳት ወይም እንደ ፋይል አድርገው ማውረድ ይችላሉ።
በድረ-ገጽ ግንባታ ሂደት ውስጥ የባዶ ቦታዎች (whitespace) እና የአስተያየቶች (comments) መኖር በ CSS ፋይል መጠን እና በንባብ ምቾት ላይ ከፍተኛ ተጽዕኖ ያሳድራሉ። የሰው ልጅ በቀላሉ ሊያነበውና ሊረዳው የሚችለው CSS ውስጣዊ ክፍተቶችና መስመሮች ያሉት ሲሆን፣ ማሽን ወይም አሳሽ (browser) ግን እነዚህን ክፍተቶች አይፈልጋቸውም። የ CSS ፋይል መጠን አነስተኛ መሆን ድረ-ገጾች በፍጥነት እንዲጫኑ ትልቅ አስተዋጽኦ ያደርጋል። ይህ መሣሪያ በሰው ሊነበብ የሚችልን CSS እና ለማሽን የተመቻቸን CSS በቀላሉ ለመቀያየር ይረዳል።
መሣሪያው የሚቀበላቸው ግብዓቶች
ይህ መሣሪያ ሥራውን ለማከናወን የሚከተሉትን ግብዓቶችና ቅንብሮች ይቀበላል፦
- የCSS ግብዓት፦ የ CSS ኮድዎን እዚህ ይለጥፉ ወይም ይጻፉ። መሣሪያው ሊቀበለው የሚችለው ከፍተኛው መጠን 500,000 ቁምፊዎች ብቻ ነው።
- ክፍተት (Indent)፦ ኮድዎን በሚያስውቡበት ጊዜ የሚከተሉትን የክፍተት ዓይነቶች መምረጥ ይችላሉ፦
- 2 spaces (2 ባዶ ቦታዎች)
- 4 spaces (4 ባዶ ቦታዎች)
- tab (ታብ)
- ማመቅ (Compression)፦ ኮድዎን በሚያሳንሱበት ጊዜ ሁለት ዓይነት የማመቅ አማራጮች አሉ፦
- ደህንነቱ የተጠበቀ፦ ይህ ሁነታ ባዶ ቦታዎችንና አስተያየቶችን ብቻ የሚያስወግድ እንዲሁም እሴቶችን የሚያሳጥር ሲሆን፣ እያንዳንዱን ደንብ (rule) በትክክል በጻፉበት ቦታ ላይ እንዳለ ይተወዋል።
- የተመቻቸ፦ ይህ ሁነታ ፋይሉን ይበልጥ ለማሳነስ ሲባል ተደጋጋሚ መራጮችን (selectors) እና ደንቦችን ያዋህዳል፤ ይህም የደንቦችን ቅደም ተከተል ሊቀይር ይችላል።
ከመሣሪያው የሚገኙ ውጤቶች
የ CSS ኮድዎ ተቀናብሮ ሲያልቅ መሣሪያው የሚከተሉትን መረጃዎችና አማራጮች ያሳያል፦
- መስመሮች፦ የተቀናበረው CSS የያዘው የመስመሮች ብዛት።
- ቁምፊዎች፦ የተቀናበረው CSS የያዘው የቁምፊዎች ብዛት።
- መጠን፦ በ UTF-8 ባይት (byte) የተለካው የተቀናበረው CSS ፋይል መጠን።
- አንሷል — በ
{pct}% ቅናሽ አሳይቷል፦ ይህ መረጃ የሚታየው CSS ሲያንስ ሲሆን፣ የፋይሉ መጠን በስንት በመቶ እንደቀነሰ ያሳያል። - አውርድ የሚል ቁልፍ፦ የተቀናበረውን CSS
styles.cssበሚል የፋይል ስም ለማውረድ ያስችላል። - ኮፒ የሚል ቁልፍ፦ የተቀናበረውን CSS በቀላሉ ለመቅዳት ያገለግላል።
የአሠራር ደንቦች እና ልዩ ሁኔታዎች
መሣሪያው ኮድዎን በሚያቀናብርበት ጊዜ የሚከተሉትን ደንቦች ይከተላል፦
- በ
/*! … */ምልክት የተደረገባቸው ልዩ አስተያየቶች በደህንነቱ የተጠበቀ እና በተመቻቸ የማመቅ ቅንብሮች ውስጥ ሳይጠፉ ይቆያሉ። ይህ በትንሽ ኮድ ውስጥ የተወሰኑ ጠቃሚ አስተያየቶችን ጠብቆ ለማቆየት ይረዳል። - ኮድዎን በሚያስውቡበት ጊዜ መሣሪያው ውስጣዊ ክፍተቶችንና መስመሮችን እንደገና ያስተካክላል።
- ኮድዎን በሚያሳንሱበት ጊዜ መሣሪያው ባዶ ቦታዎችንና ተራ አስተያየቶችን ያስወግዳል፣ እንዲሁም እንደ ቀለማት ያሉ እሴቶችን ያሳጥራል (ለምሳሌ
#ffffffየነበረውን ወደ#fffይቀይራል)። - በደህንነቱ የተጠበቀ ሁነታ ላይ የሻጭ ቅድመ-ቅጥያዎች (vendor prefixes) እና ዘመናዊ ሰዋሰው (modern syntax) በጭራሽ አይለወጡም።
- የገቡት ግብዓት ባዶ ከሆነ፣ መሣሪያው "ለማሳነስ የተገኘ CSS የለም — እባክዎ የግብዓቱን ሰዋሰው ስህተቶች ያረጋግጡ" የሚል መልዕክት ያሳያል።
- የገባው የ CSS ኮድ ሊቀናበር ካልቻለ፣ መሣሪያው "ይህን CSS ማቀናበር አልተቻለም" የሚል ስህተት ያሳያል።
- የገባው የ CSS ኮድ ከ 500,000 ቁምፊዎች በላይ ከሆነ፣ መሣሪያው "ይህ የቅጥ ገጽ ለማቀናበር በጣም ትልቅ ነው። እባክዎ አነስ ያለ ይሞክሩ" የሚል መልዕክት ያሳያል።
- ግብዓቱ ይዘት ኖሮት ነገር ግን ማሳነሻው ባዶ ውጤት ካስገኘ፣ ይህ የሚያሳየው የሰዋሰው (syntax) ችግር መኖሩን ነው።
የግል ሚስጥራዊነት እና መረጃ አያያዝ
የእርስዎ CSS ቅርጸት የሚስተካከለውና የሚቀነሰው በአሳሽዎ ውስጥ ነው። ወደ BroBroGo ምንም ነገር አይሰቀልም። ይህ መረጃዎ ሙሉ በሙሉ በአካባቢዎ መሣሪያ ላይ ብቻ ተቀናብሮ እንዲጠናቀቅ ያደርጋል።
ይህ መሣሪያ ለማን ያስፈልጋል?
ይህ መሣሪያ ለሚከተሉት ባለሙያዎችና ተጠቃሚዎች ጠቃሚ ነው፦
- የፊት-ለፊት ድረ-ገጽ አዘጋጆች (Front-end developers)።
- ነባር የቅጥ ገጾችን (stylesheets) የሚንከባከቡና የሚያስተካክሉ ሰዎች
- የታመቀ ወይም ያነሰ CSS በፍጥነት ማንበብ የሚፈልጉ ተጠቃሚዎች።
- የተዘበራረቁ የቅጥ ገጾችን በቀላሉ ለማንበብ ክፍተቶችን ማስተካከል የሚፈልጉ ተጠቃሚዎች።
- የገጹን አተረጓጎም ሳይቀይሩ ለስራ ዝግጁ ለማድረግ የቅጥ ገጾችን ማሳነስ የሚፈልጉ ተጠቃሚዎች።
ተደጋግመው የሚነሱ ጥያቄዎች (FAQ)
በማስዋብ (beautify) እና በማሳነስ (minify) መካከል ያለው ልዩነት ምንድን ነው?
ማስዋብ (Beautify) ቅጦችዎ በቀላሉ እንዲነበቡና እንዲስተከተሉ ውስጣዊ ክፍተቶችንና መስመሮችን ያስተካክላል። ማሳነስ (Minify) ደግሞ ተቃራኒውን ያደርጋል — አሳሽ (browser) የማይፈልጋቸውን ባዶ ቦታዎችና አስተያየቶች ያስወግዳል፣ እንዲሁም እንደ ቀለማት ያሉ እሴቶችን ያሳጥራል፤ በዚህም ፋይሉ አነስተኛ ሆኖ በፍጥነት ይጫናል። በሚሰሩበት ጊዜ ያስውቡ፣ ከመልቀቅዎ በፊት ግን ያሳንሱ።
ደህንነቱ የተጠበቀ (Safe) እና የተመቻቸ (Optimized) የማመቅ ቅንብሮች ምን ያደርጋሉ?
ደህንነቱ የተጠበቀ (Safe) ሁነታ ባዶ ቦታዎችንና አስተያየቶችን ብቻ የሚያስወግድና እሴቶችን የሚያሳጥር ሲሆን፣ እያንዳንዱን ደንብ በጻፉበት ቦታ ላይ እንዳለ ይተወዋል። የተመቻቸ (Optimized) ሁነታ ግን ከዚያም አልፎ ፋይሉን ይበልጥ ለማሳነስ ተደጋጋሚ መራጮችንና ደንቦችን ያዋህዳል — ይህም የደንቦችን ቅደም ተከተል ሊቀይር ስለሚችል፣ በቅደም ተከተል ላይ ለሚደገፉ የቅጥ ገጾች (stylesheets) ከመልቀቅዎ በፊት ፈጣን ፍተሻ ማድረግ ይመረጣል። በ /*! … */ ምልክት የተደረገባቸው አስተያየቶች በሁለቱም ሁነታዎች አይጠፉም።
ማሳነስ (minifying) የገጼን ገጽታ ይለውጠዋል?
በደህንነቱ የተጠበቀ (Safe) ሁነታ ምንም አይለወጥም — ቅጦችዎ ልክ እንደ ቀድሞው ይሰራሉ። ባዶ ቦታዎችን ያጠባል፣ ተራ አስተያየቶችን ያስወግዳል፣ እና እሴቶችን በተመጣጣኝ አጫጭር ቅርጾች ይተካል (ለምሳሌ #ffffff ወደ #fff)፤ ነገር ግን የሻጭ ቅድመ-ቅጥያዎችን (vendor prefixes) ወይም ዘመናዊ ሰዋሰውን በጭራሽ አይለውጥም። የተመቻቸ (Optimized) ሁነታ ደንቦችንም ያዋህዳል፣ ይህም በአብዛኛዎቹ የቅጥ ገጾች ላይ ተመሳሳይ ሆኖ ቢታይም፣ የእርስዎ ቅጥ በደንቦች ቅደም ተከተል ላይ የሚደገፍ ከሆነ ማረጋገጡ ይመረጣል።