ರೆಸ್ಪಾನ್ಸಿವ್ ಡಿಸೈನ್ ಅನ್ನು ಅನ್ಲಾಕ್ ಮಾಡುವುದು: CSS ಕಂಟೈನರ್ ಕ್ವೆರಿಗಳಿಗೆ ಒಂದು ಸಮಗ್ರ ಮಾರ್ಗದರ್ಶಿ

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

CSS ಕಂಟೈನರ್ ಕ್ವೆರಿಗಳು ಎಂದರೇನು?

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

ಒಂದು ಕಾರ್ಡ್ ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ಕಲ್ಪಿಸಿಕೊಳ್ಳಿ, ಅದು ಕಿರಿದಾದ ಸೈಡ್‌ಬಾರ್‌ನಲ್ಲಿ ಇರಿಸಿದಾಗ ಅಥವಾ ವಿಶಾಲವಾದ ಮುಖ್ಯ ಕಂಟೆಂಟ್ ಪ್ರದೇಶದಲ್ಲಿ ಇರಿಸಿದಾಗ ವಿಭಿನ್ನವಾಗಿ ಕಾಣಿಸುತ್ತದೆ. ಮೀಡಿಯಾ ಕ್ವೆರಿಗಳೊಂದಿಗೆ, ನೀವು ಪರದೆಯ ಗಾತ್ರವನ್ನು ಆಧರಿಸಿ ಕಾರ್ಡ್‌ನ ಸ್ಟೈಲಿಂಗ್ ಅನ್ನು ಸರಿಹೊಂದಿಸಬೇಕಾಗಬಹುದು, ಇದು ಅಸಂಗತತೆಗೆ ಕಾರಣವಾಗಬಹುದು. ಕಂಟೈನರ್ ಕ್ವೆರಿಗಳೊಂದಿಗೆ, ಕಾರ್ಡ್‌ನ ಕಂಟೈನರ್ ಒಂದು ನಿರ್ದಿಷ್ಟ ಅಗಲವನ್ನು ತಲುಪಿದಾಗ ನಿರ್ದಿಷ್ಟವಾಗಿ ಅನ್ವಯವಾಗುವ ಸ್ಟೈಲ್‌ಗಳನ್ನು ನೀವು ವ್ಯಾಖ್ಯಾನಿಸಬಹುದು, ಇದರಿಂದಾಗಿ ವಿಭಿನ್ನ ಲೇಔಟ್‌ಗಳಲ್ಲಿ ಸ್ಥಿರ ಮತ್ತು ರೆಸ್ಪಾನ್ಸಿವ್ ಅನುಭವವನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಬಹುದು.

ಕಂಟೈನರ್ ಕ್ವೆರಿಗಳನ್ನು ಏಕೆ ಬಳಸಬೇಕು?

ಕಂಟೈನರ್ ಕ್ವೆರಿಗಳು ಸಾಂಪ್ರದಾಯಿಕ ಮೀಡಿಯಾ ಕ್ವೆರಿಗಳಿಗಿಂತ ಹಲವಾರು ಪ್ರಯೋಜನಗಳನ್ನು ನೀಡುತ್ತವೆ:

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

CSS ಕಂಟೈನರ್ ಕ್ವೆರಿಗಳನ್ನು ಹೇಗೆ ಅಳವಡಿಸುವುದು

CSS ಕಂಟೈನರ್ ಕ್ವೆರಿಗಳನ್ನು ಅಳವಡಿಸುವುದು ಎರಡು ಪ್ರಮುಖ ಹಂತಗಳನ್ನು ಒಳಗೊಂಡಿರುತ್ತದೆ: ಕಂಟೈನರ್ ಅನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುವುದು ಮತ್ತು ಕ್ವೆರಿಗಳನ್ನು ಬರೆಯುವುದು.

1. ಕಂಟೈನರ್ ಅನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುವುದು

ಮೊದಲಿಗೆ, ನೀವು ಒಂದು ಎಲಿಮೆಂಟ್ ಅನ್ನು *ಕಂಟೈನರ್* ಎಂದು ಗೊತ್ತುಪಡಿಸಬೇಕು. ಇದನ್ನು container-type ಪ್ರಾಪರ್ಟಿ ಬಳಸಿ ಮಾಡಲಾಗುತ್ತದೆ. container-type ಗೆ ಎರಡು ಮುಖ್ಯ ಮೌಲ್ಯಗಳಿವೆ:

• size: ಈ ಮೌಲ್ಯವು ಕಂಟೈನರ್‌ನ ಅಗಲ ಮತ್ತು ಎತ್ತರವನ್ನು ಕ್ವೆರಿ ಮಾಡಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ.
• inline-size: ಈ ಮೌಲ್ಯವು ಕಂಟೈನರ್‌ನ ಇನ್‌ಲೈನ್ ಗಾತ್ರವನ್ನು (ಸಮತಲ ಬರವಣಿಗೆಯ ಮೋಡ್‌ಗಳಲ್ಲಿ ಅಗಲ, ಲಂಬ ಬರವಣಿಗೆಯ ಮೋಡ್‌ಗಳಲ್ಲಿ ಎತ್ತರ) ಕ್ವೆರಿ ಮಾಡಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. ರೆಸ್ಪಾನ್ಸಿವ್ ಲೇಔಟ್‌ಗಳಿಗೆ ಇದು ಸಾಮಾನ್ಯವಾಗಿ ಅತ್ಯಂತ ಉಪಯುಕ್ತ ಆಯ್ಕೆಯಾಗಿದೆ.

ನಿಮ್ಮ ಕಂಟೈನರ್‌ಗೆ ಹೆಸರು ನೀಡಲು ನೀವು container-name ಅನ್ನು ಸಹ ಬಳಸಬಹುದು, ಇದು ನಿಮ್ಮ ಕ್ವೆರಿಗಳಲ್ಲಿ ನಿರ್ದಿಷ್ಟ ಕಂಟೈನರ್‌ಗಳನ್ನು ಗುರಿಯಾಗಿಸಲು ಸಹಾಯಕವಾಗಬಹುದು. ಉದಾಹರಣೆಗೆ:

.card-container {
  container-type: inline-size;
  container-name: cardContainer;
}

ಈ ಕೋಡ್ .card-container ಕ್ಲಾಸ್ ಇರುವ ಎಲಿಮೆಂಟ್ ಅನ್ನು ಕಂಟೈನರ್ ಎಂದು ಘೋಷಿಸುತ್ತದೆ. ಕಂಟೈನರ್‌ನ ಅಗಲವನ್ನು ಆಧರಿಸಿ ಕ್ವೆರಿಗಳನ್ನು ಅನುಮತಿಸಲು ನಾವು inline-size ಅನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸುತ್ತಿದ್ದೇವೆ. ನಾವು ಅದಕ್ಕೆ cardContainer ಎಂಬ ಹೆಸರನ್ನು ಸಹ ನೀಡಿದ್ದೇವೆ.

2. ಕಂಟೈನರ್ ಕ್ವೆರಿಗಳನ್ನು ಬರೆಯುವುದು

ಒಮ್ಮೆ ನೀವು ಕಂಟೈನರ್ ಅನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಿದ ನಂತರ, ನೀವು @container ಅಟ್-ರೂಲ್ ಬಳಸಿ ಕಂಟೈನರ್ ಕ್ವೆರಿಗಳನ್ನು ಬರೆಯಬಹುದು. ಇದರ ಸಿಂಟ್ಯಾಕ್ಸ್ ಮೀಡಿಯಾ ಕ್ವೆರಿಗಳಂತೆಯೇ ಇರುತ್ತದೆ:

@container cardContainer (min-width: 400px) {
  .card {
    flex-direction: row;
  }
  .card-image {
    width: 40%;
  }
  .card-content {
    width: 60%;
  }
}

