ಸಿಎಸ್ಎಸ್ ಆಂಕರ್ ಪೊಸಿಷನಿಂಗ್: ಸಾಪೇಕ್ಷ ಎಲಿಮೆಂಟ್ ಪ್ಲೇಸ್ಮೆಂಟ್ ಅನ್ನು ಕರಗತ ಮಾಡಿಕೊಳ್ಳುವುದು

ಸಿಎಸ್ಎಸ್ ಆಂಕರ್ ಪೊಸಿಷನಿಂಗ್ ಒಂದು ಎಲಿಮೆಂಟ್‌ನ (absolutely positioned element) ಸ್ಥಾನವನ್ನು ಇನ್ನೊಂದಕ್ಕೆ (anchor element) ಲಿಂಕ್ ಮಾಡಲು ಒಂದು ಶಕ್ತಿಯುತ ಮಾರ್ಗವನ್ನು ನೀಡುತ್ತದೆ. ಈ ತಂತ್ರವು ಡೈನಾಮಿಕ್ ಲೇಔಟ್‌ಗಳನ್ನು ರಚಿಸಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ, ಅಲ್ಲಿ ಎಲಿಮೆಂಟ್‌ಗಳು ತಮ್ಮ ಆಂಕರ್‌ಗಳ ಸ್ಥಳವನ್ನು ಆಧರಿಸಿ ತಮ್ಮ ಸ್ಥಾನಗಳನ್ನು ಬುದ್ಧಿವಂತಿಕೆಯಿಂದ ಹೊಂದಿಸಿಕೊಳ್ಳುತ್ತವೆ, ಇದರಿಂದಾಗಿ ಹೆಚ್ಚು ಸಂವಾದಾತ್ಮಕ ಮತ್ತು ಬಳಕೆದಾರ-ಸ್ನೇಹಿ ವೆಬ್ ಅನುಭವಗಳು ಉಂಟಾಗುತ್ತವೆ. ಸರಳ ಪೊಸಿಷನಿಂಗ್ ಕಾರ್ಯಗಳಿಗಾಗಿ ಸಂಕೀರ್ಣ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಪರಿಹಾರಗಳನ್ನು ಮರೆತುಬಿಡಿ; ಆಂಕರ್ ಪೊಸಿಷನಿಂಗ್, ಲಭ್ಯವಿದ್ದಾಗ, ನಿಮ್ಮ ಸಿಎಸ್ಎಸ್ ಅನ್ನು ಗಣನೀಯವಾಗಿ ಸರಳಗೊಳಿಸಬಹುದು.

ಮೂಲಭೂತ ಅಂಶಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು

ಪ್ರಾಯೋಗಿಕ ಉದಾಹರಣೆಗಳಿಗೆ ಧುಮುಕುವ ಮೊದಲು, ಸಿಎಸ್ಎಸ್ ಆಂಕರ್ ಪೊಸಿಷನಿಂಗ್‌ನ ಪ್ರಮುಖ ಪರಿಕಲ್ಪನೆಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು ಬಹಳ ಮುಖ್ಯ:

