ResizeObserver API: ಡೈನಾಮಿಕ್, ರೆಸ್ಪಾನ್ಸಿವ್ ಲೇಔಟ್‌ಗಳಿಗಾಗಿ ಎಲಿಮೆಂಟ್ ಗಾತ್ರದ ನಿಖರ ಟ್ರ್ಯಾಕಿಂಗ್

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

ಈ ಸಮಗ್ರ ಮಾರ್ಗದರ್ಶಿಯು ResizeObserver API ಯ ಆಳವಾದ ವಿವರಗಳನ್ನು, ಅದರ ಕಾರ್ಯವಿಧಾನ, ವೈವಿಧ್ಯಮಯ ಅಪ್ಲಿಕೇಶನ್‌ಗಳು, ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು, ಮತ್ತು ಜಾಗತಿಕ ಪ್ರೇಕ್ಷಕರಿಗಾಗಿ ಹೆಚ್ಚು ಡೈನಾಮಿಕ್ ಮತ್ತು ಸ್ಥಿತಿಸ್ಥಾಪಕ ವೆಬ್ ಅನುಭವಗಳನ್ನು ನಿರ್ಮಿಸಲು ಡೆವಲಪರ್‌ಗಳಿಗೆ ಹೇಗೆ ಅಧಿಕಾರ ನೀಡುತ್ತದೆ ಎಂಬುದನ್ನು ಪರಿಶೋಧಿಸುತ್ತದೆ.

ಮೂಲ ಸಮಸ್ಯೆಯನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು: window.resize ಏಕೆ ಸಾಕಾಗುವುದಿಲ್ಲ

ಹಲವಾರು ವರ್ಷಗಳಿಂದ, ಬ್ರೌಸರ್‌ನಲ್ಲಿ ಲೇಔಟ್ ಬದಲಾವಣೆಗಳಿಗೆ ಪ್ರತಿಕ್ರಿಯಿಸುವ ಪ್ರಾಥಮಿಕ ಯಾಂತ್ರಿಕತೆಯು window.resize ಈವೆಂಟ್ ಆಗಿತ್ತು. ಬ್ರೌಸರ್‌ನ ವ್ಯೂಪೋರ್ಟ್ ಆಯಾಮಗಳು ಬದಲಾದಾಗ ಪತ್ತೆಹಚ್ಚಲು ಡೆವಲಪರ್‌ಗಳು ವಿಂಡೋ ಆಬ್ಜೆಕ್ಟ್‌ಗೆ ಈವೆಂಟ್ ಲಿಸನರ್‌ಗಳನ್ನು ಲಗತ್ತಿಸುತ್ತಿದ್ದರು. ಆದಾಗ್ಯೂ, ಇಂದಿನ ಕಾಂಪೊನೆಂಟ್-ಚಾಲಿತ ಜಗತ್ತಿನಲ್ಲಿ ಈ ವಿಧಾನವು ಗಮನಾರ್ಹ ಮಿತಿಗಳನ್ನು ಹೊಂದಿದೆ:

• ವ್ಯೂಪೋರ್ಟ್-ಕೇಂದ್ರಿತ ಮಾತ್ರ: window.resize ಈವೆಂಟ್ ಬ್ರೌಸರ್ ವಿಂಡೋವನ್ನು ಮರುಗಾತ್ರಗೊಳಿಸಿದಾಗ ಮಾತ್ರ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ. ಡಾಕ್ಯುಮೆಂಟ್‌ನಲ್ಲಿರುವ ವೈಯಕ್ತಿಕ ಎಲಿಮೆಂಟ್‌ಗಳು ಇತರ ಕಾರಣಗಳಿಂದಾಗಿ ಗಾತ್ರದಲ್ಲಿ ಬದಲಾಗುತ್ತಿರುವ ಬಗ್ಗೆ ಇದು ಯಾವುದೇ ಮಾಹಿತಿಯನ್ನು ನೀಡುವುದಿಲ್ಲ.
• ಸೀಮಿತ ವ್ಯಾಪ್ತಿ: ಒಂದು ಕಾಂಪೊನೆಂಟ್‌ನ ಪೋಷಕ ಕಂಟೇನರ್ ಕುಗ್ಗಿದಾಗ ಅಥವಾ ವಿಸ್ತರಿಸಿದಾಗ, ಒಟ್ಟಾರೆ ವ್ಯೂಪೋರ್ಟ್ ಗಾತ್ರವು ಸ್ಥಿರವಾಗಿದ್ದರೂ ಸಹ, ಅದರ ಆಂತರಿಕ ಲೇಔಟ್ ಅನ್ನು ಸರಿಹೊಂದಿಸಬೇಕಾಗಬಹುದು. ಸೈಡ್‌ಬಾರ್ ಕುಸಿಯುವುದು, ಅಥವಾ ಟ್ಯಾಬ್ ಪ್ಯಾನೆಲ್ ಹೊಸ ವಿಷಯವನ್ನು ಬಹಿರಂಗಪಡಿಸುವುದನ್ನು ಯೋಚಿಸಿ. window.resize ಈ ಸ್ಥಳೀಯ ಬದಲಾವಣೆಗಳ ಬಗ್ಗೆ ಯಾವುದೇ ಒಳನೋಟವನ್ನು ನೀಡುವುದಿಲ್ಲ.
• ಅಸಮರ್ಥ ಪೋಲಿಂಗ್: ResizeObserver ಇಲ್ಲದೆ ಎಲಿಮೆಂಟ್-ಮಟ್ಟದ ಬದಲಾವಣೆಗಳನ್ನು ಟ್ರ್ಯಾಕ್ ಮಾಡಲು, ಡೆವಲಪರ್‌ಗಳು setInterval ಬಳಸಿ ಅಸಮರ್ಥ ಮತ್ತು ಕಾರ್ಯಕ್ಷಮತೆ-ತೀವ್ರ ಪೋಲಿಂಗ್ ಕಾರ್ಯವಿಧಾನಗಳನ್ನು ಆಶ್ರಯಿಸುತ್ತಿದ್ದರು, element.offsetWidth ಅಥವಾ element.offsetHeight ಅನ್ನು ಪದೇ ಪದೇ ಪರಿಶೀಲಿಸುತ್ತಿದ್ದರು. ಇದು ಅನಗತ್ಯ ಲೆಕ್ಕಾಚಾರಗಳಿಗೆ ಮತ್ತು ಸಂಭಾವ್ಯ ಜ್ಯಾಂಕ್‌ಗೆ ಕಾರಣವಾಗುತ್ತದೆ.
• ಸಂಕೀರ್ಣ ಕ್ರಾಸ್-ಕಾಂಪೊನೆಂಟ್ ಸಂವಹನ: ಒಂದು ಕಾಂಪೊನೆಂಟ್‌ಗೆ ತನ್ನದೇ ಆದ ಹಂಚಿಕೆಯ ಜಾಗವನ್ನು ತಿಳಿಯಲು ನೇರ ಮಾರ್ಗವಿಲ್ಲದೆ, ಆಳವಾಗಿ ನೆಸ್ಟೆಡ್ ಅಥವಾ ಸ್ವತಂತ್ರ ಕಾಂಪೊನೆಂಟ್‌ಗಳ ನಡುವೆ ಗಾತ್ರದ ಬದಲಾವಣೆಗಳನ್ನು ಸಂಘಟಿಸುವುದು ಒಂದು ಗೋಜಲಿನ ಗೊಂದಲವಾಗುತ್ತದೆ.

ಡೇಟಾ ದೃಶ್ಯೀಕರಣ ಚಾರ್ಟ್ ಬಳಕೆದಾರರಿಂದ ಅದರ ಒಳಗೊಂಡಿರುವ <div> ಎಲಿಮೆಂಟ್ ಅನ್ನು ಸರಿಹೊಂದಿಸಿದಾಗ, ಬಹುಶಃ ಡ್ರ್ಯಾಗ್ ಮಾಡಬಹುದಾದ ಸ್ಪ್ಲಿಟರ್ ಮೂಲಕ, ಡೈನಾಮಿಕ್ ಆಗಿ ಮರುಗಾತ್ರಗೊಳಿಸಬೇಕಾದ ಸನ್ನಿವೇಶವನ್ನು ಪರಿಗಣಿಸಿ. ಇಲ್ಲಿ window.resize ನಿಷ್ಪ್ರಯೋಜಕವಾಗಿರುತ್ತದೆ. ResizeObserver ಅನ್ನು ನಿಖರವಾಗಿ ಈ ರೀತಿಯ ಸವಾಲನ್ನು ಪರಿಹರಿಸಲು ವಿನ್ಯಾಸಗೊಳಿಸಲಾಗಿದೆ.

ResizeObserver API ಪರಿಚಯ

ResizeObserver API ಯು ಒಂದು ಎಲಿಮೆಂಟ್‌ನ ವಿಷಯ ಅಥವಾ ಬಾರ್ಡರ್ ಬಾಕ್ಸ್‌ನ ಗಾತ್ರದಲ್ಲಿನ ಬದಲಾವಣೆಗಳನ್ನು ಗಮನಿಸಲು ಒಂದು ಕಾರ್ಯಕ್ಷಮತೆಯ ಮತ್ತು ಸಮರ್ಥವಾದ ಮಾರ್ಗವನ್ನು ಒದಗಿಸುತ್ತದೆ. ವ್ಯೂಪೋರ್ಟ್ ಅನ್ನು ಮೇಲ್ವಿಚಾರಣೆ ಮಾಡುವ window.resize ಗಿಂತ ಭಿನ್ನವಾಗಿ, ResizeObserver ಒಂದು ಅಥವಾ ಹೆಚ್ಚಿನ ಗುರಿ DOM ಎಲಿಮೆಂಟ್‌ಗಳ ನಿರ್ದಿಷ್ಟ ಆಯಾಮಗಳ ಮೇಲೆ ಕೇಂದ್ರೀಕರಿಸುತ್ತದೆ.

ಇದು ವೆಬ್ API ಗಳ ಸೂಟ್‌ಗೆ ಒಂದು ಶಕ್ತಿಯುತ ಸೇರ್ಪಡೆಯಾಗಿದೆ, ಇದು ಡೆವಲಪರ್‌ಗಳಿಗೆ ಇದನ್ನು ಅನುಮತಿಸುತ್ತದೆ:

• ಎಲಿಮೆಂಟ್-ನಿರ್ದಿಷ್ಟ ಮರುಗಾತ್ರಗಳಿಗೆ ಪ್ರತಿಕ್ರಿಯಿಸಿ: ವಿಂಡೋ ಮರುಗಾತ್ರಗೊಂಡಿದೆಯೇ ಅಥವಾ ಇಲ್ಲವೇ ಎಂಬುದನ್ನು ಲೆಕ್ಕಿಸದೆ, ಗಮನಿಸಲಾದ ಎಲಿಮೆಂಟ್‌ನ ಗಾತ್ರವು ಬದಲಾದಾಗಲೆಲ್ಲಾ ಅಧಿಸೂಚನೆ ಪಡೆಯಿರಿ. ಇದು CSS ಲೇಔಟ್‌ಗಳು (ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್, ಗ್ರಿಡ್), ಡೈನಾಮಿಕ್ ವಿಷಯ ಇಂಜೆಕ್ಷನ್, ಅಥವಾ ಬಳಕೆದಾರರ ಸಂವಹನಗಳಿಂದ ಉಂಟಾಗುವ ಬದಲಾವಣೆಗಳನ್ನು ಒಳಗೊಂಡಿದೆ.
• ಅನಂತ ಮರುಗಾತ್ರ ಲೂಪ್‌ಗಳನ್ನು ತಪ್ಪಿಸಿ: ಒಂದು ಮರುಗಾತ್ರ ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್ ನೇರವಾಗಿ ಗಮನಿಸಲಾದ ಎಲಿಮೆಂಟ್‌ನ ಗಾತ್ರವನ್ನು ಮಾರ್ಪಡಿಸಿದರೆ ಸಂಭವಿಸಬಹುದಾದ ಅನಂತ ಲೂಪ್‌ಗಳನ್ನು ತಡೆಯಲು API ಅನ್ನು ವಿನ್ಯಾಸಗೊಳಿಸಲಾಗಿದೆ, ಇದು ಮತ್ತೊಂದು ಮರುಗಾತ್ರ ಈವೆಂಟ್ ಅನ್ನು ಪ್ರಚೋದಿಸುತ್ತದೆ. ResizeObserver ಬದಲಾವಣೆಗಳನ್ನು ಬ್ಯಾಚ್ ಮಾಡುತ್ತದೆ ಮತ್ತು ಅವುಗಳನ್ನು ಸಮರ್ಥವಾಗಿ ಪ್ರಕ್ರಿಯೆಗೊಳಿಸುತ್ತದೆ.
• ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಸುಧಾರಿಸಿ: ಘೋಷಣಾತ್ಮಕ, ಈವೆಂಟ್-ಚಾಲಿತ ಕಾರ್ಯವಿಧಾನವನ್ನು ಒದಗಿಸುವ ಮೂಲಕ, ಗಾತ್ರ ಟ್ರ್ಯಾಕಿಂಗ್‌ಗಾಗಿ ದುಬಾರಿ ಪೋಲಿಂಗ್ ಅಥವಾ ಸಂಕೀರ್ಣ ಇಂಟರ್ಸೆಕ್ಷನ್ ಅಬ್ಸರ್ವರ್ ಹ್ಯಾಕ್‌ಗಳ ಅಗತ್ಯವನ್ನು ಇದು ನಿವಾರಿಸುತ್ತದೆ.
• ನಿಜವಾದ ಕಾಂಪೊನೆಂಟ್-ಮಟ್ಟದ ರೆಸ್ಪಾನ್ಸಿವ್‌ನೆಸ್ ಅನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಿ: ಕಾಂಪೊನೆಂಟ್‌ಗಳು ತಮ್ಮ ಹಂಚಿಕೆಯ ಸ್ಥಳದ ಬಗ್ಗೆ ನಿಜವಾಗಿಯೂ ಸ್ವಯಂ-ಅರಿವು ಹೊಂದಬಹುದು, ಇದು ಹೆಚ್ಚು ಮಾಡ್ಯುಲರ್, ಮರುಬಳಕೆ ಮಾಡಬಹುದಾದ ಮತ್ತು ದೃಢವಾದ UI ಎಲಿಮೆಂಟ್‌ಗಳಿಗೆ ಕಾರಣವಾಗುತ್ತದೆ.

ResizeObserver ಹೇಗೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ: ಒಂದು ಪ್ರಾಯೋಗಿಕ ಆಳವಾದ ನೋಟ

ResizeObserver API ಅನ್ನು ಬಳಸುವುದು ಕೆಲವು ನೇರ ಹಂತಗಳನ್ನು ಒಳಗೊಂಡಿರುತ್ತದೆ: ಒಬ್ಬ ಅಬ್ಸರ್ವರ್ ಅನ್ನು ಇನ್‌ಸ್ಟಾಂಟಿಯೇಟ್ ಮಾಡುವುದು, ಯಾವ ಎಲಿಮೆಂಟ್‌ಗಳನ್ನು ವೀಕ್ಷಿಸಬೇಕೆಂದು ಅದಕ್ಕೆ ಹೇಳುವುದು, ಮತ್ತು ನಂತರ ಕಾಲ್‌ಬ್ಯಾಕ್ ಫಂಕ್ಷನ್‌ನಲ್ಲಿ ಬದಲಾವಣೆಗಳನ್ನು ನಿರ್ವಹಿಸುವುದು.

ಇನ್‌ಸ್ಟಾಂಟಿಯೇಷನ್ ಮತ್ತು ವೀಕ್ಷಣೆ

ಮೊದಲು, ನೀವು ResizeObserver ನ ಹೊಸ ಇನ್‌ಸ್ಟಾನ್ಸ್ ಅನ್ನು ರಚಿಸುತ್ತೀರಿ, ಅದಕ್ಕೆ ಕಾಲ್‌ಬ್ಯಾಕ್ ಫಂಕ್ಷನ್ ಅನ್ನು ಪಾಸ್ ಮಾಡುತ್ತೀರಿ, ಅದು ವೀಕ್ಷಿಸಿದ ಎಲಿಮೆಂಟ್‌ನ ಗಾತ್ರವು ಬದಲಾದಾಗಲೆಲ್ಲಾ ಕಾರ್ಯಗತಗೊಳ್ಳುತ್ತದೆ.

            // Create a new ResizeObserver instance
const myObserver = new ResizeObserver(entries => {
  // This callback will be executed when the observed element's size changes
  for (let entry of entries) {
    const targetElement = entry.target;
    const newWidth = entry.contentRect.width;
    const newHeight = entry.contentRect.height;

    console.log(`Element ${targetElement.id || targetElement.tagName} resized to ${newWidth}px x ${newHeight}px.`);
    // Perform actions based on the new size
  }
});

            

              
                Copy
              
            
          

ನೀವು ಅಬ್ಸರ್ವರ್ ಇನ್‌ಸ್ಟಾನ್ಸ್ ಅನ್ನು ಹೊಂದಿದ ನಂತರ, observe() ಮೆಥೆಡ್ ಬಳಸಿ ಯಾವ DOM ಎಲಿಮೆಂಟ್‌ಗಳನ್ನು ವೀಕ್ಷಿಸಬೇಕೆಂದು ಅದಕ್ಕೆ ಹೇಳಬಹುದು:

            // Get the element you want to observe
const myElement = document.getElementById('myResizableDiv');

// Start observing the element
if (myElement) {
  myObserver.observe(myElement);
  console.log('Observation started for myResizableDiv.');
} else {
  console.error('Element #myResizableDiv not found.');
}

            

              
                Copy
              
            
          

ನೀವು ಒಂದೇ ಅಬ್ಸರ್ವರ್ ಇನ್‌ಸ್ಟಾನ್ಸ್‌ನೊಂದಿಗೆ ಅನೇಕ ಎಲಿಮೆಂಟ್‌ಗಳನ್ನು ವೀಕ್ಷಿಸಬಹುದು:

            const element1 = document.getElementById('chartContainer');
const element2 = document.querySelector('.responsive-sidebar');

if (element1) myObserver.observe(element1);
if (element2) myObserver.observe(element2);

            

              
                Copy
              
            
          

ಒಂದು ನಿರ್ದಿಷ್ಟ ಎಲಿಮೆಂಟ್ ಅನ್ನು ವೀಕ್ಷಿಸುವುದನ್ನು ನಿಲ್ಲಿಸಲು, unobserve() ಬಳಸಿ:

            // Stop observing a single element
if (myElement) {
  myObserver.unobserve(myElement);
  console.log('Observation stopped for myResizableDiv.');
}

            

              
                Copy
              
            
          

ಎಲ್ಲಾ ಎಲಿಮೆಂಟ್‌ಗಳನ್ನು ವೀಕ್ಷಿಸುವುದನ್ನು ನಿಲ್ಲಿಸಲು ಮತ್ತು ಅಬ್ಸರ್ವರ್ ಅನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ಸಂಪರ್ಕ ಕಡಿತಗೊಳಿಸಲು, disconnect() ಬಳಸಿ:

            // Disconnect the observer from all observed elements
myObserver.disconnect();
console.log('ResizeObserver disconnected.');

            

              
                Copy
              
            
          

ಕಾಲ್‌ಬ್ಯಾಕ್ ಫಂಕ್ಷನ್ ಮತ್ತು ResizeObserverEntry

ResizeObserver ಗೆ ಪಾಸ್ ಮಾಡಿದ ಕಾಲ್‌ಬ್ಯಾಕ್ ಫಂಕ್ಷನ್ ResizeObserverEntry ಆಬ್ಜೆಕ್ಟ್‌ಗಳ ಒಂದು ಅರೇಯನ್ನು ಪಡೆಯುತ್ತದೆ. ಪ್ರತಿಯೊಂದು ಎಂಟ್ರಿಯು ಕೊನೆಯ ಅಧಿಸೂಚನೆಯ ನಂತರ ಗಾತ್ರ ಬದಲಾದ ಒಂದು ಎಲಿಮೆಂಟ್‌ಗೆ ಅನುರೂಪವಾಗಿದೆ.

ಒಂದು ResizeObserverEntry ಆಬ್ಜೆಕ್ಟ್ ಗಾತ್ರ ಬದಲಾವಣೆಯ ಬಗ್ಗೆ ನಿರ್ಣಾಯಕ ಮಾಹಿತಿಯನ್ನು ಒದಗಿಸುತ್ತದೆ:

• target: ಮರುಗಾತ್ರಗೊಂಡಿರುವ DOM ಎಲಿಮೆಂಟ್‌ಗೆ ಒಂದು ಉಲ್ಲೇಖ.
• contentRect: ಒಂದು DOMRectReadOnly ಆಬ್ಜೆಕ್ಟ್, ಇದು ಎಲಿಮೆಂಟ್‌ನ ಕಂಟೆಂಟ್ ಬಾಕ್ಸ್‌ನ (ಪ್ಯಾಡಿಂಗ್ ಮತ್ತು ಬಾರ್ಡರ್‌ನ ಒಳಗಿನ ಪ್ರದೇಶ) ಗಾತ್ರವನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತದೆ. ಸಾಮಾನ್ಯ ಕಂಟೆಂಟ್ ಗಾತ್ರಕ್ಕಾಗಿ ಇದನ್ನು ಹೆಚ್ಚಾಗಿ ಬಳಸಲಾಗುತ್ತದೆ.
• borderBoxSize: ResizeObserverSize ಆಬ್ಜೆಕ್ಟ್‌ಗಳ ಒಂದು ಅರೇ. ಇದು ಪ್ಯಾಡಿಂಗ್ ಮತ್ತು ಬಾರ್ಡರ್ ಸೇರಿದಂತೆ ಎಲಿಮೆಂಟ್‌ನ ಬಾರ್ಡರ್ ಬಾಕ್ಸ್‌ನ ಆಯಾಮಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ. ನಿಮ್ಮ ಲೇಔಟ್ ಲೆಕ್ಕಾಚಾರಗಳಲ್ಲಿ ಇವುಗಳನ್ನು ಗಣನೆಗೆ ತೆಗೆದುಕೊಳ್ಳಬೇಕಾದಾಗ ಉಪಯುಕ್ತ. ಅರೇಯಲ್ಲಿರುವ ಪ್ರತಿಯೊಂದು ಆಬ್ಜೆಕ್ಟ್ inlineSize ಮತ್ತು blockSize ಅನ್ನು ಹೊಂದಿರುತ್ತದೆ.
• contentBoxSize: ResizeObserverSize ಆಬ್ಜೆಕ್ಟ್‌ಗಳ ಒಂದು ಅರೇ, borderBoxSize ಗೆ ಹೋಲುತ್ತದೆ ಆದರೆ ಕಂಟೆಂಟ್ ಬಾಕ್ಸ್ ಅನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತದೆ. ಕಂಟೆಂಟ್ ಆಯಾಮಗಳಿಗಾಗಿ, ವಿಶೇಷವಾಗಿ ಬಹು-ಕಾಲಮ್ ಲೇಔಟ್‌ಗಳಲ್ಲಿ ಅಥವಾ ರೈಟಿಂಗ್ ಮೋಡ್‌ಗಳೊಂದಿಗೆ ವ್ಯವಹರಿಸುವಾಗ, contentRect ಗಿಂತ ಇದನ್ನು ಹೆಚ್ಚು ಆಧುನಿಕ ಮತ್ತು ನಿಖರವೆಂದು ಪರಿಗಣಿಸಲಾಗುತ್ತದೆ.
• devicePixelContentBoxSize: ResizeObserverSize ಆಬ್ಜೆಕ್ಟ್‌ಗಳ ಒಂದು ಅರೇ, ಡಿವೈಸ್ ಪಿಕ್ಸೆಲ್‌ಗಳಲ್ಲಿ ಕಂಟೆಂಟ್ ಬಾಕ್ಸ್ ಆಯಾಮಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ, ಪಿಕ್ಸೆಲ್-ಪರ್ಫೆಕ್ಟ್ ರೆಂಡರಿಂಗ್‌ಗಾಗಿ, ವಿಶೇಷವಾಗಿ ಹೈ-ಡಿಪಿಐ ಸ್ಕ್ರೀನ್‌ಗಳಲ್ಲಿ ಉಪಯುಕ್ತವಾಗಿದೆ.

ಈ ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ಬಳಸುವ ಒಂದು ಉದಾಹರಣೆಯನ್ನು ನೋಡೋಣ:

            const detailedObserver = new ResizeObserver(entries => {
  for (let entry of entries) {
    console.log(`--- Resized Element: ${entry.target.id || entry.target.tagName} ---`);

    // Legacy contentRect (DOMRectReadOnly)
    console.log('ContentRect (legacy):');
    console.log(`  Width: ${entry.contentRect.width}px`);
    console.log(`  Height: ${entry.contentRect.height}px`);
    console.log(`  X: ${entry.contentRect.x}px`);
    console.log(`  Y: ${entry.contentRect.y}px`);

    // Modern contentBoxSize (array of ResizeObserverSize)
    if (entry.contentBoxSize && entry.contentBoxSize.length > 0) {
      const contentBox = entry.contentBoxSize[0];
      console.log('ContentBoxSize (modern):');
      console.log(`  Inline Size (width): ${contentBox.inlineSize}px`);
      console.log(`  Block Size (height): ${contentBox.blockSize}px`);
    }

    // BorderBoxSize (array of ResizeObserverSize)
    if (entry.borderBoxSize && entry.borderBoxSize.length > 0) {
      const borderBox = entry.borderBoxSize[0];
      console.log('BorderBoxSize:');
      console.log(`  Inline Size (width including padding/border): ${borderBox.inlineSize}px`);
      console.log(`  Block Size (height including padding/border): ${borderBox.blockSize}px`);
    }

    // DevicePixelContentBoxSize (array of ResizeObserverSize)
    if (entry.devicePixelContentBoxSize && entry.devicePixelContentBoxSize.length > 0) {
      const devicePixelBox = entry.devicePixelContentBoxSize[0];
      console.log('DevicePixelContentBoxSize:');
      console.log(`  Inline Size (device pixels): ${devicePixelBox.inlineSize}px`);
      console.log(`  Block Size (device pixels): ${devicePixelBox.blockSize}px`);
    }
  }
});

const observeMe = document.getElementById('observeThisDiv');
if (observeMe) {
  detailedObserver.observe(observeMe);
}

            

              
                Copy
              
            
          

contentRect vs. contentBoxSize ಕುರಿತು ಒಂದು ಟಿಪ್ಪಣಿ: contentRect ವ್ಯಾಪಕವಾಗಿ ಬೆಂಬಲಿತ ಮತ್ತು ಅರ್ಥಗರ್ಭಿತವಾಗಿದ್ದರೂ, contentBoxSize ಮತ್ತು borderBoxSize ನಿರ್ದಿಷ್ಟತೆಗೆ ಹೊಸ ಸೇರ್ಪಡೆಗಳಾಗಿವೆ. ಅವುಗಳು ResizeObserverSize ಆಬ್ಜೆಕ್ಟ್‌ಗಳ ಒಂದು ಅರೇಯನ್ನು ಒದಗಿಸುತ್ತವೆ ಏಕೆಂದರೆ ಒಂದು ಎಲಿಮೆಂಟ್ ಬಹು-ಕಾಲಮ್ ಲೇಔಟ್‌ನಲ್ಲಿದ್ದರೆ ಅನೇಕ ಫ್ರಾಗ್ಮೆಂಟ್‌ಗಳನ್ನು ಹೊಂದಿರಬಹುದು. ಒಂದೇ ಫ್ರಾಗ್ಮೆಂಟ್‌ನೊಂದಿಗೆ ಹೆಚ್ಚಿನ ಸಾಮಾನ್ಯ ಸನ್ನಿವೇಶಗಳಿಗಾಗಿ, ನೀವು ಅರೇಯಲ್ಲಿನ ಮೊದಲ ಐಟಂ ಅನ್ನು ಪ್ರವೇಶಿಸುತ್ತೀರಿ (ಉದಾ., entry.contentBoxSize[0].inlineSize).

ರೆಸ್ಪಾನ್ಸಿವ್ ಲೇಔಟ್ ನಿರ್ವಹಣೆಗಾಗಿ ನೈಜ-ಪ್ರಪಂಚದ ಬಳಕೆಯ ಸಂದರ್ಭಗಳು

ResizeObserver ನ ಅನ್ವಯಗಳು ನಂಬಲಾಗದಷ್ಟು ವೈವಿಧ್ಯಮಯವಾಗಿವೆ, ಡೆವಲಪರ್‌ಗಳಿಗೆ ಹೆಚ್ಚು ಹೊಂದಿಕೊಳ್ಳುವ ಮತ್ತು ಸ್ಥಿತಿಸ್ಥಾಪಕ ಬಳಕೆದಾರ ಇಂಟರ್ಫೇಸ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ. ಇಲ್ಲಿ ಕೆಲವು ಆಕರ್ಷಕ ನೈಜ-ಪ್ರಪಂಚದ ಸನ್ನಿವೇಶಗಳಿವೆ:

ಡೈನಾಮಿಕ್ ಚಾರ್ಟಿಂಗ್ ಮತ್ತು ಡೇಟಾ ದೃಶ್ಯೀಕರಣಗಳು

ಚಾರ್ಟಿಂಗ್ ಲೈಬ್ರರಿಗಳು (Chart.js, D3.js, Highcharts, ಇತ್ಯಾದಿ) ತಮ್ಮ ಕಂಟೇನರ್ ಗಾತ್ರ ಬದಲಾದಾಗ ತಮ್ಮ ಸ್ಕೇಲ್‌ಗಳನ್ನು ಪುನಃ ಚಿತ್ರಿಸಬೇಕು ಅಥವಾ ಸರಿಹೊಂದಿಸಬೇಕಾಗುತ್ತದೆ. ಸಾಂಪ್ರದಾಯಿಕವಾಗಿ, ಇದು window.resize ಅನ್ನು ಕೇಳುವುದನ್ನು ಮತ್ತು ನಂತರ ಚಾರ್ಟ್‌ನ ಪೋಷಕ ಬದಲಾಗಿದೆಯೇ ಎಂದು ಹಸ್ತಚಾಲಿತವಾಗಿ ಪರಿಶೀಲಿಸುವುದನ್ನು ಒಳಗೊಂಡಿತ್ತು. ResizeObserver ನೊಂದಿಗೆ, ಚಾರ್ಟ್‌ಗಳು ತಮ್ಮದೇ ಆದ ಕಂಟೇನರ್ ಅನ್ನು ಸರಳವಾಗಿ ವೀಕ್ಷಿಸಬಹುದು ಮತ್ತು ನೇರವಾಗಿ ಪ್ರತಿಕ್ರಿಯಿಸಬಹುದು.