ಈ ಕ್ವೆರಿಯು cardContainer ಹೆಸರಿನ ಕಂಟೈನರ್ ಕನಿಷ್ಠ 400px ಅಗಲವನ್ನು ಹೊಂದಿರುವಾಗ ಮಾತ್ರ ಕರ್ಲಿ ಬ್ರೇಸ್‌ಗಳೊಳಗಿನ ಸ್ಟೈಲ್‌ಗಳನ್ನು ಅನ್ವಯಿಸುತ್ತದೆ. ಇದು .card ಎಲಿಮೆಂಟ್ ಅನ್ನು (ಬಹುಶಃ .card-container ನ ಚೈಲ್ಡ್) ಗುರಿಯಾಗಿಸುತ್ತದೆ ಮತ್ತು ಅದರ ಲೇಔಟ್ ಅನ್ನು ಸರಿಹೊಂದಿಸುತ್ತದೆ. ಕಂಟೈನರ್ 400px ಗಿಂತ ಕಿರಿದಾಗಿದ್ದರೆ, ಈ ಸ್ಟೈಲ್‌ಗಳು ಅನ್ವಯವಾಗುವುದಿಲ್ಲ.

ಶಾರ್ಟ್‌ಹ್ಯಾಂಡ್: ನೀವು ಕಂಟೈನರ್ ಹೆಸರನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸಬೇಕಾಗಿಲ್ಲದಿದ್ದಾಗ ನೀವು `@container` ನಿಯಮದ ಶಾರ್ಟ್‌ಹ್ಯಾಂಡ್ ಆವೃತ್ತಿಯನ್ನು ಸಹ ಬಳಸಬಹುದು:

@container (min-width: 400px) {
  /* Styles to apply when the container is at least 400px wide */
}

ಕಂಟೈನರ್ ಕ್ವೆರಿಗಳ ಪ್ರಾಯೋಗಿಕ ಉದಾಹರಣೆಗಳು

ಹೆಚ್ಚು ರೆಸ್ಪಾನ್ಸಿವ್ ಮತ್ತು ಹೊಂದಿಕೊಳ್ಳುವ ಲೇಔಟ್‌ಗಳನ್ನು ರಚಿಸಲು ನೀವು ಕಂಟೈನರ್ ಕ್ವೆರಿಗಳನ್ನು ಹೇಗೆ ಬಳಸಬಹುದು ಎಂಬುದರ ಕೆಲವು ಪ್ರಾಯೋಗಿಕ ಉದಾಹರಣೆಗಳನ್ನು ನೋಡೋಣ.

ಉದಾಹರಣೆ 1: ಕಾರ್ಡ್ ಕಾಂಪೊನೆಂಟ್

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

HTML:

<div class="card-container">
  <div class="card">
    <img src="image.jpg" alt="Card Image" class="card-image">
    <div class="card-content">
      <h3>Card Title</h3>
      <p>This is some sample content for the card.</p>
      <a href="#">Learn More</a>
    </div>
  </div>
</div>

CSS:

.card-container {
  container-type: inline-size;
  border: 1px solid #ccc;
  margin-bottom: 20px;
}

.card {
  display: flex;
  flex-direction: column;
}

.card-image {
  width: 100%;
  height: auto;
}

.card-content {
  padding: 10px;
}

@container (min-width: 500px) {
  .card {
    flex-direction: row;
  }
  .card-image {
    width: 40%;
  }
  .card-content {
    width: 60%;
  }
}

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, .card-container ಅನ್ನು ಕಂಟೈನರ್ ಎಂದು ಘೋಷಿಸಲಾಗಿದೆ. ಕಂಟೈನರ್‌ನ ಅಗಲ 500px ಗಿಂತ ಕಡಿಮೆ ಇದ್ದಾಗ, .card ಕಾಲಮ್ ಲೇಔಟ್ ಅನ್ನು ಬಳಸುತ್ತದೆ, ಚಿತ್ರ ಮತ್ತು ವಿಷಯವನ್ನು ಲಂಬವಾಗಿ ಜೋಡಿಸುತ್ತದೆ. ಕಂಟೈನರ್‌ನ ಅಗಲ 500px ಅಥವಾ ಅದಕ್ಕಿಂತ ಹೆಚ್ಚಾದಾಗ, .card ರೋ ಲೇಔಟ್‌ಗೆ ಬದಲಾಗುತ್ತದೆ, ಚಿತ್ರ ಮತ್ತು ವಿಷಯವನ್ನು ಅಕ್ಕಪಕ್ಕದಲ್ಲಿ ಪ್ರದರ್ಶಿಸುತ್ತದೆ.

