CSS ಪ್ಲೇಗ್ರೌಂಡ್

CSS Playground ಹೇಗೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ

ಈ ಸಾಧನ ಏನು ಮಾಡುತ್ತದೆ

CSS Playground ನಿಮಗೆ ಎರಡು ಎಡಿಟರ್‌ಗಳನ್ನು — HTML ಮತ್ತು CSS — ಮತ್ತು ನೀವು ಟೈಪ್ ಮಾಡುವಂತೆ ಅಪ್‌ಡೇಟ್ ಆಗುವ ಸ್ಯಾಂಡ್‌ಬಾಕ್ಸ್ ಮಾಡಿದ iframe ಪ್ರೀವ್ಯೂ ಅನ್ನು ನೀಡುತ್ತದೆ. ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ಪ್ರೋಟೋಟೈಪ್ ಮಾಡಲು, ಸೆಲೆಕ್ಟರ್‌ಗಳನ್ನು ಪರೀಕ್ಷಿಸಲು, ಫಾಲ್‌ಬ್ಯಾಕ್ ಸ್ಟೈಲ್‌ಗಳನ್ನು ವಾಲಿಡೇಟ್ ಮಾಡಲು, ಅಥವಾ ಬಗ್ ರಿಪೋರ್ಟ್‌ಗಳಿಗಾಗಿ ಕನಿಷ್ಠ reproಗಳನ್ನು ನಿರ್ಮಿಸಲು ಇದನ್ನು ಬಳಸಿ. 'Reset styles' ಟಾಗಲ್ ಒಂದು ಸಣ್ಣ CSS ರಿಸೆಟ್ (box-sizing, ಸಮಂಜಸ body ಡೀಫಾಲ್ಟ್‌ಗಳು) ಅನ್ನು ಸೇರಿಸುತ್ತದೆ, ಹೀಗಾಗಿ ನಿಮ್ಮ CSS ಬ್ರೌಸರ್ ಡೀಫಾಲ್ಟ್‌ಗಳೊಂದಿಗೆ ಹೋರಾಡುವುದಿಲ್ಲ.

ಡೆವಲಪರ್‌ಗಳ ಸಾಮಾನ್ಯ ಬಳಕೆ ಪ್ರಕರಣಗಳು

ಫ್ರಂಟ್‌ಎಂಡ್ ಡೆವಲಪರ್‌ಗಳು pull request‌ಗಳು ಅಥವಾ ಡಾಕ್ಯುಮೆಂಟೇಶನ್‌ನಲ್ಲಿ ಹಂಚಿಕೊಳ್ಳಲು ಪ್ರತ್ಯೇಕ ಕಾಂಪೊನೆಂಟ್ ಉದಾಹರಣೆಗಳನ್ನು ನಿರ್ಮಿಸುತ್ತಾರೆ. ಡಿಸೈನರ್‌ಗಳು ಗ್ರೇಡಿಯಂಟ್‌ಗಳು, ಶ್ಯಾಡೋಗಳು, ಅನಿಮೇಶನ್ ಟೈಮಿಂಗ್‌ಗಳು, ಮತ್ತು grid, subgrid, ಹಾಗೂ container queries ಮುಂತಾದ ಆಧುನಿಕ ವೈಶಿಷ್ಟ್ಯಗಳೊಂದಿಗೆ ಪ್ರಯೋಗ ಮಾಡುತ್ತಾರೆ. ಶಿಕ್ಷಕರು CodePen ಖಾತೆಗಳನ್ನು ಸೃಷ್ಟಿಸದೇ ವಿದ್ಯಾರ್ಥಿಗಳಿಗೆ CSS ಕಲ್ಪನೆಗಳನ್ನು ಡೆಮೋ ಮಾಡುತ್ತಾರೆ. QA ಎಂಜಿನಿಯರ್‌ಗಳು ನಿಯಂತ್ರಿತ ಪರಿಸರದಲ್ಲಿ CSS-ಮಾತ್ರದ ಬಗ್‌ಗಳನ್ನು ಸ್ವಚ್ಛವಾಗಿ ಪುನರುತ್ಪಾದಿಸುತ್ತಾರೆ.

ಡೇಟಾ ಸ್ವರೂಪಗಳು, ಪ್ರಕಾರಗಳು, ಅಥವಾ ರೂಪಾಂತರಗಳು

