ಸಿಎಸ್ಎಸ್ ಡಾಕ್ಯುಮೆಂಟ್ ನಿಯಮ (@document) ದ ಆಳವಾದ ವಿಶ್ಲೇಷಣೆ, ಇದು ಡಾಕ್ಯುಮೆಂಟ್-ನಿರ್ದಿಷ್ಟ ಸ್ಟೈಲಿಂಗ್, ಹೊಂದಾಣಿಕೆ, ಮತ್ತು ಉತ್ತಮ ಬಳಕೆದಾರ ಅನುಭವಕ್ಕಾಗಿ ಅದರ ಶಕ್ತಿಯನ್ನು ಅನ್ವೇಷಿಸುತ್ತದೆ.
ಸಿಎಸ್ಎಸ್ ಡಾಕ್ಯುಮೆಂಟ್ ನಿಯಮ: ಡಾಕ್ಯುಮೆಂಟ್-ನಿರ್ದಿಷ್ಟ ಸ್ಟೈಲಿಂಗ್ ಮತ್ತು ಹೊಂದಾಣಿಕೆಯಲ್ಲಿ ಪರಿಣಿತಿ
ಸಿಎಸ್ಎಸ್ ಡಾಕ್ಯುಮೆಂಟ್ ನಿಯಮ, @document ಎಂದು ಸೂಚಿಸಲಾಗುತ್ತದೆ, ಇದು ಸಿಎಸ್ಎಸ್‌ನ ಒಂದು ಶಕ್ತಿಯುತವಾದರೂ ಆಗಾಗ್ಗೆ ಕಡೆಗಣಿಸಲ್ಪಡುವ ವೈಶಿಷ್ಟ್ಯವಾಗಿದೆ. ಇದು ಪ್ರಸ್ತುತ ಡಾಕ್ಯುಮೆಂಟ್‌ನ ಗುಣಲಕ್ಷಣಗಳಾದ ಅದರ URL, ಡೊಮೈನ್, ಅಥವಾ ಬೆಂಬಲಿಸುವ ಬ್ರೌಸರ್‌ನ ರೆಂಡರಿಂಗ್ ಇಂಜಿನ್‌ನ ಆಧಾರದ ಮೇಲೆ ಸ್ಟೈಲ್‌ಗಳನ್ನು ಆಯ್ಕೆಮಾಡಿ ಅನ್ವಯಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. ಈ ಸಾಮರ್ಥ್ಯವು ವೆಬ್ ಪುಟಗಳಿಗೆ ಸುಧಾರಿತ ಕಸ್ಟಮೈಸೇಶನ್, ಹೊಂದಾಣಿಕೆ ಮತ್ತು ಉದ್ದೇಶಿತ ಆಪ್ಟಿಮೈಸೇಶನ್‌ಗೆ ದಾರಿ ಮಾಡಿಕೊಡುತ್ತದೆ, ಹಾಗೂ ಇದು ಸಾಮಾನ್ಯ ಮೀಡಿಯಾ ಕ್ವೆರಿಗಳು ಮತ್ತು ಸೆಲೆಕ್ಟರ್ ನಿರ್ದಿಷ್ಟತೆಯ ಮೀರಿದ ನಿಯಂತ್ರಣ ಮಟ್ಟವನ್ನು ನೀಡುತ್ತದೆ.
@document ನಿಯಮವನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು
ಮೂಲಭೂತವಾಗಿ, @document ನಿಯಮವು ಒಂದು ಷರತ್ತುಬದ್ಧ ಅಟ್-ರೂಲ್ ಆಗಿದೆ. @media ಅಥವಾ @supports ನಂತೆ, ಇದು ಒಂದು ನಿರ್ದಿಷ್ಟ ಷರತ್ತು ಪೂರೈಸಿದಾಗ ಮಾತ್ರ ಸಿಎಸ್ಎಸ್ ಕೋಡ್‌ನ ಬ್ಲಾಕ್ ಅನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸುತ್ತದೆ. ಆದರೆ, ಪರದೆಯ ಗಾತ್ರ ಅಥವಾ ಬ್ರೌಸರ್ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಪರಿಶೀಲಿಸುವ ಬದಲು, @document ಡಾಕ್ಯುಮೆಂಟ್‌ನದೇ ಗುಣಲಕ್ಷಣಗಳನ್ನು ಪರಿಶೀಲಿಸುತ್ತದೆ. ಇದು ಇದನ್ನು ವಿಶೇಷವಾಗಿ ಈ ಕೆಳಗಿನವುಗಳಿಗೆ ಉಪಯುಕ್ತವಾಗಿಸುತ್ತದೆ:
- URL ಆಧಾರಿತ ಸ್ಟೈಲಿಂಗ್: ವೆಬ್‌ಸೈಟ್‌ನ ನಿರ್ದಿಷ್ಟ ಪುಟಗಳು ಅಥವಾ ವಿಭಾಗಗಳಿಗೆ ಅನನ್ಯ ಸ್ಟೈಲ್‌ಗಳನ್ನು ಅನ್ವಯಿಸುವುದು.
- ಕ್ರಾಸ್-ಡೊಮೈನ್ ಸ್ಟೈಲಿಂಗ್: ವಿವಿಧ ಡೊಮೇನ್‌ಗಳಲ್ಲಿ ಹೋಸ್ಟ್ ಮಾಡಲಾದ ಸಂಪನ್ಮೂಲಗಳಿಗೆ ಸ್ಟೈಲ್‌ಗಳನ್ನು ಗುರಿಪಡಿಸುವುದು.
- ವಿವಿಧ ಪರಿಸರಗಳಿಗೆ ಹೊಂದಿಕೊಳ್ಳುವುದು: ಪ್ರಿಂಟ್, ಇಮೇಲ್, ಅಥವಾ ನಿರ್ದಿಷ್ಟ ಡಾಕ್ಯುಮೆಂಟ್ ಪ್ರಕಾರಗಳಿಗೆ ಸ್ಟೈಲ್‌ಗಳನ್ನು ಸರಿಹೊಂದಿಸುವುದು.
- ಬ್ರೌಸರ್-ನಿರ್ದಿಷ್ಟ ಹ್ಯಾಕ್‌ಗಳು: (ಸಾಮಾನ್ಯವಾಗಿ ಇದನ್ನು ಪ್ರೋತ್ಸಾಹಿಸಲಾಗುವುದಿಲ್ಲ) ಹಳೆಯ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿನ ರೆಂಡರಿಂಗ್ ಅಸಂಗತತೆಗಳನ್ನು ಕೊನೆಯ ಉಪಾಯವಾಗಿ ಪರಿಹರಿಸುವುದು.
ಸಿಂಟ್ಯಾಕ್ಸ್ ಮತ್ತು ಬಳಕೆ
@document ನಿಯಮದ ಮೂಲ ಸಿಂಟ್ಯಾಕ್ಸ್ ಈ ಕೆಳಗಿನಂತಿದೆ:
@document {
/* CSS rules to apply */
}
<condition(s)> ವಿಭಾಗದಲ್ಲಿ ನೀವು ಬ್ಲಾಕ್‌ನೊಳಗಿನ ಸಿಎಸ್ಎಸ್ ನಿಯಮಗಳನ್ನು ಅನ್ವಯಿಸಲು ಪೂರೈಸಬೇಕಾದ ಮಾನದಂಡಗಳನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸುತ್ತೀರಿ. ಡಾಕ್ಯುಮೆಂಟ್‌ನ ವಿವಿಧ ಅಂಶಗಳನ್ನು ಹೊಂದಿಸಲು ನೀವು ಫಂಕ್ಷನ್‌ಗಳ ಸಂಯೋಜನೆಯನ್ನು ಬಳಸಬಹುದು.
ಲಭ್ಯವಿರುವ ಮ್ಯಾಚಿಂಗ್ ಫಂಕ್ಷನ್‌ಗಳು
@document ನಿಯಮವು ಹಲವಾರು ಮ್ಯಾಚಿಂಗ್ ಫಂಕ್ಷನ್‌ಗಳನ್ನು ಬೆಂಬಲಿಸುತ್ತದೆ, ಪ್ರತಿಯೊಂದೂ ಡಾಕ್ಯುಮೆಂಟ್‌ನ ವಿಭಿನ್ನ ಅಂಶವನ್ನು ಗುರಿಯಾಗಿಸುತ್ತದೆ. ಇಲ್ಲಿದೆ ಅದರ ವಿವರಣೆ:
url(): ನಿರ್ದಿಷ್ಟ URL ಅನ್ನು ನಿಖರವಾಗಿ ಹೊಂದಿಸುತ್ತದೆ.url-prefix(): ನಿರ್ದಿಷ್ಟ ಪ್ರಿಫಿಕ್ಸ್‌ನೊಂದಿಗೆ ಪ್ರಾರಂಭವಾಗುವ URL ಗಳನ್ನು ಹೊಂದಿಸುತ್ತದೆ.domain(): ನಿರ್ದಿಷ್ಟ ಡೊಮೇನ್‌ನಲ್ಲಿ ಹೋಸ್ಟ್ ಮಾಡಲಾದ ಡಾಕ್ಯುಮೆಂಟ್‌ಗಳನ್ನು ಹೊಂದಿಸುತ್ತದೆ.regexp(): ರೆಗ್ಯುಲರ್ ಎಕ್ಸ್‌ಪ್ರೆಶನ್ ಆಧಾರದ ಮೇಲೆ URL ಗಳನ್ನು ಹೊಂದಿಸುತ್ತದೆ. ಇದು ಸಂಕೀರ್ಣ ಮ್ಯಾಚಿಂಗ್ ಸನ್ನಿವೇಶಗಳಿಗೆ ಒಂದು ಶಕ್ತಿಯುತ ಆಯ್ಕೆಯಾಗಿದೆ, ಆದರೆ ಕಾರ್ಯಕ್ಷಮತೆಯ ಸಮಸ್ಯೆಗಳನ್ನು ತಪ್ಪಿಸಲು ಎಚ್ಚರಿಕೆಯಿಂದ ಬಳಸಬೇಕಾಗುತ್ತದೆ.
ಈ ಫಂಕ್ಷನ್‌ಗಳನ್ನು ಹೇಗೆ ಬಳಸುವುದು ಎಂಬುದರ ಕೆಲವು ಪ್ರಾಯೋಗಿಕ ಉದಾಹರಣೆಗಳನ್ನು ನೋಡೋಣ.
@document ಬಳಕೆಯ ಉದಾಹರಣೆಗಳು
1. ಒಂದು ನಿರ್ದಿಷ್ಟ ಪುಟವನ್ನು ಸ್ಟೈಲ್ ಮಾಡುವುದು
ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್‌ನ "About Us" ಪುಟಕ್ಕೆ ನೀವು ಒಂದು ಅನನ್ಯ ಹಿನ್ನೆಲೆ ಬಣ್ಣವನ್ನು ಅನ್ವಯಿಸಲು ಬಯಸುತ್ತೀರಿ ಎಂದು ಭಾವಿಸೋಣ. url() ಬಳಸಿ, ನೀವು ಆ ನಿರ್ದಿಷ್ಟ ಪುಟವನ್ನು ಗುರಿಪಡಿಸಬಹುದು:
@document url("https://www.example.com/about-us.html") {
body {
background-color: #f0f8ff; /* Light blue background */
}
}
ಇದು ಆ ನಿಖರವಾದ URL ನಲ್ಲಿರುವ ಪುಟಕ್ಕೆ ಮಾತ್ರ ಹಿನ್ನೆಲೆ ಬಣ್ಣವನ್ನು ಅನ್ವಯಿಸುತ್ತದೆ. URL ಮ್ಯಾಚಿಂಗ್ ಕೇಸ್-ಸೆನ್ಸಿಟಿವ್ ಆಗಿರುವುದರಿಂದ, ಫಂಕ್ಷನ್‌ನಲ್ಲಿನ URL ಡಾಕ್ಯುಮೆಂಟ್‌ನ ನೈಜ URL ನೊಂದಿಗೆ ನಿಖರವಾಗಿ ಹೊಂದಿಕೆಯಾಗುವುದನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ.
2. ವೆಬ್‌ಸೈಟ್‌ನ ಒಂದು ವಿಭಾಗವನ್ನು ಸ್ಟೈಲ್ ಮಾಡುವುದು
ನೀವು ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್‌ನ ಸಂಪೂರ್ಣ ವಿಭಾಗವನ್ನು, ಉದಾಹರಣೆಗೆ ಬ್ಲಾಗ್, ಸ್ಟೈಲ್ ಮಾಡಲು ಬಯಸಿದರೆ, ನೀವು url-prefix() ಅನ್ನು ಬಳಸಬಹುದು:
@document url-prefix("https://www.example.com/blog/") {
.blog-post {
font-family: 'Arial', sans-serif;
line-height: 1.6;
}
}
ಇದು "https://www.example.com/blog/" ನಿಂದ ಪ್ರಾರಂಭವಾಗುವ ಯಾವುದೇ ಪುಟದಲ್ಲಿ .blog-post ಕ್ಲಾಸ್ ಹೊಂದಿರುವ ಎಲ್ಲಾ ಎಲಿಮೆಂಟ್‌ಗಳಿಗೆ ನಿರ್ದಿಷ್ಟಪಡಿಸಿದ ಫಾಂಟ್ ಮತ್ತು ಲೈನ್-ಹೈಟ್ ಅನ್ನು ಅನ್ವಯಿಸುತ್ತದೆ. ಇದು ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್‌ನ ನಿರ್ದಿಷ್ಟ ವಿಭಾಗದಲ್ಲಿ ಸ್ಥಿರವಾದ ನೋಟ ಮತ್ತು ಅನುಭವವನ್ನು ಕಾಪಾಡಿಕೊಳ್ಳಲು ಉಪಯುಕ್ತವಾಗಿದೆ.
3. ನಿರ್ದಿಷ್ಟ ಡೊಮೇನ್ ಅನ್ನು ಗುರಿಪಡಿಸುವುದು
domain() ಫಂಕ್ಷನ್ ನಿಮಗೆ ಡೊಮೇನ್ ಹೆಸರಿನ ಆಧಾರದ ಮೇಲೆ ಸ್ಟೈಲ್‌ಗಳನ್ನು ಗುರಿಪಡಿಸಲು ಅನುಮತಿಸುತ್ತದೆ. ಇತರ ಡೊಮೇನ್‌ಗಳಿಂದ ವಿಷಯವನ್ನು ಎಂಬೆಡ್ ಮಾಡುವಾಗ ಮತ್ತು ನಿಮ್ಮ ಸೈಟ್‌ನಲ್ಲಿ ಅದರ ನೋಟವನ್ನು ನಿಯಂತ್ರಿಸಲು ಬಯಸಿದಾಗ ಇದು ಉಪಯುಕ್ತವಾಗಿದೆ. ಉದಾಹರಣೆಗೆ, "example.org" ನಿಂದ ಬರುವ ವಿಷಯಕ್ಕೆ ನಿರ್ದಿಷ್ಟ ಸ್ಟೈಲಿಂಗ್ ಅನ್ವಯಿಸಲು:
@document domain("example.org") {
img {
border: 1px solid #ccc;
}
}
ಈ ಉದಾಹರಣೆಯು ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್‌ನಲ್ಲಿ ಪ್ರದರ್ಶಿಸಿದಾಗ "example.org" ಡೊಮೇನ್‌ನಿಂದ ಬರುವ ಎಲ್ಲಾ ಚಿತ್ರಗಳಿಗೆ ಬಾರ್ಡರ್ ಅನ್ನು ಸೇರಿಸುತ್ತದೆ. ಆದಾಗ್ಯೂ, ಕ್ರಾಸ್-ಆರಿಜಿನ್ ನೀತಿಗಳ ಬಗ್ಗೆ ತಿಳಿದಿರಲಿ. ನಿಮ್ಮ ಡೊಮೇನ್‌ನಿಂದ ಕ್ರಾಸ್-ಆರಿಜಿನ್ ಪ್ರವೇಶವನ್ನು ಸಂಪನ್ಮೂಲವು ಅನುಮತಿಸಿದರೆ ಮಾತ್ರ ಇದು ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ.
4. ರೆಗ್ಯುಲರ್ ಎಕ್ಸ್‌ಪ್ರೆಶನ್‌ಗಳೊಂದಿಗೆ ಸುಧಾರಿತ ಮ್ಯಾಚಿಂಗ್
ಹೆಚ್ಚು ಸಂಕೀರ್ಣ ಮ್ಯಾಚಿಂಗ್ ಸನ್ನಿವೇಶಗಳಿಗಾಗಿ, ನೀವು regexp() ಫಂಕ್ಷನ್ ಅನ್ನು ಬಳಸಬಹುದು. ಇದು ರೆಗ್ಯುಲರ್ ಎಕ್ಸ್‌ಪ್ರೆಶನ್‌ಗಳ ಆಧಾರದ ಮೇಲೆ URL ಗಳನ್ನು ಗುರಿಪಡಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. ಉದಾಹರಣೆಗೆ, URL ನಲ್ಲಿ "product" ಅಥವಾ "item" ಅನ್ನು ಒಳಗೊಂಡಿರುವ ಎಲ್ಲಾ ಪುಟಗಳನ್ನು ಗುರಿಪಡಿಸಲು (ಕೇಸ್-ಇನ್‌ಸೆನ್ಸಿಟಿವ್):
@document regexp("(?i)(product|item)") {
.product-name {
font-weight: bold;
}
}
ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, (?i) ರೆಗ್ಯುಲರ್ ಎಕ್ಸ್‌ಪ್ರೆಶನ್ ಅನ್ನು ಕೇಸ್-ಇನ್‌ಸೆನ್ಸಿಟಿವ್ ಮಾಡುತ್ತದೆ. (product|item) ರೆಗ್ಯುಲರ್ ಎಕ್ಸ್‌ಪ್ರೆಶನ್ "product" ಅಥವಾ "item" ಎರಡನ್ನೂ ಹೊಂದಿಸುತ್ತದೆ. ಎಚ್ಚರಿಕೆ: ರೆಗ್ಯುಲರ್ ಎಕ್ಸ್‌ಪ್ರೆಶನ್‌ಗಳು ಗಣನಾತ್ಮಕವಾಗಿ ದುಬಾರಿಯಾಗಬಹುದು, ವಿಶೇಷವಾಗಿ ಅವುಗಳನ್ನು ಸರಿಯಾಗಿ ಬರೆಯದಿದ್ದರೆ. ಅವುಗಳನ್ನು ಮಿತವಾಗಿ ಬಳಸಿ ಮತ್ತು ಅವು ಕಾರ್ಯಕ್ಷಮತೆಗಾಗಿ ಆಪ್ಟಿಮೈಸ್ ಆಗಿರುವುದನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ.
ಬಹು ಷರತ್ತುಗಳನ್ನು ಸಂಯೋಜಿಸುವುದು
ನೀವು ಒಂದೇ @document ನಿಯಮದಲ್ಲಿ ಅಲ್ಪವಿರಾಮಗಳನ್ನು ಬಳಸಿ ಬಹು ಷರತ್ತುಗಳನ್ನು ಸಂಯೋಜಿಸಬಹುದು. ಇದು ನಿಮಗೆ ಬಹು ಮಾನದಂಡಗಳ ಆಧಾರದ ಮೇಲೆ ಸ್ಟೈಲ್‌ಗಳನ್ನು ಅನ್ವಯಿಸಲು ಅನುಮತಿಸುತ್ತದೆ. ಉದಾಹರಣೆಗೆ, "About Us" ಮತ್ತು "Contact Us" ಎರಡೂ ಪುಟಗಳಿಗೆ ಸ್ಟೈಲ್‌ಗಳನ್ನು ಅನ್ವಯಿಸಲು:
@document url("https://www.example.com/about-us.html"), url("https://www.example.com/contact-us.html") {
body {
font-family: 'Helvetica', sans-serif;
}
}
ಇದು ಎರಡೂ ಪುಟಗಳ ಬಾಡಿಗೆ ಹೆಲ್ವೆಟಿಕಾ ಫಾಂಟ್ ಅನ್ನು ಅನ್ವಯಿಸುತ್ತದೆ. ಅಲ್ಪವಿರಾಮಗಳನ್ನು ಬಳಸುವುದು "OR" ಷರತ್ತನ್ನು ಸೃಷ್ಟಿಸುತ್ತದೆ ಎಂಬುದನ್ನು ಗಮನಿಸುವುದು ಮುಖ್ಯ - ಯಾವುದೇ ಷರತ್ತುಗಳು ಪೂರೈಸಿದರೆ ಸ್ಟೈಲ್‌ಗಳು ಅನ್ವಯವಾಗುತ್ತವೆ.
ನಿರ್ದಿಷ್ಟತೆ ಮತ್ತು ಕ್ಯಾಸ್ಕೇಡ್
@document ನಿಯಮದೊಂದಿಗೆ ಕೆಲಸ ಮಾಡುವಾಗ ಸಿಎಸ್ಎಸ್ ನಿರ್ದಿಷ್ಟತೆಯನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು ನಿರ್ಣಾಯಕವಾಗಿದೆ. ಒಂದು ಸಿಎಸ್ಎಸ್ ನಿಯಮದ ನಿರ್ದಿಷ್ಟತೆಯು ಒಂದೇ ಎಲಿಮೆಂಟ್‌ಗೆ ಬಹು ನಿಯಮಗಳು ಅನ್ವಯವಾದಾಗ ಯಾವ ನಿಯಮಕ್ಕೆ ಆದ್ಯತೆ ನೀಡಬೇಕು ಎಂಬುದನ್ನು ನಿರ್ಧರಿಸುತ್ತದೆ. @document ಬ್ಲಾಕ್‌ನೊಳಗಿನ ನಿಯಮಗಳು ಇತರ ಅಟ್-ರೂಲ್‌ಗಳಂತೆಯೇ ನಿರ್ದಿಷ್ಟತೆಯನ್ನು ಹೊಂದಿರುತ್ತವೆ, ಆದರೆ ಬ್ಲಾಕ್‌ನೊಳಗಿನ ನಿರ್ದಿಷ್ಟ ಸೆಲೆಕ್ಟರ್‌ಗಳು ಇನ್ನೂ ಪ್ರಮುಖ ಪಾತ್ರವನ್ನು ವಹಿಸುತ್ತವೆ.
ಉದಾಹರಣೆಗೆ, ಹೆಚ್ಚು ನಿರ್ದಿಷ್ಟವಾದ ಸೆಲೆಕ್ಟರ್ (ಉದಾ., ಒಂದು ID ಸೆಲೆಕ್ಟರ್) ಹೊಂದಿರುವ ನಿಯಮವು ಯಾವಾಗಲೂ ಕಡಿಮೆ ನಿರ್ದಿಷ್ಟವಾದ ಸೆಲೆಕ್ಟರ್ (ಉದಾ., ಒಂದು ಕ್ಲಾಸ್ ಸೆಲೆಕ್ಟರ್) ಹೊಂದಿರುವ ನಿಯಮವನ್ನು ಅತಿಕ್ರಮಿಸುತ್ತದೆ, ಎರಡೂ ನಿಯಮಗಳು ಒಂದೇ @document ಬ್ಲಾಕ್‌ನಲ್ಲಿದ್ದರೂ ಸಹ.
ಕ್ಯಾಸ್ಕೇಡ್ ಕೂಡ ಪಾತ್ರ ವಹಿಸುತ್ತದೆ. ಎರಡು ನಿಯಮಗಳು ಒಂದೇ ನಿರ್ದಿಷ್ಟತೆಯನ್ನು ಹೊಂದಿದ್ದರೆ, ಸ್ಟೈಲ್‌ಶೀಟ್‌ನಲ್ಲಿ ನಂತರ ಬರುವ ನಿಯಮವು ಆದ್ಯತೆ ಪಡೆಯುತ್ತದೆ. ಇದರರ್ಥ ನೀವು ಸಾಮಾನ್ಯ ಸಿಎಸ್ಎಸ್‌ನಲ್ಲಿ ಮತ್ತು @document ನಿಯಮದೊಳಗೆ ಸಂಘರ್ಷದ ಸ್ಟೈಲ್‌ಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಿದ್ದರೆ, ನಂತರ ವ್ಯಾಖ್ಯಾನಿಸಲಾದ ನಿಯಮವು ಅನ್ವಯವಾಗುತ್ತದೆ.
ಬ್ರೌಸರ್ ಹೊಂದಾಣಿಕೆ
@document ನಿಯಮಕ್ಕಾಗಿ ಬ್ರೌಸರ್ ಹೊಂದಾಣಿಕೆಯು ಆಧುನಿಕ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ಸಮಂಜಸವಾಗಿ ಉತ್ತಮವಾಗಿದೆ, ಆದರೆ ಹಳೆಯ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿನ ಮಿತಿಗಳ ಬಗ್ಗೆ ತಿಳಿದಿರುವುದು ಮುಖ್ಯ. Chrome, Firefox, Safari, ಮತ್ತು Edge ನ ಹೆಚ್ಚಿನ ಆಧುನಿಕ ಆವೃತ್ತಿಗಳು ಈ ನಿಯಮವನ್ನು ಬೆಂಬಲಿಸುತ್ತವೆ. ಆದಾಗ್ಯೂ, Internet Explorer ನ ಹಳೆಯ ಆವೃತ್ತಿಗಳು ಬೆಂಬಲಿಸುವುದಿಲ್ಲ.
ನಿಮ್ಮ ಸ್ಟೈಲ್‌ಗಳು ವ್ಯಾಪಕ ಶ್ರೇಣಿಯ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ಕಾರ್ಯನಿರ್ವಹಿಸುವುದನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು, ಸ್ಟೈಲ್‌ಗಳನ್ನು ಅನ್ವಯಿಸುವ ಮೊದಲು @document ನಿಯಮದ ಬೆಂಬಲವನ್ನು ಪತ್ತೆಹಚ್ಚಲು ಫೀಚರ್ ಕ್ವೆರಿಗಳನ್ನು (@supports) ಬಳಸುವುದನ್ನು ಪರಿಗಣಿಸಿ. ಪರ್ಯಾಯವಾಗಿ, ನೀವು ಪ್ರಗತಿಶೀಲ ವರ್ಧನೆಯ ವಿಧಾನವನ್ನು ಬಳಸಬಹುದು, ಅಲ್ಲಿ @document ನಿಯಮವು ಅದನ್ನು ಬೆಂಬಲಿಸುವ ಬ್ರೌಸರ್‌ಗಳಿಗೆ ವರ್ಧಿತ ಸ್ಟೈಲಿಂಗ್ ಅನ್ನು ಒದಗಿಸುತ್ತದೆ, ಆದರೆ ಇತರ ಬ್ರೌಸರ್‌ಗಳು ಹೆಚ್ಚು ಮೂಲಭೂತ ಸ್ಟೈಲಿಂಗ್‌ಗೆ ಹಿಂತಿರುಗುತ್ತವೆ.
ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು ಮತ್ತು ಪರಿಗಣನೆಗಳು
@document ನಿಯಮವು ಶಕ್ತಿಯುತ ಸಾಮರ್ಥ್ಯಗಳನ್ನು ನೀಡುತ್ತದೆಯಾದರೂ, ಅದನ್ನು ವಿವೇಚನೆಯಿಂದ ಬಳಸುವುದು ಮತ್ತು ಉತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು ಅನುಸರಿಸುವುದು ಮುಖ್ಯ:
- ಅತಿಯಾದ ಬಳಕೆಯನ್ನು ತಪ್ಪಿಸಿ:
@documentನಿಯಮವನ್ನು ಅತಿಯಾಗಿ ಬಳಸಿದರೆ ನಿಮ್ಮ ಸಿಎಸ್ಎಸ್ ಅನ್ನು ನಿರ್ವಹಿಸುವುದು ಕಷ್ಟವಾಗಬಹುದು. ಹೆಚ್ಚು ನಿರ್ದಿಷ್ಟ ಸೆಲೆಕ್ಟರ್‌ಗಳು ಅಥವಾ ಮೀಡಿಯಾ ಕ್ವೆರಿಗಳಂತಹ ಇತರ ಸಿಎಸ್ಎಸ್ ತಂತ್ರಗಳು ಅದೇ ಫಲಿತಾಂಶವನ್ನು ಹೆಚ್ಚು ಪರಿಣಾಮಕಾರಿಯಾಗಿ ಸಾಧಿಸಬಹುದೇ ಎಂದು ಪರಿಗಣಿಸಿ. - ನಿರ್ವಹಣೆಗೆ ಆದ್ಯತೆ ನೀಡಿ:
@documentಬಳಸುವಾಗ, ನಿಯಮವನ್ನು ಏಕೆ ಬಳಸಲಾಗುತ್ತಿದೆ ಮತ್ತು ಅದು ಯಾವ ಷರತ್ತುಗಳನ್ನು ಗುರಿಯಾಗಿಸುತ್ತದೆ ಎಂಬುದನ್ನು ವಿವರಿಸಲು ನಿಮ್ಮ ಕೋಡ್‌ಗೆ ಸ್ಪಷ್ಟವಾಗಿ ಕಾಮೆಂಟ್ ಮಾಡಿ. ಇದು ಇತರ ಡೆವಲಪರ್‌ಗಳಿಗೆ (ಮತ್ತು ನಿಮ್ಮ ಭವಿಷ್ಯದ ನಿಮಗೆ) ಕೋಡ್ ಅನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ಮತ್ತು ನಿರ್ವಹಿಸಲು ಸುಲಭವಾಗಿಸುತ್ತದೆ. - ಕಾರ್ಯಕ್ಷಮತೆ: ಕಾರ್ಯಕ್ಷಮತೆಯ ಬಗ್ಗೆ ಗಮನವಿರಲಿ, ವಿಶೇಷವಾಗಿ ರೆಗ್ಯುಲರ್ ಎಕ್ಸ್‌ಪ್ರೆಶನ್‌ಗಳನ್ನು ಬಳಸುವಾಗ. ನಿಮ್ಮ ರೆಗ್ಯುಲರ್ ಎಕ್ಸ್‌ಪ್ರೆಶನ್‌ಗಳು ಆಪ್ಟಿಮೈಸ್ ಆಗಿರುವುದನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ ಮತ್ತು ರೆಂಡರಿಂಗ್ ಅನ್ನು ನಿಧಾನಗೊಳಿಸಬಹುದಾದ ಅತಿಯಾದ ಸಂಕೀರ್ಣ ಮಾದರಿಗಳನ್ನು ತಪ್ಪಿಸಿ.
- ಬ್ರೌಸರ್ ಹೊಂದಾಣಿಕೆ: ನಿಮ್ಮ ಸ್ಟೈಲ್‌ಗಳು ನಿರೀಕ್ಷೆಯಂತೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತವೆಯೇ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ಯಾವಾಗಲೂ ವಿವಿಧ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ಪರೀಕ್ಷಿಸಿ. ಹಳೆಯ ಬ್ರೌಸರ್‌ಗಳಿಗೆ ಗ್ರೇಸ್‌ಫುಲ್ ಫಾಲ್‌ಬ್ಯಾಕ್ ಒದಗಿಸಲು ಫೀಚರ್ ಕ್ವೆರಿಗಳು ಅಥವಾ ಪ್ರಗತಿಶೀಲ ವರ್ಧನೆಯನ್ನು ಬಳಸಿ.
- ನಿರ್ದಿಷ್ಟತೆ ನಿರ್ವಹಣೆ: ನಿಯಮಗಳ ನಡುವಿನ ಅನಿರೀಕ್ಷಿತ ಸಂಘರ್ಷಗಳನ್ನು ತಪ್ಪಿಸಲು ಸಿಎಸ್ಎಸ್ ನಿರ್ದಿಷ್ಟತೆಯನ್ನು ಎಚ್ಚರಿಕೆಯಿಂದ ನಿರ್ವಹಿಸಿ. ಊಹಿಸಬಹುದಾದ ಮತ್ತು ನಿರ್ವಹಿಸಬಹುದಾದ ಸ್ಟೈಲ್‌ಶೀಟ್ ಅನ್ನು ನಿರ್ವಹಿಸಲು ನಿರ್ದಿಷ್ಟತೆ ಕ್ಯಾಲ್ಕುಲೇಟರ್‌ಗಳನ್ನು ಬಳಸಿ ಮತ್ತು ಸಿಎಸ್ಎಸ್ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು ಅನುಸರಿಸಿ.
- ಪರ್ಯಾಯ ವಿಧಾನಗಳು:
@documentಅನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸುವ ಮೊದಲು, ವಿನಂತಿಸಿದ URL ಆಧಾರದ ಮೇಲೆ ವಿಭಿನ್ನ ಸ್ಟೈಲ್‌ಶೀಟ್‌ಗಳನ್ನು ತಲುಪಿಸಲು ಸರ್ವರ್-ಸೈಡ್ ಲಾಜಿಕ್ ಅಥವಾ ಪ್ರಸ್ತುತ ಡಾಕ್ಯುಮೆಂಟ್‌ನ ಗುಣಲಕ್ಷಣಗಳ ಆಧಾರದ ಮೇಲೆ ಸ್ಟೈಲ್‌ಗಳನ್ನು ಕ್ರಿಯಾತ್ಮಕವಾಗಿ ಮಾರ್ಪಡಿಸಲು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಬಳಸುವಂತಹ ಪರ್ಯಾಯ ಪರಿಹಾರಗಳನ್ನು ಪರಿಗಣಿಸಿ.
ಮೂಲಭೂತ ಸ್ಟೈಲಿಂಗ್‌ನ ಆಚೆಗೆ: ಸುಧಾರಿತ ಬಳಕೆಯ ಪ್ರಕರಣಗಳು
@document ನಿಯಮವನ್ನು ಕೇವಲ ಮೂಲಭೂತ ಸ್ಟೈಲಿಂಗ್‌ಗಿಂತ ಹೆಚ್ಚಿನದಕ್ಕೆ ಬಳಸಬಹುದು. ಇಲ್ಲಿ ಕೆಲವು ಸುಧಾರಿತ ಬಳಕೆಯ ಪ್ರಕರಣಗಳಿವೆ:
- ಪ್ರಿಂಟ್ ಸ್ಟೈಲ್‌ಶೀಟ್‌ಗಳು: ಬಳಕೆದಾರರು ವೆಬ್ ಪುಟವನ್ನು ಮುದ್ರಿಸುವಾಗ ನಿರ್ದಿಷ್ಟ ಸ್ಟೈಲ್‌ಗಳನ್ನು ಅನ್ವಯಿಸಲು ನೀವು
@documentಅನ್ನು ಬಳಸಬಹುದು. ಇದಕ್ಕಾಗಿ@media printಅನ್ನು ಸಾಮಾನ್ಯವಾಗಿ ಬಳಸಲಾಗುತ್ತದೆಯಾದರೂ, ನೀವು ನಿರ್ದಿಷ್ಟ ಪ್ರಿಂಟ್ ಟೆಂಪ್ಲೇಟ್ ಅನ್ನು ಗುರಿಪಡಿಸಬೇಕಾದರೆ@documentಉಪಯುಕ್ತವಾಗಬಹುದು. - ಇಮೇಲ್ ಕ್ಲೈಂಟ್ ಸ್ಟೈಲಿಂಗ್: ಕೆಲವು ಸೀಮಿತ ಸಂದರ್ಭಗಳಲ್ಲಿ, HTML ಇಮೇಲ್‌ಗಳನ್ನು ರೆಂಡರ್ ಮಾಡುವಾಗ ನಿರ್ದಿಷ್ಟ ಇಮೇಲ್ ಕ್ಲೈಂಟ್‌ಗಳನ್ನು ಗುರಿಯಾಗಿಸಲು ನೀವು
@documentಅನ್ನು ಬಳಸಬಹುದು. ಆದಾಗ್ಯೂ, ಸಿಎಸ್ಎಸ್‌ಗೆ ಇಮೇಲ್ ಕ್ಲೈಂಟ್ ಬೆಂಬಲವು ಹೆಚ್ಚು ವ್ಯತ್ಯಾಸಗೊಳ್ಳುತ್ತದೆ, ಆದ್ದರಿಂದ ಈ ವಿಧಾನವನ್ನು ಎಚ್ಚರಿಕೆಯಿಂದ ಮತ್ತು ಸಂಪೂರ್ಣ ಪರೀಕ್ಷೆಯೊಂದಿಗೆ ಬಳಸಬೇಕು. ಗರಿಷ್ಠ ಹೊಂದಾಣಿಕೆಗಾಗಿ ಇನ್‌ಲೈನ್ ಸ್ಟೈಲ್‌ಗಳನ್ನು ಸಾಮಾನ್ಯವಾಗಿ ಆದ್ಯತೆ ನೀಡಲಾಗುತ್ತದೆ. - ಕಂಟೆಂಟ್ ಮ್ಯಾನೇಜ್ಮೆಂಟ್ ಸಿಸ್ಟಮ್ (CMS) ಏಕೀಕರಣ: CMS ನೊಂದಿಗೆ ಕೆಲಸ ಮಾಡುವಾಗ, ನಿರ್ದಿಷ್ಟ ವಿಷಯ ಪ್ರಕಾರಗಳು ಅಥವಾ ಟೆಂಪ್ಲೇಟ್‌ಗಳಿಗೆ ನಿರ್ದಿಷ್ಟವಾದ ಸ್ಟೈಲ್‌ಗಳನ್ನು ಅನ್ವಯಿಸಲು ನೀವು
@documentಅನ್ನು ಬಳಸಬಹುದು. ಇದು ಕೋರ್ CMS ಸ್ಟೈಲ್‌ಶೀಟ್‌ಗಳನ್ನು ಮಾರ್ಪಡಿಸದೆ ವಿವಿಧ ರೀತಿಯ ವಿಷಯಗಳಿಗೆ ಸ್ಥಿರವಾದ ನೋಟ ಮತ್ತು ಅನುಭವವನ್ನು ಕಾಪಾಡಿಕೊಳ್ಳಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. - A/B ಪರೀಕ್ಷೆ: ಅದರ ಪ್ರಾಥಮಿಕ ಉದ್ದೇಶವಲ್ಲದಿದ್ದರೂ, URL ಪ್ಯಾರಾಮೀಟರ್‌ಗಳು ಅಥವಾ ಇತರ ಡಾಕ್ಯುಮೆಂಟ್ ಗುಣಲಕ್ಷಣಗಳ ಆಧಾರದ ಮೇಲೆ ವಿವಿಧ ಬಳಕೆದಾರ ವಿಭಾಗಗಳಿಗೆ ವಿಭಿನ್ನ ಸ್ಟೈಲ್‌ಗಳನ್ನು ಅನ್ವಯಿಸಲು
@documentಅನ್ನು A/B ಪರೀಕ್ಷಾ ಫ್ರೇಮ್‌ವರ್ಕ್‌ಗಳೊಂದಿಗೆ ಬಳಸಬಹುದು.
ಸಿಎಸ್ಎಸ್ ಮತ್ತು ಡಾಕ್ಯುಮೆಂಟ್ ಸ್ಟೈಲಿಂಗ್‌ನ ಭವಿಷ್ಯ
@document ನಿಯಮವು ವೆಬ್ ವಿಷಯದ ಪ್ರಸ್ತುತಿಯನ್ನು ನಿಯಂತ್ರಿಸಲು ಒಂದು ಶಕ್ತಿಯುತ ಸಾಧನವನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತದೆ, ಮತ್ತು ಅದರ ಸಾಮರ್ಥ್ಯಗಳನ್ನು ಭವಿಷ್ಯದ ಸಿಎಸ್ಎಸ್ ವಿಶೇಷಣಗಳಲ್ಲಿ ವಿಸ್ತರಿಸಬಹುದು. ವೆಬ್ ಅಭಿವೃದ್ಧಿ ವಿಕಸನಗೊಳ್ಳುತ್ತಾ ಸಾಗಿದಂತೆ, @document ನಂತಹ ಸುಧಾರಿತ ಸಿಎಸ್ಎಸ್ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು ಅತ್ಯಾಧುನಿಕ, ಹೊಂದಿಕೊಳ್ಳುವ ಮತ್ತು ಬಳಕೆದಾರ-ಸ್ನೇಹಿ ವೆಬ್ ಅನುಭವಗಳನ್ನು ರಚಿಸಲು ಹೆಚ್ಚು ಮುಖ್ಯವಾಗುತ್ತದೆ.
ತೀರ್ಮಾನ
ಸಿಎಸ್ಎಸ್ ಡಾಕ್ಯುಮೆಂಟ್ ನಿಯಮ (@document) ಡಾಕ್ಯುಮೆಂಟ್ ಗುಣಲಕ್ಷಣಗಳ ಆಧಾರದ ಮೇಲೆ ಸ್ಟೈಲ್‌ಗಳನ್ನು ಗುರಿಪಡಿಸಲು ಒಂದು ಅನನ್ಯ ಮತ್ತು ಮೌಲ್ಯಯುತವಾದ ಮಾರ್ಗವನ್ನು ಒದಗಿಸುತ್ತದೆ. ಇದನ್ನು ವಿವೇಚನೆಯಿಂದ ಮತ್ತು ಬ್ರೌಸರ್ ಹೊಂದಾಣಿಕೆ ಮತ್ತು ನಿರ್ವಹಣೆಗೆ ಎಚ್ಚರಿಕೆಯಿಂದ ಪರಿಗಣಿಸಿ ಬಳಸಬೇಕಾದರೂ, ಇದು ವೆಬ್ ಪುಟಗಳನ್ನು ನಿರ್ದಿಷ್ಟ ಪರಿಸರಗಳು ಮತ್ತು URL ಗಳಿಗೆ ಕಸ್ಟಮೈಸ್ ಮಾಡಲು ಮತ್ತು ಅಳವಡಿಸಲು ಶಕ್ತಿಯುತ ಸಾಮರ್ಥ್ಯಗಳನ್ನು ನೀಡುತ್ತದೆ. @document ನಿಯಮವನ್ನು ಕರಗತ ಮಾಡಿಕೊಳ್ಳುವ ಮೂಲಕ, ವೆಬ್ ಡೆವಲಪರ್‌ಗಳು ತಮ್ಮ ವಿಷಯದ ಪ್ರಸ್ತುತಿಯ ಮೇಲೆ ಹೆಚ್ಚಿನ ನಿಯಂತ್ರಣವನ್ನು ಪಡೆಯಬಹುದು ಮತ್ತು ಹೆಚ್ಚು ಸೂಕ್ತವಾದ ಮತ್ತು ಆಕರ್ಷಕವಾದ ಬಳಕೆದಾರ ಅನುಭವಗಳನ್ನು ರಚಿಸಬಹುದು. ಅದರ ಶಕ್ತಿಯನ್ನು ಸ್ವೀಕರಿಸಿ ಮತ್ತು ನಿಮ್ಮ ವೆಬ್ ಅಭಿವೃದ್ಧಿ ಪಯಣದಲ್ಲಿ ಹೊಸ ಸಾಧ್ಯತೆಗಳನ್ನು ಅನ್ಲಾಕ್ ಮಾಡಿ!