ಅಬ್ಸೊಲ್ಯೂಟ್ ಅನ್ನು ಮೀರಿ: CSS @position-try ಮತ್ತು ಆಂಕರ್ ಪೊಸಿಷನಿಂಗ್ ಕುರಿತು ಆಳವಾದ ನೋಟ

ದಶಕಗಳಿಂದ, ವೆಬ್ ಡೆವಲಪರ್‌ಗಳು ಒಂದು ಸಾಮಾನ್ಯ UI ಸವಾಲುಗಳೊಂದಿಗೆ ಹೋರಾಡುತ್ತಿದ್ದಾರೆ: ಟೂಲ್‌ಟಿಪ್‌ಗಳು, ಪಾಪ್‌ಓವರ್‌ಗಳು, ಕಾಂಟೆಕ್ಸ್ಟ್ ಮೆನುಗಳು, ಮತ್ತು ಇತರ ಫ್ಲೋಟಿಂಗ್ ಎಲಿಮೆಂಟ್‌ಗಳನ್ನು ರಚಿಸುವುದು, ಅವುಗಳು ತಮ್ಮನ್ನು ತಾವು ಒಂದು ಟ್ರಿಗರ್‌ಗೆ ಸಂಬಂಧಿಸಿದಂತೆ ಬುದ್ಧಿವಂತಿಕೆಯಿಂದ ಪೊಸಿಷನ್ ಮಾಡಿಕೊಳ್ಳುತ್ತವೆ. ಸಾಂಪ್ರದಾಯಿಕ ವಿಧಾನವು ಯಾವಾಗಲೂ CSS `position: absolute` ಮತ್ತು ಪೊಸಿಷನ್‌ಗಳನ್ನು ಲೆಕ್ಕಾಚಾರ ಮಾಡಲು, ವ್ಯೂಪೋರ್ಟ್ ಕೊಲಿಷನ್‌ಗಳನ್ನು ಪತ್ತೆಹಚ್ಚಲು, ಮತ್ತು ಎಲಿಮೆಂಟ್‌ನ ಸ್ಥಾನವನ್ನು ತಕ್ಷಣ ಬದಲಾಯಿಸಲು ಹೆಚ್ಚಿನ ಪ್ರಮಾಣದ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ನ ಸೂಕ್ಷ್ಮ ಸಂಯೋಜನೆಯನ್ನು ಒಳಗೊಂಡಿರುತ್ತದೆ.

ಈ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್-ಭರಿತ ಪರಿಹಾರವು ಪರಿಣಾಮಕಾರಿಯಾಗಿದ್ದರೂ, ಅದರದೇ ಆದ ಸಮಸ್ಯೆಗಳನ್ನು ಹೊಂದಿದೆ: ಕಾರ್ಯಕ್ಷಮತೆಯ ಹೊರೆ, ನಿರ್ವಹಣೆಯ ಸಂಕೀರ್ಣತೆ, ಮತ್ತು ತರ್ಕವನ್ನು ದೃಢವಾಗಿಡಲು ನಿರಂತರ ಹೋರಾಟ. Popper.js ನಂತಹ ಲೈಬ್ರರಿಗಳು ಉದ್ಯಮದ ಗುಣಮಟ್ಟವಾದವು ಏಕೆಂದರೆ ಈ ಸಮಸ್ಯೆಯನ್ನು ನೇರವಾಗಿ ಪರಿಹರಿಸುವುದು ತುಂಬಾ ಕಷ್ಟಕರವಾಗಿತ್ತು. ಆದರೆ ನಾವು ಈ ಸಂಕೀರ್ಣ ಪೊಸಿಷನಿಂಗ್ ತಂತ್ರಗಳನ್ನು ನೇರವಾಗಿ CSS ನಲ್ಲಿಯೇ ಘೋಷಿಸగలిದರೆ ಹೇಗಿರುತ್ತದೆ?

ಇಲ್ಲಿ ಬರುತ್ತದೆ CSS ಆಂಕರ್ ಪೊಸಿಷನಿಂಗ್ API, ಇದು ನಾವು ಈ ಸನ್ನಿವೇಶಗಳನ್ನು ನಿಭಾಯಿಸುವ ವಿಧಾನವನ್ನು ಕ್ರಾಂತಿಗೊಳಿಸಲಿದೆ. ಇದರ ತಿರುಳಿನಲ್ಲಿ ಎರಡು ಶಕ್ತಿಯುತ ಪರಿಕಲ್ಪನೆಗಳಿವೆ: ಒಂದು ಎಲಿಮೆಂಟ್‌ಅನ್ನು ಇನ್ನೊಂದಕ್ಕೆ "ಆಂಕರ್" ಮಾಡುವ ಸಾಮರ್ಥ್ಯ, ಅವುಗಳ DOM ಸಂಬಂಧವನ್ನು ಲೆಕ್ಕಿಸದೆ, ಮತ್ತು @position-try ನೊಂದಿಗೆ ವ್ಯಾಖ್ಯಾನಿಸಲಾದ ಫಾಲ್‌ಬ್ಯಾಕ್ ನಿಯಮಗಳ ಒಂದು ಸೆಟ್. ಈ ಲೇಖನವು CSS ನ ಈ ಹೊಸ ಕ್ಷೇತ್ರದಲ್ಲಿ ಸಮಗ್ರವಾದ ಪರಿಶೋಧನೆಯನ್ನು ಒದಗಿಸುತ್ತದೆ, ಹೆಚ್ಚು ಸ್ಥಿತಿಸ್ಥಾಪಕ, ಕಾರ್ಯಕ್ಷಮತೆಯುಳ್ಳ, ಮತ್ತು ಡಿಕ್ಲರೇಟಿವ್ UI ಗಳನ್ನು ನಿರ್ಮಿಸಲು ನಿಮಗೆ ಅಧಿಕಾರ ನೀಡುತ್ತದೆ.

