CSS ಎಂದರೇನು? ಕ್ಯಾಸ್ಕೇಡಿಂಗ್ ಸ್ಟೈಲ್ ಶೀಟ್‌ಗಳು, ರೆಸ್ಪಾನ್ಸಿವ್ ಸಿಎಸ್‌ಎಸ್, ಸ್ಯಾಸಿ ಸಿಎಸ್‌ಎಸ್, ಕುಗ್ಗಿಸಿ, ಮಿನಿಫೈ, ಅನ್‌ಮಿನಿಫೈ, ಅನ್‌ಸಂಪ್ರೆಸ್ ಟೂಲ್

ಕ್ಯಾಸ್ಕೇಡಿಂಗ್ ಸ್ಟೈಲ್ ಶೀಟ್‌ಗಳು (CSS) ಎಂದರೇನು?

Douglas Karr ಗುರುವಾರ, ಫೆಬ್ರವರಿ 9, 2023

1 109 4 ನಿಮಿಷಗಳ ಓದಿದೆ

ಕ್ಯಾಸ್ಕೇಡಿಂಗ್ ಸ್ಟೈಲ್‌ಶೀಟ್‌ಗಳು ಹೇಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತವೆ ಎಂಬುದರ ಸಂಪೂರ್ಣ ವಿವರಣೆಗಾಗಿ ಕೆಳಗೆ ಓದಿ. ನಾವು ನಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ಪುಟದ ಮೇಲ್ಭಾಗದಲ್ಲಿ ಪ್ರದರ್ಶಿಸುತ್ತೇವೆ ಇದರಿಂದ ಅದನ್ನು ಹುಡುಕಲು ಮತ್ತು ಬಳಸಲು ಸುಲಭವಾಗುತ್ತದೆ. ನೀವು ಇಮೇಲ್ ಅಥವಾ ಫೀಡ್ ಮೂಲಕ ಈ ಲೇಖನವನ್ನು ಓದುತ್ತಿದ್ದರೆ, ಕ್ಲಿಕ್ ಮಾಡಿ ನಿಮ್ಮ CSS ಅನ್ನು ಕುಗ್ಗಿಸಿ.

ನೀವು ನಿಜವಾಗಿಯೂ ಸೈಟ್‌ಗಳನ್ನು ಅಭಿವೃದ್ಧಿಪಡಿಸದ ಹೊರತು, ನೀವು ಕ್ಯಾಸ್ಕೇಡಿಂಗ್ ಸ್ಟೈಲ್ ಶೀಟ್‌ಗಳನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ಗ್ರಹಿಸದಿರಬಹುದು (ಸಿಎಸ್ಎಸ್) CSS ಎಂಬುದು ಒಂದು ಸ್ಟೈಲ್‌ಶೀಟ್ ಭಾಷೆಯಾಗಿದ್ದು, ಇದರಲ್ಲಿ ಬರೆಯಲಾದ ಡಾಕ್ಯುಮೆಂಟ್‌ನ ನೋಟ ಮತ್ತು ಫಾರ್ಮ್ಯಾಟಿಂಗ್ ಅನ್ನು ವಿವರಿಸಲು ಬಳಸಲಾಗುತ್ತದೆ ಎಚ್ಟಿಎಮ್ಎಲ್ or ಮದುವೆ. ಫಾಂಟ್, ಬಣ್ಣ, ಅಂತರ ಮತ್ತು ವಿನ್ಯಾಸದಂತಹ ವಿವಿಧ ಅಂಶಗಳಿಗೆ ಶೈಲಿಗಳನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸಲು CSS ಅನ್ನು ಬಳಸಬಹುದು. ನಿಮ್ಮ HTML ಡಾಕ್ಯುಮೆಂಟ್‌ನ ಪ್ರಸ್ತುತಿಯನ್ನು ಅದರ ವಿಷಯದಿಂದ ಪ್ರತ್ಯೇಕಿಸಲು CSS ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ, ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್‌ನ ದೃಶ್ಯ ಶೈಲಿಯನ್ನು ನಿರ್ವಹಿಸಲು ಮತ್ತು ನವೀಕರಿಸಲು ಸುಲಭವಾಗುತ್ತದೆ.

ಸಿಎಸ್ಎಸ್ ಭಾಷಾ ರಚನೆ