ಉದಾಹರಣೆ 2: ನ್ಯಾವಿಗೇಷನ್ ಮೆನು

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

HTML:

<nav class="nav-container">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

CSS:

.nav-container {
  container-type: inline-size;
  background-color: #f0f0f0;
  padding: 10px;
}

.nav-container ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-container li {
  margin-bottom: 5px;
}

.nav-container a {
  display: block;
  padding: 5px 10px;
  text-decoration: none;
  color: #333;
}

@container (min-width: 600px) {
  .nav-container ul {
    display: flex;
  }

  .nav-container li {
    margin-right: 10px;
    margin-bottom: 0;
  }

  .nav-container a {
    display: inline-block;
  }
}

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, .nav-container ಅನ್ನು ಕಂಟೈನರ್ ಎಂದು ಘೋಷಿಸಲಾಗಿದೆ. ಕಂಟೈನರ್‌ನ ಅಗಲ 600px ಗಿಂತ ಕಡಿಮೆ ಇದ್ದಾಗ, ಮೆನು ಐಟಂಗಳನ್ನು ಲಂಬ ಪಟ್ಟಿಯಾಗಿ ಪ್ರದರ್ಶಿಸಲಾಗುತ್ತದೆ. ಕಂಟೈನರ್‌ನ ಅಗಲ 600px ಅಥವಾ ಅದಕ್ಕಿಂತ ಹೆಚ್ಚಾದಾಗ, ಮೆನು ಐಟಂಗಳನ್ನು ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್ ಬಳಸಿ ಸಮತಲವಾಗಿ ಪ್ರದರ್ಶಿಸಲಾಗುತ್ತದೆ.

ಉದಾಹರಣೆ 3: ಉತ್ಪನ್ನ ಪಟ್ಟಿ

ಇ-ಕಾಮರ್ಸ್ ಉತ್ಪನ್ನ ಪಟ್ಟಿಯು ಅದರ ಲೇಔಟ್ ಅನ್ನು ಕಂಟೈನರ್‌ನ ಅಗಲಕ್ಕೆ ಅನುಗುಣವಾಗಿ ಹೊಂದಿಸಿಕೊಳ್ಳಬಹುದು. ಸಣ್ಣ ಕಂಟೈನರ್‌ಗಳಲ್ಲಿ, ಉತ್ಪನ್ನದ ಚಿತ್ರ, ಶೀರ್ಷಿಕೆ ಮತ್ತು ಬೆಲೆಯೊಂದಿಗೆ ಸರಳ ಪಟ್ಟಿ ಉತ್ತಮವಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ. ಕಂಟೈನರ್ ಬೆಳೆದಂತೆ, ಪ್ರಸ್ತುತಿಯನ್ನು ಹೆಚ್ಚಿಸಲು ಸಣ್ಣ ವಿವರಣೆ ಅಥವಾ ಗ್ರಾಹಕರ ರೇಟಿಂಗ್‌ನಂತಹ ಹೆಚ್ಚುವರಿ ಮಾಹಿತಿಯನ್ನು ಸೇರಿಸಬಹುದು. ಇದು ಕೇವಲ ವ್ಯೂಪೋರ್ಟ್ ಅನ್ನು ಗುರಿಯಾಗಿಸುವುದಕ್ಕಿಂತ ಹೆಚ್ಚು ಸೂಕ್ಷ್ಮ ನಿಯಂತ್ರಣವನ್ನು ಸಹ ಅನುಮತಿಸುತ್ತದೆ.

HTML:

<div class="product-listing-container">
  <div class="product-item">
    <img src="product1.jpg" alt="Product 1">
    <h3>Product Name 1</h3>
    <p class="price">$19.99</p>
  </div>
  <div class="product-item">
    <img src="product2.jpg" alt="Product 2">
    <h3>Product Name 2</h3>
    <p class="price">$24.99</p>
  </div>
</div>

CSS:

.product-listing-container {
  container-type: inline-size;
  display: flex;
  flex-wrap: wrap;
}

