CSS መሞከሪያ

የCSS Playground እንዴት እንደሚሰራ

መሣሪያው ምን ያደርጋል

CSS Playground ሁለት አርታዒዎች — HTML እና CSS — እና ሲታይፕ ሲያደርጉ የሚዘመን በሳንድቦክስ የተገደበ iframe ቅድመ-እይታ ይሰጥዎታል። ኮምፖነንቶችን ለመፕሮቶታይፕ ማድረግ፣ ሴሌክተሮችን ለመፈተሽ፣ የተመላሽ (fallback) ስታይሎችን ለማረጋገጥ ወይም ለባግ ሪፖርቶች አነስተኛ የመደገፊያ ምሳሌዎችን ለመገንባት ይጠቀሙበት። የ'Reset styles' መቀያየሪያ ትንሽ የCSS ሪሴት (box-sizing, ተመጣጣኝ የbody ነባሪዎች) ይጨምራል ስለዚህ የእርስዎ CSS ከአሳሽ ነባሪዎች ጋር እንዳይታገል።

የተለመዱ የገንቢ አጠቃቀም ሁኔታዎች

የፊት-ገጽ ገንቢዎች በpull requests ወይም በሰነዶች ለመካፈል የተለዩ የኮምፖነንት ምሳሌዎችን ይገነባሉ። ዲዛይነሮች ከግሬዲየንቶች፣ ጥላዎች፣ የእንቅስቃሴ ጊዜ መጠኖች እና grid, subgrid, እና container queries ያሉ ዘመናዊ ባህሪያት ጋር ይሞክራሉ። አስተማሪዎች CodePen መለያዎችን ሳያበሩ ለተማሪዎች CSS ጽንሰ-ሀሳቦችን ያሳያሉ። QA ኢንጂነሮች በተቆጣጠረ አካባቢ ውስጥ የCSS-ብቻ ባጎችን በንጽህና ይደግማሉ።

የውሂብ ቅርጾች፣ አይነቶች ወይም ልዩነቶች

የHTML አርታዒው ማንኛውንም የbody ይዘት ይቀበላል። የCSS አርታዒው ማንኛውንም ዘመናዊ CSS — custom properties, nesting, @container, @layer, ወዘተ — ይቀበላል። ውጤት ከ meta viewport tag (አማራጭ) እና ከinline style block ጋር ሙሉ በሙሉ ብቻውን የሚቆም የHTML ሰነድ ነው፣ እንደ ሙሉ ፋይል ለመቅዳት ዝግጁ። የቅድመ-እይታ iframe አንጻራዊ URLs እንዲፈቀዱ ነገር ግን ስክሪፕቶችን እና የፎርም ማስገባቶችን ለመከልከል sandbox='allow-same-origin' ይጠቀማል።

የተለመዱ ስህተቶች እና የጠርዝ ሁኔታዎች

ውጫዊ @font-face URLs እና @import መግለጫዎች በiframe ሳንድቦክስ ሊታገዱ ይችላሉ። ከውጭ ሰነድ የተወረሱ ስታይሎች ላይ የሚመሰረት CSS መለጠፍ እዚህ ተመሳሳይ አይሰራም ምክንያቱም iframe ተለይቶ ነው። በጣም ረጅም ቆይታ ያላቸው እንቅስቃሴዎች አርታዒው ትኩረት ባይኖረውም በቅድመ-እይታ iframe ውስጥ መሮጥ ይቀጥላሉ፤ የጊዜ ማስተካከያ ሲያስረዱ animation-play-state በመጠቀም አቁሟቸው።

ይህን መሣሪያ ከኮድ ጋር መቼ መጠቀም እንደሚገባ

አንድ-ጊዜ ሙከራዎች፣ የተለዩ አነስተኛ የመደገፊያ ምሳሌዎች ወይም ፈጣን የትምህርት ዴሞዎች ለማድረግ የአሳሽ መሣሪያውን ይጠቀሙ። በእውነተኛ ፕሮጀክት ውስጥ ግን የእርስዎ dev server፣ hot module replacement እና የኮምፖነንት devtools (React Refresh, Vue devtools) በጣም የበለጠ ሀብታም የግብረ-መልስ ዙር ይሰጣሉ — መሳሪያ ማቀናበር የማትፈልጉባቸው ረቂቆች ለማድረግ ይህን ፕሌይግራውንድ ይጠቀሙ።