ಸಾಂಪ್ರದಾಯಿಕ ಪೊಸಿಷನಿಂಗ್‌ನೊಂದಿಗೆ ಇರುವ ನಿರಂತರ ಸಮಸ್ಯೆ

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

ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ನ ಊರುಗೋಲು

ಒಂದು ಬಟನ್ ಮೇಲೆ ಕಾಣಿಸಿಕೊಳ್ಳಬೇಕಾದ ಸರಳ ಟೂಲ್‌ಟಿಪ್ ಅನ್ನು ಪರಿಗಣಿಸಿ. `position: absolute` ಬಳಸಿ, ನೀವು ಅದನ್ನು ಸರಿಯಾಗಿ ಇರಿಸಬಹುದು. ಆದರೆ ಆ ಬಟನ್ ಬ್ರೌಸರ್ ವಿಂಡೋದ ಮೇಲಿನ ತುದಿಗೆ ಹತ್ತಿರದಲ್ಲಿದ್ದರೆ ಏನಾಗುತ್ತದೆ? ಟೂಲ್‌ಟಿಪ್ ಕತ್ತರಿಸಿಹೋಗುತ್ತದೆ. ಅಥವಾ ಬಲ ತುದಿಗೆ ಹತ್ತಿರದಲ್ಲಿದ್ದರೆ? ಟೂಲ್‌ಟಿಪ್ ಹೊರಚೆಲ್ಲಿ ಸಮತಲವಾದ ಸ್ಕ್ರಾಲ್‌ಬಾರ್ ಅನ್ನು ಪ್ರಚೋದಿಸುತ್ತದೆ.

ಇದನ್ನು ಪರಿಹರಿಸಲು, ಡೆವಲಪರ್‌ಗಳು ಐತಿಹಾಸಿಕವಾಗಿ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ಅವಲಂಬಿಸಿದ್ದಾರೆ:

• `getBoundingClientRect()` ಬಳಸಿ ಆಂಕರ್ ಎಲಿಮೆಂಟ್‌ನ ಪೊಸಿಷನ್ ಮತ್ತು ಅಳತೆಗಳನ್ನು ಪಡೆಯಿರಿ.
• ಟೂಲ್‌ಟಿಪ್‌ನ ಅಳತೆಗಳನ್ನು ಪಡೆಯಿರಿ.
• ವ್ಯೂಪೋರ್ಟ್‌ನ ಅಳತೆಗಳನ್ನು ಪಡೆಯಿರಿ (`window.innerWidth`, `window.innerHeight`).
• ಆದರ್ಶ `top` ಮತ್ತು `left` ಮೌಲ್ಯಗಳನ್ನು ನಿರ್ಧರಿಸಲು ಲೆಕ್ಕಾಚಾರಗಳ ಸರಣಿಯನ್ನು ನಿರ್ವಹಿಸಿ.
• ಈ ಆದರ್ಶ ಪೊಸಿಷನ್ ವ್ಯೂಪೋರ್ಟ್‌ನ ಅಂಚುಗಳೊಂದಿಗೆ ಘರ್ಷಣೆಯನ್ನು ಉಂಟುಮಾಡುತ್ತದೆಯೇ ಎಂದು ಪರಿಶೀಲಿಸಿ.
• ಹಾಗೆ ಮಾಡಿದರೆ, ಪರ್ಯಾಯ ಪೊಸಿಷನ್‌ಗಾಗಿ ಮರುಲೆಕ್ಕಾಚಾರ ಮಾಡಿ (ಉದಾಹರಣೆಗೆ, ಅದನ್ನು ಬಟನ್‌ನ ಕೆಳಗೆ ಕಾಣಿಸಿಕೊಳ್ಳುವಂತೆ ತಿರುಗಿಸಿ).
• ಲೇಔಟ್ ಬದಲಾದಾಗಲೆಲ್ಲಾ ಈ ಸಂಪೂರ್ಣ ಪ್ರಕ್ರಿಯೆಯನ್ನು ಪುನರಾವರ್ತಿಸಲು `scroll` ಮತ್ತು `resize` ಗಾಗಿ ಈವೆಂಟ್ ಲಿಸನರ್‌ಗಳನ್ನು ಸೇರಿಸಿ.

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