.product-item {
  width: 100%;
  margin-bottom: 20px;
  border: 1px solid #eee;
  padding: 10px;
}

.product-item img {
  width: 100%;
  height: auto;
  margin-bottom: 10px;
}

.product-item h3 {
  margin-top: 0;
  font-size: 1.2em;
}

.product-item .price {
  font-weight: bold;
  color: #007bff;
}

@container (min-width: 400px) {
  .product-item {
    width: 50%;
    padding: 15px;
  }
}

@container (min-width: 768px) {
  .product-item {
    width: 33.33%;
  }
}

ಈ CSS ಕೋಡ್ ಮೊದಲು `product-listing-container` ಅನ್ನು ಕಂಟೈನರ್ ಆಗಿ ಸ್ಥಾಪಿಸುತ್ತದೆ. ಕಿರಿದಾದ ಕಂಟೈನರ್‌ಗಳಿಗಾಗಿ (400px ಗಿಂತ ಕಡಿಮೆ), ಪ್ರತಿಯೊಂದು ಉತ್ಪನ್ನ ಐಟಂ 100% ಅಗಲವನ್ನು ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ. ಕಂಟೈನರ್ 400px ಗಿಂತ ಹೆಚ್ಚಾದಂತೆ, ಉತ್ಪನ್ನ ಐಟಂಗಳನ್ನು ಎರಡು ಕಾಲಮ್‌ಗಳಲ್ಲಿ ಜೋಡಿಸಲಾಗುತ್ತದೆ. 768px ಗಿಂತ ಹೆಚ್ಚಾದಾಗ, ಉತ್ಪನ್ನ ಐಟಂಗಳನ್ನು ಮೂರು ಕಾಲಮ್‌ಗಳಲ್ಲಿ ಪ್ರದರ್ಶಿಸಲಾಗುತ್ತದೆ.

ಬ್ರೌಸರ್ ಬೆಂಬಲ ಮತ್ತು ಪಾಲಿಫಿಲ್‌ಗಳು

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

ಹಳೆಯ ಬ್ರೌಸರ್‌ಗಳನ್ನು ಬೆಂಬಲಿಸಲು, ನೀವು ಪಾಲಿಫಿಲ್ ಅನ್ನು ಬಳಸಬಹುದು. ಒಂದು ಜನಪ್ರಿಯ ಆಯ್ಕೆಯೆಂದರೆ container-query-polyfill, ಇದನ್ನು npm ಮತ್ತು GitHub ನಲ್ಲಿ ಕಾಣಬಹುದು. ಪಾಲಿಫಿಲ್‌ಗಳು ಬೆಂಬಲವಿಲ್ಲದ ವೈಶಿಷ್ಟ್ಯಗಳ ಅಂತರವನ್ನು ತುಂಬುತ್ತವೆ, ಹಳೆಯ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿಯೂ ಕಂಟೈನರ್ ಕ್ವೆರಿಗಳನ್ನು ಬಳಸಲು ನಿಮಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ.

ಕಂಟೈನರ್ ಕ್ವೆರಿಗಳನ್ನು ಬಳಸಲು ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು

ಕಂಟೈನರ್ ಕ್ವೆರಿಗಳನ್ನು ಬಳಸುವಾಗ ನೆನಪಿನಲ್ಲಿಡಬೇಕಾದ ಕೆಲವು ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು ಇಲ್ಲಿವೆ:

• ಅರ್ಥಪೂರ್ಣ ಕಂಟೈನರ್ ಹೆಸರುಗಳನ್ನು ಬಳಸಿ: ನಿಮ್ಮ ಕೋಡ್ ಅನ್ನು ಹೆಚ್ಚು ಓದಬಲ್ಲ ಮತ್ತು ನಿರ್ವಹಿಸಬಲ್ಲ ಮಾಡಲು ನಿಮ್ಮ ಕಂಟೈನರ್‌ಗಳಿಗೆ ವಿವರಣಾತ್ಮಕ ಹೆಸರುಗಳನ್ನು ನೀಡಿ.
• ಕ್ವೆರಿಗಳನ್ನು ನಿರ್ದಿಷ್ಟವಾಗಿ ಇರಿಸಿ: ಕಂಟೈನರ್ ಗಾತ್ರವನ್ನು ಆಧರಿಸಿ ಸ್ಟೈಲ್ ಮಾಡಬೇಕಾದ ನಿರ್ದಿಷ್ಟ ಎಲಿಮೆಂಟ್‌ಗಳನ್ನು ಗುರಿಯಾಗಿಸಿ.
• ಅತಿಯಾದ ಸಂಕೀರ್ಣ ಕ್ವೆರಿಗಳನ್ನು ತಪ್ಪಿಸಿ: ನಿಮ್ಮ ಕ್ವೆರಿಗಳನ್ನು ಸರಳ ಮತ್ತು ಕೇಂದ್ರೀಕೃತವಾಗಿಡಿ. ಸಂಕೀರ್ಣ ಕ್ವೆರಿಗಳನ್ನು ಡೀಬಗ್ ಮಾಡಲು ಮತ್ತು ನಿರ್ವಹಿಸಲು ಕಷ್ಟವಾಗಬಹುದು.
• ಸಂಪೂರ್ಣವಾಗಿ ಪರೀಕ್ಷಿಸಿ: ನಿಮ್ಮ ಲೇಔಟ್‌ಗಳು ರೆಸ್ಪಾನ್ಸಿವ್ ಮತ್ತು ಹೊಂದಿಕೊಳ್ಳುವಂತಿವೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ವಿಭಿನ್ನ ಕಂಟೈನರ್ ಗಾತ್ರಗಳಲ್ಲಿ ಪರೀಕ್ಷಿಸಿ.
• ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಪರಿಗಣಿಸಿ: ಕಂಟೈನರ್ ಕ್ವೆರಿಗಳು ಸಾಮಾನ್ಯವಾಗಿ ಉತ್ತಮ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಹೊಂದಿದ್ದರೂ, ಆಗಾಗ್ಗೆ ಅಪ್‌ಡೇಟ್ ಆಗುವ ಎಲಿಮೆಂಟ್‌ಗಳ ಮೇಲೆ ಅವುಗಳನ್ನು ಅತಿಯಾಗಿ ಬಳಸುವುದನ್ನು ತಪ್ಪಿಸಿ.
• ಲಭ್ಯತೆಯ ಪರಿಗಣನೆಗಳು: ಕಂಟೈನರ್ ಕ್ವೆರಿಗಳಿಂದ ಪ್ರಚೋದಿಸಲ್ಪಟ್ಟ ಬದಲಾವಣೆಗಳು ಲಭ್ಯತೆಯ ಮೇಲೆ ನಕಾರಾತ್ಮಕ ಪರಿಣಾಮ ಬೀರದಂತೆ ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ. ಉದಾಹರಣೆಗೆ, ಎಲ್ಲಾ ಕಂಟೈನರ್ ಗಾತ್ರಗಳಲ್ಲಿ ವಿಷಯವು ಓದಬಲ್ಲ ಮತ್ತು ಸಂಚರಿಸಬಲ್ಲದು ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ.

ಸಾಮಾನ್ಯ ಅಪಾಯಗಳು ಮತ್ತು ಅವುಗಳನ್ನು ತಪ್ಪಿಸುವುದು ಹೇಗೆ

