CSS ಬ್ಯೂಟಿಫೈಯರ್ ಮತ್ತು ಮಿನಿಫೈಯರ್ ಕಾರ್ಯನಿರ್ವಹಣೆ
CSS ಬ್ಯೂಟಿಫೈಯರ್ ಮತ್ತು ಮಿನಿಫೈಯರ್ ಉಪಕರಣವು ನೀವು ಒದಗಿಸುವ CSS ಕೋಡ್ ಅನ್ನು ಪಡೆದು, ಅದನ್ನು ಓದಲು ಮತ್ತು ಎಡಿಟ್ ಮಾಡಲು ಸುಲಭವಾಗುವಂತೆ ಮರು-ಫಾರ್ಮ್ಯಾಟ್ ಮಾಡುತ್ತದೆ ಅಥವಾ ಫೈಲ್ ಗಾತ್ರವನ್ನು ಕಿರಿದಾಗಿಸಿ ವೇಗವಾಗಿ ಲೋಡ್ ಮಾಡಲು ಅನುಕೂಲವಾಗುವಂತೆ ಕುಗ್ಗಿಸುತ್ತದೆ. ಬಳಕೆದಾರರು ತಮ್ಮ ಅಗತ್ಯಕ್ಕೆ ಅನುಗುಣವಾಗಿ CSS ಅನ್ನು ಹೇಗೆ ಪ್ರಕ್ರಿಯೆಗೊಳಿಸಬೇಕು ಎಂಬುದನ್ನು ಆಯ್ಕೆ ಮಾಡಬಹುದು. ಪ್ರಕ್ರಿಯೆ ಮುಗಿದ ನಂತರ, ಸಿದ್ಧವಾದ ಫಲಿತಾಂಶವನ್ನು ನೇರವಾಗಿ ಕಾಪಿ ಮಾಡಬಹುದು ಅಥವಾ ಫೈಲ್ ರೂಪದಲ್ಲಿ ಡೌನ್ಲೋಡ್ ಮಾಡಬಹುದು.
ವೆಬ್ ಪುಟಗಳ ವಿನ್ಯಾಸ ಮತ್ತು ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಉತ್ತಮಗೊಳಿಸಲು ಈ ಉಪಕರಣವು ಸಹಕಾರಿಯಾಗಿದೆ. ಮುಖ್ಯವಾಗಿ ಕೆಳಗಿನ ಬಳಕೆದಾರರಿಗೆ ಇದು ಉಪಯುಕ್ತವಾಗಿದೆ:
- ಫ್ರಂಟ್-ಎಂಡ್ ಡೆವಲಪರ್ಗಳು.
- ಅಸ್ತಿತ್ವದಲ್ಲಿರುವ ಸ್ಟೈಲ್ಶೀಟ್ಗಳನ್ನು ನಿರ್ವಹಿಸುವವರು.
- ಕುಗ್ಗಿಸಲಾದ (compressed) CSS ಅನ್ನು ತ್ವರಿತವಾಗಿ ಓದಬೇಕಾದ ಬಳಕೆದಾರರು.
- ಗೊಂದಲಮಯವಾಗಿರುವ ಸ್ಟೈಲ್ಶೀಟ್ಗಳನ್ನು ಓದಲು ಅನುಕೂಲವಾಗುವಂತೆ ಮರು-ಇಂಡೆಂಟ್ ಮಾಡಲು ಬಯಸುವವರು.
- ಪುಟದ ವಿನ್ಯಾಸ ಮತ್ತು ಪ್ರದರ್ಶನದಲ್ಲಿ ಯಾವುದೇ ಬದಲಾವಣೆ ಮಾಡದೆಯೇ, ಪ್ರೊಡಕ್ಷನ್ಗಾಗಿ ಸ್ಟೈಲ್ಶೀಟ್ಗಳ ಗಾತ್ರವನ್ನು ಕುಗ್ಗಿಸಲು ಬಯಸುವವರು.
ಇನ್ಪುಟ್ ಮತ್ತು ಮಿತಿಗಳು
ಉಪಕರಣವು ಕಾರ್ಯನಿರ್ವಹಿಸಲು ಕೆಳಗಿನ ಇನ್ಪುಟ್ ಆಯ್ಕೆಗಳನ್ನು ಮತ್ತು ನಿಯಮಗಳನ್ನು ಹೊಂದಿದೆ:
- CSS ಇನ್ಪುಟ್: ಬಳಕೆದಾರರು ತಮ್ಮ CSS ಕೋಡ್ ಅನ್ನು ಇಲ್ಲಿ ಪೇಸ್ಟ್ ಮಾಡಬಹುದು ಅಥವಾ ಟೈಪ್ ಮಾಡಬಹುದು. ಇನ್ಪುಟ್ ಮಾಡಬಹುದಾದ ಗರಿಷ್ಠ ಗಾತ್ರ 500,000 ಅಕ್ಷರಗಳು.
- ಇಂಡೆಂಟ್: ಕೋಡ್ ಅನ್ನು ಅಂದಗೊಳಿಸುವಾಗ (beautify) ಕೆಳಗಿನ ಮೂರು ಆಯ್ಕೆಗಳಲ್ಲಿ ಒಂದನ್ನು ಬಳಸಬಹುದು:
- 2 spaces
- 4 spaces
- tab
- ಕಂಪ್ರೆಷನ್: ಕೋಡ್ ಅನ್ನು ಕುಗ್ಗಿಸುವಾಗ ಎರಡು ಹಂತದ ಆಯ್ಕೆಗಳಿರುತ್ತವೆ:
- ಸುರಕ್ಷಿತ: ಇದು ಕೇವಲ ಖಾಲಿ ಜಾಗ (whitespace) ಮತ್ತು ಕಾಮೆಂಟ್ಗಳನ್ನು ತೆಗೆದುಹಾಕುತ್ತದೆ ಹಾಗೂ ಮೌಲ್ಯಗಳನ್ನು ಚಿಕ್ಕದಾಗಿಸುತ್ತದೆ. ಬರೆದ ಪ್ರತಿಯೊಂದು ನಿಯಮವನ್ನು (rule) ಇದ್ದ ಜಾಗದಲ್ಲಿಯೇ ಉಳಿಸುತ್ತದೆ.
- ಆಪ್ಟಿಮೈಸ್ ಮಾಡಲಾಗಿದೆ: ಫೈಲ್ ಗಾತ್ರವನ್ನು ಇನ್ನಷ್ಟು ಕಿರಿದಾಗಿಸಲು ನಕಲಿ ಸೆಲೆಕ್ಟರ್ಗಳು ಮತ್ತು ನಿಯಮಗಳನ್ನು ವಿಲೀನಗೊಳಿಸುತ್ತದೆ. ಈ ಪ್ರಕ್ರಿಯೆಯಲ್ಲಿ ನಿಯಮಗಳ ಕ್ರಮವು ಬದಲಾಗಬಹುದು.
ಔಟ್ಪುಟ್ ಮತ್ತು ಅಂಕಿ-ಅಂಶಗಳು
ಪ್ರಕ್ರಿಯೆ ಪೂರ್ಣಗೊಂಡ ನಂತರ ಉಪಕರಣವು ಈ ಕೆಳಗಿನ ವಿವರಗಳನ್ನು ಪ್ರದರ್ಶಿಸುತ್ತದೆ:
- ಸಾಲುಗಳು: ಪ್ರಕ್ರಿಯೆಗೊಳಿಸಲಾದ CSS ನಲ್ಲಿರುವ ಒಟ್ಟು ಸಾಲುಗಳ ಸಂಖ್ಯೆ.
- ಅಕ್ಷರಗಳು: ಪ್ರಕ್ರಿಯೆಗೊಳಿಸಲಾದ CSS ನಲ್ಲಿರುವ ಒಟ್ಟು ಅಕ್ಷರಗಳ ಸಂಖ್ಯೆ.
- ಗಾತ್ರ: UTF-8 ಬೈಟ್ಗಳಲ್ಲಿ ಪ್ರಕ್ರಿಯೆಗೊಳಿಸಲಾದ CSS ನ ಒಟ್ಟು ಗಾತ್ರ.
- ಕುಗ್ಗಿಸಲಾಗಿದೆ —
{pct}% ಸಣ್ಣದಾಗಿದೆ: CSS ಅನ್ನು ಮಿನಿಫೈ ಮಾಡಿದಾಗ ಈ ಲೇಬಲ್ ಕಾಣಿಸಿಕೊಳ್ಳುತ್ತದೆ ಮತ್ತು ಮೂಲ ಗಾತ್ರಕ್ಕೆ ಹೋಲಿಸಿದರೆ ಎಷ್ಟು ಶೇಕಡಾ ಗಾತ್ರ ಕಡಿಮೆಯಾಗಿದೆ ಎಂಬುದನ್ನು ತೋರಿಸುತ್ತದೆ. - ಡೌನ್ಲೋಡ್ ಮಾಡಿ ಬಟನ್: ಪ್ರಕ್ರಿಯೆಗೊಳಿಸಲಾದ CSS ಅನ್ನು
styles.cssಹೆಸರಿನ ಫೈಲ್ ಆಗಿ ಡೌನ್ಲೋಡ್ ಮಾಡುತ್ತದೆ. - ಕಾಪಿ ಬಟನ್: ಪ್ರಕ್ರಿಯೆಗೊಳಿಸಲಾದ CSS ಅನ್ನು ಕ್ಲಿಪ್ಬೋರ್ಡ್ಗೆ ಕಾಪಿ ಮಾಡುತ್ತದೆ.
ನಿಯಮಗಳು ಮತ್ತು ದೋಷ ಸಂದೇಶಗಳು
ಉಪಕರಣವು CSS ಪ್ರಕ್ರಿಯೆಗೊಳಿಸುವಾಗ ಕೆಲವು ನಿರ್ದಿಷ್ಟ ನಿಯಮಗಳನ್ನು ಮತ್ತು ಎಡ್ಜ್ ಕೇಸ್ಗಳನ್ನು ಅನುಸರಿಸುತ್ತದೆ:
- ಕಾಮೆಂಟ್ಗಳ ಸಂರಕ್ಷಣೆ:
/*! … */ಎಂದು ಗುರುತಿಸಲಾದ ವಿಶೇಷ ಕಾಮೆಂಟ್ಗಳನ್ನು "ಸುರಕ್ಷಿತ" ಮತ್ತು "ಆಪ್ಟಿಮೈಸ್ ಮಾಡಲಾಗಿದೆ" ಎಂಬ ಎರಡೂ ಕಂಪ್ರೆಷನ್ ಸೆಟ್ಟಿಂಗ್ಗಳಲ್ಲಿ ಹಾಗೆಯೇ ಉಳಿಸಿಕೊಳ್ಳಲಾಗುತ್ತದೆ. - ಅಂದಗೊಳಿಸುವಿಕೆ (Beautifying): ಈ ಪ್ರಕ್ರಿಯೆಯಲ್ಲಿ ಉಪಕರಣವು ಸ್ಟೈಲ್ಗಳನ್ನು ಮರು-ಇಂಡೆಂಟ್ ಮಾಡುತ್ತದೆ ಮತ್ತು ಸೂಕ್ತ ಜಾಗಗಳನ್ನು (spaces) ನೀಡುತ್ತದೆ.
- ಕುಗ್ಗಿಸುವಿಕೆ (Minifying): ಈ ಪ್ರಕ್ರಿಯೆಯಲ್ಲಿ ಅನಗತ್ಯ ಖಾಲಿ ಜಾಗಗಳು ಮತ್ತು ಸಾಮಾನ್ಯ ಕಾಮೆಂಟ್ಗಳನ್ನು ತೆಗೆದುಹಾಕಲಾಗುತ್ತದೆ. ಬಣ್ಣಗಳಂತಹ ಮೌಲ್ಯಗಳನ್ನು ಚಿಕ್ಕದಾಗಿಸಲಾಗುತ್ತದೆ (ಉದಾಹರಣೆಗೆ
#ffffffಅನ್ನು#fffಎಂದು ಬದಲಾಯಿಸಲಾಗುತ್ತದೆ). - ಸುರಕ್ಷಿತ ಮೋಡ್: ಈ ಮೋಡ್ನಲ್ಲಿ ವೆಂಡರ್ ಪ್ರಿಫಿಕ್ಸ್ ಮತ್ತು ಆಧುನಿಕ ಸಿಂಟ್ಯಾಕ್ಸ್ ಅನ್ನು ಯಾವುದೇ ಬದಲಾವಣೆ ಇಲ್ಲದೆ ಹಾಗೆಯೇ ಉಳಿಸಲಾಗುತ್ತದೆ.
- ಖಾಲಿ ಇನ್ಪುಟ್: ಇನ್ಪುಟ್ ಬಾಕ್ಸ್ ಖಾಲಿಯಾಗಿದ್ದರೆ, ಉಪಕರಣವು "ಕುಗ್ಗಿಸಲು ಯಾವುದೇ CSS ಕಂಡುಬಂದಿಲ್ಲ — ಇನ್ಪುಟ್ನಲ್ಲಿ ಸಿಂಟ್ಯಾಕ್ಸ್ ದೋಷಗಳಿವೆಯೇ ಪರಿಶೀಲಿಸಿ" ಎಂಬ ಸಂದೇಶವನ್ನು ತೋರಿಸುತ್ತದೆ.
- ಪ್ರಕ್ರಿಯೆಗೊಳಿಸಲು ಸಾಧ್ಯವಾಗದಿದ್ದಾಗ: ಇನ್ಪುಟ್ ಮಾಡಿದ CSS ಅನ್ನು ಪ್ರಕ್ರಿಯೆಗೊಳಿಸಲು ಸಾಧ್ಯವಾಗದಿದ್ದರೆ, "ಈ CSS ಅನ್ನು ಪ್ರಕ್ರಿಯೆಗೊಳಿಸಲು ಸಾಧ್ಯವಾಗಲಿಲ್ಲ" ಎಂಬ ದೋಷ ಸಂದೇಶ ಕಾಣಿಸಿಕೊಳ್ಳುತ್ತದೆ.
- ಗರಿಷ್ಠ ಮಿತಿ ಮೀರಿದಾಗ: ಇನ್ಪುಟ್ CSS 500,000 ಅಕ್ಷರಗಳಿಗಿಂತ ಹೆಚ್ಚಿದ್ದರೆ, "ಈ ಸ್ಟೈಲ್ಶೀಟ್ ಪ್ರಕ್ರಿಯೆಗೊಳಿಸಲು ತುಂಬಾ ದೊಡ್ಡದಾಗಿದೆ. ಸಣ್ಣ ಫೈಲ್ ಪ್ರಯತ್ನಿಸಿ" ಎಂಬ ಸಂದೇಶವನ್ನು ಪ್ರದರ್ಶಿಸಲಾಗುತ್ತದೆ.
- ಸಿಂಟ್ಯಾಕ್ಸ್ ದೋಷ: ಇನ್ಪುಟ್ನಲ್ಲಿ ಕಂಟೆಂಟ್ ಇದ್ದರೂ, ಮಿನಿಫೈಯರ್ ಖಾಲಿ ಫಲಿತಾಂಶವನ್ನು ನೀಡಿದರೆ ಅದು ಸಿಂಟ್ಯಾಕ್ಸ್ ದೋಷವನ್ನು ಸೂಚಿಸುತ್ತದೆ.
ಗೌಪ್ಯತೆ ಮತ್ತು ಡೇಟಾ ಸಂಸ್ಕರಣೆ
ನಿಮ್ಮ ಡೇಟಾದ ಸುರಕ್ಷತೆ ಮತ್ತು ಗೌಪ್ಯತೆಗೆ ಹೆಚ್ಚಿನ ಆದ್ಯತೆ ನೀಡಲಾಗಿದೆ. ನಿಮ್ಮ CSS ಅನ್ನು ನಿಮ್ಮ ಬ್ರೌಸರ್ನಲ್ಲಿಯೇ ಫಾರ್ಮ್ಯಾಟ್ ಮತ್ತು ಮಿನಿಫೈ ಮಾಡಲಾಗುತ್ತದೆ. ಪ್ರಕ್ರಿಯೆಯು ಸಂಪೂರ್ಣವಾಗಿ ಸ್ಥಳೀಯವಾಗಿ ನಡೆಯುವುದರಿಂದ, BroBroGo ಗೆ ಯಾವುದೇ ಕೋಡ್ ಅಥವಾ ಫೈಲ್ ಅನ್ನು ಅಪ್ಲೋಡ್ ಮಾಡಲಾಗುವುದಿಲ್ಲ.
ಪದೇ ಪದೇ ಕೇಳಲಾಗುವ ಪ್ರಶ್ನೆಗಳು (FAQ)
Beautify ಮತ್ತು Minify ನಡುವಿನ ವ್ಯತ್ಯಾಸವೇನು?
Beautify (ಅಂದಗೊಳಿಸುವಿಕೆ) ನಿಮ್ಮ ಶೈಲಿಗಳನ್ನು ಸುಲಭವಾಗಿ ಓದಲು ಮತ್ತು ಎಡಿಟ್ ಮಾಡಲು ಅನುಕೂಲವಾಗುವಂತೆ ಇಂಡೆಂಟ್ ಮತ್ತು ಸ್ಪೇಸ್ ನೀಡುತ್ತದೆ. Minify (ಕುಗ್ಗಿಸುವಿಕೆ) ಇದಕ್ಕೆ ವಿರುದ್ಧವಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ — ಇದು ಬ್ರೌಸರ್ಗೆ ಅಗತ್ಯವಿಲ್ಲದ ಸ್ಪೇಸ್ಗಳು ಮತ್ತು ಕಾಮೆಂಟ್ಗಳನ್ನು ತೆಗೆದುಹಾಕುತ್ತದೆ ಹಾಗೂ ಬಣ್ಣಗಳಂತಹ ಮೌಲ್ಯಗಳನ್ನು ಚಿಕ್ಕದಾಗಿಸುತ್ತದೆ, ಇದರಿಂದ ಫೈಲ್ ಗಾತ್ರ ಕಿರಿದಾಗಿ ವೇಗವಾಗಿ ಲೋಡ್ ಆಗುತ್ತದೆ. ಕೆಲಸ ಮಾಡುವಾಗ Beautify ಬಳಸಿ, ಪ್ರಕಟಿಸುವ ಮುನ್ನ Minify ಬಳಸಿ.
Safe ಮತ್ತು Optimized ಕಂಪ್ರೆಷನ್ ಸೆಟ್ಟಿಂಗ್ಗಳು ಏನು ಮಾಡುತ್ತವೆ?
Safe ಮೋಡ್ ಕೇವಲ ಸ್ಪೇಸ್ಗಳು ಮತ್ತು ಕಾಮೆಂಟ್ಗಳನ್ನು ತೆಗೆದುಹಾಕುತ್ತದೆ ಮತ್ತು ಮೌಲ್ಯಗಳನ್ನು ಚಿಕ್ಕದಾಗಿಸುತ್ತದೆ, ನಿಮ್ಮ ಪ್ರತಿಯೊಂದು ನಿಯಮವನ್ನು ಇದ್ದಂತೆಯೇ ಉಳಿಸುತ್ತದೆ. Optimized ಮೋಡ್ ಇನ್ನೂ ಒಂದು ಹೆಜ್ಜೆ ಮುಂದೆ ಹೋಗಿ, ಫೈಲ್ ಗಾತ್ರವನ್ನು ಇನ್ನಷ್ಟು ಕುಗ್ಗಿಸಲು ನಕಲಿ ಸೆಲೆಕ್ಟರ್ಗಳು ಮತ್ತು ರೂಲ್ಗಳನ್ನು ವಿಲೀನಗೊಳಿಸುತ್ತದೆ — ಇದು ರೂಲ್ಗಳ ಕ್ರಮವನ್ನು ಬದಲಾಯಿಸಬಹುದಾದ್ದರಿಂದ, ಸೋರ್ಸ್ ಆರ್ಡರ್ ಮೇಲೆ ಅವಲಂಬಿತವಾಗಿರುವ ಸ್ಟೈಲ್ಶೀಟ್ಗಳನ್ನು ಪ್ರಕಟಿಸುವ ಮುನ್ನ ಒಮ್ಮೆ ಪರಿಶೀಲಿಸುವುದು ಒಳ್ಳೆಯದು. /*! … */ ಎಂದು ಗುರುತಿಸಲಾದ ಕಾಮೆಂಟ್ಗಳನ್ನು ಎರಡೂ ಮೋಡ್ಗಳಲ್ಲಿ ಉಳಿಸಿಕೊಳ್ಳಲಾಗುತ್ತದೆ.
Minify ಮಾಡುವುದರಿಂದ ನನ್ನ ಪೇಜ್ ವಿನ್ಯಾಸ ಬದಲಾಗುತ್ತದೆಯೇ?
Safe ಮೋಡ್ನಲ್ಲಿ ಯಾವುದೇ ಬದಲಾವಣೆ ಆಗುವುದಿಲ್ಲ — ನಿಮ್ಮ ಶೈಲಿಗಳು ಮೊದಲಿನಂತೆಯೇ ಕಾಣಿಸಿಕೊಳ್ಳುತ್ತವೆ. ಇದು ಖಾಲಿ ಜಾಗಗಳನ್ನು ಕುಗ್ಗಿಸುತ್ತದೆ, ಸಾಮಾನ್ಯ ಕಾಮೆಂಟ್ಗಳನ್ನು ತೆಗೆದುಹಾಕುತ್ತದೆ ಮತ್ತು ಮೌಲ್ಯಗಳನ್ನು ಚಿಕ್ಕದಾದ ಸಮಾನ ರೂಪಗಳಿಗೆ ಬದಲಾಯಿಸುತ್ತದೆ (#ffffff ಅನ್ನು #fff ನಂತೆ), ಮತ್ತು ಇದು ನಿಮ್ಮ ವೆಂಡರ್ ಪ್ರಿಫಿಕ್ಸ್ ಅಥವಾ ಆಧುನಿಕ ಸಿಂಟ್ಯಾಕ್ಸ್ ಅನ್ನು ಎಂದಿಗೂ ಬದಲಾಯಿಸುವುದಿಲ್ಲ. Optimized ಮೋಡ್ ರೂಲ್ಗಳನ್ನು ಸಹ ವಿಲೀನಗೊಳಿಸುತ್ತದೆ, ಇದು ಬಹುತೇಕ ಎಲ್ಲಾ ಸ್ಟೈಲ್ಶೀಟ್ಗಳಲ್ಲಿ ಒಂದೇ ರೀತಿ ಕಾಣುತ್ತದೆ ಆದರೆ ನಿಮ್ಮ ಕೋಡ್ ರೂಲ್ ಆರ್ಡರ್ ಮೇಲೆ ಅವಲಂಬಿತವಾಗಿದ್ದರೆ ಪರಿಶೀಲಿಸುವುದು ಸೂಕ್ತ.