ಒಂದು ಹೊಸ ಮಾದರಿ: CSS ಆಂಕರ್ ಪೊಸಿಷನಿಂಗ್‌ನ ಪರಿಚಯ

CSS ಆಂಕರ್ ಪೊಸಿಷನಿಂಗ್ API ಈ ಸಂಬಂಧಗಳನ್ನು ನಿರ್ವಹಿಸಲು ಡಿಕ್ಲರೇಟಿವ್, CSS-ಮಾತ್ರ ಮಾರ್ಗವನ್ನು ಒದಗಿಸುತ್ತದೆ. ಮೂಲಭೂತ ಕಲ್ಪನೆಯೆಂದರೆ ಎರಡು ಎಲಿಮೆಂಟ್‌ಗಳ ನಡುವೆ ಸಂಪರ್ಕವನ್ನು ರಚಿಸುವುದು: ಪೊಸಿಷನ್ಡ್ ಎಲಿಮೆಂಟ್ (ಉದಾ., ಟೂಲ್‌ಟಿಪ್) ಮತ್ತು ಅದರ ಆಂಕರ್ (ಉದಾ., ಬಟನ್).

ಪ್ರಮುಖ ಪ್ರಾಪರ್ಟಿಗಳು: `anchor-name` ಮತ್ತು `position-anchor`

ಈ ಮ್ಯಾಜಿಕ್ ಎರಡು ಹೊಸ CSS ಪ್ರಾಪರ್ಟಿಗಳೊಂದಿಗೆ ಪ್ರಾರಂಭವಾಗುತ್ತದೆ:

• `anchor-name`: ಈ ಪ್ರಾಪರ್ಟಿಯನ್ನು ನೀವು ರೆಫರೆನ್ಸ್ ಪಾಯಿಂಟ್ ಆಗಿ ಬಳಸಲು ಬಯಸುವ ಎಲಿಮೆಂಟ್‌ಗೆ ಅನ್ವಯಿಸಲಾಗುತ್ತದೆ. ಇದು ಪರಿಣಾಮಕಾರಿಯಾಗಿ ಆಂಕರ್‌ಗೆ ಒಂದು ವಿಶಿಷ್ಟವಾದ, ಡ್ಯಾಶ್-ಪ್ರಿಫಿಕ್ಸ್ಡ್ ಹೆಸರನ್ನು ನೀಡುತ್ತದೆ, ಅದನ್ನು ಬೇರೆಡೆ ರೆಫರ್ ಮಾಡಬಹುದು.
• `position-anchor`: ಈ ಪ್ರಾಪರ್ಟಿಯನ್ನು ಪೊಸಿಷನ್ಡ್ ಎಲಿಮೆಂಟ್‌ಗೆ ಅನ್ವಯಿಸಲಾಗುತ್ತದೆ ಮತ್ತು ಅದರ ಪೊಸಿಷನಿಂಗ್ ಲೆಕ್ಕಾಚಾರಗಳಿಗಾಗಿ ಯಾವ ಹೆಸರಿನ ಆಂಕರ್ ಅನ್ನು ಬಳಸಬೇಕೆಂದು ಅದಕ್ಕೆ ತಿಳಿಸುತ್ತದೆ.

ಒಂದು ಮೂಲಭೂತ ಉದಾಹರಣೆಯನ್ನು ನೋಡೋಣ:

            
<!-- HTML Structure -->
<button id="my-button">Hover Me</button>
<div class="tooltip">This is a tooltip!</div>

<!-- CSS -->
#my-button {
  anchor-name: --my-button-anchor;
}

.tooltip {
  position: absolute;
  position-anchor: --my-button-anchor;
  /* Now we can position relative to the anchor */
  bottom: anchor(top);
  left: anchor(center);
}

            

              
                Copy
              
            
          

ಈ ಸ್ನಿಪ್ಪೆಟ್‌ನಲ್ಲಿ, ಬಟನ್ ಅನ್ನು `--my-button-anchor` ಹೆಸರಿನ ಆಂಕರ್ ಆಗಿ ಗೊತ್ತುಪಡಿಸಲಾಗಿದೆ. ನಂತರ ಟೂಲ್‌ಟಿಪ್ ಆ ಆಂಕರ್‌ಗೆ ತನ್ನನ್ನು ಲಿಂಕ್ ಮಾಡಲು `position-anchor` ಅನ್ನು ಬಳಸುತ್ತದೆ. ನಿಜವಾಗಿಯೂ ಕ್ರಾಂತಿಕಾರಿ ಭಾಗವೆಂದರೆ `anchor()` ಫಂಕ್ಷನ್, ಇದು ನಮ್ಮ ಪೊಸಿಷನಿಂಗ್ ಪ್ರಾಪರ್ಟಿಗಳಿಗೆ ಮೌಲ್ಯಗಳಾಗಿ ಆಂಕರ್‌ನ ಗಡಿಗಳನ್ನು (`top`, `bottom`, `left`, `right`, `center`) ಬಳಸಲು ನಮಗೆ ಅನುಮತಿಸುತ್ತದೆ.