• ವೃತ್ತಾಕಾರದ ಅವಲಂಬನೆಗಳು: ಕಂಟೈನರ್ ಕ್ವೆರಿಗಳ ನಡುವೆ ವೃತ್ತಾಕಾರದ ಅವಲಂಬನೆಗಳನ್ನು ರಚಿಸದಂತೆ ಜಾಗರೂಕರಾಗಿರಿ. ಉದಾಹರಣೆಗೆ, ಕಂಟೈನರ್ ಕ್ವೆರಿಯೊಳಗೆ ಅನ್ವಯಿಸಲಾದ ಸ್ಟೈಲ್‌ಗಳಿಂದ ಕಂಟೈನರ್‌ನ ಗಾತ್ರವು ಪ್ರಭಾವಿತವಾದರೆ, ಅದು ಅನಿರೀಕ್ಷಿತ ನಡವಳಿಕೆಗೆ ಕಾರಣವಾಗಬಹುದು.
• ಅತಿ-ನಿರ್ದಿಷ್ಟತೆ: ನಿಮ್ಮ ಕಂಟೈನರ್ ಕ್ವೆರಿಗಳಲ್ಲಿ ಅತಿ-ನಿರ್ದಿಷ್ಟ ಸೆಲೆಕ್ಟರ್‌ಗಳನ್ನು ಬಳಸುವುದನ್ನು ತಪ್ಪಿಸಿ. ಇದು ನಿಮ್ಮ ಕೋಡ್ ಅನ್ನು ನಿರ್ವಹಿಸಲು ಕಷ್ಟವಾಗಿಸುತ್ತದೆ ಮತ್ತು ಇತರ ಸ್ಟೈಲ್‌ಗಳೊಂದಿಗೆ ಸಂಘರ್ಷಕ್ಕೆ ಕಾರಣವಾಗಬಹುದು.
• ನೆಸ್ಟೆಡ್ ಕಂಟೈನರ್‌ಗಳನ್ನು ನಿರ್ಲಕ್ಷಿಸುವುದು: ನೆಸ್ಟೆಡ್ ಕಂಟೈನರ್‌ಗಳನ್ನು ಬಳಸುವಾಗ, ನಿಮ್ಮ ಕ್ವೆರಿಗಳು ಸರಿಯಾದ ಕಂಟೈನರ್ ಅನ್ನು ಗುರಿಯಾಗಿಸುತ್ತಿವೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ. ಗೊಂದಲವನ್ನು ತಪ್ಪಿಸಲು ನೀವು ಹೆಚ್ಚು ನಿರ್ದಿಷ್ಟವಾದ ಕಂಟೈನರ್ ಹೆಸರುಗಳನ್ನು ಬಳಸಬೇಕಾಗಬಹುದು.
• ಕಂಟೈನರ್ ಅನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು ಮರೆಯುವುದು: `container-type` ಬಳಸಿ ಎಲಿಮೆಂಟ್ ಅನ್ನು ಕಂಟೈನರ್ ಎಂದು ಘೋಷಿಸಲು ಮರೆಯುವುದು ಒಂದು ಸಾಮಾನ್ಯ ತಪ್ಪು. ಇದಿಲ್ಲದೆ, ಕಂಟೈನರ್ ಕ್ವೆರಿಗಳು ಕಾರ್ಯನಿರ್ವಹಿಸುವುದಿಲ್ಲ.

ಕಂಟೈನರ್ ಕ್ವೆರಿಗಳು ವರ್ಸಸ್ ಮೀಡಿಯಾ ಕ್ವೆರಿಗಳು: ಸರಿಯಾದ ಸಾಧನವನ್ನು ಆರಿಸುವುದು

ಕಂಟೈನರ್ ಕ್ವೆರಿಗಳು ಗಮನಾರ್ಹ ಪ್ರಯೋಜನಗಳನ್ನು ನೀಡುತ್ತವೆಯಾದರೂ, ರೆಸ್ಪಾನ್ಸಿವ್ ಡಿಸೈನ್‌ನಲ್ಲಿ ಮೀಡಿಯಾ ಕ್ವೆರಿಗಳಿಗೆ ಇನ್ನೂ ತಮ್ಮ ಸ್ಥಾನವಿದೆ. ವಿಭಿನ್ನ ಸಂದರ್ಭಗಳಿಗೆ ಯಾವ ಸಾಧನವು ಉತ್ತಮವಾಗಿದೆ ಎಂದು ನಿರ್ಧರಿಸಲು ನಿಮಗೆ ಸಹಾಯ ಮಾಡಲು ಇಲ್ಲಿ ಒಂದು ಹೋಲಿಕೆ ಇದೆ:

ವೈಶಿಷ್ಟ್ಯ	ಕಂಟೈನರ್ ಕ್ವೆರಿಗಳು	ಮೀಡಿಯಾ ಕ್ವೆರಿಗಳು
ಗುರಿ	ಕಂಟೈನರ್ ಗಾತ್ರ	ವ್ಯೂಪೋರ್ಟ್ ಗಾತ್ರ
ರೆಸ್ಪಾನ್ಸಿವ್‌ನೆಸ್	ಕಾಂಪೊನೆಂಟ್-ಆಧಾರಿತ	ಪುಟ-ಆಧಾರಿತ
ನಮ್ಯತೆ	ಹೆಚ್ಚು	ಮಧ್ಯಮ
ಕೋಡ್ ನಕಲು	ಕಡಿಮೆ	ಹೆಚ್ಚು
ಬಳಕೆಯ ಸಂದರ್ಭಗಳು	ಮರುಬಳಕೆ ಮಾಡಬಹುದಾದ ಕಾಂಪೊನೆಂಟ್‌ಗಳು, ಸಂಕೀರ್ಣ ಲೇಔಟ್‌ಗಳು	ಜಾಗತಿಕ ಲೇಔಟ್ ಹೊಂದಾಣಿಕೆಗಳು, ಮೂಲಭೂತ ರೆಸ್ಪಾನ್ಸಿವ್‌ನೆಸ್

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

ಕಂಟೈನರ್ ಕ್ವೆರಿಗಳೊಂದಿಗೆ ರೆಸ್ಪಾನ್ಸಿವ್ ಡಿಸೈನ್‌ನ ಭವಿಷ್ಯ

ಕಂಟೈನರ್ ಕ್ವೆರಿಗಳು ರೆಸ್ಪಾನ್ಸಿವ್ ಡಿಸೈನ್‌ನಲ್ಲಿ ಒಂದು ಮಹತ್ವದ ಹೆಜ್ಜೆಯನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತವೆ, ಎಲಿಮೆಂಟ್‌ಗಳು ವಿಭಿನ್ನ ಸಂದರ್ಭಗಳಿಗೆ ಹೇಗೆ ಹೊಂದಿಕೊಳ್ಳುತ್ತವೆ ಎಂಬುದರ ಮೇಲೆ ಹೆಚ್ಚಿನ ನಮ್ಯತೆ ಮತ್ತು ನಿಯಂತ್ರಣವನ್ನು ನೀಡುತ್ತವೆ. ಬ್ರೌಸರ್ ಬೆಂಬಲವು ಸುಧಾರಿಸುತ್ತಿದ್ದಂತೆ, ಕಂಟೈನರ್ ಕ್ವೆರಿಗಳು ವೆಬ್ ಡೆವಲಪರ್‌ಗಳಿಗೆ ಹೆಚ್ಚು ಹೆಚ್ಚು ಮುಖ್ಯವಾದ ಸಾಧನವಾಗುವ ಸಾಧ್ಯತೆಯಿದೆ. ಅವು ಡಿಸೈನರ್‌ಗಳು ಮತ್ತು ಡೆವಲಪರ್‌ಗಳಿಗೆ ನಿಜವಾಗಿಯೂ ಹೊಂದಿಕೊಳ್ಳುವ ಮತ್ತು ಬಳಕೆದಾರ-ಸ್ನೇಹಿ ವೆಬ್‌ಸೈಟ್‌ಗಳನ್ನು ರಚಿಸಲು ಅಧಿಕಾರ ನೀಡುತ್ತವೆ, ಅದು ಎಲ್ಲಾ ಸಾಧನಗಳು ಮತ್ತು ಪರದೆಯ ಗಾತ್ರಗಳಲ್ಲಿ ಸುಲಲಿತ ಅನುಭವವನ್ನು ಒದಗಿಸುತ್ತದೆ.

ತೀರ್ಮಾನ

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

ಸಂಪನ್ಮೂಲಗಳು

• CSS ಕಂಟೈನ್‌ಮೆಂಟ್ ಮಾಡ್ಯೂಲ್ ಹಂತ 3 (W3C Specification)
• CSS ಕಂಟೈನರ್ ಕ್ವೆರಿಗಳು - MDN ವೆಬ್ ಡಾಕ್ಸ್
• GitHub ನಲ್ಲಿ ಕಂಟೈನರ್ ಕ್ವೆರಿ ಪಾಲಿಫಿಲ್