"Outline ሁነታ ብቻ" በድረ-ገጽ ላይ ለእያንዳንዱ HTML ኤለመንት ባለቀለም የድንበር መስመሮችን (outlines) ይጨምራል፣ ይህም የገጹን የሌይአውት አወቃቀር ወዲያውኑ እንደ ኤክስሬይ እንዲያዩ ያስችልዎታል። እያንዳንዱ div፣ section፣ header፣ paragraph፣ እና button የት እንደሚቀመጡ—ፓዲንግ፣ ማርጂን እና የውስጥ ዝምድናቸውን ጨምሮ—በትክክል ይመልከቱ።
የገጽን ሌይአውት መረዳት ብዙውን ጊዜ የCSS ችግሮችን ለመፍታት የመጀመሪያው እርምጃ ነው። ያ ትርፍ ነጭ ቦታ የመጣው ከፓዲንግ ነው ወይስ ከማርጂን? አንድ ኤለመንት ከታሰበው በላይ የሰፋው ባልታቀደ የውስጥ ኤለመንት ምክንያት ነው? ሁለት ኤለመንቶች የተደራረቡት በተጋጩ ቦታዎች ምክንያት ነው? "Outline ሁነታ ብቻ" በገጹ ላይ በእያንዳንዱ ኤለመንት ዙሪያ ባለቀለም ድንበሮችን በማስመር ለእነዚህ ጥያቄዎች ወዲያውኑ መልስ ይሰጣል። በአንድ ጊዜ አንድን ኤለመንት ብቻ ከሚያሳይ የአሳሽ DevTools በተለየ መልኩ፣ ይህ መሣሪያ ሁሉንም ነገር በአንድ ጊዜ ያሳያል—ይህም አጠቃላይ ምስሉን ይሰጥዎታል። ለእያንዳንዱ የHTML ኤለመንት አይነት የተለየ ቀለም ይሰጣል፡ አርዕስቶች ሰማያዊ፣ የናቪጌሽን ኤለመንቶች ቢጫ፣ ዋና ይዘቶች አረንጓዴ፣ አንቀጾች ሮዝ፣ ቁልፎች ሲያን (cyan)፣ እና ሌሎችም:: የቀለም ቅንጅቱ መዋቅራዊ ቅጦችን ለማስተዋል እና ኤለመንቶችን DOM ን ሳያነቡ በጨረፍታ ለመለየት ቀላል ያደርገዋል።
ያለምንም ውቅር ወይም የቅንጅቶች ፓነል በአንድ ጠቅታ በሁሉም ኤለመንቶች ላይ መስመሮችን ያብሩ። ሁሉንም ድንበሮች ለማየት አንዴ ይጫኑ፣ ለማስወገድ ደግሞ እንደገና ይጫኑ። በማንኛውም ድረ-ገጽ ላይ የሌይአውት አወቃቀርን ለማየት ፈጣኑ መንገድ።
ተመሳሳይ ያልሆኑ የHTML ኤለመንቶች ወዲያውኑ እንዲለዩ የተለያየ ቀለም ያላቸው መስመሮችን ያገኛሉ። አርዕስቶች በሰማያዊ፣ ናቪጌሽን በቢጫ፣ ዋና ይዘት በአረንጓዴ፣ ዋና አርዕስቶች በሐምራዊ፣ አንቀጾች በሮዝ፣ ቁልፎች በሲያን፣ እና divs በግራጫ:: DOM ን ሳያነቡ የኤለመንት አይነቶችን መለየት ይችላሉ።
መስመሮቹ የማይታዩ የCSS ችግሮችን እንዲታዩ ያደርገዋል። ነጭ ቦታ የሚፈጥሩ ያልተጠበቁ ማርጂኖችን፣ ኤለመንቶችን ከታሰበው በላይ የሚያሰፉ ፓዲንጎችን፣ አግድም ማሸብለል የሚያመጡ ፍሳሾችን፣ ወይም ምንም ቁመት የሌላቸውን ኤለመንቶች ያግኙ። እያንዳንዱ የቦክስ ድንበር ይታያል።
በውስጥ የተቀመጡ መስመሮች የDOM ን የላቀ-ታች ዝምድና ያሳያሉ። ኤለመንቶች ምን ያህል ወደ ውስጥ እንደተከማቹ፣ የትኛው ኮንቴይነር የትኛውን ይዘት እንደሚይዝ እና የእያንዳንዱ የውስጥ ክፍል ድንበሮች የት እንደሚወድቁ ይመልከቱ። ውስብስብ የሆኑ grid እና flex ሌይአውቶችን ለመረዳት በጣም ጠቃሚ ነው።
በራስዎ ፕሮጀክቶች፣ በደንበኛ ገጾች፣ በተፎካካሪ ገጾች ወይም ለዲዛይን ማጣቀሻነት በሚጠቀሙባቸው ገጾች ላይ ያግብሩ። መስመሮቹ የሚተገበሩት በCSS አማካኝነት ነው፣ ይህም የDOM አወቃቀርን አይቀይርም ወይም የJavaScript ባህሪን አይነካም።
መስመሮቹ የሚሳሉት የCSS outline ን (ከborder ይልቅ) በመጠቀም ነው፣ ይህ ማለት በኤለመንቱ ቦክስ ሞዴል ልኬቶች ላይ ምንም አይጨምሩም። የገጹ ሌይአውት ልክ እንደነበረ ይቆያል—መስመሮቹ ለእይታ ብቻ ናቸው እና ምንም አይነት ሽግሽግ አያመጡም።
Outline ሁነታ ብቻ covers the following, organized by category:
htmlbodyheaderfootermainsectionarticleasidenavh1–h6 headingsp paragraphsspana linksblockquoteprecodebuttoninputtextareaselectformlabeldivul / ol / litable / tr / tdfiguredetailsበክፍሎች መካከል ያለው ምስጢራዊ ክፍተት? መስመሮቹን ያብሩ እና በታችኛው ኤለመንት ማርጂን፣ በላኛው ኮንቴይነር ፓዲንግ፣ ወይም ባልታወቀ ባዶ div የመጣ መሆኑን ወዲያውኑ ያውቃሉ። በDevTools ደቂቃዎችን የሚወስድ ስራ በOutline ሁነታ በሰከንዶች ውስጥ ይከናወናል።
መስመሮቹ እንደበሩ የአሳሽዎን መስኮት መጠን ይቀይሩ እና ሌይአውቱ በተለያዩ መጠኖች እንዴት እንደሚቀያየር ይመልከቱ። የትኞቹ ኤለመንቶች እንደሚሰበሰቡ፣ የትኞቹ እንደሚፈስሱ፣ እና የgrid ወይም flexbox አወቃቀር የት እንደሚቀየር—ሁሉንም በጨረፍታ ይመልከቱ።
በጣም ብዙ የውስጥ divs? አላስፈላጊ የሆኑ ኤለመንቶች? Outline ሁነታ የውስጥ ክምችትን በግልጽ ያሳያል—በቀላል ይዘት ዙሪያ 5 እና ከዚያ በላይ መስመሮችን ካዩ ኮዱ ሊቀለል ይችላል ማለት ነው። ለኮድ ግምገማ በጣም ጥሩ ነው።
በዋናው ገጽዎ ላይ መስመሮቹን ያብሩ፣ ከዚያ በሌላ ንዑስ ገጽ ላይ። ተመሳሳይ የሌይአውት አወቃቀር አላቸው? ማርጂኖች እና የክፍል ወርዶች ወጥ ናቸው? መስመሮቹ መዋቅራዊ ወጥነትን (ወይም አለመጣጣምን) ወዲያውኑ ያሳያሉ።
የHTML ኤለመንቶች እንዴት ቦክሶችን እንደሚፈጥሩ፣ ቦክስ ሞዴል ከፓዲንግ እና ማርጂን ጋር እንዴት እንደሚሰራ፣ እና የውስጥ አወቃቀር የገጽ ደረጃን እንዴት እንደሚፈጥር ለተማሪዎች ያሳዩ። Outline ሁነታ ረቂቅ ጽንሰ-ሀሳቦችን ወደሚታዩ እና በይነተገናኝ ማሳያዎች ይቀይራል።
የDevSuite Pro ተንሳፋፊ ዶክን ይክፈቱ እና "Outline ሁነታ ብቻ" አዶን ይጫኑ። ወዲያውኑ በገጹ ላይ ያለ እያንዳንዱ የHTML ኤለመንት ባለቀለም የድንበር መስመር ያገኛል።
እያንዳንዱ የኤለመንት አይነት የተለየ ቀለም አለው። ሰማያዊ ለመዋቅራዊ ኤለመንቶች (header, footer, section)፣ አረንጓዴ ለዋና ዋና የይዘት ቦታዎች፣ ሐምራዊ ለአርዕስቶች፣ ሮዝ ለአንቀጾች፣ ሲያን ለቁልፎች እና ግብዓቶች፣ ቢጫ ለናቪጌሽን፣ እና ግራጫ ለተራ divs እና spans::
ያልተጠበቁ ክፍተቶችን (በማርጂን የሚመጡ)፣ ከኮንቴይነራቸው የወጡ ኤለመንቶችን (ፍሳሽ)፣ ያልተመጣጠኑ ክፍተቶችን (ወጥ ያልሆነ ፓዲንግ)፣ ወይም በጣም የተከማቹ የውስጥ ክፍሎችን (አላስፈላጊ div nesting) ይፈልጉ። ሁሉም ወዲያውኑ ይታያሉ።
Outline ሁነታን እንደ መጀመሪያ እርምጃ ይጠቀሙ፣ ከዚያም የለዩዋቸውን ኤለመንቶች እሴቶች ለማረጋገጥ ወደ CSS Inspector ይቀይሩ፣ ወይም በመስመሮች መካከል ያለውን ትክክለኛ ርቀት ለማየት ወደ Measure Distance ይቀይሩ።
ሁሉንም መስመሮች ለማስወገድ እና ወደ መደበኛው የገጽ እይታ ለመመለስ የOutline ሁነታ አዶን እንደገና ይጫኑ። ምንም አይነት ጽዳት አያስፈልግም—ዝም ብሎ የሚያጠፋ/የሚያበራ ቁልፍ ነው።
DevSuite Pro ን በነፃ ይጫኑ እና 39+ የገንቢ መሳሪያዎችን ለአሳሽዎ ይክፈቱ።