CSS પ્લેગ્રાઉન્ડ

CSS Playground કેવી રીતે કામ કરે છે

આ ટૂલ શું કરે છે

CSS Playground તમને બે એડિટર્સ — HTML અને CSS — અને એક સેન્ડબોક્સ્ડ iframe પ્રિવ્યુ આપે છે જે તમે ટાઇપ કરો તેમ અપડેટ થાય છે. તેનો ઉપયોગ કોમ્પોનેન્ટ્સ પ્રોટોટાઇપ કરવા, સિલેક્ટર્સ ટેસ્ટ કરવા, ફૉલબૅક સ્ટાઇલ્સ વૅલિડેટ કરવા, અથવા બગ રિપોર્ટ્સ માટે મિનિમલ રીપ્રોઝ બનાવવા માટે કરો. '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 ટૅગ (વૈકલ્પિક) અને inline style બ્લોક સાથેનું સંપૂર્ણ standalone HTML ડોક્યુમેન્ટ છે, જે સંપૂર્ણ ફાઇલ તરીકે કૉપી કરવા તૈયાર છે. પ્રિવ્યુ iframe sandbox='allow-same-origin' વાપરે છે જેથી relative URLs મંજૂર થાય અને સાથે scripts તથા form submissions બ્લોક થાય.

સામાન્ય ખામીઓ અને એજ કેસિસ

બાહ્ય @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) તમને ઘણો સમૃદ્ધ ફીડબૅક લૂપ આપે છે — જે સ્કેચિસ માટે તમે ટૂલિંગ સેટઅપ કરવા માંગતા નથી તેના માટે આ પ્લેગ્રાઉન્ડ વાપરો.