ದಿ ಸೆಲೆಕ್ಟರ್ ನೀವು ಸ್ಟೈಲ್ ಮಾಡಲು ಬಯಸುವ HTML ಅಂಶವಾಗಿದೆ, ಮತ್ತು ಆಸ್ತಿ ಮತ್ತು ಮೌಲ್ಯ ಆ ಅಂಶಕ್ಕೆ ನೀವು ಅನ್ವಯಿಸಲು ಬಯಸುವ ಶೈಲಿಗಳನ್ನು ವಿವರಿಸಿ:

selector {
  property: value;
}

ಉದಾಹರಣೆಗೆ, ಕೆಳಗಿನ CSS ಎಲ್ಲವನ್ನೂ ಮಾಡುತ್ತದೆ <h1> ಪುಟದಲ್ಲಿನ ಅಂಶಗಳು ಕೆಂಪು ಬಣ್ಣ ಮತ್ತು 32px ಫಾಂಟ್ ಗಾತ್ರವನ್ನು ಹೊಂದಿವೆ:

ಸಿಎಸ್ಎಸ್

h1 {
  color: red;
  font-size: 32px;
}

ಔಟ್ಪುಟ್

ಶಿರೋನಾಮೆ

ಒಂದು ಅಂಶದಲ್ಲಿ ಅನನ್ಯ ID ಗಾಗಿ ನೀವು CSS ಅನ್ನು ಸಹ ನಿರ್ದಿಷ್ಟಪಡಿಸಬಹುದು:

ಸಿಎಸ್ಎಸ್

/* styles for an element with ID "intro" */
#intro {
  font-weight: bold;
  text-align: center;
}

ಔಟ್ಪುಟ್

ಪರಿಚಯ

ಅಥವಾ ಬಹು ಅಂಶಗಳಾದ್ಯಂತ ವರ್ಗವನ್ನು ಅನ್ವಯಿಸಿ:

ಸಿಎಸ್ಎಸ್

/* styles for elements with class "highlight" */
.highlight {
  background-color: yellow;
}

ಔಟ್ಪುಟ್

ನಾನು ಬಯಸುವ ಪ್ರಮುಖ ಸ್ಪ್ಯಾನ್ ಟ್ಯಾಗ್‌ನಲ್ಲಿ ಒಂದು ಪದ.

ನಿಮ್ಮ HTML ಡಾಕ್ಯುಮೆಂಟ್‌ನಲ್ಲಿ ನೀವು CSS ಅನ್ನು ಮೂರು ರೀತಿಯಲ್ಲಿ ಸೇರಿಸಿಕೊಳ್ಳಬಹುದು:

ಇನ್ಲೈನ್ CSS, ಬಳಸಿ style HTML ಅಂಶದ ಮೇಲೆ ಗುಣಲಕ್ಷಣ

ಆಂತರಿಕ CSS, ಬಳಸಿ a <style> ರಲ್ಲಿ ಅಂಶ <head> ನಿಮ್ಮ HTML ಡಾಕ್ಯುಮೆಂಟ್‌ನ
ಬಾಹ್ಯ CSS, ಬಳಸಿ ನಿಮ್ಮ HTML ಡಾಕ್ಯುಮೆಂಟ್‌ಗೆ ಲಿಂಕ್ ಮಾಡಲಾದ ಪ್ರತ್ಯೇಕ .css ಫೈಲ್ ಬಳಸಿ <link> ರಲ್ಲಿ ಅಂಶ <head> ನಿಮ್ಮ HTML ಡಾಕ್ಯುಮೆಂಟ್‌ನ

ರೆಸ್ಪಾನ್ಸಿವ್ ಸಿಎಸ್ಎಸ್

CSS ನಂಬಲಾಗದಷ್ಟು ಮೃದುವಾಗಿರುತ್ತದೆ ಮತ್ತು ಪರದೆಯ ರೆಸಲ್ಯೂಶನ್ ಆಧಾರದ ಮೇಲೆ ಅಂಶಗಳ ಪ್ರದರ್ಶನವನ್ನು ಸರಿಹೊಂದಿಸಲು ಬಳಸಬಹುದು, ಆದ್ದರಿಂದ ನೀವು ಅದೇ HTML ಅನ್ನು ಹೊಂದಬಹುದು ಆದರೆ ಅದನ್ನು ನಿರ್ಮಿಸಬಹುದು ಪ್ರತಿಕ್ರಿಯಾಶೀಲರಾಗಿರುತ್ತಾರೆ ಸಾಧನದ ರೆಸಲ್ಯೂಶನ್‌ಗೆ:

/* media query for responsive design */
@media (max-width: 768px) {
  p {
    font-size: 14px;
  }
  #intro {
    font-size: 20px;
  }
}