• ಆಂಕರ್ ಎಲಿಮೆಂಟ್: ಇದು ಇನ್ನೊಂದು ಎಲಿಮೆಂಟ್ ಅನ್ನು ಸಾಪೇಕ್ಷವಾಗಿ ಇರಿಸಲಾಗುವ ಎಲಿಮೆಂಟ್ ಆಗಿದೆ. ಇದು ಉಲ್ಲೇಖದ ಬಿಂದುವಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ.
• ಅಬ್ಸಲ್ಯೂಟ್ಲಿ ಪೊಸಿಷನ್ಡ್ ಎಲಿಮೆಂಟ್: ಈ ಎಲಿಮೆಂಟ್‌ನ ಸ್ಥಾನವನ್ನು ಅದರ ಆಂಕರ್ ಎಲಿಮೆಂಟ್‌ಗೆ ಸಾಪೇಕ್ಷವಾಗಿ ನಿರ್ಧರಿಸಲಾಗುತ್ತದೆ. ಇದಕ್ಕೆ `position: absolute` ಅಥವಾ `position: fixed` ಅನ್ನು ಅನ್ವಯಿಸಬೇಕಾಗುತ್ತದೆ.
• `anchor-name` ಪ್ರಾಪರ್ಟಿ: ಈ ಪ್ರಾಪರ್ಟಿಯನ್ನು ಆಂಕರ್ ಎಲಿಮೆಂಟ್‌ಗೆ ಅನ್ವಯಿಸಲಾಗುತ್ತದೆ ಮತ್ತು ಅದಕ್ಕೆ ಒಂದು ಹೆಸರನ್ನು ನಿಗದಿಪಡಿಸುತ್ತದೆ. ಇದನ್ನು ಲಿಂಕ್ ಮಾಡಲು ನಿರ್ದಿಷ್ಟ ಹೆಸರಿನ ಸ್ಥಳವನ್ನು ರಚಿಸುವುದು ಎಂದು ಯೋಚಿಸಿ. ಸಿಂಟ್ಯಾಕ್ಸ್ `--element-name` ಆಗಿದೆ.
• `position-anchor` ಪ್ರಾಪರ್ಟಿ: ಈ ಪ್ರಾಪರ್ಟಿಯನ್ನು ಅಬ್ಸಲ್ಯೂಟ್ಲಿ ಪೊಸಿಷನ್ಡ್ ಎಲಿಮೆಂಟ್‌ಗೆ ಅನ್ವಯಿಸಲಾಗುತ್ತದೆ. ಇದು ಯಾವ ಆಂಕರ್ ಎಲಿಮೆಂಟ್‌ಗೆ ಸಾಪೇಕ್ಷವಾಗಿ ಇರಬೇಕು ಎಂಬುದನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸುತ್ತದೆ. ಇದು `anchor-name` ನಿಂದ ವ್ಯಾಖ್ಯಾನಿಸಲಾದ ಹೆಸರನ್ನು ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ.
• `top`, `right`, `bottom`, `left` ಪ್ರಾಪರ್ಟಿಗಳು: ಈ стандарт ಸಿಎಸ್ಎಸ್ ಪ್ರಾಪರ್ಟಿಗಳು ಅಬ್ಸಲ್ಯೂಟ್ಲಿ ಪೊಸಿಷನ್ಡ್ ಎಲಿಮೆಂಟ್‌ನ ಆಫ್‌ಸೆಟ್ ಅನ್ನು ಆಂಕರ್ ಪಾಯಿಂಟ್‌ನಿಂದ ನಿಯಂತ್ರಿಸುತ್ತವೆ.
• `inset-area` ಪ್ರಾಪರ್ಟಿ: ಇದು ಆಂಕರ್ ಎಲಿಮೆಂಟ್‌ನ ಅಂಚುಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ, ಇದರಿಂದ ಅಬ್ಸಲ್ಯೂಟ್ಲಿ ಪೊಸಿಷನ್ಡ್ ಎಲಿಮೆಂಟ್ ಅನ್ನು ಇರಿಸಲಾಗುತ್ತದೆ.

ಗಮನಿಸಿ: 2023ರ ಅಂತ್ಯದ ವೇಳೆಗೆ, ಆಂಕರ್ ಪೊಸಿಷನಿಂಗ್ ಇನ್ನೂ ಪ್ರಾಯೋಗಿಕ ಹಂತದಲ್ಲಿದೆ ಮತ್ತು ನಿಮ್ಮ ಬ್ರೌಸರ್‌ನಲ್ಲಿ ವೆಂಡರ್ ಪ್ರಿಫಿಕ್ಸ್‌ಗಳು ಅಥವಾ ಪ್ರಾಯೋಗಿಕ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಸಕ್ರಿಯಗೊಳಿಸುವ ಅಗತ್ಯವಿರಬಹುದು. ಪ್ರೊಡಕ್ಷನ್‌ಗೆ ನಿಯೋಜಿಸುವ ಮೊದಲು ಬ್ರೌಸರ್ ಹೊಂದಾಣಿಕೆ ಕೋಷ್ಟಕಗಳನ್ನು (Can I Use ನಲ್ಲಿರುವಂತೆ) ಪರಿಶೀಲಿಸಿ.

ಬ್ರೌಸರ್ ಹೊಂದಾಣಿಕೆಯ ಪರಿಗಣನೆಗಳು

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

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

ಒಂದು ಸರಳ ಉದಾಹರಣೆ: ಟೂಲ್‌ಟಿಪ್ಸ್

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

            
<button class="button">Hover Me</button>
<div class="tooltip">This is a tooltip!</div>

            

              
                Copy
              
            
          

            