ಇದು ಈಗಾಗಲೇ ವಿಷಯಗಳನ್ನು ಸರಳಗೊಳಿಸುತ್ತದೆ, ಆದರೆ ಇದು ಇನ್ನೂ ವ್ಯೂಪೋರ್ಟ್ ಕೊಲಿಷನ್ ಸಮಸ್ಯೆಯನ್ನು ಪರಿಹರಿಸಿಲ್ಲ. ಅಲ್ಲಿಯೇ @position-try ಬರುತ್ತದೆ.

ಪರಿಹಾರದ ಹೃದಯ: `@position-try` ಮತ್ತು `position-fallback`

ಆಂಕರ್ ಪೊಸಿಷನಿಂಗ್ ಎಲಿಮೆಂಟ್‌ಗಳ ನಡುವೆ ಲಿಂಕ್ ಅನ್ನು ರಚಿಸಿದರೆ, `@position-try` ಬುದ್ಧಿವಂತಿಕೆಯನ್ನು ಒದಗಿಸುತ್ತದೆ. ಇದು ಪರ್ಯಾಯ ಪೊಸಿಷನಿಂಗ್ ತಂತ್ರಗಳ ಆದ್ಯತೆಯ ಪಟ್ಟಿಯನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. ನಂತರ ಬ್ರೌಸರ್ ಪ್ರತಿ ತಂತ್ರವನ್ನು ಕ್ರಮವಾಗಿ ಪ್ರಯತ್ನಿಸುತ್ತದೆ, ಪೊಸಿಷನ್ಡ್ ಎಲಿಮೆಂಟ್‌ಅನ್ನು ಅದರ ಕಂಟೈನಿಂಗ್ ಬ್ಲಾಕ್ (ಸಾಮಾನ್ಯವಾಗಿ ವ್ಯೂಪೋರ್ಟ್) ಒಳಗೆ ಕ್ಲಿಪ್ ಆಗದಂತೆ ಹೊಂದಿಕೊಳ್ಳಲು ಅನುಮತಿಸುವ ಮೊದಲನೆಯದನ್ನು ಆಯ್ಕೆ ಮಾಡುತ್ತದೆ.

ಫಾಲ್‌ಬ್ಯಾಕ್ ಆಯ್ಕೆಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುವುದು

ಒಂದು `@position-try` ಬ್ಲಾಕ್ ಎಂಬುದು ಒಂದೇ ಪೊಸಿಷನಿಂಗ್ ಆಯ್ಕೆಯನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುವ CSS ನಿಯಮಗಳ ಒಂದು ಹೆಸರಿನ ಸೆಟ್ ಆಗಿದೆ. ನಿಮಗೆ ಬೇಕಾದಷ್ಟು ಇವುಗಳನ್ನು ನೀವು ರಚಿಸಬಹುದು.

            
/* Option 1: Place above the anchor */
@position-try --tooltip-top {
  bottom: anchor(top);
  left: anchor(center);
  transform: translateX(-50%);
}

/* Option 2: Place below the anchor */
@position-try --tooltip-bottom {
  top: anchor(bottom);
  left: anchor(center);
  transform: translateX(-50%);
}

/* Option 3: Place to the right of the anchor */
@position-try --tooltip-right {
  left: anchor(right);
  top: anchor(center);
  transform: translateY(-50%);
}

/* Option 4: Place to the left of the anchor */
@position-try --tooltip-left {
  right: anchor(left);
  top: anchor(center);
  transform: translateY(-50%);
}

            

              
                Copy
              
            
          

ಪ್ರತಿ ಬ್ಲಾಕ್ ಒಂದು ಸಂಪೂರ್ಣ ಪೊಸಿಷನಿಂಗ್ ತಂತ್ರವನ್ನು ಹೇಗೆ ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ ಎಂಬುದನ್ನು ಗಮನಿಸಿ. ನಾವು ನಾಲ್ಕು ವಿಭಿನ್ನ ಆಯ್ಕೆಗಳನ್ನು ರಚಿಸಿದ್ದೇವೆ: ಆಂಕರ್‌ಗೆ ಸಂಬಂಧಿಸಿದಂತೆ ಮೇಲೆ, ಕೆಳಗೆ, ಬಲ, ಮತ್ತು ಎಡ.

`position-fallback` ನೊಂದಿಗೆ ಫಾಲ್‌ಬ್ಯಾಕ್‌ಗಳನ್ನು ಅನ್ವಯಿಸುವುದು

ನಿಮ್ಮ `@position-try` ಬ್ಲಾಕ್‌ಗಳು ಸಿದ್ಧವಾದ ನಂತರ, ಪೊಸಿಷನ್ಡ್ ಎಲಿಮೆಂಟ್‌ಗೆ `position-fallback` ಪ್ರಾಪರ್ಟಿಯೊಂದಿಗೆ ಅವುಗಳನ್ನು ಬಳಸಲು ನೀವು ಹೇಳುತ್ತೀರಿ. ಕ್ರಮವು ಮುಖ್ಯವಾಗಿದೆ—ಅದು ಆದ್ಯತೆಯನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ.

            
.tooltip {
  position: absolute;
  position-anchor: --my-button-anchor;
  position-fallback: --tooltip-top --tooltip-bottom --tooltip-right --tooltip-left;
}

            

              
                Copy
              
            
          