ಸಿಎಸ್ಎಸ್ ಕಂಪ್ರೆಷನ್

CSS ನ ವೀಕ್ಷಣೆಯನ್ನು ಸಂಘಟಿಸಲು ಸ್ಪೇಸ್‌ಗಳು ಮತ್ತು ಲೈನ್ ಫೀಡ್‌ಗಳನ್ನು ಬಳಸುವ ಕಾಮೆಂಟ್, ಮಾಧ್ಯಮ ಪ್ರಶ್ನೆ ಮತ್ತು ಬಹು ಶೈಲಿಗಳನ್ನು ನೀವು ಮೇಲಿನ ಉದಾಹರಣೆಯಲ್ಲಿ ನೋಡಬಹುದು. ಫೈಲ್ ಗಾತ್ರಗಳನ್ನು ಕಡಿಮೆ ಮಾಡಲು ನಿಮ್ಮ ಸೈಟ್‌ನಲ್ಲಿ ನಿಮ್ಮ CSS ಅನ್ನು ಕಡಿಮೆ ಮಾಡಲು ಅಥವಾ ಸಂಕುಚಿತಗೊಳಿಸಲು ಇದು ಉತ್ತಮ ಅಭ್ಯಾಸವಾಗಿದೆ ಮತ್ತು ನಂತರ, ನಿಮ್ಮ ಸ್ಟೈಲಿಂಗ್ ಅನ್ನು ವಿನಂತಿಸಲು ಮತ್ತು ಸಲ್ಲಿಸಲು ತೆಗೆದುಕೊಳ್ಳುವ ಸಮಯ. ಇದು ಸಣ್ಣ ಮೊತ್ತವಲ್ಲ... ಮೇಲಿನ ಕೆಲವು ಉದಾಹರಣೆಗಳಲ್ಲಿ ನೀವು 50% ಕ್ಕಿಂತ ಹೆಚ್ಚು ಉಳಿತಾಯವನ್ನು ನೋಡಬಹುದು.

ಅನೇಕ ಸರ್ವರ್ ಕಾನ್ಫಿಗರೇಶನ್‌ಗಳು ಸ್ವಯಂಚಾಲಿತವಾಗಿ CSS ಅನ್ನು ಫ್ಲೈನಲ್ಲಿ ಕುಗ್ಗಿಸುವ ಮತ್ತು ಮಿನಿಫೈಡ್ ಫೈಲ್ ಅನ್ನು ಕ್ಯಾಶ್ ಮಾಡುವ ಪರಿಕರಗಳನ್ನು ನೀಡುತ್ತವೆ ಆದ್ದರಿಂದ ನೀವು ಅದನ್ನು ಹಸ್ತಚಾಲಿತವಾಗಿ ಮಾಡಬೇಕಾಗಿಲ್ಲ.

SCSS ಎಂದರೇನು?

ಸ್ಯಾಸಿ CSS (ಎಸ್‌ಸಿಎಸ್‌ಎಸ್) ಎಂಬುದು CSS ಪ್ರಿಪ್ರೊಸೆಸರ್ ಆಗಿದ್ದು ಅದು CSS ಭಾಷೆಗೆ ಹೆಚ್ಚುವರಿ ಕಾರ್ಯವನ್ನು ಮತ್ತು ಸಿಂಟ್ಯಾಕ್ಸ್ ಅನ್ನು ಸೇರಿಸುತ್ತದೆ. ಇದು ಪ್ರಮಾಣಿತ CSS ನಲ್ಲಿ ಲಭ್ಯವಿಲ್ಲದ ಅಸ್ಥಿರಗಳು, ಮಿಕ್ಸಿನ್‌ಗಳು, ಕಾರ್ಯಗಳು ಮತ್ತು ಇತರ ವೈಶಿಷ್ಟ್ಯಗಳ ಬಳಕೆಯನ್ನು ಅನುಮತಿಸುವ ಮೂಲಕ CSS ನ ಸಾಮರ್ಥ್ಯಗಳನ್ನು ವಿಸ್ತರಿಸುತ್ತದೆ.

SCSS ಪ್ರಯೋಜನಗಳು