.button {
  --button-anchor: auto; /* Creates a name for the anchor */
  anchor-name: --button-anchor;
  position: relative; /* Important!  Allows the absolutely positioned element to find the anchor.
                         Other values like static or fixed can also work, depending on the layout */
}

.tooltip {
  position: absolute;
  position-anchor: --button-anchor;
  top: 100%; /* Position below the button */
  left: 0;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  padding: 5px;
  display: none; /* Initially hidden */
  z-index: 10; /* Ensure it's on top */
}

.button:hover + .tooltip {
  display: block; /* Show tooltip on hover */
}

            

              
                Copy
              
            
          

ವಿವರಣೆ:

• ನಾವು `anchor-name` ಪ್ರಾಪರ್ಟಿಯನ್ನು ಬಳಸಿ `button` ಎಲಿಮೆಂಟ್‌ಗೆ `--button-anchor` ಎಂಬ ಹೆಸರನ್ನು ನಿಗದಿಪಡಿಸುತ್ತೇವೆ. ಡಬಲ್ ಹೈಫನ್ ಪೂರ್ವಪ್ರತ್ಯಯವು ಮುಖ್ಯವಾಗಿದೆ ಎಂಬುದನ್ನು ಗಮನಿಸಿ.
• ನಾವು ಬಟನ್ ಎಲಿಮೆಂಟ್‌ಗೆ `static` ಅಲ್ಲದ `position` ಇದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳುತ್ತೇವೆ.
• `tooltip` ಎಲಿಮೆಂಟ್ `position: absolute` ಮತ್ತು `position-anchor: --button-anchor` ಅನ್ನು ಹೊಂದಿದೆ, ಅದನ್ನು ಬಟನ್‌ಗೆ ಲಿಂಕ್ ಮಾಡುತ್ತದೆ.
• `top: 100%` ಟೂಲ್‌ಟಿಪ್ ಅನ್ನು ಬಟನ್‌ನ ಕೆಳಗೆ ಇರಿಸುತ್ತದೆ.
• ಟೂಲ್‌ಟಿಪ್ ಆರಂಭದಲ್ಲಿ ಮರೆಮಾಡಲ್ಪಟ್ಟಿದೆ ಮತ್ತು ಸಿಎಸ್ಎಸ್ ಸೆಲೆಕ್ಟರ್ ಬಳಸಿ ಹೋವರ್ ಮಾಡಿದಾಗ ತೋರಿಸಲಾಗುತ್ತದೆ.

ಸುಧಾರಿತ ಬಳಕೆಯ ಪ್ರಕರಣಗಳು ಮತ್ತು ಉದಾಹರಣೆಗಳು

ಆಂಕರ್ ಪೊಸಿಷನಿಂಗ್ ಕೇವಲ ಸರಳ ಟೂಲ್‌ಟಿಪ್ಸ್‌ಗೆ ಸೀಮಿತವಾಗಿಲ್ಲ. ಇದನ್ನು ಹೆಚ್ಚು ಸಂಕೀರ್ಣ ಲೇಔಟ್‌ಗಳು ಮತ್ತು ಸಂವಹನಗಳಿಗಾಗಿ ಬಳಸಬಹುದು.

1. ಡೈನಾಮಿಕ್ ನ್ಯಾವಿಗೇಷನ್ ಮೆನುಗಳು

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

            
<nav>
  <ul>
    <li class="menu-item">
      <a href="#">Products</a>
      <ul class="submenu">
        <li><a href="#">Product 1</a></li>
        <li><a href="#">Product 2</a></li>
      </ul>
    </li>
    <li class="menu-item">
      <a href="#">Services</a>
      <ul class="submenu">
        <li><a href="#">Service 1</a></li>
        <li><a href="#">Service 2</a></li>
      </ul>
    </li>
  </ul>
</nav>

            

              
                Copy
              
            
          

            
.menu-item {
  --menu-item-anchor: auto;
  anchor-name: --menu-item-anchor;
  position: relative;
}

.submenu {
  position: absolute;
  position-anchor: --menu-item-anchor;
  top: 100%;
  left: 0;
  background-color: white;
  border: 1px solid #ccc;
  display: none;
  z-index: 10;
}

.menu-item:hover .submenu {
  display: block;
}

            

              
                Copy
              
            
          