ಈ ಒಂದೇ ಸಾಲಿನ CSS ನೊಂದಿಗೆ, ನೀವು ಬ್ರೌಸರ್‌ಗೆ ಸೂಚಿಸಿದ್ದೀರಿ:

1. ಮೊದಲಿಗೆ, `--tooltip-top` ನಲ್ಲಿನ ನಿಯಮಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಟೂಲ್‌ಟಿಪ್ ಅನ್ನು ಪೊಸಿಷನ್ ಮಾಡಲು ಪ್ರಯತ್ನಿಸಿ.
2. ಆ ಪೊಸಿಷನ್ ಟೂಲ್‌ಟಿಪ್ ವ್ಯೂಪೋರ್ಟ್‌ನಿಂದ ಕ್ಲಿಪ್ ಆಗಲು ಕಾರಣವಾದರೆ, ಅದನ್ನು ತಿರಸ್ಕರಿಸಿ ಮತ್ತು `--tooltip-bottom` ನಲ್ಲಿನ ನಿಯಮಗಳನ್ನು ಪ್ರಯತ್ನಿಸಿ.
3. ಅದೂ ವಿಫಲವಾದರೆ, `--tooltip-right` ಅನ್ನು ಪ್ರಯತ್ನಿಸಿ.
4. ಮತ್ತು ಎಲ್ಲವೂ ವಿಫಲವಾದರೆ, `--tooltip-left` ಅನ್ನು ಪ್ರಯತ್ನಿಸಿ.

ಬ್ರೌಸರ್ ಎಲ್ಲಾ ಕೊಲಿಷನ್ ಪತ್ತೆ ಮತ್ತು ಪೊಸಿಷನ್-ಬದಲಾವಣೆಯನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ನಿಭಾಯಿಸುತ್ತದೆ. ಯಾವುದೇ `getBoundingClientRect()`, `resize` ಈವೆಂಟ್ ಲಿಸನರ್‌ಗಳು, ಅಥವಾ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಇಲ್ಲ. ಇದು ಇಂಪರೇಟಿವ್ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ತರ್ಕದಿಂದ ಡಿಕ್ಲರೇಟಿವ್ CSS ವಿಧಾನಕ್ಕೆ ಒಂದು ಮಹತ್ವದ ಬದಲಾವಣೆಯಾಗಿದೆ.

ಒಂದು ಸಂಪೂರ್ಣ, ಪ್ರಾಯೋಗಿಕ ಉದಾಹರಣೆ: ಕೊಲಿಷನ್-ಅವೇರ್ ಪಾಪ್‌ಓವರ್

ಒಂದು ಸಂಪೂರ್ಣವಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುವ, ಸುಲಭವಾಗಿ ಬಳಸಬಹುದಾದ, ಮತ್ತು ಬುದ್ಧಿವಂತ UI ಕಾಂಪೊನೆಂಟ್‌ಗಾಗಿ ನಾವು ಆಂಕರ್ ಪೊಸಿಷನಿಂಗ್ ಅನ್ನು ಆಧುನಿಕ ಪಾಪ್‌ಓವರ್ API ಯೊಂದಿಗೆ ಸಂಯೋಜಿಸುವ ಹೆಚ್ಚು ದೃಢವಾದ ಉದಾಹರಣೆಯನ್ನು ನಿರ್ಮಿಸೋಣ.

ಹಂತ 1: HTML ರಚನೆ

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

            
<button popovertarget="my-popover" id="popover-trigger">
  Click Me
</button>

<div id="my-popover" popover>
  <h3>Popover Title</h3>
  <p>This popover will intelligently reposition itself to stay within the viewport. Try resizing your browser or scrolling the page!</p>
</div>

            

              
                Copy
              
            
          

ಹಂತ 2: ಆಂಕರ್ ಅನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುವುದು

ನಾವು ನಮ್ಮ ಬಟನ್ ಅನ್ನು ಆಂಕರ್ ಆಗಿ ಗೊತ್ತುಪಡಿಸುತ್ತೇವೆ. ಕೆಲವು ಮೂಲಭೂತ ಸ್ಟೈಲಿಂಗ್ ಅನ್ನು ಕೂಡ ಸೇರಿಸೋಣ.

            
#popover-trigger {
  /* This is the key part */
  anchor-name: --popover-anchor;

  /* Basic styles */
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
}

            

              
                Copy
              
            
          

ಹಂತ 3: `@position-try` ಆಯ್ಕೆಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುವುದು

ಈಗ ನಾವು ನಮ್ಮ ಪೊಸಿಷನಿಂಗ್ ಆಯ್ಕೆಗಳ ಕ್ಯಾಸ್ಕೇಡ್ ಅನ್ನು ರಚಿಸುತ್ತೇವೆ. ಪಾಪ್‌ಓವರ್ ಮತ್ತು ಟ್ರಿಗರ್ ನಡುವೆ ಸ್ವಲ್ಪ ಜಾಗವನ್ನು ರಚಿಸಲು ನಾವು ಪ್ರತಿ ಸಂದರ್ಭದಲ್ಲೂ ಒಂದು ಸಣ್ಣ `margin` ಅನ್ನು ಸೇರಿಸುತ್ತೇವೆ.

            
/* Priority 1: Position above the trigger */
@position-try --popover-top {
  bottom: anchor(top, 8px);
  left: anchor(center);
}

/* Priority 2: Position below the trigger */
@position-try --popover-bottom {
  top: anchor(bottom, 8px);
  left: anchor(center);
}

/* Priority 3: Position to the right */
@position-try --popover-right {
  left: anchor(right, 8px);
  top: anchor(center);
}

/* Priority 4: Position to the left */
@position-try --popover-left {
  right: anchor(left, 8px);
  top: anchor(center);
}

            

              
                Copy
              
            
          

ಗಮನಿಸಿ: `anchor()` ಫಂಕ್ಷನ್ ಐಚ್ಛಿಕ ಎರಡನೇ ಆರ್ಗ್ಯುಮೆಂಟ್ ಅನ್ನು ತೆಗೆದುಕೊಳ್ಳಬಹುದು, ಇದು ಫಾಲ್‌ಬ್ಯಾಕ್ ಮೌಲ್ಯವಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ. ಆದಾಗ್ಯೂ, ಇಲ್ಲಿ ನಾವು ಮಾರ್ಜಿನ್‌ಗಳಿಗಾಗಿ ಸಂಭಾವ್ಯ ಭವಿಷ್ಯದ ವರ್ಧನೆಯನ್ನು ವಿವರಿಸಲು ಪ್ರಮಾಣಿತವಲ್ಲದ ಸಿಂಟ್ಯಾಕ್ಸ್ ಅನ್ನು ಬಳಸುತ್ತಿದ್ದೇವೆ. ಇಂದಿನ ಸರಿಯಾದ ಮಾರ್ಗವೆಂದರೆ `calc(anchor(top) - 8px)` ಅಥವಾ ಅಂತಹುದನ್ನು ಬಳಸುವುದು, ಆದರೆ ಉದ್ದೇಶವು ಒಂದು ಅಂತರವನ್ನು ರಚಿಸುವುದಾಗಿದೆ.

ಹಂತ 4: ಪಾಪ್‌ಓವರ್ ಅನ್ನು ಸ್ಟೈಲಿಂಗ್ ಮಾಡುವುದು ಮತ್ತು ಫಾಲ್‌ಬ್ಯಾಕ್ ಅನ್ನು ಅನ್ವಯಿಸುವುದು

ಅಂತಿಮವಾಗಿ, ನಾವು ನಮ್ಮ ಪಾಪ್‌ಓವರ್ ಅನ್ನು ಸ್ಟೈಲ್ ಮಾಡುತ್ತೇವೆ ಮತ್ತು ಎಲ್ಲವನ್ನೂ ಒಟ್ಟಿಗೆ ಸಂಪರ್ಕಿಸುತ್ತೇವೆ.

            
#my-popover {
  /* Link the popover to our named anchor */
  position-anchor: --popover-anchor;

  /* Define the priority of our fallback options */
  position-fallback: --popover-top --popover-bottom --popover-right --popover-left;

  /* We must use fixed or absolute positioning for this to work */
  position: absolute;

  /* Default styles */
  width: 250px;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  margin: 0; /* The popover API adds margin by default, we reset it */
}

/* The popover is hidden until opened */
#my-popover:not(:popover-open) {
  display: none;
}

            

              
                Copy
              
            
          

ಮತ್ತು ಅಷ್ಟೇ! ಈ ಕೋಡ್‌ನೊಂದಿಗೆ, ನೀವು ಸಂಪೂರ್ಣವಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುವ ಪಾಪ್‌ಓವರ್ ಅನ್ನು ಹೊಂದಿದ್ದೀರಿ, ಅದು ಪರದೆಯ ಅಂಚುಗಳಿಂದ ಕತ್ತರಿಸಿಹೋಗುವುದನ್ನು ತಪ್ಪಿಸಲು ತನ್ನ ಪೊಸಿಷನ್ ಅನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಬದಲಾಯಿಸುತ್ತದೆ. ಪೊಸಿಷನಿಂಗ್ ತರ್ಕಕ್ಕಾಗಿ ಯಾವುದೇ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅಗತ್ಯವಿಲ್ಲ.

ಸುಧಾರಿತ ಪರಿಕಲ್ಪನೆಗಳು ಮತ್ತು ಸೂಕ್ಷ್ಮ-ನಿಯಂತ್ರಣ

ಆಂಕರ್ ಪೊಸಿಷನಿಂಗ್ API ಸಂಕೀರ್ಣ ಸನ್ನಿವೇಶಗಳಿಗೆ ಇನ್ನೂ ಹೆಚ್ಚಿನ ನಿಯಂತ್ರಣವನ್ನು ನೀಡುತ್ತದೆ.