ಸುಧಾರಿತ ನಿರ್ವಹಣೆ: ವೇರಿಯೇಬಲ್‌ಗಳ ಬಳಕೆಯೊಂದಿಗೆ, ನೀವು ಮೌಲ್ಯಗಳನ್ನು ಒಂದೇ ಸ್ಥಳದಲ್ಲಿ ಸಂಗ್ರಹಿಸಬಹುದು ಮತ್ತು ನಿಮ್ಮ ಸ್ಟೈಲ್‌ಶೀಟ್‌ನಾದ್ಯಂತ ಅವುಗಳನ್ನು ಮರುಬಳಕೆ ಮಾಡಬಹುದು, ನಿಮ್ಮ ಶೈಲಿಗಳನ್ನು ನಿರ್ವಹಿಸಲು ಮತ್ತು ನವೀಕರಿಸಲು ಸುಲಭವಾಗುತ್ತದೆ.
ಉತ್ತಮ ಸಂಘಟನೆ: ಮಿಕ್ಸಿನ್‌ಗಳೊಂದಿಗೆ, ನೀವು ಶೈಲಿಗಳ ಸೆಟ್‌ಗಳನ್ನು ಗುಂಪು ಮಾಡಬಹುದು ಮತ್ತು ಮರುಬಳಕೆ ಮಾಡಬಹುದು, ನಿಮ್ಮ ಸ್ಟೈಲ್‌ಶೀಟ್ ಅನ್ನು ಹೆಚ್ಚು ಸಂಘಟಿತವಾಗಿ ಮತ್ತು ಓದಲು ಸುಲಭಗೊಳಿಸುತ್ತದೆ.
ಹೆಚ್ಚಿದ ಕಾರ್ಯಚಟುವಟಿಕೆ: SCSS ಪ್ರಮಾಣಿತ CSS ನಲ್ಲಿ ಲಭ್ಯವಿಲ್ಲದ ಹಲವು ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಒಳಗೊಂಡಿದೆ, ಉದಾಹರಣೆಗೆ ಕಾರ್ಯಗಳು, ನಿಯಂತ್ರಣ ರಚನೆಗಳು (ಉದಾಹರಣೆಗೆ/ಇಲ್ಲದಿದ್ದರೆ), ಮತ್ತು ಅಂಕಗಣಿತದ ಕಾರ್ಯಾಚರಣೆಗಳು ಇದು ಹೆಚ್ಚು ಕ್ರಿಯಾತ್ಮಕ ಮತ್ತು ಅಭಿವ್ಯಕ್ತಿಶೀಲ ಶೈಲಿಯನ್ನು ಅನುಮತಿಸುತ್ತದೆ.
ಉತ್ತಮ ಕಾರ್ಯಕ್ಷಮತೆ: SCSS ಫೈಲ್‌ಗಳನ್ನು CSS ಗೆ ಸಂಕಲಿಸಲಾಗಿದೆ, ಇದು ಬ್ರೌಸರ್‌ನಿಂದ ಪಾರ್ಸ್ ಮಾಡಬೇಕಾದ ಕೋಡ್‌ನ ಪ್ರಮಾಣವನ್ನು ಕಡಿಮೆ ಮಾಡುವ ಮೂಲಕ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಸುಧಾರಿಸುತ್ತದೆ.

SCSS ಅನಾನುಕೂಲಗಳು

ಕಲಿಕೆಯ ರೇಖೆ: SCSS ಪ್ರಮಾಣಿತ CSS ಗಿಂತ ವಿಭಿನ್ನವಾದ ಸಿಂಟ್ಯಾಕ್ಸ್ ಅನ್ನು ಹೊಂದಿದೆ, ಮತ್ತು ನೀವು ಇದನ್ನು ಪರಿಣಾಮಕಾರಿಯಾಗಿ ಬಳಸುವ ಮೊದಲು ನೀವು ಈ ಹೊಸ ಸಿಂಟ್ಯಾಕ್ಸ್ ಅನ್ನು ಕಲಿಯಬೇಕಾಗುತ್ತದೆ.
ಹೆಚ್ಚುವರಿ ಸಂಕೀರ್ಣತೆ: SCSS ನಿಮ್ಮ ಸ್ಟೈಲ್‌ಶೀಟ್ ಅನ್ನು ಹೆಚ್ಚು ಸಂಘಟಿತವಾಗಿ ಮತ್ತು ನಿರ್ವಹಿಸಲು ಸುಲಭವಾಗಿದ್ದರೂ, ಇದು ನಿಮ್ಮ ಕೋಡ್‌ಬೇಸ್‌ನಲ್ಲಿ ಹೆಚ್ಚುವರಿ ಸಂಕೀರ್ಣತೆಯನ್ನು ಪರಿಚಯಿಸಬಹುದು, ವಿಶೇಷವಾಗಿ ಹೊಸ ವೈಶಿಷ್ಟ್ಯಗಳು ಮತ್ತು ಸಿಂಟ್ಯಾಕ್ಸ್‌ನೊಂದಿಗೆ ನಿಮಗೆ ಪರಿಚಯವಿಲ್ಲದಿದ್ದರೆ.
ಪರಿಕರ: SCSS ಬಳಸಲು, ನಿಮ್ಮ SCSS ಕೋಡ್ ಅನ್ನು CSS ಗೆ ಭಾಷಾಂತರಿಸಲು ನಿಮಗೆ ಕಂಪೈಲರ್ ಅಗತ್ಯವಿದೆ. ಇದಕ್ಕೆ ಹೆಚ್ಚುವರಿ ಸೆಟಪ್ ಮತ್ತು ಟೂಲಿಂಗ್ ಅಗತ್ಯವಿರುತ್ತದೆ, ಇದು ಕೆಲವು ಡೆವಲಪರ್‌ಗಳಿಗೆ ಪ್ರವೇಶಕ್ಕೆ ಅಡ್ಡಿಯಾಗಬಹುದು.