ಈ ಉದಾಹರಣೆಯು ಟೂಲ್‌ಟಿಪ್‌ಗೆ ಹೋಲುತ್ತದೆ, ಆದರೆ ಮೆನು ರಚನೆಗೆ ಅನ್ವಯಿಸಲಾಗಿದೆ. ಮೆನು ಐಟಂ ಮೇಲೆ ಹೋವರ್ ಮಾಡಿದಾಗ, ಅದರ ಅನುಗುಣವಾದ ಸಬ್‌ಮೆನು ಅದರ ಕೆಳಗೆ ಪ್ರದರ್ಶಿಸಲಾಗುತ್ತದೆ.

2. ಸಂದರ್ಭೋಚಿತ ಮಾಹಿತಿ ಪ್ಯಾನೆಲ್‌ಗಳು

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

            
<div class="product">
  <img src="product.jpg" alt="Product Image" class="product-image">
  <div class="product-info">
    <h3>Product Name</h3>
    <p>Click the image for details.</p>
  </div>
</div>
<div class="product-details">
  <h4>Detailed Product Information</h4>
  <p>This is a detailed description of the product.</p>
</div>

            

              
                Copy
              
            
          

            
.product-image {
  --product-image-anchor: auto;
  anchor-name: --product-image-anchor;
  position: relative;
  cursor: pointer;
}

.product-details {
  position: absolute;
  position-anchor: --product-image-anchor;
  top: 0;
  left: 100%;
  background-color: white;
  border: 1px solid #ccc;
  padding: 10px;
  display: none;
  z-index: 10;
}

.product-image:active + .product-details {
  display: block;
}

            

              
                Copy
              
            
          

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, ಉತ್ಪನ್ನದ ಚಿತ್ರದ ಮೇಲೆ ಕ್ಲಿಕ್ ಮಾಡುವುದರಿಂದ ಅದರ ಬಲಭಾಗದಲ್ಲಿ ವಿವರವಾದ ಮಾಹಿತಿ ಪ್ಯಾನೆಲ್ ಪ್ರದರ್ಶಿಸಲಾಗುತ್ತದೆ.

3. ಕಾಲ್‌ಔಟ್‌ಗಳು ಮತ್ತು ಟಿಪ್ಪಣಿಗಳು

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

            
<div class="image-container">
  <img src="diagram.jpg" alt="Diagram" class="diagram">
  <div class="annotation">Important Area</div>
</div>

            

              
                Copy
              
            
          

            
.diagram {
  --diagram-anchor: auto;
  anchor-name: --diagram-anchor;
  position: relative;
}

.annotation {
  position: absolute;
  position-anchor: --diagram-anchor;
  top: 20%;
  left: 50%;
  background-color: rgba(255, 255, 0, 0.7);
  padding: 5px;
  border: 1px solid black;
}

            

              
                Copy
              
            
          

ಇಲ್ಲಿ, ಟಿಪ್ಪಣಿಯನ್ನು ರೇಖಾಚಿತ್ರ ಚಿತ್ರದ ಮೇಲಿನಿಂದ 20% ಮತ್ತು ಎಡದಿಂದ 50% ದೂರದಲ್ಲಿ ಇರಿಸಲಾಗಿದೆ.

4. iframes ನೊಂದಿಗೆ ಕ್ರಾಸ್-ಆರಿಜಿನ್ ಪೊಸಿಷನಿಂಗ್

ಒಂದು ವಿಶೇಷವಾಗಿ ಮುಂದುವರಿದ ಬಳಕೆಯ ಪ್ರಕರಣವೆಂದರೆ, iframe ಒಳಗಿನ ವಿಷಯಕ್ಕೆ ಸಾಪೇಕ್ಷವಾಗಿ ಎಲಿಮೆಂಟ್‌ಗಳನ್ನು ಇರಿಸುವ ಸಾಮರ್ಥ್ಯ, iframe ವಿಷಯವು ಬೇರೆ ಡೊಮೇನ್‌ನಿಂದ ಬಂದಿದ್ದರೂ ಸಹ. ಇದು ಡೊಮೇನ್ ಗಡಿಗಳಾದ್ಯಂತ ಬಿಗಿಯಾಗಿ ಸಂಯೋಜಿತ UI ಘಟಕಗಳನ್ನು ರಚಿಸುವ ಸಾಮರ್ಥ್ಯವನ್ನು ಅನ್ಲಾಕ್ ಮಾಡುತ್ತದೆ. ಇದು `cross-origin` ಗುಣಲಕ್ಷಣದಿಂದಾಗಿ. ಒಂದು ಎಲಿಮೆಂಟ್ ಕ್ರಾಸ್-ಆರಿಜಿನ್ iframe ಒಳಗಿನ ಎಲಿಮೆಂಟ್‌ಗೆ ಆಂಕರ್ ಆಗಿದ್ದರೆ, ಬ್ರೌಸರ್ ಆಂಕರ್ ಆದ ಎಲಿಮೆಂಟ್‌ನ ಲೇಔಟ್ ಮಾಹಿತಿಯನ್ನು ಬಹಿರಂಗಪಡಿಸುವ ಮೊದಲು ಅನುಮತಿಯನ್ನು ವಿನಂತಿಸುತ್ತದೆ.