ಉದಾಹರಣೆ: ಗ್ರಿಡ್‌ನಲ್ಲಿ ಜೋಡಿಸಲಾದ ಅನೇಕ ಚಾರ್ಟ್‌ಗಳೊಂದಿಗೆ ಡ್ಯಾಶ್‌ಬೋರ್ಡ್. ಬಳಕೆದಾರರು ಪ್ಯಾನೆಲ್ ಅನ್ನು ಮರುಗಾತ್ರಗೊಳಿಸಿದಾಗ ಅಥವಾ ಲೇಔಟ್ ಅನ್ನು ಬದಲಾಯಿಸಿದಾಗ, ಪ್ರತಿ ಚಾರ್ಟ್ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ತನ್ನ ಹೊಸ ಆಯಾಮಗಳಿಗೆ ಸಂಪೂರ್ಣವಾಗಿ ಹೊಂದಿಕೊಳ್ಳಲು ಪುನಃ ಚಿತ್ರಿಸುತ್ತದೆ, ಯಾವುದೇ ಫ್ಲಿಕರ್ ಅಥವಾ ಹಸ್ತಚಾಲಿತ ಹಸ್ತಕ್ಷೇಪವಿಲ್ಲದೆ.

ಹೊಂದಿಕೊಳ್ಳುವ ಗ್ರಿಡ್ ಸಿಸ್ಟಮ್ಸ್ ಮತ್ತು ಟೇಬಲ್ಸ್

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

ಉದಾಹರಣೆ: ಒಂದು ಇ-ಕಾಮರ್ಸ್ ಉತ್ಪನ್ನ ಪಟ್ಟಿ ಟೇಬಲ್. ಅದರ ಕಂಟೇನರ್ ಕಿರಿದಾದಾಗ, "ಉತ್ಪನ್ನ ID" ಅಥವಾ "ಸ್ಟಾಕ್ ಮಟ್ಟ" ನಂತಹ ನಿರ್ದಿಷ್ಟ ಕಾಲಮ್‌ಗಳನ್ನು ಮರೆಮಾಡಬಹುದು, ಮತ್ತು ಉಳಿದ ಕಾಲಮ್‌ಗಳು ಜಾಗವನ್ನು ತುಂಬಲು ವಿಸ್ತರಿಸಬಹುದು. ಕಂಟೇನರ್ ತುಂಬಾ ಕಿರಿದಾದಾಗ, ಟೇಬಲ್ ಕಾರ್ಡ್-ಆಧಾರಿತ ಲೇಔಟ್‌ಗೆ ಸಹ ರೂಪಾಂತರಗೊಳ್ಳಬಹುದು.

ಕಸ್ಟಮ್ UI ಕಾಂಪೊನೆಂಟ್ಸ್ ಮತ್ತು ವಿಜೆಟ್‌ಗಳು

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

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

ರೆಸ್ಪಾನ್ಸಿವ್ ಟೈಪೋಗ್ರಫಿ ಮತ್ತು ಇಮೇಜ್ ಸ್ಕೇಲಿಂಗ್

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

ಉದಾಹರಣೆ: ಒಂದು ಬ್ಲಾಗ್ ಪೋಸ್ಟ್‌ನ ಮುಖ್ಯ ವಿಷಯ ಪ್ರದೇಶ. ಹೆಡ್ಡಿಂಗ್‌ಗಳು ಮತ್ತು ಪ್ಯಾರಾಗ್ರಾಫ್‌ಗಳ ಫಾಂಟ್ ಗಾತ್ರವು ಸೈಡ್‌ಬಾರ್ ಅಥವಾ ಫೂಟರ್‌ನಿಂದ ಸ್ವತಂತ್ರವಾಗಿ, ವಿಷಯ ಕಾಲಮ್‌ನ ನಿರ್ದಿಷ್ಟ ಅಗಲದೊಳಗೆ ಓದುವಿಕೆಯನ್ನು ಅತ್ಯುತ್ತಮವಾಗಿಸಲು ಸೂಕ್ಷ್ಮವಾಗಿ ಹೆಚ್ಚಾಗಬಹುದು ಅಥವಾ ಕಡಿಮೆಯಾಗಬಹುದು.

ಮೂರನೇ-ಪಕ್ಷದ ಎಂಬೆಡ್‌ಗಳು ಮತ್ತು ಐಫ್ರೇಮ್‌ಗಳು

ಐಫ್ರೇಮ್‌ಗಳನ್ನು ರೆಸ್ಪಾನ್ಸಿವ್ ಮಾಡುವುದು ಕುಖ್ಯಾತವಾಗಿ ಕಷ್ಟ, ವಿಶೇಷವಾಗಿ ಅವುಗಳ ವಿಷಯವು ಅದರ ಅಪೇಕ್ಷಿತ ಎತ್ತರವನ್ನು ಪೋಷಕ ಪುಟಕ್ಕೆ ಸಂವಹನ ಮಾಡಬೇಕಾದಾಗ. postMessage ಅನ್ನು ಬಳಸಬಹುದಾದರೂ, ಅದು ಆಗಾಗ್ಗೆ ತೊಡಕಾಗಿರುತ್ತದೆ. ಐಫ್ರೇಮ್‌ನ ಪೋಷಕ ಐಫ್ರೇಮ್‌ನ ಬಾಹ್ಯ ಗಾತ್ರ ಬದಲಾವಣೆಗಳಿಗೆ ಪ್ರತಿಕ್ರಿಯಿಸಬೇಕಾದ ಸರಳ ಸನ್ನಿವೇಶಗಳಿಗಾಗಿ (ಉದಾ., ಐಫ್ರೇಮ್ ತನ್ನ ಆಂತರಿಕ ವಿಷಯವನ್ನು ಆಧರಿಸಿ ಡೈನಾಮಿಕ್ ಎತ್ತರವನ್ನು ಹೊಂದಿದ್ದರೆ), ResizeObserver ಪೋಷಕ ವ್ರ್ಯಾಪರ್‌ಗೆ ಸೂಚಿಸಬಹುದು.

ಉದಾಹರಣೆ: ಮೂರನೇ-ಪಕ್ಷದ ಫಾರ್ಮ್ ಅಥವಾ ಸಮೀಕ್ಷೆ ಉಪಕರಣವನ್ನು ಎಂಬೆಡ್ ಮಾಡುವುದು. ಫಾರ್ಮ್ ಡೈನಾಮಿಕ್ ಆಗಿ ವಿಭಾಗಗಳನ್ನು ವಿಸ್ತರಿಸಿದರೆ ಅಥವಾ ಕುಗ್ಗಿಸಿದರೆ, ನಿಮ್ಮ ಪುಟದಲ್ಲಿರುವ ಅದರ ಒಳಗೊಂಡಿರುವ <div> ResizeObserver ಮೂಲಕ ಈ ಗಾತ್ರ ಬದಲಾವಣೆಗಳನ್ನು ಕೇಳಬಹುದು ಮತ್ತು ಅದಕ್ಕೆ ಅನುಗುಣವಾಗಿ ತನ್ನದೇ ಆದ ಸ್ಟೈಲಿಂಗ್ ಅಥವಾ ಸ್ಕ್ರಾಲ್ ನಡವಳಿಕೆಯನ್ನು ಸರಿಹೊಂದಿಸಬಹುದು.

ಇಂದು "ಕಂಟೇನರ್ ಕ್ವೆರಿ" ತರಹದ ನಡವಳಿಕೆ

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

ಉದಾಹರಣೆ: ಒಂದು ಉತ್ಪನ್ನ ಕಾರ್ಡ್ ಕಾಂಪೊನೆಂಟ್. ಅದರ ಅಗಲವು 300px ಗಿಂತ ಕಡಿಮೆಯಿದ್ದರೆ, ಅದು ತನ್ನ ಚಿತ್ರ ಮತ್ತು ಪಠ್ಯವನ್ನು ಲಂಬವಾಗಿ ಜೋಡಿಸಬಹುದು. ಅದರ ಅಗಲವು 300px ಮತ್ತು 600px ನಡುವೆ ಇದ್ದರೆ, ಅದು ಅವುಗಳನ್ನು ಅಕ್ಕಪಕ್ಕದಲ್ಲಿ ಇರಿಸಬಹುದು. 600px ಗಿಂತ ಹೆಚ್ಚಿದ್ದರೆ, ಅದು ಹೆಚ್ಚಿನ ವಿವರಗಳನ್ನು ತೋರಿಸಬಹುದು. ResizeObserver ಈ ಷರತ್ತುಬದ್ಧ ಸ್ಟೈಲ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಿಗೆ ಪ್ರಚೋದಕವನ್ನು ಒದಗಿಸುತ್ತದೆ.

ResizeObserver vs. ಇತರೆ DOM ವೀಕ್ಷಣಾ ತಂತ್ರಗಳು

DOM API ಗಳ ಪರಿಸರ ವ್ಯವಸ್ಥೆಯಲ್ಲಿ ResizeObserver ಎಲ್ಲಿ ಹೊಂದಿಕೊಳ್ಳುತ್ತದೆ ಎಂಬುದನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು ನಿರ್ಣಾಯಕ. ಇದು ಇತರ ವೀಕ್ಷಣಾ ತಂತ್ರಗಳನ್ನು ಬದಲಿಸುವುದಕ್ಕಿಂತ ಹೆಚ್ಚಾಗಿ ಪೂರಕವಾಗಿದೆ.

window.resize: ಜಾಗತಿಕ ಲೇಔಟ್‌ಗಳಿಗೆ ಇನ್ನೂ ಪ್ರಸ್ತುತ

ಚರ್ಚಿಸಿದಂತೆ, window.resize ಸಂಪೂರ್ಣ ವ್ಯೂಪೋರ್ಟ್ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರುವ ಬದಲಾವಣೆಗಳಿಗೆ ಉಪಯುಕ್ತವಾಗಿದೆ, ಉದಾಹರಣೆಗೆ ಪ್ರಮುಖ ಲೇಔಟ್ ಬ್ಲಾಕ್‌ಗಳನ್ನು ಮರು-ಜೋಡಿಸುವುದು (ಉದಾ., ಮೊಬೈಲ್‌ನಲ್ಲಿ ಸೈಡ್‌ಬಾರ್ ಅನ್ನು ಕೆಳಭಾಗಕ್ಕೆ ಸರಿಸುವುದು). ಆದಾಗ್ಯೂ, ಇದು ಕಾಂಪೊನೆಂಟ್-ಮಟ್ಟದ ಹೊಂದಾಣಿಕೆಗಳಿಗೆ ಅಸಮರ್ಥ ಮತ್ತು ಸಾಕಾಗುವುದಿಲ್ಲ. ಒಟ್ಟಾರೆ ಬ್ರೌಸರ್ ವಿಂಡೋ ಗಾತ್ರಕ್ಕೆ ಪ್ರತಿಕ್ರಿಯಿಸಬೇಕಾದಾಗ window.resize ಬಳಸಿ; ನಿರ್ದಿಷ್ಟ ಎಲಿಮೆಂಟ್ ಆಯಾಮಗಳಿಗಾಗಿ ResizeObserver ಬಳಸಿ.

