Posisi Anchor Queirks

CSS-Tricks Almanac kini mempunyai liputan komprehensif mengenai API kedudukan utama yang baru, memperincikan setiap harta, fungsi, dan aturan. Saya baru-baru ini menyelam ke dalam modul ini mendedahkan beberapa kebiasaan yang menarik dan pepijat yang berpotensi, yang akan saya pelajari di sini untuk menjimatkan beberapa pengikis kepala.

blok yang diubahsuai inset (IMCB)

Walaupun blok yang mengandungi unsur -unsur statik adalah mudah (kawasan kandungan ibu bapa), unsur -unsur yang benar -benar diposisikan memperkenalkan kerumitan. Blok yang mengandungi mereka biasanya adalah viewport atau nenek moyang yang terdekat. Walau bagaimanapun,

yang diubah suai yang diubahsuai blok (IMCB) menambah lapisan nuansa, terutamanya berkaitan dengan kedudukan utama.

IMCB ditakrifkan dalam spesifikasi sebagai blok yang mengandungi dengan berkesan menyusut oleh sifat

(inset, top, right, bottom) dari elemen yang benar -benar diposisikan. left

misalnya:

.absolute {
  position: absolute;
  top: 80px;
  right: 120px;
  bottom: 180px;
  left: 90px;
}

di sini, IMCB lebih kecil daripada viewport, dikurangkan oleh nilai inset yang ditentukan. Memahami IMCB adalah penting untuk menguasai kedudukan sauh, terutamanya sifat

dan position-area. position-try-order membahagikan blok yang mengandungi ke dalam grid, dan IMCB mentakrifkan kawasan kedudukan dalam grid tersebut. position-area menggunakan dimensi IMCB untuk menentukan kedudukan sandaran. Alat visual Una Kravets di position-try-order https://www.php.cn/link/7e77e4a1b051ec0a510b48eaec2f3a3c Menyediakan visualisasi yang sangat baik. Spesifikasi vs Pelaksanaan: Kisah Evolusi Rapid

Walaupun spec berfungsi sebagai panduan yang berharga, pelaksanaan pelayar dunia nyata mendedahkan percanggahan. Perkembangan pesat dan penempatan kedudukan sauh (draf pertama Jun 2023, pelepasan Chrome 125) membawa kepada beberapa ketidakkonsistenan awal antara tingkah laku spec dan pelayar. Perubahan yang dibuat selepas pelaksanaan penyemak imbas awal termasuk:

• inset-area Dinamakan semula kepada position-area: inset-area ditutup, gunakan position-area.
• position-try-options Dinamakan semula ke position-try-fallbacks: Gunakan position-try-fallbacks.
Fungsi yang dikeluarkan:
• Fungsi pembalut tidak lagi diperlukan untuk . inset-area() position-try-fallbacks
penyederhanaan:
• sintaks yang lebih ringkas untuk pusat kini tersedia. anchor(center) bugs:
Beberapa pepijat wujud, terutamanya mengenai
• tingkah laku apabila jangkar lalai tidak hadir dan tingkah laku lalai. position-area position-visibility Pertimbangan Kebolehcapaian

manakala kedudukan sauh cemerlang untuk tooltips dan popovers, menggunakannya untuk tujuan hiasan semata -mata (mis., Menyambung unsur dengan garis) boleh menghalang aksesibiliti. Pembaca skrin mungkin tidak memahami hubungan antara unsur -unsur yang dikaitkan dengan visual tetapi semantik yang tidak berkaitan. Menggunakan atribut ARIA seperti

dan

disyorkan untuk mewujudkan hubungan semantik yang jelas, memastikan kebolehcapaian untuk teknologi bantuan.

aria-describedby Kesimpulan role

Menguasai kedudukan sauh memerlukan menavigasi kerumitannya. Walaupun CSS-Tricks Almanac menyediakan sumber yang berharga, ingatlah bahawa API masih berkembang, menjanjikan peluang pembelajaran selanjutnya dan penambahbaikan masa depan yang berpotensi.

Atas ialah kandungan terperinci Posisi Anchor Queirks. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!