ಇದನ್ನು ಪ್ರದರ್ಶಿಸಲು, ನೀವು ಬೇರೆ ಡೊಮೇನ್‌ನಲ್ಲಿರುವ iframe ಒಳಗಿನ ಬಟನ್ ಅನ್ನು ಟೂಲ್‌ಟಿಪ್‌ಗಾಗಿ ಆಂಕರ್ ಪಾಯಿಂಟ್ ಆಗಿ ಬಳಸಲು ಬಯಸುತ್ತೀರಿ ಎಂದು ಕಲ್ಪಿಸಿಕೊಳ್ಳಿ. ನೀವು ಈ ಕೆಳಗಿನ ಸಿಎಸ್ಎಸ್ ಅನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಬಹುದು:

            
.iframe-container {
  position: relative;
}

iframe {
  --iframe-button-anchor: auto;
  anchor-name: --iframe-button-anchor;
  position: relative;
}

.tooltip {
  position: absolute;
  position-anchor: --iframe-button-anchor;
  top: 100%;
  left: 0;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  padding: 5px;
  z-index: 10;
}

            

              
                Copy
              
            
          

ಇದು ಕ್ರಾಸ್-ಆರಿಜಿನ್ iframe ಒಳಗಿನ ಬಟನ್‌ಗೆ ಸಾಪೇಕ್ಷವಾಗಿ ಟೂಲ್‌ಟಿಪ್ ಅನ್ನು ಇರಿಸಲು ನಿಮಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ, ಇದರಿಂದಾಗಿ ಡೊಮೇನ್ ಗಡಿಗಳಾದ್ಯಂತ ತಡೆರಹಿತ UI ಅನುಭವವನ್ನು ಸೃಷ್ಟಿಸುತ್ತದೆ.

ನಿಖರವಾದ ಪೊಸಿಷನಿಂಗ್‌ಗಾಗಿ `inset-area` ಬಳಸುವುದು

`inset-area` ಪ್ರಾಪರ್ಟಿಯು ಅಬ್ಸಲ್ಯೂಟ್ಲಿ ಪೊಸಿಷನ್ಡ್ ಎಲಿಮೆಂಟ್ ಅನ್ನು ಆಂಕರ್‌ಗೆ ಸಾಪೇಕ್ಷವಾಗಿ ಹೇಗೆ ಇರಿಸಲಾಗಿದೆ ಎಂಬುದರ ಮೇಲೆ ಹೆಚ್ಚಿನ ನಿಯಂತ್ರಣವನ್ನು ಒದಗಿಸುತ್ತದೆ. ಇದು ಆಂಕರ್ ಎಲಿಮೆಂಟ್‌ನ ಯಾವ ಅಂಚುಗಳನ್ನು ಉಲ್ಲೇಖ ಬಿಂದುಗಳಾಗಿ ಬಳಸಬೇಕು ಎಂಬುದನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ.

ಉದಾಹರಣೆಗೆ, ನೀವು ಆಂಕರ್‌ನ ಬಲ ಅಂಚಿಗೆ ಎಲಿಮೆಂಟ್ ಅನ್ನು ಇರಿಸಲು ಬಯಸಿದರೆ, ನೀವು `inset-area: end` ಅನ್ನು ಬಳಸಬಹುದು.

            
.anchor {
  --my-anchor: auto;
  anchor-name: --my-anchor;
  position: relative;
  width: 200px;
  height: 100px;
  background-color: lightblue;
}

.positioned-element {
  position: absolute;
  position-anchor: --my-anchor;
  inset-area: end;
  width: 50px;
  height: 50px;
  background-color: lightcoral;
}

            

              
                Copy
              
            
          

