ಇಂದಿನ ವೆಬ್ ಬ್ರೌಸರ್ ಯಾವುದೇ ರೀತಿಯ ಕ್ರಾಸ್-ಬ್ರೌಸರ್ ಸ್ಥಿರತೆ ಹಾರೈಕೆಯ ಚಿಂತನೆ ಇರುವ ಕ್ರೇಜಿ ದಿನಗಳಿಂದ ದೂರವಾಗಿದೆ. ಇಂದಿನ ವೆಬ್ ಬ್ರೌಸರ್ಗಳು ಎಲ್ಲಾ ಮಾನದಂಡಗಳನ್ನು ಅನುಸರಿಸುತ್ತವೆ. ಅವರು ಚೆನ್ನಾಗಿ ಒಟ್ಟಿಗೆ ಆಡುತ್ತಾರೆ ಮತ್ತು ವಿವಿಧ ಬ್ರೌಸರ್ಗಳಲ್ಲಿ ಸಾಕಷ್ಟು ಸ್ಥಿರವಾದ ಪುಟ ಪ್ರದರ್ಶನವನ್ನು ತಲುಪಿಸುತ್ತಾರೆ. ಇದು ಗೂಗಲ್ ಕ್ರೋಮ್, ಮೈಕ್ರೋಸಾಫ್ಟ್ ಎಡ್ಜ್, ಮೊಜಿಲ್ಲಾ ಫೈರ್ಫಾಕ್ಸ್, ಒಪೇರಾ, ಸಫಾರಿ, ಮತ್ತು ಇಂದು ವೆಬ್ಸೈಟ್ ಪ್ರವೇಶಿಸಲು ಬಳಸಲಾಗುವ ಅಸಂಖ್ಯಾತ ಮೊಬೈಲ್ ಸಾಧನಗಳಲ್ಲಿ ಕಂಡುಬರುವ ವಿವಿಧ ಬ್ರೌಸರ್ಗಳ ಇತ್ತೀಚಿನ ಆವೃತ್ತಿಯನ್ನು ಒಳಗೊಂಡಿದೆ.
ಇದು ವೆಬ್ ಬ್ರೌಸರ್ಗಳಿಗೆ ಬಂದಾಗ ಮತ್ತು ಸಿಎಸ್ಎಸ್ ಅನ್ನು ಹೇಗೆ ಪ್ರದರ್ಶಿಸುತ್ತದೆಯಾದರೂ, ಪ್ರಗತಿ ನಿಸ್ಸಂಶಯವಾಗಿ ಮಾಡಲಾಗಿದೆ, ಈ ವಿವಿಧ ಸಾಫ್ಟ್ವೇರ್ ಆಯ್ಕೆಗಳ ನಡುವೆ ಇನ್ನೂ ಅಸಮಂಜಸತೆಗಳಿವೆ. ಪೂರ್ವನಿಯೋಜಿತವಾಗಿ ಆ ಬ್ರೌಸರ್ಗಳು ಅಂಚಿನಲ್ಲಿ, ಪ್ಯಾಡಿಂಗ್ ಮತ್ತು ಗಡಿಗಳನ್ನು ಹೇಗೆ ಲೆಕ್ಕಾಚಾರ ಮಾಡುತ್ತದೆ ಎಂಬುದು ಸಾಮಾನ್ಯ ಅಸಮಂಜಸತೆಗಳಲ್ಲಿ ಒಂದಾಗಿದೆ.
ಬಾಕ್ಸ್ ಮಾದರಿ ಪರಿಣಾಮದ ಎಲ್ಲಾ ಅಂಶಗಳ ಕಾರಣದಿಂದಾಗಿ ಎಲ್ಲಾ ಎಚ್ಟಿಎಮ್ಎಲ್ ಘಟಕಗಳು ಮತ್ತು ಪುಟ ಲೇಔಟ್ಗಳನ್ನು ರಚಿಸುವಲ್ಲಿ ಅವು ಅವಶ್ಯಕವಾಗಿರುತ್ತವೆ, ಏಕೆಂದರೆ ಅಸಮಂಜಸವಾದ ಪ್ರದರ್ಶನವೆಂದರೆ ಒಂದು ಪುಟವು ಒಂದು ಬ್ರೌಸರ್ನಲ್ಲಿ ಉತ್ತಮವಾಗಿ ಕಾಣುತ್ತದೆ, ಆದರೆ ಸ್ವಲ್ಪಮಟ್ಟಿಗೆ ಸ್ವಲ್ಪಮಟ್ಟಿಗೆ ಕಾಣಿಸಿಕೊಳ್ಳುತ್ತದೆ. ಈ ಸಮಸ್ಯೆಯನ್ನು ಎದುರಿಸಲು, ಅನೇಕ ವೆಬ್ ವಿನ್ಯಾಸಕರು ಬಾಕ್ಸ್ ಮಾದರಿಯ ಈ ಅಂಶಗಳನ್ನು ಸಾಮಾನ್ಯೀಕರಿಸುತ್ತಾರೆ. ಈ ಅಭ್ಯಾಸವನ್ನು ಅಂಚುಗಳು, ಪ್ಯಾಡಿಂಗ್ ಮತ್ತು ಗಡಿಗಳ ಮೌಲ್ಯಗಳನ್ನು "ಝೀರೋಯಿಂಗ್ ಔಟ್" ಎಂದು ಕರೆಯಲಾಗುತ್ತದೆ.
ಬ್ರೌಸರ್ ಡೀಫಾಲ್ಟ್ಗಳ ಮೇಲೆ ಸೂಚನೆ
ವೆಬ್ ಬ್ರೌಸರ್ಗಳು ಎಲ್ಲಾ ಪುಟದ ಕೆಲವು ಪ್ರದರ್ಶನ ಅಂಶಗಳಿಗಾಗಿ ಡೀಫಾಲ್ಟ್ ಸೆಟ್ಟಿಂಗ್ಗಳನ್ನು ಹೊಂದಿವೆ. ಉದಾಹರಣೆಗೆ, ಹೈಪರ್ಲಿಂಕ್ಗಳು ನೀಲಿ ಮತ್ತು ಡೀಫಾಲ್ಟ್ ಆಗಿ ಅಂಡರ್ಲೈನ್ ಆಗಿರುತ್ತವೆ. ಇದು ಹಲವಾರು ಬ್ರೌಸರ್ಗಳಲ್ಲಿ ಸ್ಥಿರವಾಗಿದೆ, ಮತ್ತು ಹೆಚ್ಚಿನ ವಿನ್ಯಾಸಕರು ತಮ್ಮ ನಿರ್ದಿಷ್ಟ ಯೋಜನೆಯ ವಿನ್ಯಾಸದ ಅಗತ್ಯಗಳಿಗೆ ಸರಿಹೊಂದುವಂತೆ ಏನಾದರೂ ಸಹ, ಅವುಗಳು ಒಂದೇ ಡಿಫಾಲ್ಟ್ಗಳೊಂದಿಗೆ ಪ್ರಾರಂಭವಾಗುವುದರಿಂದ ಈ ಬದಲಾವಣೆಗಳನ್ನು ಸುಲಭವಾಗಿಸುತ್ತದೆ. ದುಃಖಕರವೆಂದರೆ, ಅಂಚಿನಲ್ಲಿ, ಪ್ಯಾಡಿಂಗ್ ಮತ್ತು ಗಡಿಗಳ ಡೀಫಾಲ್ಟ್ ಮೌಲ್ಯವು ಕ್ರಾಸ್-ಬ್ರೌಸರ್ ಸ್ಥಿರತೆಯ ಅದೇ ಮಟ್ಟವನ್ನು ಆನಂದಿಸುವುದಿಲ್ಲ.
ಅಂಚು ಮತ್ತು ಪ್ಯಾಡಿಂಗ್ಗೆ ಸಾಮಾನ್ಯ ಮೌಲ್ಯಗಳು
ಅಸಮಂಜಸವಾದ ಬಾಕ್ಸ್ ಮಾದರಿಯ ಸಮಸ್ಯೆಯನ್ನು ಪರಿಹರಿಸಲು ಉತ್ತಮ ಮಾರ್ಗವೆಂದರೆ ಎಲ್ಲಾ ಅಂಶಗಳು ಮತ್ತು ಪ್ಯಾಡಿಂಗ್ ಮೌಲ್ಯಗಳನ್ನು ಸೊನ್ನೆಗೆ ಎಚ್ಟಿಎಮ್ಎಲ್ ಘಟಕಗಳನ್ನು ಹೊಂದಿಸುವುದು. ನಿಮ್ಮ ಸ್ಟೈಲ್ಶೀಟ್ಗೆ ಈ ಸಿಎಸ್ಎಸ್ ನಿಯಮವನ್ನು ಸೇರಿಸಲು ನೀವು ಮಾಡಬಹುದಾದ ಕೆಲವು ಮಾರ್ಗಗಳಿವೆ:
* {margin: 0; ಪ್ಯಾಡಿಂಗ್: 0; }ಈ ಸಿಎಸ್ಎಸ್ ನಿಯಮ * ಅಥವಾ ವೈಲ್ಡ್ಕಾರ್ಡ್ ಅಕ್ಷರವನ್ನು ಬಳಸುತ್ತದೆ. ಆ ಪಾತ್ರವು "ಎಲ್ಲಾ ಅಂಶಗಳು" ಎಂದರೆ ಅದು ಮೂಲಭೂತವಾಗಿ ಪ್ರತಿ HTML ಅಂಶವನ್ನು ಆಯ್ಕೆಮಾಡಿ ಮತ್ತು ಅಂಚುಗಳನ್ನು ಮತ್ತು ಪ್ಯಾಡಿಂಗ್ ಅನ್ನು 0 ಗೆ ಹೊಂದಿಸುತ್ತದೆ. ಈ ನಿಯಮವು ಬಹಳ ಅನಿರ್ದಿಷ್ಟವಾಗಿದ್ದರೂ, ಅದು ನಿಮ್ಮ ಬಾಹ್ಯ ಸ್ಟೈಲ್ಶೀಟ್ನಲ್ಲಿರುವುದರಿಂದ, ಇದು ಡೀಫಾಲ್ಟ್ ಬ್ರೌಸರ್ಗಿಂತ ಹೆಚ್ಚಿನ ನಿರ್ದಿಷ್ಟತೆಯನ್ನು ಹೊಂದಿರುತ್ತದೆ ಮೌಲ್ಯಗಳು ಹಾಗೆ. ನೀವು ಡೀಫಾಲ್ಟ್ ಆಗಿರುವುದರಿಂದ ನೀವು ಪುನಃ ಬರೆಯುತ್ತಿದ್ದರೆ, ನೀವು ಏನು ಮಾಡುತ್ತಿರುವಿರಿ ಎಂಬುದನ್ನು ಈ ಒಂದು ಶೈಲಿ ಸಾಧಿಸುತ್ತದೆ.
ಮತ್ತೊಂದು ಮೌಲ್ಯವೆಂದರೆ ಈ ಮೌಲ್ಯಗಳನ್ನು HTML ಮತ್ತು ದೇಹದ ಅಂಶಗಳಿಗೆ ಅನ್ವಯಿಸುವುದು. ನಿಮ್ಮ ಪುಟದಲ್ಲಿನ ಎಲ್ಲಾ ಇತರ ಅಂಶಗಳು ಈ ಎರಡು ಅಂಶಗಳ ಮಕ್ಕಳು ಕಾರಣ, ಸಿಎಸ್ಎಸ್ ಕ್ಯಾಸ್ಕೇಡ್ ಈ ಎಲ್ಲ ಮೌಲ್ಯಗಳನ್ನು ಇತರ ಎಲ್ಲ ಅಂಶಗಳಿಗೆ ಅನ್ವಯಿಸುತ್ತದೆ.
HTML, ದೇಹದ {margin: 0; ಪ್ಯಾಡಿಂಗ್: 0; }ಇದು ನಿಮ್ಮ ವಿನ್ಯಾಸವನ್ನು ಎಲ್ಲಾ ಬ್ರೌಸರ್ಗಳಲ್ಲಿ ಅದೇ ಸ್ಥಳದಲ್ಲಿ ಪ್ರಾರಂಭಿಸುತ್ತದೆ, ಆದರೆ ನೆನಪಿಡುವ ಒಂದು ವಿಷಯವೆಂದರೆ ಒಮ್ಮೆ ನೀವು ಎಲ್ಲಾ ಅಂಚುಗಳನ್ನು ತಿರುಗಿಸಿ ಮತ್ತು ಪ್ಯಾಡಿಂಗ್ ಮಾಡುವುದು, ನೋಟವನ್ನು ಸಾಧಿಸಲು ನಿಮ್ಮ ವೆಬ್ ಪುಟದ ನಿರ್ದಿಷ್ಟ ಭಾಗಗಳಿಗೆ ನೀವು ಅವುಗಳನ್ನು ಆಯ್ಕೆಮಾಡಬೇಕು ಮತ್ತು ನಿಮ್ಮ ವಿನ್ಯಾಸವು ಕರೆ ಎಂದು ಭಾವಿಸುತ್ತಾರೆ.
ಗಡಿ
ನೀವು ಆಲೋಚನೆ ಮಾಡಬಹುದು "ಆದರೆ ಬ್ರೌಸರ್ಗಳು ಪೂರ್ವನಿಯೋಜಿತವಾಗಿ ಯಾವುದೇ ಅಂಶವನ್ನು ಹೊಂದಿರುವುದಿಲ್ಲ". ಇದು ಕಟ್ಟುನಿಟ್ಟಾಗಿ ನಿಜವಲ್ಲ. ಇಂಟರ್ನೆಟ್ ಎಕ್ಸ್ಪ್ಲೋರರ್ನ ಹಳೆಯ ಆವೃತ್ತಿಗಳು ಅಂಶಗಳ ಸುತ್ತ ಒಂದು ಪಾರದರ್ಶಕ ಅಥವಾ ಅದೃಶ್ಯವಾದ ಗಡಿಯನ್ನು ಹೊಂದಿರುತ್ತವೆ. ನೀವು ಗಡಿ 0 ಅನ್ನು ಹೊಂದಿಸದ ಹೊರತು, ಗಡಿರೇಖೆಯು ನಿಮ್ಮ ಪುಟ ಚೌಕಟ್ಟಿನಲ್ಲಿದೆ. ಐಇಯ ಈ ಪ್ರಾಚೀನ ಆವೃತ್ತಿಗಳನ್ನು ನೀವು ಬೆಂಬಲಿಸುವಿರಿ ಎಂದು ನೀವು ನಿರ್ಧರಿಸಿದ್ದರೆ, ನಿಮ್ಮ ದೇಹ ಮತ್ತು ಎಚ್ಟಿಎಮ್ಎಲ್ ಶೈಲಿಗಳಿಗೆ ಈ ಕೆಳಗಿನದನ್ನು ಸೇರಿಸುವ ಮೂಲಕ ನೀವು ಇದನ್ನು ಪರಿಹರಿಸಬೇಕಾಗುತ್ತದೆ:
ಎಚ್ಟಿಎಮ್ಎಲ್, ದೇಹ {
ಅಂಚು: 0px;
ಪ್ಯಾಡಿಂಗ್: 0px;
ಗಡಿ: 0px;
}
ಅಂಚುಗಳು ಮತ್ತು ಪ್ಯಾಡಿಂಗ್ ಅನ್ನು ನೀವು ಹೇಗೆ ನಿಲ್ಲಿಸಿದಿರಿ ಎಂಬುದರಂತೆಯೇ, ಈ ಹೊಸ ಶೈಲಿಯು ಪೂರ್ವನಿಯೋಜಿತ ಅಂಚುಗಳನ್ನು ಸಹ ಮಾಡುತ್ತದೆ. ಲೇಖನದಲ್ಲಿ ತೋರಿಸಿದ ವೈಲ್ಡ್ಕಾರ್ಡ್ ಸೆಲೆಕ್ಟರ್ ಅನ್ನು ಬಳಸಿಕೊಂಡು ನೀವು ಒಂದೇ ವಿಷಯವನ್ನು ಸಹ ಮಾಡಬಹುದು.
ಜೆನ್ನಿಫರ್ ಕ್ರಿನಿನ್ರಿಂದ ಮೂಲ ಲೇಖನ. 9/27/16 ರಂದು ಜೆರೆಮಿ ಗಿರಾರ್ಡ್ರಿಂದ ಸಂಪಾದಿಸಲಾಗಿದೆ.