MutationObserver: DOM ರಚನೆ ಮತ್ತು ಗುಣಲಕ್ಷಣ ಬದಲಾವಣೆಗಳಿಗಾಗಿ

MutationObserver DOM ಟ್ರೀಗೆ ಆಗುವ ಬದಲಾವಣೆಗಳನ್ನು ವೀಕ್ಷಿಸಲು ವಿನ್ಯಾಸಗೊಳಿಸಲಾಗಿದೆ, ಉದಾಹರಣೆಗೆ ನೋಡ್ ಸೇರ್ಪಡೆಗಳು/ತೆಗೆದುಹಾಕುವಿಕೆಗಳು, ಪಠ್ಯ ವಿಷಯ ಬದಲಾವಣೆಗಳು, ಅಥವಾ ಗುಣಲಕ್ಷಣ ಮಾರ್ಪಾಡುಗಳು. ಇದು ನೇರವಾಗಿ ಎಲಿಮೆಂಟ್ ಗಾತ್ರ ಬದಲಾವಣೆಗಳನ್ನು ವರದಿ ಮಾಡುವುದಿಲ್ಲ. DOM ರಚನೆಯಲ್ಲಿನ ಬದಲಾವಣೆಯು ಪರೋಕ್ಷವಾಗಿ ಒಂದು ಎಲಿಮೆಂಟ್ ಅನ್ನು ಮರುಗಾತ್ರಗೊಳಿಸಲು ಕಾರಣವಾಗಬಹುದಾದರೂ, MutationObserver ನಿಮಗೆ ಹೊಸ ಆಯಾಮಗಳನ್ನು ನೇರವಾಗಿ ಹೇಳುವುದಿಲ್ಲ; ರೂಪಾಂತರದ ನಂತರ ನೀವು ಅವುಗಳನ್ನು ನೀವೇ ಲೆಕ್ಕಾಚಾರ ಮಾಡಬೇಕಾಗುತ್ತದೆ. ಸ್ಪಷ್ಟ ಗಾತ್ರ ಟ್ರ್ಯಾಕಿಂಗ್‌ಗಾಗಿ, ResizeObserver ಸರಿಯಾದ ಸಾಧನವಾಗಿದೆ.

ಪೋಲಿಂಗ್ (setInterval): ಗಾತ್ರ ಟ್ರ್ಯಾಕಿಂಗ್‌ಗಾಗಿ ಒಂದು ಆಂಟಿ-ಪ್ಯಾಟರ್ನ್

ResizeObserver ಗಿಂತ ಮೊದಲು, ಒಂದು ಸಾಮಾನ್ಯ ಆದರೆ ಅಸಮರ್ಥ ವಿಧಾನವೆಂದರೆ setInterval ಬಳಸಿ ಒಂದು ಎಲಿಮೆಂಟ್‌ನ offsetWidth ಅಥವಾ offsetHeight ಅನ್ನು ಪದೇ ಪದೇ ಪರಿಶೀಲಿಸುವುದು. ಇದು ಸಾಮಾನ್ಯವಾಗಿ ಒಂದು ಆಂಟಿ-ಪ್ಯಾಟರ್ನ್ ಏಕೆಂದರೆ:

• ಯಾವುದೇ ಮರುಗಾತ್ರ ಸಂಭವಿಸದಿದ್ದರೂ ಸಹ ಇದು ಅನಗತ್ಯವಾಗಿ CPU ಸೈಕಲ್‌ಗಳನ್ನು ಬಳಸುತ್ತದೆ.
• ಪೋಲಿಂಗ್ ಮಧ್ಯಂತರವು ಒಂದು ರಾಜಿ: ತುಂಬಾ ಆಗಾಗ್ಗೆ, ಮತ್ತು ಇದು ಕಾರ್ಯಕ್ಷಮತೆಯ ಹೊರೆಯಾಗುತ್ತದೆ; ತುಂಬಾ ವಿರಳವಾಗಿ, ಮತ್ತು UI ನಿಧಾನವಾಗಿ ಪ್ರತಿಕ್ರಿಯಿಸುತ್ತದೆ.
• ಇದು ಲೇಔಟ್ ಬದಲಾವಣೆಗಳಿಗಾಗಿ ಬ್ರೌಸರ್‌ನ ಆಪ್ಟಿಮೈಸ್ಡ್ ರೆಂಡರಿಂಗ್ ಪೈಪ್‌ಲೈನ್ ಅನ್ನು ಬಳಸಿಕೊಳ್ಳುವುದಿಲ್ಲ.

ResizeObserver ಘೋಷಣಾತ್ಮಕ, ಕಾರ್ಯಕ್ಷಮತೆಯ, ಮತ್ತು ಬ್ರೌಸರ್-ಆಪ್ಟಿಮೈಸ್ಡ್ ಪರ್ಯಾಯವನ್ನು ನೀಡುತ್ತದೆ.

element.getBoundingClientRect() / element.offsetWidth: ಸ್ಥಿರ ಮಾಪನಗಳು

getBoundingClientRect(), offsetWidth, ಮತ್ತು offsetHeight ನಂತಹ ವಿಧಾನಗಳು ಅವುಗಳನ್ನು ಕರೆದ ಕ್ಷಣದಲ್ಲಿ ಒಂದು ಎಲಿಮೆಂಟ್‌ನ ಗಾತ್ರ ಮತ್ತು ಸ್ಥಾನದ ತಕ್ಷಣದ, ಸ್ಥಿರ ಮಾಪನಗಳನ್ನು ಒದಗಿಸುತ್ತವೆ. ಅವು ಒಂದು-ಬಾರಿಯ ಮಾಪನಗಳಿಗೆ ಉಪಯುಕ್ತವಾಗಿವೆ ಆದರೆ ಯಾವುದೇ ಪ್ರತಿಕ್ರಿಯಾತ್ಮಕತೆಯನ್ನು ನೀಡುವುದಿಲ್ಲ. ಬದಲಾವಣೆಗಳನ್ನು ಪತ್ತೆಹಚ್ಚಲು ನೀವು ಅವುಗಳನ್ನು ಪದೇ ಪದೇ ಕರೆಯಬೇಕಾಗುತ್ತದೆ (ಉದಾ., window.resize ಹ್ಯಾಂಡ್ಲರ್ ಅಥವಾ ಪೋಲಿಂಗ್ ಲೂಪ್‌ನೊಳಗೆ), ಇದು ನಮ್ಮನ್ನು ResizeObserver ಪರಿಹರಿಸುವ ಅಸಮರ್ಥತೆಗಳಿಗೆ ಹಿಂತಿರುಗಿಸುತ್ತದೆ.

ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು ಮತ್ತು ಸುಧಾರಿತ ಪರಿಗಣನೆಗಳು

ಶಕ್ತಿಯುತವಾಗಿದ್ದರೂ, ResizeObserver ಅನ್ನು ಪರಿಣಾಮಕಾರಿಯಾಗಿ ಬಳಸಲು ಅದರ ಸೂಕ್ಷ್ಮ ವ್ಯತ್ಯಾಸಗಳು ಮತ್ತು ಸಂಭಾವ್ಯ ಅಪಾಯಗಳ ತಿಳುವಳಿಕೆ ಅಗತ್ಯ.

ResizeObserverLoopError ಅನ್ನು ತಪ್ಪಿಸುವುದು

ResizeObserver ಅನ್ನು ಮೊದಲ ಬಾರಿಗೆ ಬಳಸುವಾಗ ಒಂದು ಸಾಮಾನ್ಯ ತಪ್ಪೆಂದರೆ, ವೀಕ್ಷಿಸಲಾದ ಎಲಿಮೆಂಟ್‌ನ ಲೇಔಟ್ ಪ್ರಾಪರ್ಟಿಗಳನ್ನು (ಉದಾ., ಅಗಲ, ಎತ್ತರ, ಪ್ಯಾಡಿಂಗ್, ಮಾರ್ಜಿನ್ಸ್) ಅದರದೇ ಕಾಲ್‌ಬ್ಯಾಕ್ ಫಂಕ್ಷನ್‌ನೊಳಗೆ ನೇರವಾಗಿ ಮಾರ್ಪಡಿಸುವುದು. ಇದು ಅನಂತ ಲೂಪ್‌ಗೆ ಕಾರಣವಾಗಬಹುದು: ಒಂದು ಮರುಗಾತ್ರವನ್ನು ಪತ್ತೆಹಚ್ಚಲಾಗುತ್ತದೆ, ಕಾಲ್‌ಬ್ಯಾಕ್ ಎಲಿಮೆಂಟ್‌ನ ಗಾತ್ರವನ್ನು ಮಾರ್ಪಡಿಸುತ್ತದೆ, ಇದು ಮತ್ತೊಂದು ಮರುಗಾತ್ರವನ್ನು ಪ್ರಚೋದಿಸುತ್ತದೆ, ಮತ್ತು ಹೀಗೆ. ಪುಟವು ಪ್ರತಿಕ್ರಿಯಿಸದಂತೆ ತಡೆಯಲು ಬ್ರೌಸರ್ ಅಂತಿಮವಾಗಿ ResizeObserverLoopError ಅನ್ನು ಎಸೆಯುತ್ತದೆ.

ಪರಿಹಾರ: requestAnimationFrame ನೊಂದಿಗೆ ಲೇಔಟ್ ಬದಲಾವಣೆಗಳನ್ನು ಮುಂದೂಡಿ. ವೀಕ್ಷಿಸಲಾದ ಎಲಿಮೆಂಟ್‌ನ ಲೇಔಟ್ ಅನ್ನು ಸುರಕ್ಷಿತವಾಗಿ ಮಾರ್ಪಡಿಸಲು, ಆ ಬದಲಾವಣೆಗಳನ್ನು ಮುಂದಿನ ಅನಿಮೇಷನ್ ಫ್ರೇಮ್‌ಗೆ ಮುಂದೂಡಿ. ಇದು ನೀವು ಹೊಸ ಬದಲಾವಣೆಗಳನ್ನು ಪರಿಚಯಿಸುವ ಮೊದಲು ಪ್ರಸ್ತುತ ಲೇಔಟ್ ಪಾಸ್ ಅನ್ನು ಪೂರ್ಣಗೊಳಿಸಲು ಬ್ರೌಸರ್‌ಗೆ ಅನುಮತಿಸುತ್ತದೆ, ಅದು ಮತ್ತೊಂದು ಮರುಗಾತ್ರವನ್ನು ಪ್ರಚೋದಿಸಬಹುದು.

            const saferObserver = new ResizeObserver(entries => {
  for (let entry of entries) {
    // Ensure we are not directly modifying the observed element's size here
    // If we need to, we must defer it.

    const target = entry.target;
    const newWidth = entry.contentRect.width;

    // Example: If we were adjusting the font size of the target based on its width
    // BAD: target.style.fontSize = `${newWidth / 20}px`; // Could cause a loop

    // GOOD: Defer the style change
    requestAnimationFrame(() => {
      // Only apply changes if the element is still connected to the DOM
      // (important if elements can be removed during an animation frame)
      if (document.body.contains(target)) {
        target.style.fontSize = `${newWidth / 20}px`;
        console.log(`Adjusted font size for ${target.id || target.tagName} to ${target.style.fontSize}.`);
      }
    });
  }
});