`inset-area` ಗೆ ಇತರ ಸಂಭಾವ್ಯ ಮೌಲ್ಯಗಳು ಸೇರಿವೆ:

• `start`: ಎಲಿಮೆಂಟ್ ಅನ್ನು ಆರಂಭಿಕ ಅಂಚಿಗೆ (LTR ನಲ್ಲಿ ಎಡ, RTL ನಲ್ಲಿ ಬಲ) ಸಾಪೇಕ್ಷವಾಗಿ ಇರಿಸುತ್ತದೆ.
• `end`: ಎಲಿಮೆಂಟ್ ಅನ್ನು ಕೊನೆಯ ಅಂಚಿಗೆ (LTR ನಲ್ಲಿ ಬಲ, RTL ನಲ್ಲಿ ಎಡ) ಸಾಪೇಕ್ಷವಾಗಿ ಇರಿಸುತ್ತದೆ.
• `top`: ಎಲಿಮೆಂಟ್ ಅನ್ನು ಮೇಲಿನ ಅಂಚಿಗೆ ಸಾಪೇಕ್ಷವಾಗಿ ಇರಿಸುತ್ತದೆ.
• `bottom`: ಎಲಿಮೆಂಟ್ ಅನ್ನು ಕೆಳಗಿನ ಅಂಚಿಗೆ ಸಾಪೇಕ್ಷವಾಗಿ ಇರಿಸುತ್ತದೆ.
• `center`: ಎಲಿಮೆಂಟ್ ಅನ್ನು ಆಂಕರ್‌ನ ಕೇಂದ್ರಕ್ಕೆ ಸಾಪೇಕ್ಷವಾಗಿ ಇರಿಸುತ್ತದೆ.

ಹೆಚ್ಚು ಸಂಕೀರ್ಣವಾದ ಪೊಸಿಷನಿಂಗ್ ಸನ್ನಿವೇಶಗಳಿಗಾಗಿ ನೀವು `top start` ಅಥವಾ `bottom end` ನಂತಹ ಕೀವರ್ಡ್‌ಗಳನ್ನು ಬಳಸಿ ಈ ಮೌಲ್ಯಗಳನ್ನು ಸಂಯೋಜಿಸಬಹುದು.

ಪ್ರಾಯೋಗಿಕ ಸಲಹೆಗಳು ಮತ್ತು ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು

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

ಪ್ರವೇಶಿಸುವಿಕೆ (Accessibility) ಪರಿಗಣನೆಗಳು

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

• ಪರ್ಯಾಯ ಪ್ರವೇಶವನ್ನು ಒದಗಿಸಿ: ಟೂಲ್‌ಟಿಪ್ಸ್ ಅಥವಾ ಮೆನುಗಳಂತಹ ಸಂವಾದಾತ್ಮಕ ಎಲಿಮೆಂಟ್‌ಗಳನ್ನು ರಚಿಸಲು ಆಂಕರ್ ಪೊಸಿಷನಿಂಗ್ ಅನ್ನು ಬಳಸಿದರೆ, ಬಳಕೆದಾರರು ಕೀಬೋರ್ಡ್ ನ್ಯಾವಿಗೇಷನ್ ಅಥವಾ ಇತರ ಸಹಾಯಕ ತಂತ್ರಜ್ಞಾನಗಳನ್ನು ಬಳಸಿ ಅದೇ ಕಾರ್ಯವನ್ನು ಪ್ರವೇಶಿಸಬಹುದು ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ.
• ಫೋಕಸ್ ಕ್ರಮವನ್ನು ಕಾಪಾಡಿಕೊಳ್ಳಿ: ಪುಟದಲ್ಲಿನ ಎಲಿಮೆಂಟ್‌ಗಳ ಫೋಕಸ್ ಕ್ರಮವು ತಾರ್ಕಿಕ ಮತ್ತು ಅರ್ಥಗರ್ಭಿತವಾಗಿದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ. ಎಲಿಮೆಂಟ್‌ಗಳು ಫೋಕಸ್ ಪಡೆಯುವ ಕ್ರಮವನ್ನು ನಿಯಂತ್ರಿಸಲು `tabindex` ಗುಣಲಕ್ಷಣವನ್ನು ಬಳಸಿ.
• ARIA ಗುಣಲಕ್ಷಣಗಳನ್ನು ಬಳಸಿ: ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್‌ನ ರಚನೆ ಮತ್ತು ನಡವಳಿಕೆಯ ಬಗ್ಗೆ ಸಹಾಯಕ ತಂತ್ರಜ್ಞಾನಗಳಿಗೆ ಹೆಚ್ಚುವರಿ ಮಾಹಿತಿಯನ್ನು ಒದಗಿಸಲು ARIA (Accessible Rich Internet Applications) ಗುಣಲಕ್ಷಣಗಳನ್ನು ಬಳಸಿ. ಉದಾಹರಣೆಗೆ, ಆಂಕರ್ ಎಲಿಮೆಂಟ್ ಅಥವಾ ಪೊಸಿಷನ್ಡ್ ಎಲಿಮೆಂಟ್‌ಗೆ ವಿವರಣಾತ್ಮಕ ಲೇಬಲ್ ಒದಗಿಸಲು `aria-label` ಬಳಸಿ.
• ಸಹಾಯಕ ತಂತ್ರಜ್ಞಾನಗಳೊಂದಿಗೆ ಪರೀಕ್ಷಿಸಿ: ಯಾವುದೇ ಪ್ರವೇಶಿಸುವಿಕೆ ಸಮಸ್ಯೆಗಳನ್ನು ಗುರುತಿಸಲು ಮತ್ತು ಪರಿಹರಿಸಲು ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್ ಅನ್ನು ಸ್ಕ್ರೀನ್ ರೀಡರ್‌ಗಳು ಮತ್ತು ಇತರ ಸಹಾಯಕ ತಂತ್ರಜ್ಞಾನಗಳೊಂದಿಗೆ ಪರೀಕ್ಷಿಸಿ.

