ಬಹು ಸಿಎಸ್ಎಸ್ ಆಯ್ಕೆಗಳನ್ನು ಗುಂಪು ಮಾಡುವಿಕೆ

ಗುಂಪಿನ ಬಹು ಸಿಎಸ್ಎಸ್ ಆಯ್ಕೆಗಳು ಲೋಡ್ ವೇಗವನ್ನು ಸುಧಾರಿಸಲು

ಯಶಸ್ವಿ ವೆಬ್ಸೈಟ್ನಲ್ಲಿ ದಕ್ಷತೆಯು ಒಂದು ಪ್ರಮುಖ ಅಂಶವಾಗಿದೆ. ಆನ್ಲೈನ್ನಲ್ಲಿ ಚಿತ್ರಗಳನ್ನು ಹೇಗೆ ಬಳಸುತ್ತದೆ ಎನ್ನುವುದರಲ್ಲಿ ಆ ಸೈಟ್ ಸಮರ್ಥವಾಗಿರಬೇಕು. ಸೈಟ್ ಸಂದರ್ಶಕರಿಗೆ ಉತ್ತಮವಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ ಮತ್ತು ತಮ್ಮ ಸಾಧನಗಳಲ್ಲಿ ತ್ವರಿತವಾಗಿ ಲೋಡ್ ಮಾಡಲು ಇದು ಸಹಾಯ ಮಾಡುತ್ತದೆ. ಸಮಯ ಮತ್ತು ಬಜೆಟ್ನಲ್ಲಿ ಸೈಟ್ ಪ್ರಗತಿಯನ್ನು ಇರಿಸಿಕೊಳ್ಳಲು ನಿಮಗೆ ಸಹಾಯ ಮಾಡುವ ಮೂಲಕ, ನಿಮ್ಮ ಒಟ್ಟಾರೆ ಪ್ರಕ್ರಿಯೆಯ ಸಾಮರ್ಥ್ಯವೂ ಸಹ ಆಗಿರಬೇಕು.

ಕೊನೆಯಲ್ಲಿ, ಆ ವೆಬ್ಸೈಟ್ನ ಸೃಷ್ಟಿ ಮತ್ತು ಆ ಸೈಟ್ನ ಸಿಎಸ್ಎಸ್ ಹಾಳೆಗಳಿಗಾಗಿ ಬರೆಯಲಾದ ಶೈಲಿಗಳಲ್ಲಿ ಸೇರಿದಂತೆ ದೀರ್ಘಕಾಲೀನ ಯಶಸ್ಸಿನ ಎಲ್ಲಾ ಅಂಶಗಳಲ್ಲಿ ದಕ್ಷತೆಯು ಒಂದು ಪಾತ್ರವನ್ನು ವಹಿಸುತ್ತದೆ. ತೆಳುವಾದ, ಕ್ಲೀನರ್ ಸಿಎಸ್ಎಸ್ ಫೈಲ್ಗಳನ್ನು ರಚಿಸಲು ಸಾಧ್ಯವಾಗುವಂತೆ, ಮತ್ತು ನೀವು ಇದನ್ನು ಸಾಧಿಸುವ ವಿಧಾನಗಳಲ್ಲಿ ಒಂದಾಗಿದೆ, ಬಹು ಸಿಎಸ್ಎಸ್ ಆಯ್ಕೆಗಳನ್ನು ಒಟ್ಟುಗೂಡಿಸುವ ಮೂಲಕ.

ಗ್ರೂಪಿಂಗ್ ಆಯ್ಕೆದಾರರು