`anchor()` ಫಂಕ್ಷನ್‌ನ ಆಳವಾದ ನೋಟ

`anchor()` ಫಂಕ್ಷನ್ ನಂಬಲಾಗದಷ್ಟು ಬಹುಮುಖವಾಗಿದೆ. ಇದು ಕೇವಲ ನಾಲ್ಕು ಅಂಚುಗಳ ಬಗ್ಗೆ ಅಲ್ಲ. ನೀವು ಆಂಕರ್‌ನ ಗಾತ್ರದ ಶೇಕಡಾವಾರುಗಳನ್ನು ಸಹ ಗುರಿಯಾಗಿಸಬಹುದು.

• `anchor(left)` ಅಥವಾ `anchor(start)`: ಆಂಕರ್‌ನ ಎಡ ಅಂಚು.
• `anchor(right)` ಅಥವಾ `anchor(end)`: ಬಲ ಅಂಚು.
• `anchor(top)`: ಮೇಲಿನ ಅಂಚು.
• `anchor(bottom)`: ಕೆಳಗಿನ ಅಂಚು.
• `anchor(center)`: ಸಂದರ್ಭವನ್ನು ಅವಲಂಬಿಸಿ ಸಮತಲ ಅಥವಾ ಲಂಬವಾದ ಕೇಂದ್ರ. `left` ಅಥವಾ `right` ಗಾಗಿ, ಇದು ಸಮತಲ ಕೇಂದ್ರ. `top` ಅಥವಾ `bottom` ಗಾಗಿ, ಇದು ಲಂಬ ಕೇಂದ್ರ.
• `anchor(50%)`: `anchor(center)` ಗೆ ಸಮನಾಗಿದೆ.
• `anchor(25%)`: ಆಂಕರ್‌ನ ಅಕ್ಷದಾದ್ಯಂತ 25% ದಾರಿಯಲ್ಲಿರುವ ಒಂದು ಬಿಂದು.

ಇದಲ್ಲದೆ, `anchor-size()` ಫಂಕ್ಷನ್‌ನೊಂದಿಗೆ ನಿಮ್ಮ ಲೆಕ್ಕಾಚಾರಗಳಲ್ಲಿ ನೀವು ಆಂಕರ್‌ನ ಅಳತೆಗಳನ್ನು ಬಳಸಬಹುದು:

            
.element {
  /* Make the element half the width of its anchor */
  width: calc(anchor-size(width) * 0.5);
}

            

              
                Copy
              
            
          

ಇಂಪ್ಲಿಸಿಟ್ ಆಂಕರ್‌ಗಳು

ಕೆಲವು ಸಂದರ್ಭಗಳಲ್ಲಿ, ನೀವು `anchor-name` ಮತ್ತು `position-anchor` ಅನ್ನು ಸ್ಪಷ್ಟವಾಗಿ ವ್ಯಾಖ್ಯಾನಿಸುವ ಅಗತ್ಯವೂ ಇಲ್ಲ. ಕೆಲವು ಸಂಬಂಧಗಳಿಗೆ, ಬ್ರೌಸರ್ ಒಂದು ಇಂಪ್ಲಿಸಿಟ್ ಆಂಕರ್ ಅನ್ನು ಊಹಿಸಬಹುದು. ಅತ್ಯಂತ ಸಾಮಾನ್ಯ ಉದಾಹರಣೆಯೆಂದರೆ `popovertarget` ಬಟನ್‌ನಿಂದ ಕರೆಯಲ್ಪಡುವ ಪಾಪ್‌ಓವರ್. ಈ ಸಂದರ್ಭದಲ್ಲಿ, ಬಟನ್ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಪಾಪ್‌ಓವರ್‌ಗೆ ಇಂಪ್ಲಿಸಿಟ್ ಆಂಕರ್ ಆಗುತ್ತದೆ, ನಿಮ್ಮ CSS ಅನ್ನು ಸರಳಗೊಳಿಸುತ್ತದೆ:

            
#my-popover {
  /* No position-anchor is needed! */
  position-fallback: --popover-top --popover-bottom;
  ...
}

            

              
                Copy
              
            
          

ಇದು ಬಾಯ್ಲರ್‌ಪ್ಲೇಟ್ ಅನ್ನು ಕಡಿಮೆ ಮಾಡುತ್ತದೆ ಮತ್ತು ಟ್ರಿಗರ್ ಮತ್ತು ಪಾಪ್‌ಓವರ್ ನಡುವಿನ ಸಂಬಂಧವನ್ನು ಇನ್ನಷ್ಟು ನೇರವಾಗಿಸುತ್ತದೆ.

ಬ್ರೌಸರ್ ಬೆಂಬಲ ಮತ್ತು ಮುಂದಿನ ದಾರಿ