ಸಾಮಾನ್ಯ ಸಮಸ್ಯೆಗಳನ್ನು ನಿವಾರಿಸುವುದು

ಎಚ್ಚರಿಕೆಯ ಯೋಜನೆಯೊಂದಿಗೆ ಸಹ, ಆಂಕರ್ ಪೊಸಿಷನಿಂಗ್ ಬಳಸುವಾಗ ನೀವು ಕೆಲವು ಸವಾಲುಗಳನ್ನು ಎದುರಿಸಬಹುದು. ಇಲ್ಲಿ ಕೆಲವು ಸಾಮಾನ್ಯ ಸಮಸ್ಯೆಗಳು ಮತ್ತು ಅವುಗಳ ಪರಿಹಾರಗಳಿವೆ:

• ಪೊಸಿಷನ್ಡ್ ಎಲಿಮೆಂಟ್ ಕಾಣಿಸುತ್ತಿಲ್ಲ: ಆಂಕರ್ ಎಲಿಮೆಂಟ್‌ಗೆ `anchor-name` ಸೆಟ್ ಮಾಡಲಾಗಿದೆಯೇ ಮತ್ತು ಅಬ್ಸಲ್ಯೂಟ್ಲಿ ಪೊಸಿಷನ್ಡ್ ಎಲಿಮೆಂಟ್ ಅದಕ್ಕೆ ಉಲ್ಲೇಖಿಸುವ `position-anchor` ಅನ್ನು ಹೊಂದಿದೆಯೇ ಎಂದು ಎರಡು ಬಾರಿ ಪರಿಶೀಲಿಸಿ. ಆಂಕರ್ ಎಲಿಮೆಂಟ್‌ನ ಪೊಸಿಷನ್ relative, absolute, fixed, ಅಥವಾ sticky ಗೆ ಸೆಟ್ ಆಗಿದೆಯೇ (ಅಂದರೆ, static ಅಲ್ಲ) ಎಂಬುದನ್ನು ಸಹ ಪರಿಶೀಲಿಸಿ.
• ತಪ್ಪಾದ ಪೊಸಿಷನಿಂಗ್: ಅಪೇಕ್ಷಿತ ಆಫ್‌ಸೆಟ್ ಅನ್ನು ಆಂಕರ್ ಎಲಿಮೆಂಟ್‌ನಿಂದ ಸಾಧಿಸಲು `top`, `right`, `bottom`, ಮತ್ತು `left` ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ಸರಿಯಾಗಿ ಸೆಟ್ ಮಾಡಲಾಗಿದೆಯೇ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ. ಪೊಸಿಷನಿಂಗ್ ಅನ್ನು ಉತ್ತಮಗೊಳಿಸಲು ವಿವಿಧ ಮೌಲ್ಯಗಳು ಮತ್ತು ಸಂಯೋಜನೆಗಳೊಂದಿಗೆ ಪ್ರಯೋಗ ಮಾಡಿ.
• ಅತಿಕ್ರಮಿಸುವ ಎಲಿಮೆಂಟ್‌ಗಳು: ಪುಟದಲ್ಲಿನ ಎಲಿಮೆಂಟ್‌ಗಳ ಸ್ಟ್ಯಾಕಿಂಗ್ ಕ್ರಮವನ್ನು ನಿಯಂತ್ರಿಸಲು `z-index` ಪ್ರಾಪರ್ಟಿಯನ್ನು ಬಳಸಿ. ಪೊಸಿಷನ್ಡ್ ಎಲಿಮೆಂಟ್ ಯಾವುದೇ ಇತರ ಅತಿಕ್ರಮಿಸುವ ಎಲಿಮೆಂಟ್‌ಗಳಿಗಿಂತ ಹೆಚ್ಚಿನ `z-index` ಅನ್ನು ಹೊಂದಿದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ.
• ಹಳೆಯ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ಅನಿರೀಕ್ಷಿತ ನಡವಳಿಕೆ: ನೀವು ಹಳೆಯ ಬ್ರೌಸರ್‌ಗಳನ್ನು ಬೆಂಬಲಿಸಬೇಕಾದ ಯೋಜನೆಯಲ್ಲಿ ಆಂಕರ್ ಪೊಸಿಷನಿಂಗ್ ಅನ್ನು ಬಳಸುತ್ತಿದ್ದರೆ, ಸ್ಥಿರವಾದ ಬಳಕೆದಾರ ಅನುಭವವನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ಫಾಲ್‌ಬ್ಯಾಕ್ ಪರಿಹಾರಗಳು ಅಥವಾ ಪಾಲಿಫಿಲ್‌ಗಳನ್ನು ಒದಗಿಸಿ. ಬ್ರೌಸರ್ ಆಂಕರ್ ಪೊಸಿಷನಿಂಗ್ ಅನ್ನು ಬೆಂಬಲಿಸುತ್ತದೆಯೇ ಎಂದು ಪತ್ತೆಹಚ್ಚಲು ಮತ್ತು ಅದಕ್ಕೆ ತಕ್ಕಂತೆ ಪರ್ಯಾಯ ಶೈಲಿಗಳನ್ನು ಅನ್ವಯಿಸಲು ಫೀಚರ್ ಕ್ವೆರಿಗಳನ್ನು (`@supports`) ಬಳಸುವುದನ್ನು ಪರಿಗಣಿಸಿ.