const fontResizer = document.getElementById('fontResizerDiv');
if (fontResizer) {
  saferObserver.observe(fontResizer);
}

            

              
                Copy
              
            
          

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

ಕಾರ್ಯಕ್ಷಮತೆಯ ಪರಿಣಾಮಗಳು

ResizeObserver ಅನ್ನು ಹೆಚ್ಚು ಕಾರ್ಯಕ್ಷಮತೆ ಹೊಂದಿರುವಂತೆ ವಿನ್ಯಾಸಗೊಳಿಸಲಾಗಿದೆ. ಬ್ರೌಸರ್ ಮರುಗಾತ್ರ ಅಧಿಸೂಚನೆಗಳನ್ನು ಬ್ಯಾಚ್ ಮಾಡುತ್ತದೆ, ಅಂದರೆ ಅನೇಕ ವೀಕ್ಷಿಸಲಾದ ಎಲಿಮೆಂಟ್‌ಗಳು ಗಾತ್ರ ಬದಲಾದರೂ ಅಥವಾ ಒಂದೇ ಎಲಿಮೆಂಟ್ ಆ ಫ್ರೇಮ್‌ನೊಳಗೆ ಹಲವು ಬಾರಿ ಗಾತ್ರ ಬದಲಾದರೂ ಕಾಲ್‌ಬ್ಯಾಕ್ ಅನ್ನು ಪ್ರತಿ ಫ್ರೇಮ್‌ಗೆ ಒಮ್ಮೆ ಮಾತ್ರ ಆಹ್ವಾನಿಸಲಾಗುತ್ತದೆ. ಈ ಅಂತರ್ನಿರ್ಮಿತ ಥ್ರೊಟ್ಲಿಂಗ್ ಅತಿಯಾದ ಕಾಲ್‌ಬ್ಯಾಕ್ ಕಾರ್ಯಗತಗೊಳಿಸುವಿಕೆಗಳನ್ನು ತಡೆಯುತ್ತದೆ.

ಆದಾಗ್ಯೂ, ನಿಮ್ಮ ಕಾಲ್‌ಬ್ಯಾಕ್‌ನೊಳಗೆ ಮಾಡಿದ ಕೆಲಸದ ಬಗ್ಗೆ ನೀವು ಇನ್ನೂ ಗಮನಹರಿಸಬೇಕು:

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

ಲೆಕ್ಕಾಚಾರದಲ್ಲಿ ದುಬಾರಿಯಾದ ಮತ್ತು ಪ್ರತಿ ಮರುಗಾತ್ರ ಈವೆಂಟ್‌ನಲ್ಲಿ ನಡೆಯಬೇಕಾಗಿಲ್ಲದ ಕ್ರಿಯೆಗಳಿಗಾಗಿ (ಉದಾ., ನೆಟ್‌ವರ್ಕ್ ವಿನಂತಿಗಳು, ಸಂಕೀರ್ಣ ಪುನಃ ಚಿತ್ರಿಸುವಿಕೆಗಳು), ಕಾಲ್‌ಬ್ಯಾಕ್ ಬದಲಿಗೆ ResizeObserver ಕಾಲ್‌ಬ್ಯಾಕ್‌ನಿಂದ ಪ್ರಚೋದಿಸಲ್ಪಟ್ಟ ಕ್ರಿಯೆಗಳನ್ನು ಡಿಬೌನ್ಸ್ ಮಾಡುವುದು ಅಥವಾ ಥ್ರೊಟ್ಲಿಂಗ್ ಮಾಡುವುದನ್ನು ಪರಿಗಣಿಸಿ. ಆದಾಗ್ಯೂ, ಹೆಚ್ಚಿನ UI ನವೀಕರಣಗಳಿಗಾಗಿ, ಅಂತರ್ನಿರ್ಮಿತ ಥ್ರೊಟ್ಲಿಂಗ್ ಸಾಕಾಗುತ್ತದೆ.

ಪ್ರವೇಶಸಾಧ್ಯತೆಯ ಪರಿಗಣನೆಗಳು

ResizeObserver ನೊಂದಿಗೆ ಡೈನಾಮಿಕ್ ಲೇಔಟ್‌ಗಳನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸುವಾಗ, ಪ್ರವೇಶಸಾಧ್ಯತೆಯ ಮೇಲಿನ ಪರಿಣಾಮವನ್ನು ಯಾವಾಗಲೂ ಪರಿಗಣಿಸಿ. ಲೇಔಟ್ ಬದಲಾವಣೆಗಳು ಇವನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ:

• ಊಹಿಸಬಹುದಾದವು: ಬಳಕೆದಾರರ ಪ್ರಾರಂಭವಿಲ್ಲದೆ ಅಥವಾ ಸ್ಪಷ್ಟ ಸಂದರ್ಭವಿಲ್ಲದೆ ವಿಷಯದಲ್ಲಿ ಹಠಾತ್, ಗೊಂದಲಗೊಳಿಸುವ ಬದಲಾವಣೆಗಳನ್ನು ತಪ್ಪಿಸಿ.
• ಓದುವಿಕೆಯನ್ನು ಕಾಪಾಡಿಕೊಳ್ಳಿ: ಕಂಟೇನರ್ ಗಾತ್ರವನ್ನು ಲೆಕ್ಕಿಸದೆ, ಪಠ್ಯವು ಓದಬಲ್ಲದಾಗಿರಬೇಕು ಮತ್ತು ಸಂವಾದಾತ್ಮಕ ಅಂಶಗಳು ಪ್ರವೇಶಿಸಬಹುದಾದಂತಿರಬೇಕು.
• ಕೀಬೋರ್ಡ್ ನ್ಯಾವಿಗೇಷನ್ ಅನ್ನು ಬೆಂಬಲಿಸಿ: ರೆಸ್ಪಾನ್ಸಿವ್ ಬದಲಾವಣೆಗಳು ಕೀಬೋರ್ಡ್ ಫೋಕಸ್ ಆರ್ಡರ್ ಅನ್ನು ಮುರಿಯಬಾರದು ಅಥವಾ ಎಲಿಮೆಂಟ್‌ಗಳನ್ನು ತಲುಪದಂತೆ ಮಾಡಬಾರದು.
• ಪರ್ಯಾಯಗಳನ್ನು ಒದಗಿಸಿ: ನಿರ್ಣಾಯಕ ಮಾಹಿತಿ ಅಥವಾ ಕಾರ್ಯಕ್ಕಾಗಿ, ಡೈನಾಮಿಕ್ ಮರುಗಾತ್ರವು ಅದನ್ನು ಮರೆಮಾಡಲು ಅಥವಾ ಕಡಿಮೆ ಪ್ರಾಮುಖ್ಯತೆಯನ್ನು ನೀಡಲು ಕಾರಣವಾದರೆ ಅದನ್ನು ಪ್ರವೇಶಿಸಲು ಪರ್ಯಾಯ ಮಾರ್ಗಗಳಿವೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ.

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

ResizeObserver Chrome, Firefox, Edge, Safari, ಮತ್ತು Opera ಸೇರಿದಂತೆ ಎಲ್ಲಾ ಆಧುನಿಕ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ಅತ್ಯುತ್ತಮ ಬ್ರೌಸರ್ ಬೆಂಬಲವನ್ನು ಹೊಂದಿದೆ. ಇದು ಸಮಕಾಲೀನ ವೆಬ್ ಅಭಿವೃದ್ಧಿಗೆ ವಿಶ್ವಾಸಾರ್ಹ ಆಯ್ಕೆಯಾಗಿದೆ.

ಹಳೆಯ ಬ್ರೌಸರ್‌ಗಳೊಂದಿಗೆ (ಉದಾ., Internet Explorer) ಹೊಂದಾಣಿಕೆ ಅಗತ್ಯವಿರುವ ಯೋಜನೆಗಳಿಗಾಗಿ, ಪಾಲಿಫಿಲ್ ಅನ್ನು ಬಳಸಬಹುದು. resize-observer-polyfill ನಂತಹ ಲೈಬ್ರರಿಗಳು ಅಗತ್ಯ ಕಾರ್ಯವನ್ನು ಒದಗಿಸಬಹುದು, ವ್ಯಾಪಕ ಶ್ರೇಣಿಯ ಪರಿಸರಗಳಲ್ಲಿ API ಅನ್ನು ಸ್ಥಿರವಾಗಿ ಬಳಸಲು ನಿಮಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ.

ನೀವು Can I use... ResizeObserver ನಲ್ಲಿ ಇತ್ತೀಚಿನ ಹೊಂದಾಣಿಕೆ ಸ್ಥಿತಿಯನ್ನು ಪರಿಶೀಲಿಸಬಹುದು.

CSS ಲೇಔಟ್‌ಗಳೊಂದಿಗೆ ಕೆಲಸ ಮಾಡುವುದು (Flexbox, Grid, calc())

ResizeObserver Flexbox ಮತ್ತು Grid ನಂತಹ ಆಧುನಿಕ CSS ಲೇಔಟ್ ತಂತ್ರಗಳೊಂದಿಗೆ ಮನಬಂದಂತೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ. ಒಂದು ಎಲಿಮೆಂಟ್‌ನ ಗಾತ್ರವು ಅದರ ಪೋಷಕನ ಫ್ಲೆಕ್ಸ್ ಅಥವಾ ಗ್ರಿಡ್ ಲೇಔಟ್ ನಿಯಮಗಳಿಂದ ಬದಲಾದಾಗ, ResizeObserver ತನ್ನ ಕಾಲ್‌ಬ್ಯಾಕ್ ಅನ್ನು ಸರಿಯಾಗಿ ಪ್ರಚೋದಿಸುತ್ತದೆ. ಈ ಏಕೀಕರಣವು ಶಕ್ತಿಯುತವಾಗಿದೆ:

• CSS ಪ್ರಾಥಮಿಕ ಲೇಔಟ್ ತರ್ಕವನ್ನು ನಿರ್ವಹಿಸುತ್ತದೆ (ಉದಾ., ಐಟಂಗಳು ಜಾಗವನ್ನು ವಿತರಿಸುವುದು).
• ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ (ResizeObserver ಮೂಲಕ) CSS ಮಾತ್ರ ನಿರ್ವಹಿಸಲಾಗದ ಯಾವುದೇ ದ್ವಿತೀಯ, ವಿಷಯ-ನಿರ್ದಿಷ್ಟ ಹೊಂದಾಣಿಕೆಗಳನ್ನು ನಿರ್ವಹಿಸುತ್ತದೆ (ಉದಾ., ಚಾರ್ಟ್ ಅನ್ನು ಪುನಃ ಚಿತ್ರಿಸುವುದು, ಕಸ್ಟಮ್ ಸ್ಕ್ರಾಲ್‌ಬಾರ್ ಟ್ರ್ಯಾಕ್ ಗಾತ್ರಗಳನ್ನು ಡೈನಾಮಿಕ್ ಆಗಿ ಸರಿಹೊಂದಿಸುವುದು).

ಅದೇ ರೀತಿ, calc() ನಂತಹ CSS ಫಂಕ್ಷನ್‌ಗಳು ಅಥವಾ ಸಾಪೇಕ್ಷ ಘಟಕಗಳನ್ನು (em, rem, vw, vh, %) ಬಳಸಿ ಗಾತ್ರಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲಾದ ಎಲಿಮೆಂಟ್‌ಗಳು ಸಹ ಅವುಗಳ ಗಣಿಸಿದ ಪಿಕ್ಸೆಲ್ ಆಯಾಮಗಳು ಬದಲಾದಾಗ ResizeObserver ಅನ್ನು ಪ್ರಚೋದಿಸುತ್ತವೆ. ಇದು API ಯು ಎಲಿಮೆಂಟ್‌ನ ರೆಂಡರ್ ಮಾಡಿದ ಗಾತ್ರದ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರುವ ಯಾವುದೇ ಯಾಂತ್ರಿಕತೆಗೆ ವಾಸ್ತವಿಕವಾಗಿ ಪ್ರತಿಕ್ರಿಯಾತ್ಮಕವಾಗಿದೆ ಎಂದು ಖಚಿತಪಡಿಸುತ್ತದೆ.

ಹಂತ-ಹಂತದ ಉದಾಹರಣೆ: ಸ್ವಯಂ-ಮರುಗಾತ್ರಗೊಳ್ಳುವ ಪಠ್ಯ ಪ್ರದೇಶವನ್ನು ರಚಿಸುವುದು

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

ಹೆಚ್ಚು ವಿಷಯವನ್ನು ಟೈಪ್ ಮಾಡಿದಂತೆ ಲಂಬವಾಗಿ ವಿಸ್ತರಿಸುವ <textarea> ಅನ್ನು ರಚಿಸುವುದು ಗುರಿಯಾಗಿದೆ, ಆದರೆ ಕಂಟೇನರ್ ಸ್ವತಃ ಗಾತ್ರ ಬದಲಾದರೆ ಅದರ ಒಳಗೊಂಡಿರುವ <div> ಅದರ ಗರಿಷ್ಠ ಲಭ್ಯವಿರುವ ಎತ್ತರದ ಮೇಲೆ ಪ್ರಭಾವ ಬೀರಬಹುದು ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳುವುದು.

HTML ರಚನೆ

ನಾವು ಪೋಷಕ ಕಂಟೇನರ್ ಮತ್ತು ಒಳಗೆ ಒಂದು ಟೆಕ್ಸ್ಟ್ಏರಿಯಾದೊಂದಿಗೆ ಸರಳ HTML ರಚನೆಯನ್ನು ಸ್ಥಾಪಿಸುತ್ತೇವೆ.

            <div class="container" id="textContainer">
  <h3>Resizable Content Area</h3>
  <p>Type here and watch the text area adjust.</p>
  <textarea id="autoResizeTextarea" placeholder="Start typing..."></textarea>
  <div class="resize-handle"></div>
</div>

            

              
                Copy
              
            
          

CSS ಸ್ಟೈಲಿಂಗ್

ಇದನ್ನು ದೃಷ್ಟಿಗೋಚರವಾಗಿ ಸ್ಪಷ್ಟಪಡಿಸಲು ಮತ್ತು ಕಂಟೇನರ್ ಅನ್ನು ಹಸ್ತಚಾಲಿತವಾಗಿ ಮರುಗಾತ್ರಗೊಳಿಸಲು ಅನುಮತಿಸಲು (ಪ್ರದರ್ಶನಕ್ಕಾಗಿ) ಸ್ವಲ್ಪ CSS.

            .container {
  width: 100%;
  max-width: 600px;
  min-width: 300px;
  min-height: 200px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  padding: 15px;
  margin: 20px auto;
  position: relative;
  /* Allow manual resizing for demo purposes */
  resize: both;
  overflow: auto;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  border-radius: 8px;
}

.container h3 {
  color: #333;
  margin-top: 0;
  margin-bottom: 10px;
}

.container p {
  color: #666;
  font-size: 0.9em;
  margin-bottom: 15px;
}

#autoResizeTextarea {
  width: 100%;
  min-height: 50px;
  box-sizing: border-box; /* Include padding/border in width/height */
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1em;
  line-height: 1.5;
  font-family: sans-serif;
  overflow-y: hidden; /* Hide scrollbar, we'll manage height */
  resize: none; /* Disable default textarea resize handle */
}

            

              
                Copy
              
            
          

ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅನುಷ್ಠಾನ

ಈಗ, ಟೆಕ್ಸ್ಟ್ಏರಿಯಾವನ್ನು ಡೈನಾಮಿಕ್ ಆಗಿ ಮರುಗಾತ್ರಗೊಳಿಸಲು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ಸೇರಿಸೋಣ.

            document.addEventListener('DOMContentLoaded', () => {
  const textarea = document.getElementById('autoResizeTextarea');
  const container = document.getElementById('textContainer');

  if (!textarea || !container) {
    console.error('Required elements not found. Check HTML IDs.');
    return;
  }

  // Function to adjust textarea height based on content
  const adjustTextareaHeight = () => {
    // Reset height to calculate scroll height accurately
    textarea.style.height = 'auto';
    // Set height to scrollHeight, ensuring it fits content
    textarea.style.height = `${textarea.scrollHeight}px`;

    // OPTIONAL: Constrain textarea height to its parent container's content height
    // This prevents the textarea from growing beyond the visible container area.
    const containerContentHeight = container.clientHeight - 
                                  (parseFloat(getComputedStyle(container).paddingTop) || 0) - 
                                  (parseFloat(getComputedStyle(container).paddingBottom) || 0);

    const currentTextareaHeight = textarea.scrollHeight;
    const spaceAboveTextarea = textarea.offsetTop - container.offsetTop;
    const maxHeightAllowed = containerContentHeight - spaceAboveTextarea;

    if (currentTextareaHeight > maxHeightAllowed && maxHeightAllowed > 0) {
      textarea.style.height = `${maxHeightAllowed}px`;
      textarea.style.overflowY = 'auto'; // Re-enable scroll if constrained
    } else {
      textarea.style.overflowY = 'hidden'; // Hide scroll if content fits
    }
  };

  // 1. Listen for input events on the textarea to adjust height as user types
  textarea.addEventListener('input', adjustTextareaHeight);

  // 2. Use ResizeObserver to react to the container's size changes
  const containerResizeObserver = new ResizeObserver(entries => {
    for (let entry of entries) {
      if (entry.target === container) {
        console.log(`Container resized to: ${entry.contentRect.width}px x ${entry.contentRect.height}px`);
        // When the container resizes, we need to re-evaluate the textarea's height
        // especially if it was constrained by the parent's height.
        // Defer this to avoid ResizeObserverLoopError if container's children affect its size.
        requestAnimationFrame(() => {
           if (document.body.contains(container)) {
              adjustTextareaHeight();
           }
        });
      }
    }
  });

  // Start observing the container
  containerResizeObserver.observe(container);

  // Initial adjustment when the page loads
  adjustTextareaHeight();
});

            

              
                Copy
              
            
          

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ:

