CSS പ്ലേഗ്രൗണ്ട്

CSS Playground എങ്ങനെ പ്രവർത്തിക്കുന്നു

ഉപകരണം ചെയ്യുന്നത് എന്താണ്

CSS Playground നിങ്ങൾക്ക് രണ്ട് എഡിറ്ററുകൾ — HTML, CSS — കൂടാതെ നിങ്ങൾ ടൈപ്പ് ചെയ്യുന്നതിനനുസരിച്ച് അപ്ഡേറ്റ് ചെയ്യുന്ന ഒരു സാൻഡ്‌ബോക്സ്ഡ് iframe പ്രിവ്യൂ നൽകുന്നു. ഘടകങ്ങൾ പ്രോട്ടോടൈപ്പ് ചെയ്യാൻ, സെലക്ടറുകൾ ടെസ്റ്റ് ചെയ്യാൻ, ഫാൾബാക്ക് സ്റ്റൈലുകൾ വാലിഡേറ്റ് ചെയ്യാൻ, അല്ലെങ്കിൽ ബഗ് റിപ്പോർട്ടുകൾക്കായി മിനിമൽ റീപ്രോകൾ നിർമ്മിക്കാൻ ഇത് ഉപയോഗിക്കുക. 'Reset styles' ടോഗിൾ ഒരു ചെറിയ CSS റീസെറ്റ് (box-sizing, യുക്തിസഹമായ body ഡീഫോൾട്ടുകൾ) ചേർക്കുന്നു, അതിനാൽ നിങ്ങളുടെ CSS ബ്രൗസർ ഡീഫോൾട്ടുകളോട് പോരാടേണ്ടിവരില്ല.

ഡെവലപ്പർമാർക്കുള്ള സാധാരണ ഉപയോഗ സാഹചര്യങ്ങൾ

ഫ്രണ്ട്‌എൻഡ് ഡെവലപ്പർമാർ പുൾ റിക്വസ്റ്റുകളിലോ ഡോക്യുമെന്റേഷനിലോ പങ്കിടാൻ ഒറ്റപ്പെട്ട ഘടക ഉദാഹരണങ്ങൾ നിർമ്മിക്കുന്നു. ഡിസൈനർമാർ ഗ്രേഡിയന്റുകൾ, ഷാഡോകൾ, ആനിമേഷൻ ടൈമിംഗുകൾ, grid, subgrid, container queries പോലുള്ള ആധുനിക ഫീച്ചറുകൾ എന്നിവ പരീക്ഷിക്കുന്നു. CodePen അക്കൗണ്ടുകൾ സജ്ജമാക്കാതെ അധ്യാപകർ വിദ്യാർത്ഥികൾക്ക് CSS ആശയങ്ങൾ ഡെമോ ചെയ്യുന്നു. QA എഞ്ചിനീയർമാർ നിയന്ത്രിത പരിതസ്ഥിതിയിൽ CSS-മാത്രമുള്ള ബഗുകൾ വൃത്തിയായി പുനരുത്പാദിപ്പിക്കുന്നു.

ഡാറ്റ ഫോർമാറ്റുകൾ, തരങ്ങൾ, അല്ലെങ്കിൽ വകഭേദങ്ങൾ

HTML എഡിറ്റർ ഏതെങ്കിലും body ഉള്ളടക്കം സ്വീകരിക്കുന്നു. CSS എഡിറ്റർ ഏതെങ്കിലും ആധുനിക CSS — custom properties, nesting, @container, @layer തുടങ്ങിയവ — സ്വീകരിക്കുന്നു. ഔട്ട്പുട്ട് meta viewport ടാഗ് (ഓപ്ഷണൽ) കൂടാതെ ഒരു inline style ബ്ലോക്ക് ഉൾക്കൊള്ളുന്ന പൂർണ്ണമായ സ്റ്റാൻഡ്എലോൺ HTML ഡോക്യുമെന്റാണ്, ഒരു പൂർണ്ണ ഫയലായി കോപ്പി ചെയ്യാൻ തയ്യാറായി. പ്രിവ്യൂ iframe സ്ക്രിപ്റ്റുകളും ഫോം സമർപ്പണങ്ങളും തടയുന്നതിനൊപ്പം relative URLs അനുവദിക്കാൻ sandbox='allow-same-origin' ഉപയോഗിക്കുന്നു.

സാധാരണ പിഴവുകളും എഡ്ജ് കേസുകളും

External @font-face URLs ഉം @import സ്റ്റേറ്റ്മെന്റുകളും iframe സാൻഡ്‌ബോക്സ് വഴി ബ്ലോക്ക് ചെയ്യപ്പെടാം. പുറം ഡോക്യുമെന്റിൽ നിന്നുള്ള inherited styles ആശ്രയിക്കുന്ന CSS പേസ്റ്റ് ചെയ്താൽ ഇവിടെ അതേപോലെ പെരുമാറില്ല, കാരണം iframe ഒറ്റപ്പെട്ടതാണ്. വളരെ നീണ്ട ദൈർഘ്യമുള്ള ആനിമേഷനുകൾ എഡിറ്റർ ഫോകസ് ചെയ്തിട്ടില്ലെങ്കിലും പ്രിവ്യൂ iframe-ൽ തുടർന്നും പ്രവർത്തിക്കും; ടൈമിംഗ് ഡീബഗ് ചെയ്യുകയാണെങ്കിൽ animation-play-state ഉപയോഗിച്ച് അവ pause ചെയ്യുക.

കോഡിനേക്കാൾ ഈ ഉപകരണം എപ്പോൾ ഉപയോഗിക്കണം

ഒറ്റത്തവണ പരീക്ഷണങ്ങൾ, ഒറ്റപ്പെട്ട മിനിമൽ റീപ്രൊഡക്ഷനുകൾ, അല്ലെങ്കിൽ വേഗത്തിലുള്ള ടീച്ചിംഗ് ഡെമോകൾക്കായി ബ്രൗസർ ടൂൾ ഉപയോഗിക്കുക. യഥാർത്ഥ പ്രോജക്റ്റിൽ, നിങ്ങളുടെ dev server, hot module replacement, component devtools (React Refresh, Vue devtools) എന്നിവ വളരെ സമ്പന്നമായ ഒരു ഫീഡ്ബാക്ക് ലൂപ്പ് നൽകും — ടൂളിംഗ് സജ്ജമാക്കാൻ നിങ്ങൾ ആഗ്രഹിക്കാത്ത സ്കെച്ചുകൾക്കായി ഈ പ്ലേഗ്രൗണ്ട് ഉപയോഗിക്കുക.