HTML ಎಡಿಟರ್ ಯಾವುದೇ body ವಿಷಯವನ್ನು ಸ್ವೀಕರಿಸುತ್ತದೆ. CSS ಎಡಿಟರ್ ಯಾವುದೇ ಆಧುನಿಕ CSS ಅನ್ನು — custom properties, nesting, @container, @layer, ಇತ್ಯಾದಿ — ಸ್ವೀಕರಿಸುತ್ತದೆ. ಔಟ್‌ಪುಟ್ meta viewport ಟ್ಯಾಗ್ (ಐಚ್ಛಿಕ) ಮತ್ತು inline style ಬ್ಲಾಕ್‌ನೊಂದಿಗೆ ಸಂಪೂರ್ಣ ಸ್ವತಂತ್ರ HTML ಡಾಕ್ಯುಮೆಂಟ್ ಆಗಿದ್ದು, ಪೂರ್ಣ ಫೈಲ್ ಆಗಿ ಕಾಪಿ ಮಾಡಲು ಸಿದ್ಧವಾಗಿರುತ್ತದೆ. ಪ್ರೀವ್ಯೂ iframe sandbox='allow-same-origin' ಅನ್ನು ಬಳಸುತ್ತದೆ, ಸಂಬಂಧಿತ URL‌ಗಳನ್ನು ಅನುಮತಿಸುವಾಗ ಸ್ಕ್ರಿಪ್ಟ್‌ಗಳು ಮತ್ತು ಫಾರ್ಮ್ ಸಬ್ಮಿಷನ್‌ಗಳನ್ನು ತಡೆಯಲು.

ಸಾಮಾನ್ಯ ತಪ್ಪುಗಳು ಮತ್ತು ಎಡ್ಜ್ ಕೇಸ್‌ಗಳು

ಬಾಹ್ಯ @font-face URL‌ಗಳು ಮತ್ತು @import ಸ್ಟೇಟ್‌ಮೆಂಟ್‌ಗಳು iframe ಸ್ಯಾಂಡ್‌ಬಾಕ್ಸ್‌ನಿಂದ ಬ್ಲಾಕ್ ಆಗಬಹುದು. ಹೊರಗಿನ ಡಾಕ್ಯುಮೆಂಟ್‌ನಿಂದ ಇನ್ಹೆರಿಟ್ ಆಗುವ ಸ್ಟೈಲ್‌ಗಳ ಮೇಲೆ ಅವಲಂಬಿತವಾಗಿರುವ CSS ಅನ್ನು ಪೇಸ್ಟ್ ಮಾಡಿದರೆ ಇಲ್ಲಿ ಅದೇ ರೀತಿ ವರ್ತಿಸುವುದಿಲ್ಲ, ಏಕೆಂದರೆ iframe ಪ್ರತ್ಯೇಕವಾಗಿದೆ. ಬಹಳ ದೀರ್ಘ ಅವಧಿಯ ಅನಿಮೇಶನ್‌ಗಳು ಎಡಿಟರ್ ಫೋಕಸ್ ಆಗಿಲ್ಲದಿದ್ದರೂ ಪ್ರೀವ್ಯೂ iframe ನಲ್ಲಿ ಮುಂದುವರಿಯುತ್ತವೆ; ಟೈಮಿಂಗ್ ಡಿಬಗ್ ಮಾಡುತ್ತಿದ್ದರೆ animation-play-state ಬಳಸಿ ಅವುಗಳನ್ನು pause ಮಾಡಿ.

ಕೋಡ್‌ಗಿಂತ ಈ ಸಾಧನವನ್ನು ಯಾವಾಗ ಬಳಸಬೇಕು

ಒಮ್ಮೆಲೆ ಪ್ರಯೋಗಗಳು, ಪ್ರತ್ಯೇಕ ಕನಿಷ್ಠ ಪುನರುತ್ಪಾದನೆಗಳು, ಅಥವಾ ತ್ವರಿತ ಬೋಧನಾ ಡೆಮೋಗಳಿಗಾಗಿ ಬ್ರೌಸರ್ ಸಾಧನವನ್ನು ಬಳಸಿ. ನಿಜವಾದ ಪ್ರಾಜೆಕ್ಟ್‌ನಲ್ಲಿ, ನಿಮ್ಮ dev server, hot module replacement, ಮತ್ತು component devtools (React Refresh, Vue devtools) ನಿಮಗೆ ಬಹಳ ಸಮೃದ್ಧ ಫೀಡ್‌ಬ್ಯಾಕ್ ಲೂಪ್ ನೀಡುತ್ತವೆ — ಟೂಲಿಂಗ್ ಸೆಟ್ ಅಪ್ ಮಾಡಲು ನೀವು ಬಯಸದ ಸ್ಕೆಚ್‌ಗಳಿಗಾಗಿ ಈ ಪ್ಲೇಗ್ರೌಂಡ್ ಅನ್ನು ಬಳಸಿ.