ಕೆಳಗಿನ ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, ಮೌಲ್ಯಗಳನ್ನು ಸಂಗ್ರಹಿಸಲು SCSS ಕೋಡ್ ವೇರಿಯೇಬಲ್‌ಗಳನ್ನು ಬಳಸುತ್ತದೆ ($primary-color ಮತ್ತು $font-size) ಅದನ್ನು ಸ್ಟೈಲ್‌ಶೀಟ್‌ನಾದ್ಯಂತ ಮರುಬಳಕೆ ಮಾಡಬಹುದು. ಈ SCSS ಕೋಡ್‌ನಿಂದ ರಚಿಸಲಾದ CSS ಕೋಡ್ ಸಮಾನವಾಗಿರುತ್ತದೆ, ಆದರೆ ಇದು ವೇರಿಯಬಲ್‌ಗಳನ್ನು ಒಳಗೊಂಡಿಲ್ಲ. ಬದಲಾಗಿ, ವೇರಿಯೇಬಲ್‌ಗಳ ಮೌಲ್ಯಗಳನ್ನು ನೇರವಾಗಿ CSS ನಲ್ಲಿ ಬಳಸಲಾಗುತ್ತದೆ.

$primary-color: blue;
$font-size: 16px;

body {
  font-size: $font-size;
  color: $primary-color;

  h1 {
    font-size: 2em;
    color: $primary-color;
  }
}

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ ಪ್ರದರ್ಶಿಸಲಾದ SCSS ನ ಮತ್ತೊಂದು ವೈಶಿಷ್ಟ್ಯವೆಂದರೆ ನೆಸ್ಟೆಡ್ ಶೈಲಿಗಳು. SCSS ಕೋಡ್‌ನಲ್ಲಿ, ದಿ h1 ಶೈಲಿಗಳು ಒಳಗೆ ನೆಲೆಗೊಂಡಿವೆ body ಶೈಲಿಗಳು, ಇದು ಪ್ರಮಾಣಿತ CSS ನಲ್ಲಿ ಸಾಧ್ಯವಿಲ್ಲ. SCSS ಕೋಡ್ ಅನ್ನು ಸಂಕಲಿಸಿದಾಗ, ನೆಸ್ಟೆಡ್ ಶೈಲಿಗಳನ್ನು CSS ಕೋಡ್‌ನಲ್ಲಿ ಪ್ರತ್ಯೇಕ ಶೈಲಿಗಳಾಗಿ ವಿಸ್ತರಿಸಲಾಗುತ್ತದೆ.

ಒಟ್ಟಾರೆಯಾಗಿ, SCSS ಪ್ರಮಾಣಿತ CSS ಗಿಂತ ಅನೇಕ ಪ್ರಯೋಜನಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ, ಆದರೆ ವ್ಯಾಪಾರ-ವಹಿವಾಟುಗಳನ್ನು ಪರಿಗಣಿಸುವುದು ಮತ್ತು ನಿಮ್ಮ ಅಗತ್ಯತೆಗಳು ಮತ್ತು ನಿರ್ಬಂಧಗಳ ಆಧಾರದ ಮೇಲೆ ನಿಮ್ಮ ಯೋಜನೆಗೆ ಸರಿಯಾದ ಸಾಧನವನ್ನು ಆಯ್ಕೆ ಮಾಡುವುದು ಮುಖ್ಯವಾಗಿದೆ.