2023 ರ ಕೊನೆಯಲ್ಲಿ, CSS ಆಂಕರ್ ಪೊಸಿಷನಿಂಗ್ API ಒಂದು ಪ್ರಾಯೋಗಿಕ ತಂತ್ರಜ್ಞಾನವಾಗಿದೆ. ಇದು Google Chrome ಮತ್ತು Microsoft Edge ನಲ್ಲಿ ವೈಶಿಷ್ಟ್ಯ ಫ್ಲ್ಯಾಗ್‌ನ ಹಿಂದೆ ಲಭ್ಯವಿದೆ (`chrome://flags` ನಲ್ಲಿ "Experimental Web Platform features" ಗಾಗಿ ಹುಡುಕಿ).

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

ನೀವು "Can I use..." ನಂತಹ ಪ್ಲಾಟ್‌ಫಾರ್ಮ್‌ಗಳಲ್ಲಿ ಅದರ ಅಳವಡಿಕೆಯ ಸ್ಥಿತಿಯನ್ನು ಟ್ರ್ಯಾಕ್ ಮಾಡಬಹುದು. ಸದ್ಯಕ್ಕೆ, ಇದನ್ನು ಪ್ರಗತಿಪರ ವರ್ಧನೆಯ ಸಾಧನವೆಂದು ಪರಿಗಣಿಸಿ. ನೀವು ನಿಮ್ಮ UI ಅನ್ನು `@position-try` ನೊಂದಿಗೆ ನಿರ್ಮಿಸಬಹುದು ಮತ್ತು ಅದನ್ನು ಬೆಂಬಲಿಸದ ಬ್ರೌಸರ್‌ಗಳಿಗೆ ಸರಳ, ಫ್ಲಿಪ್ ಆಗದ ಪೊಸಿಷನ್ ಒದಗಿಸಲು `@supports` ಕ್ವೆರಿಯನ್ನು ಬಳಸಬಹುದು, ಆದರೆ ಆಧುನಿಕ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿನ ಬಳಕೆದಾರರು ವರ್ಧಿತ ಅನುಭವವನ್ನು ಪಡೆಯುತ್ತಾರೆ.

ಪಾಪ್‌ಓವರ್‌ಗಳನ್ನು ಮೀರಿದ ಬಳಕೆಯ ಪ್ರಕರಣಗಳು

ಈ API ಯ ಸಂಭಾವ್ಯ ಅನ್ವಯಗಳು ವಿಶಾಲವಾಗಿವೆ ಮತ್ತು ಸರಳ ಟೂಲ್‌ಟಿಪ್‌ಗಳನ್ನು ಮೀರಿ ವಿಸ್ತರಿಸುತ್ತವೆ.

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

  ತೀರ್ಮಾನ: ಡೈನಾಮಿಕ್ ಲೇಔಟ್‌ಗಳಿಗೆ ಒಂದು ಡಿಕ್ಲರೇಟಿವ್ ಭವಿಷ್ಯ

  CSS `@position-try` ಮತ್ತು ವಿಶಾಲವಾದ ಆಂಕರ್ ಪೊಸಿಷನಿಂಗ್ API ಯುಐ ಅಭಿವೃದ್ಧಿಯನ್ನು ನಾವು ಸಂಪರ್ಕಿಸುವ ವಿಧಾನದಲ್ಲಿ ಒಂದು ಮೂಲಭೂತ ಬದಲಾವಣೆಯನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತವೆ. ಅವು ಸಂಕೀರ್ಣ, ಇಂಪರೇಟಿವ್ ಪೊಸಿಷನಿಂಗ್ ತರ್ಕವನ್ನು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ನಿಂದ CSS ನಲ್ಲಿ ಹೆಚ್ಚು ಸೂಕ್ತವಾದ, ಡಿಕ್ಲರೇಟಿವ್ ಮನೆಗೆ ವರ್ಗಾಯಿಸುತ್ತವೆ.

  ಪ್ರಯೋಜನಗಳು ಸ್ಪಷ್ಟವಾಗಿವೆ:

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

  ನಾವು ವ್ಯಾಪಕ ಬ್ರೌಸರ್ ಬೆಂಬಲಕ್ಕಾಗಿ ಕಾಯುತ್ತಿರುವಾಗ, ಈ ಶಕ್ತಿಯುತ ಹೊಸ ಸಾಧನಗಳನ್ನು ಕಲಿಯಲು, ಪ್ರಯೋಗಿಸಲು, ಮತ್ತು ಪ್ರತಿಪಾದಿಸಲು ಈಗ ಸಮಯ. `@position-try` ಅನ್ನು ಅಳವಡಿಸಿಕೊಳ್ಳುವ ಮೂಲಕ, ನಾವು ನಮ್ಮ ಅತ್ಯಂತ ಸಾಮಾನ್ಯ ಮತ್ತು ನಿರಾಶಾದಾಯಕ ಲೇಔಟ್ ಸವಾಲುಗಳಿಗೆ ವೆಬ್ ಪ್ಲಾಟ್‌ಫಾರ್ಮ್ ಸ್ವತಃ ಸೊಗಸಾದ ಪರಿಹಾರಗಳನ್ನು ಒದಗಿಸುವ ಭವಿಷ್ಯಕ್ಕೆ ಹೆಜ್ಜೆ ಹಾಕುತ್ತಿದ್ದೇವೆ.