ನೀವು ಗುಂಪಿನ ಸಿಎಸ್ಎಸ್ ಆಯ್ಕೆ ಮಾಡಿದರೆ, ನಿಮ್ಮ ಸ್ಟೈಲ್ ಶೀಟ್ನಲ್ಲಿ ಶೈಲಿಗಳನ್ನು ಪುನರಾವರ್ತಿಸದೆಯೇ ಒಂದೇ ರೀತಿಯ ಶೈಲಿಗಳನ್ನು ನೀವು ಹಲವಾರು ವಿಭಿನ್ನ ಅಂಶಗಳಿಗೆ ಅನ್ವಯಿಸಬಹುದು. ಎರಡು ಅಥವಾ ಮೂರು ಅಥವಾ ಅದಕ್ಕೂ ಹೆಚ್ಚು ಸಿಎಸ್ಎಸ್ ನಿಯಮಗಳನ್ನು ಹೊಂದಿರುವ ಬದಲು, ಎಲ್ಲವೂ ಒಂದೇ ರೀತಿ (ಉದಾಹರಣೆಗೆ, ಏನನ್ನಾದರೂ ಕೆಂಪು ಬಣ್ಣಕ್ಕೆ ಹೊಂದಿಸಿ) ಹೊಂದಿಸಿ, ನಿಮ್ಮ ಪುಟಕ್ಕೆ ಸಾಧಿಸುವ ಏಕೈಕ ಸಿಎಸ್ಎಸ್ ನಿಯಮವಿದೆ.

ಈ "ಆಯ್ಕೆದಾರರ ಗುಂಪು" ಪುಟಕ್ಕೆ ಪ್ರಯೋಜನವಾಗುವುದಕ್ಕೆ ಹಲವಾರು ಕಾರಣಗಳಿವೆ. ಮೊದಲ ಆಫ್ಟ್, ನಿಮ್ಮ ಶೈಲಿ ಹಾಳೆ ಚಿಕ್ಕದಾಗಿರುತ್ತದೆ ಮತ್ತು ಹೆಚ್ಚು ವೇಗವಾಗಿ ಲೋಡ್ ಆಗುತ್ತದೆ. ಲೋಡ್ ಸೈಟ್ಗಳನ್ನು ನಿಧಾನಗೊಳಿಸಲು ಬಂದಾಗ ಶೈಲಿ ಹಾಳೆಗಳು ಪ್ರಮುಖ ಅಪರಾಧಿಗಳಲ್ಲ. ಸಿಎಸ್ಎಸ್ ಫೈಲ್ಗಳು ಪಠ್ಯ ಫೈಲ್ಗಳಾಗಿರುತ್ತವೆ, ಹಾಗಾಗಿ ನಿಜವಾಗಿಯೂ ಉದ್ದವಾದ ಸಿಎಸ್ಎಸ್ ಹಾಳೆಗಳು ಚಿಕ್ಕದಾಗಿರುತ್ತವೆ, ಫೈಲ್ ಗಾತ್ರದ ಬುದ್ಧಿವಂತವಾಗಿರುತ್ತವೆ, ಅಪ್ರತಿಮ ಚಿತ್ರಗಳನ್ನು ಹೋಲಿಸಿದಾಗ. ಆದರೂ, ಸ್ವಲ್ಪ ಕಡಿಮೆ ಎಣಿಕೆ ಮಾಡುತ್ತದೆ ಮತ್ತು ನಿಮ್ಮ ಕೆಲವು ಸಿಎಸ್ಎಸ್ ಗಾತ್ರವನ್ನು ಕ್ಷೌರ ಮಾಡಿ ಮತ್ತು ಪುಟಗಳನ್ನು ವೇಗವಾಗಿ ಲೋಡ್ ಮಾಡಬಹುದಾದರೆ ಅದು ಯಾವಾಗಲೂ ಒಳ್ಳೆಯದು.

