CSS መርማሪ በማንኛውም ድረ-ገጽ ላይ ባለው ማንኛውም ኤለመንት ላይ ጠቋሚዎን ሲያንቀሳቅሱ ሙሉ የተሰሉ CSS ባህሪያቱን ወዲያውኑ ለማየት የሚያስችል ኃይለኛ፣ ነፃ የገንቢ መሳሪያ ነው። ምርመራ ፓነሉን ለማስቆም ጠቅ ያድርጉ፣ ስታይሎችን በቀጥታ ያርትዑ እና ለውጦችዎ በገጹ ላይ ቅጽበታዊ ሲዘምኑ ይመልከቱ — ሁሉም ያለ ብራውዘር DevTools መክፈት።
ያለ ብራውዘር DevTools ንድፍ ችግር እያረሙ፣ የሚያደንቁትን ንድፍ እያጠኑ ወይም ስፔሲንግና ታይፖግራፊ ዋጋዎችን ፈጥነው እየፈተሹ፣ CSS መርማሪ ንጹህ ተንሳፋፊ ፓነል ውስጥ ሁሉ የሚያስፈልገውን ይሰጣል። ከ DevTools ለየት ባለ መልኩ አያስቸግርም — ቋሚ ፓነሎች የሉም፣ viewport ያልተቀየረ። ጠቋሚ ያንቀሳቅሱ፣ ጠቅ ያድርጉ ይፈትሹ ብቻ። መሳሪያው የተሰሉ ስታይሎችን (ብራውዘሩ ምን እንደሚያሳይ) ያሳያል፣ የተፃፈ CSS ብቻ አይደለም።
ሙሉ የተሰላ CSSቱን ወዲያውኑ ለማየት በማንኛውም ኤለመንት ላይ ጠቋሚ ያንቀሳቅሱ — font family፣ font size፣ line height፣ color፣ background፣ padding፣ margin፣ border፣ border-radius፣ display ዓይነት፣ position፣ z-index እና ተጨማሪ።
ተንሳፋፊ ፓነሉን ለማስቆም ማንኛውንም ኤለመንት ጠቅ ያድርጉ። ይህ ገጹን ማሸብለል፣ ከሌሎች መሳሪያዎች ጋር መገናኘት ወይም ረዥም ባህሪ ዝርዝሮችን በጥንቃቄ ማንበብ ያስችላል።
በፓነል ውስጥ ማንኛውንም CSS ዋጋ ለማርትዕ ሁለት-ጠቅ ያድርጉ። ቀለሞችን ይቀይሩ፣ ስፔሲንግ ያስተካክሉ፣ ፎንቶችን ያሻሽሉ — ለውጦችዎ ወዲያውኑ በገጹ ላይ ይተገበራሉ።
አንድ ባህሪ (ምሳ. "color: #333") ወይም ሙሉ ስታይል ብሎኩን በአንድ ጠቅታ ወደ ቅንጥቦርዎ ይቅዱ። የተቀዳው ውፅዓት ንጹህ፣ በቅርጸት CSS ነው።
የኤለመንቱን ሙሉ ሳጥን ሞዴል ይመልከቱ — ይዘት ቦታ፣ padding፣ ድንበር እና margin — ለእያንዳንዱ ጎን ፒክሰል ዋጋዎች ያለው ምስላዊ ማሳያ።
የኤለመንቱን ስፋት፣ ቁመት እና በገጹ ላይ ያለውን ቦታ (top፣ left ዐውደ-ጽሁፎች) ይመልከቱ። ድንበር ሳጥኑ ግማሽ-ግልፅ ሽፋን ይደመቃል።
CSS መርማሪ ለ 40+ CSS ባህሪያት በምድብ የተደራጁ የተሰሉ ዋጋዎችን ያሳያል:
font-familyfont-sizefont-weightline-heightletter-spacingtext-aligntext-transformcolorwidthheightpaddingmarginborderborder-radiusbox-sizingdisplaypositiontoprightbottomleftz-indexfloatoverflowbackground-colorbackground-imagebackground-sizebackground-positionopacitybox-shadowtext-shadowtransformtransitioncursorያልተጣመሩ ኤለመንቶች ላይ ጠቋሚ ያንቀሳቅሱ padding፣ margin እና position ዋጋዎችን ወዲያውኑ ለማየት። ችግሩን የሚያስከትለውን ትክክለኛ ባህሪ ያግኙ።
የሚያደንቁትን ማንኛውንም ድረ-ገጽ ይጎብኙ እና ታይፖግራፊ፣ ስፔሲንግ እና ቀለም ምርጫዎቹን ይፈትሹ። ለራስዎ ፕሮጀክቶች እንደ ማጣቀሻ ትክክለኛ CSS ዋጋዎችን ይቅዱ።
ኮድ ከመፃፍ በፊት ምስላዊ ለውጦችን ለመፈተሽ ቀጥታ ማርትዕ ይጠቀሙ። የተለያዩ font sizes፣ ቀለሞች ወይም ስፔሲንግ ዋጋዎችን ይሞክሩ።
ንድፍ ግምገማዎች ወቅት የተተገበረው ንድፍ mockup ጋር እንደሚዛመድ ፈጥነው ያረጋግጡ።
ከነባር ንድፍ ጋር ሊዛመድ የሚገባ አዲስ ክፍል እየገነቡ? ማጣቀሻ ኤለመንቱን ይፈትሹ፣ ሁሉንም CSS ባህሪያቱን ይቅዱ እና እንደ ክፍልዎ መሠረት ስታይሎች ይለጥፉ።
የ DevSuite Pro ተንሳፋፊ ዶክ ይክፈቱ እና CSS መርማሪ አዶን ጠቅ ያድርጉ። መሳሪያው ወዲያውኑ ይነቃል — ምርመራ ሁነታ ንቁ መሆኑን የሚያመለክት ስውር ጠቋሚ ለውጥ ያያሉ።
በገጹ ላይ ባለው ማንኛውም ኤለመንት ላይ ጠቋሚዎን ያንቀሳቅሱ። ከጠቋሚዎ ቀጥሎ ተንሳፋፊ ፓነል ይታያል ኤለመንቱ tag ስም፣ classes፣ ልኬቶች እና የተሰሉ CSS ባህሪያት ያሳያል።
በዝርዝር ለመፈተሽ የሚፈልጉትን ኤለመንት አገኙ? ጠቅ ያድርጉ። ፓነሉ ይቆማል እና ጠቋሚዎን ሲያንቀሳቅሱ አይጠፋም።
ወደ አርትዕ ሁነታ ለመግባት በተቆመ ፓነል ውስጥ ማንኛውንም CSS ዋጋ ሁለት-ጠቅ ያድርጉ። አዲስ ዋጋ ይተይቡ እና Enter ይጫኑ። ገጹ ወዲያውኑ ይዘምናል።
ለመቅዳት ከማንኛውም ባህሪ ቀጥሎ ያለውን ቅዳ አዶ ጠቅ ያድርጉ ወይም ሁሉንም ለማግኘት "ሁሉንም CSS ቅዳ" ቁልፍ ይጠቀሙ። በ CSS ፋይልዎ ውስጥ በቀጥታ ይለጥፉ።
DevSuite Pro ን በነፃ ይጫኑ እና 39+ የገንቢ መሳሪያዎችን ለአሳሽዎ ይክፈቱ።