ಸಿಎಸ್ಎಸ್ ಲೇಔಟ್‌ನ ಭವಿಷ್ಯ

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

ತೀರ್ಮಾನ

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

ಯಾವಾಗಲೂ ಪ್ರವೇಶಿಸುವಿಕೆಗೆ ಆದ್ಯತೆ ನೀಡಲು, ಸಂಪೂರ್ಣವಾಗಿ ಪರೀಕ್ಷಿಸಲು ಮತ್ತು ಇತ್ತೀಚಿನ ಬ್ರೌಸರ್ ಹೊಂದಾಣಿಕೆ ಮಾಹಿತಿಯೊಂದಿಗೆ ನವೀಕೃತವಾಗಿರಲು ಮರೆಯದಿರಿ.

ಸಿಎಸ್ಎಸ್ ಲೇಔಟ್‌ನ ಭವಿಷ್ಯವನ್ನು ಅಪ್ಪಿಕೊಳ್ಳಿ ಮತ್ತು ಇಂದೇ ಆಂಕರ್ ಪೊಸಿಷನಿಂಗ್‌ನೊಂದಿಗೆ ಪ್ರಯೋಗವನ್ನು ಪ್ರಾರಂಭಿಸಿ!

ಸಂಪನ್ಮೂಲಗಳು

• Can I Use (ಬ್ರೌಸರ್ ಹೊಂದಾಣಿಕೆಗಾಗಿ)
• MDN Web Docs (ಸಿಎಸ್ಎಸ್ ಉಲ್ಲೇಖಕ್ಕಾಗಿ)
• CSS-Tricks (ಸಿಎಸ್ಎಸ್ ಟ್ಯುಟೋರಿಯಲ್ ಮತ್ತು ಲೇಖನಗಳಿಗಾಗಿ)