ಸಾಮಾನ್ಯವಾಗಿ, ಸೈಟ್ಗಳಿಗೆ ಸರಾಸರಿ ಲೋಡ್ ವೇಗವು 3 ಸೆಕೆಂಡ್ಗಳಿಗಿಂತ ಕಡಿಮೆಯಿದೆ; 3 ರಿಂದ 7 ಸೆಕೆಂಡ್ಗಳು ಸರಾಸರಿಯಾಗಿರುತ್ತದೆ ಮತ್ತು 7 ಸೆಕೆಂಡ್ಗಳಿಗಿಂತ ಹೆಚ್ಚು ನಿಧಾನವಾಗಿದೆ. ಈ ಕಡಿಮೆ ಸಂಖ್ಯೆಗಳು ನಿಮ್ಮ ಸೈಟ್ ಅನ್ನು ಸಾಧಿಸಲು, ನೀವು ಮಾಡಬಹುದಾದ ಎಲ್ಲವನ್ನೂ ಮಾಡಬೇಕಾಗಿದೆ ಎಂದು ಅರ್ಥ! ಇದಕ್ಕಾಗಿಯೇ ನಿಮ್ಮ ಸೈಟ್ ಅನ್ನು ಗುಂಪು ಮಾಡಲಾದ ಸಿಎಸ್ಎಸ್ ಸೆಲೆಕ್ಟರ್ಗಳನ್ನು ಬಳಸಿಕೊಂಡು ನೀವು ಸುಲಭವಾಗಿ ಇರಿಸಿಕೊಳ್ಳಲು ಸಹಾಯ ಮಾಡಬಹುದು.

ಗುಂಪು ಸಿಎಸ್ಎಸ್ ಆಯ್ಕೆ ಮಾಡಲು ಹೇಗೆ

ನಿಮ್ಮ ಸ್ಟೈಲ್ ಹಾಳೆಯಲ್ಲಿ ಒಟ್ಟಾಗಿ ಗುಂಪು ಸಿಎಸ್ಎಸ್ ಆಯ್ಕೆ ಮಾಡಲು, ನೀವು ಶೈಲಿಯಲ್ಲಿ ಅನೇಕ ಗುಂಪು ಆಯ್ಕೆಗಾರರನ್ನು ಪ್ರತ್ಯೇಕಿಸಲು ಅಲ್ಪವಿರಾಮ ಬಳಸಿ . ಕೆಳಗಿನ ಉದಾಹರಣೆಯಲ್ಲಿ, ಶೈಲಿ p ಮತ್ತು div ಅಂಶಗಳ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರುತ್ತದೆ:

div, p {color: # f00; }

ಅಲ್ಪವಿರಾಮ ಮೂಲತಃ "ಮತ್ತು" ಎಂದರ್ಥ. ಆದ್ದರಿಂದ ಈ ಸೆಲೆಕ್ಟರ್ ಎಲ್ಲಾ ಪ್ಯಾರಾಗ್ರಾಫ್ ಅಂಶಗಳು ಮತ್ತು ಎಲ್ಲಾ ಡಿವಿಷನ್ ಅಂಶಗಳನ್ನು ಅನ್ವಯಿಸುತ್ತದೆ. ಅಲ್ಪವಿರಾಮವು ಕಳೆದುಹೋದಿದ್ದರೆ, ಅದು ಬದಲಿಗೆ ಒಂದು ವಿಭಾಗದ ಮಗುವಿನ ಎಲ್ಲಾ ಪ್ಯಾರಾಗ್ರಾಫ್ ಅಂಶಗಳನ್ನು ಹೊಂದಿರುತ್ತದೆ. ಅದು ತುಂಬಾ ವಿಭಿನ್ನ ರೀತಿಯ ಸೆಲೆಕ್ಟರ್ ಆಗಿದೆ, ಆದ್ದರಿಂದ ಈ ಕಾಮವು ನಿಜವಾಗಿಯೂ ಸೆಲೆಕ್ಟರ್ನ ಅರ್ಥವನ್ನು ಬದಲಾಯಿಸುತ್ತದೆ!

ಯಾವುದೇ ಆಯ್ಕೆಯ ಸೆಲೆಕ್ಟರ್ ಅನ್ನು ಯಾವುದೇ ಸೆಲೆಕ್ಟರ್ನೊಂದಿಗೆ ವರ್ಗೀಕರಿಸಬಹುದು. ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, ಒಂದು ವರ್ಗ ಸೆಲೆಕ್ಟರ್ ಅನ್ನು ಆಯ್ದ ಸೆಲೆಕ್ಟರ್ನೊಂದಿಗೆ ಗುಂಪು ಮಾಡಲಾಗಿದೆ:

p.red, #sub {color: # f00; }

ಆದ್ದರಿಂದ ಈ ಶೈಲಿ ಯಾವುದೇ ಪ್ಯಾರಾಗ್ರಾಫ್ಗೆ "ಕೆಂಪು" ನ ವರ್ಗ ಗುಣಲಕ್ಷಣದೊಂದಿಗೆ ಅನ್ವಯಿಸುತ್ತದೆ ಮತ್ತು "ಉಪ" ಯ ID ಗುಣಲಕ್ಷಣವನ್ನು ಹೊಂದಿರುವ ಯಾವುದೇ ಅಂಶವನ್ನು (ನಾವು ಯಾವುದನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸದಿದ್ದಾಗ).

ಏಕೈಕ ಪದಗಳು ಮತ್ತು ಕಂಪುಂಡ್ ಸೆಲೆಕ್ಟರ್ಗಳ ಆಯ್ಕೆದಾರರನ್ನು ಒಳಗೊಂಡಂತೆ ನೀವು ಯಾವುದೇ ಸಂಖ್ಯೆಯ ಸೆಲೆಕ್ಟರ್ಗಳನ್ನು ಗುಂಪು ಮಾಡಬಹುದು. ಈ ಉದಾಹರಣೆಯಲ್ಲಿ ನಾಲ್ಕು ವಿಭಿನ್ನ ಆಯ್ಕೆದಾರರು ಸೇರಿದ್ದಾರೆ:

p, .red, #sub, div a: link {color: # f00; }

ಈ ಸಿಎಸ್ಎಸ್ ನಿಯಮವು ಕೆಳಗಿನವುಗಳಿಗೆ ಅನ್ವಯಿಸುತ್ತದೆ:

• ಯಾವುದೇ ಪ್ಯಾರಾಗ್ರಾಫ್ ಅಂಶ
• "ಕೆಂಪು" ವರ್ಗದೊಂದಿಗೆ ಯಾವುದೇ ಅಂಶ
• "ಉಪ" ದ ID ಯೊಂದಿಗಿನ ಯಾವುದೇ ಅಂಶ
• ವಿಭಾಗದ ವಂಶಸ್ಥರು ಎಂದು ಆಧಾರ ಅಂಶಗಳ "ಲಿಂಕ್" ಹುಸಿ ವರ್ಗ.

ಕೊನೆಯ ಸೆಲೆಕ್ಟರ್ ಕಂಪೌಂಡ್ ಸೆಲೆಕ್ಟರ್ ಆಗಿದೆ. ಈ ಸಿಎಸ್ಎಸ್ ನಿಯಮದಲ್ಲಿ ಇತರ ಸೆಲೆಕ್ಟರ್ಗಳೊಂದಿಗೆ ಸುಲಭವಾಗಿ ಅದನ್ನು ಸಂಯೋಜಿಸಬಹುದು ಎಂದು ನೀವು ನೋಡಬಹುದು. ಆ ನಿಯಮದಂತೆ, ನಾವು ಈ 4 ಸೆಲೆಕ್ಟರ್ಗಳಲ್ಲಿ # f00 (ಕೆಂಪು ಬಣ್ಣದಲ್ಲಿ) ಬಣ್ಣವನ್ನು ಹೊಂದಿಸುತ್ತಿದ್ದೇವೆ, ಅದೇ ಫಲಿತಾಂಶವನ್ನು ಸಾಧಿಸಲು 4 ಪ್ರತ್ಯೇಕ ಆಯ್ಕೆಗಾರರನ್ನು ಬರೆಯುವುದು ಸೂಕ್ತವಾಗಿದೆ.

ಆಯ್ಕೆ ಮಾಡುವವರ ಗುಂಪಿನ ಮತ್ತೊಂದು ಪ್ರಯೋಜನವೆಂದರೆ, ನೀವು ಬದಲಾವಣೆಯನ್ನು ಮಾಡಬೇಕಾದರೆ, ನೀವು ಬಹು ಸಿಎಸ್ಎಸ್ಗಳ ಬದಲಾಗಿ ಒಂದೇ CSS ನಿಯಮವನ್ನು ಸಂಪಾದಿಸಬಹುದು. ಈ ವಿಧಾನವು ಭವಿಷ್ಯದಲ್ಲಿ ನೀವು ಸೈಟ್ ನಿರ್ವಹಿಸಲು ಬಂದಾಗ ಪುಟ ತೂಕ ಮತ್ತು ಸಮಯವನ್ನು ಉಳಿಸುತ್ತದೆ ಎಂದು ಅರ್ಥ.

ಯಾವುದೇ ಸೆಲೆಕ್ಟರ್ ಅನ್ನು ಗುಂಪು ಮಾಡಬಹುದು

ಮೇಲಿನ ಉದಾಹರಣೆಗಳಿಂದ ನೀವು ನೋಡುವಂತೆ, ಯಾವುದೇ ಮಾನ್ಯ ಸೆಲೆಕ್ಟರ್ ಅನ್ನು ಗುಂಪಿನಲ್ಲಿ ಇರಿಸಬಹುದು ಮತ್ತು ಎಲ್ಲಾ ಸಮೂಹ ಅಂಶಗಳನ್ನು ಹೊಂದಿಕೆಯಾಗುವ ಡಾಕ್ಯುಮೆಂಟ್ನಲ್ಲಿರುವ ಎಲ್ಲಾ ಅಂಶಗಳು ಆ ಶೈಲಿಯ ಆಸ್ತಿಯ ಆಧಾರದ ಮೇಲೆ ಒಂದೇ ಶೈಲಿಯನ್ನು ಹೊಂದಿರುತ್ತದೆ.

ಕೋಡ್ನಲ್ಲಿ ಸ್ಪಷ್ಟತೆಗಾಗಿ ಪ್ರತ್ಯೇಕವಾದ ಸಾಲುಗಳಲ್ಲಿ ಗುಂಪು ಮಾಡಲಾದ ಅಂಶಗಳನ್ನು ಪಟ್ಟಿ ಮಾಡಲು ಕೆಲವು ಜನರು ಬಯಸುತ್ತಾರೆ. ವೆಬ್ಸೈಟ್ ಮತ್ತು ಲೋಡ್ ವೇಗದಲ್ಲಿ ಕಾಣಿಸಿಕೊಳ್ಳುವುದು ಒಂದೇ ಆಗಿರುತ್ತದೆ. ಉದಾಹರಣೆಗೆ, ನೀವು ಕೋಡ್ಗಳ ಒಂದು ಸಾಲಿನಲ್ಲಿ ಒಂದು ಶೈಲಿ ಆಸ್ತಿಯಾಗಿ ಕಾಮಾಗಳಿಂದ ಪ್ರತ್ಯೇಕಿಸಿರುವ ಶೈಲಿಗಳನ್ನು ಸೇರಿಸಬಹುದು:

th, td, p.red, div # firstred {color: red; }

ಅಥವಾ ನೀವು ಸ್ಪಷ್ಟತೆಗಾಗಿ ಪ್ರತ್ಯೇಕ ರೇಖೆಗಳ ಶೈಲಿಗಳನ್ನು ಪಟ್ಟಿ ಮಾಡಬಹುದು:

ನೇ,
ಟಿಡಿ,
p.red,
div # firstred
{
ಬಣ್ಣ: ಕೆಂಪು;
}

ನೀವು ಬಹು ಸಿಎಸ್ಎಸ್ ಆಯ್ಕೆ ಮಾಡುವ ಗುಂಪನ್ನು ಬಳಸಿಕೊಳ್ಳುವ ವಿಧಾನವು ನಿಮ್ಮ ಸೈಟ್ ವೇಗವನ್ನು ಹೆಚ್ಚಿಸುತ್ತದೆ ಮತ್ತು ಶೈಲಿಗಳನ್ನು ದೀರ್ಘಕಾಲದವರೆಗೆ ನಿರ್ವಹಿಸಲು ಸುಲಭವಾಗುತ್ತದೆ.

ಜೆನ್ನಿಫರ್ ಕ್ರಿನಿನ್ರಿಂದ ಮೂಲ ಲೇಖನ. ಜೆರೆಮಿ ಗಿರಾರ್ಡ್ರಿಂದ 5/8/17 ರಂದು ಸಂಪಾದಿಸಲಾಗಿದೆ.