• ನಾವು ಬಳಕೆದಾರರು ಟೈಪ್ ಮಾಡಿದಾಗ ಅದರ scrollHeight ಅನ್ನು ಆಧರಿಸಿ ತನ್ನ ಎತ್ತರವನ್ನು ವಿಸ್ತರಿಸುವ textarea ಅನ್ನು ಹೊಂದಿದ್ದೇವೆ.
• ಒಂದು ResizeObserver ಅನ್ನು ಪೋಷಕ ಕಂಟೇನರ್ (#textContainer) ಗೆ ಲಗತ್ತಿಸಲಾಗಿದೆ.
• ಕಂಟೇನರ್ ಅನ್ನು ಹಸ್ತಚಾಲಿತವಾಗಿ ಮರುಗಾತ್ರಗೊಳಿಸಿದಾಗ (CSS resize: both; ಪ್ರಾಪರ್ಟಿ ಬಳಸಿ), ಅಬ್ಸರ್ವರ್‌ನ ಕಾಲ್‌ಬ್ಯಾಕ್ ಪ್ರಚೋದಿಸುತ್ತದೆ.
• ಕಾಲ್‌ಬ್ಯಾಕ್‌ನೊಳಗೆ, ನಾವು adjustTextareaHeight() ಅನ್ನು ಪುನಃ ಚಲಾಯಿಸುತ್ತೇವೆ. ಇದು ಕಂಟೇನರ್ ಕುಗ್ಗಿದರೆ, ಟೆಕ್ಸ್ಟ್ಏರಿಯಾದ ಎತ್ತರದ ನಿರ್ಬಂಧವನ್ನು ಮರು-ಮೌಲ್ಯಮಾಪನ ಮಾಡಲಾಗಿದೆಯೆ ಎಂದು ಖಚಿತಪಡಿಸುತ್ತದೆ, ವಿಷಯವು ಇನ್ನು ಮುಂದೆ ಹೊಂದಿಕೊಳ್ಳದಿದ್ದರೆ ಅದರ ಸ್ಕ್ರಾಲ್‌ಬಾರ್ ಅನ್ನು ಸಂಭಾವ್ಯವಾಗಿ ಸಕ್ರಿಯಗೊಳಿಸುತ್ತದೆ.
• ವಿಶೇಷವಾಗಿ ಟೆಕ್ಸ್ಟ್ಏರಿಯಾದ ಗಾತ್ರವು ಹೆಚ್ಚು ಸಂಕೀರ್ಣ ಲೇಔಟ್‌ನಲ್ಲಿ ಕಂಟೇನರ್‌ನ ಗಾತ್ರದ ಮೇಲೆ ಹೇಗಾದರೂ ಪ್ರಭಾವ ಬೀರಿದರೆ, ಸಂಭಾವ್ಯ ResizeObserverLoopError ಅನ್ನು ತಡೆಯಲು ಅಬ್ಸರ್ವರ್ ಕಾಲ್‌ಬ್ಯಾಕ್‌ನೊಳಗೆ adjustTextareaHeight() ಕರೆಗಾಗಿ ನಾವು requestAnimationFrame ಅನ್ನು ಬಳಸುತ್ತೇವೆ.

ಇದು ResizeObserver ಹೇಗೆ ಒಂದು ಕಾಂಪೊನೆಂಟ್ (ಟೆಕ್ಸ್ಟ್ಏರಿಯಾ) ಅನ್ನು ತನ್ನದೇ ಆದ ವಿಷಯಕ್ಕೆ ಮಾತ್ರವಲ್ಲದೆ, ಅದರ ಪೋಷಕರಿಂದ ಒದಗಿಸಲಾದ ಡೈನಾಮಿಕ್ ಜಾಗಕ್ಕೂ ನಿಜವಾಗಿಯೂ ರೆಸ್ಪಾನ್ಸಿವ್ ಆಗಲು ಹೇಗೆ ಸಕ್ರಿಯಗೊಳಿಸುತ್ತದೆ ಎಂಬುದನ್ನು ಪ್ರದರ್ಶಿಸುತ್ತದೆ, ಇದು ಒಂದು ದ್ರವ ಮತ್ತು ಬಳಕೆದಾರ-ಸ್ನೇಹಿ ಅನುಭವವನ್ನು ಸೃಷ್ಟಿಸುತ್ತದೆ.

ಭವಿಷ್ಯ: ResizeObserver ಮತ್ತು ನೇಟಿವ್ ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳು

ನೇಟಿವ್ CSS ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳ (ಉದಾ., @container ನಿಯಮಗಳು) ಆಗಮನದೊಂದಿಗೆ, ಇದು ವ್ಯಾಪಕ ಬ್ರೌಸರ್ ಬೆಂಬಲವನ್ನು ಪಡೆಯುತ್ತಿದೆ, ಒಂದು ಸಾಮಾನ್ಯ ಪ್ರಶ್ನೆ ಉದ್ಭವಿಸುತ್ತದೆ: ResizeObserver ಗೆ ಇನ್ನೂ ಪಾತ್ರವಿದೆಯೇ?

ಉತ್ತರವು ಒಂದು ಸ್ಪಷ್ಟವಾದ ಹೌದು.

• ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳು: ಪ್ರಾಥಮಿಕವಾಗಿ ಪೋಷಕ ಕಂಟೇನರ್‌ನ ಗಾತ್ರವನ್ನು ಆಧರಿಸಿ CSS-ಚಾಲಿತ ಸ್ಟೈಲಿಂಗ್ ಮೇಲೆ ಕೇಂದ್ರೀಕರಿಸುತ್ತವೆ. ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಇಲ್ಲದೆ ನೇರವಾಗಿ CSS ನಿಯಮಗಳೊಳಗೆ ಸ್ಟೈಲ್‌ಗಳನ್ನು (display, font-size, grid-template-columns ಬದಲಾಯಿಸುವಂತಹ) ಅನ್ವಯಿಸಲು ಅವು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತವೆ. ಇದು ಸಂಪೂರ್ಣವಾಗಿ ಪ್ರಸ್ತುತಿ ಮತ್ತು ಲೇಔಟ್-ಸಂಬಂಧಿತ ರೆಸ್ಪಾನ್ಸಿವ್‌ನೆಸ್‌ಗೆ ಸೂಕ್ತವಾಗಿದೆ.
• ResizeObserver: ಗಾತ್ರ ಬದಲಾವಣೆಗಳಿಗೆ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಪ್ರತಿಕ್ರಿಯಿಸಬೇಕಾದಾಗ ಇದು ಉತ್ತಮವಾಗಿದೆ. ಇದು ಒಳಗೊಂಡಿದೆ:
• ಪ್ರೋಗ್ರಾಮ್ಯಾಟಿಕ್ ಆಗಿ ಕ್ಯಾನ್ವಾಸ್ ಅನ್ನು ಪುನಃ ಚಿತ್ರಿಸುವುದು (ಉದಾ., ಚಾರ್ಟ್‌ಗಳು, ಆಟಗಳು).
• ಸಂಕೀರ್ಣ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್-ಚಾಲಿತ UI ತರ್ಕವನ್ನು ಸರಿಹೊಂದಿಸುವುದು (ಉದಾ., ಮೂರನೇ-ಪಕ್ಷದ ಲೈಬ್ರರಿಯನ್ನು ಮರು-ಪ್ರಾರಂಭಿಸುವುದು, ಡ್ರ್ಯಾಗ್ ಮಾಡಬಹುದಾದ ಎಲಿಮೆಂಟ್‌ಗಳಿಗೆ ಹೊಸ ಸ್ಥಾನಗಳನ್ನು ಲೆಕ್ಕಾಚಾರ ಮಾಡುವುದು).
• ಗಾತ್ರವನ್ನು ಆಧರಿಸಿ ಇತರ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ API ಗಳೊಂದಿಗೆ ಸಂವಹನ ಮಾಡುವುದು (ಉದಾ., ವಿಭಿನ್ನ ಇಮೇಜ್ ಗಾತ್ರಗಳನ್ನು ಡೈನಾಮಿಕ್ ಆಗಿ ಲೋಡ್ ಮಾಡುವುದು, ವೀಡಿಯೊ ಪ್ಲೇಬ್ಯಾಕ್ ಅನ್ನು ನಿಯಂತ್ರಿಸುವುದು).
• CSS ಮಾತ್ರ ಒದಗಿಸಲು ಅಥವಾ ಸಮರ್ಥವಾಗಿ ನಿರ್ವಹಿಸಲು ಸಾಧ್ಯವಾಗದ ಲೆಕ್ಕಾಚಾರಗಳಿಗೆ ನಿಮಗೆ ನಿಖರವಾದ ಪಿಕ್ಸೆಲ್ ಆಯಾಮಗಳು ಬೇಕಾದಾಗ.

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

ತೀರ್ಮಾನ

ResizeObserver API ಯು ನಿಜವಾದ ಡೈನಾಮಿಕ್ ಮತ್ತು ರೆಸ್ಪಾನ್ಸಿವ್ ಬಳಕೆದಾರ ಇಂಟರ್ಫೇಸ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಲು ಶ್ರಮಿಸುತ್ತಿರುವ ಆಧುನಿಕ ವೆಬ್ ಡೆವಲಪರ್‌ಗಳಿಗೆ ಒಂದು ಅನಿವಾರ್ಯ ಸಾಧನವಾಗಿದೆ. ಯಾವುದೇ DOM ಎಲಿಮೆಂಟ್‌ನ ಗಾತ್ರ ಬದಲಾವಣೆಗಳನ್ನು ವೀಕ್ಷಿಸಲು ಒಂದು ಸಮರ್ಥ, ಈವೆಂಟ್-ಚಾಲಿತ ಯಾಂತ್ರಿಕತೆಯನ್ನು ಒದಗಿಸುವ ಮೂಲಕ, ಇದು ನಮ್ಮನ್ನು ವ್ಯೂಪೋರ್ಟ್-ಕೇಂದ್ರಿತ ರೆಸ್ಪಾನ್ಸಿವ್‌ನೆಸ್‌ನ ಮಿತಿಗಳನ್ನು ಮೀರಿ ಮತ್ತು ದೃಢವಾದ, ಕಾಂಪೊನೆಂಟ್-ಮಟ್ಟದ ಹೊಂದಾಣಿಕೆಯ ಕ್ಷೇತ್ರಕ್ಕೆ ಸಾಗಿಸುತ್ತದೆ.

ಡೇಟಾ ದೃಶ್ಯೀಕರಣಗಳನ್ನು ತಮ್ಮ ಕಂಟೇನರ್‌ಗಳಿಗೆ ಮನಬಂದಂತೆ ಸರಿಹೊಂದಿಸುವುದರಿಂದ ಹಿಡಿದು ಸ್ವಯಂ-ಅರಿವಿನ UI ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ಸಕ್ರಿಯಗೊಳಿಸುವವರೆಗೆ, ResizeObserver ನಿಮಗೆ ಹೆಚ್ಚು ಸ್ಥಿತಿಸ್ಥಾಪಕ, ಕಾರ್ಯಕ್ಷಮತೆಯ, ಮತ್ತು ಬಳಕೆದಾರ-ಸ್ನೇಹಿ ವೆಬ್ ಅನುಭವಗಳನ್ನು ರಚಿಸಲು ಅಧಿಕಾರ ನೀಡುತ್ತದೆ. ನಿಮ್ಮ ಫ್ರಂಟ್-ಎಂಡ್ ಅಭಿವೃದ್ಧಿಯನ್ನು ಉನ್ನತೀಕರಿಸಲು, ಪ್ರತಿ ಸಂದರ್ಭಕ್ಕೂ ಆಕರ್ಷಕವಾಗಿ ಹೊಂದಿಕೊಳ್ಳುವ ಲೇಔಟ್‌ಗಳನ್ನು ರಚಿಸಲು, ಮತ್ತು ಜಾಗತಿಕ ಪ್ರೇಕ್ಷಕರಿಗೆ ಅಸಾಧಾರಣ ಡಿಜಿಟಲ್ ಉತ್ಪನ್ನಗಳನ್ನು ತಲುಪಿಸಲು ಈ ಶಕ್ತಿಯುತ API ಅನ್ನು ಅಳವಡಿಸಿಕೊಳ್ಳಿ.

ಇಂದೇ ನಿಮ್ಮ ಯೋಜನೆಗಳಲ್ಲಿ ResizeObserver ಅನ್ನು ಸಂಯೋಜಿಸಲು ಪ್ರಾರಂಭಿಸಿ ಮತ್ತು ನಿಮ್ಮ ರೆಸ್ಪಾನ್ಸಿವ್ ವೆಬ್ ವಿನ್ಯಾಸಗಳ ಮೇಲೆ ಹೊಸ ಮಟ್ಟದ ನಿಯಂತ್ರಣವನ್ನು ಅನ್ಲಾಕ್ ಮಾಡಿ!