Temuduga Frontend: Model Peletakan Sauh (Anchor Positioning) dan Primitif CSS

1. Prompt dan Kes Penggunaan

Satu anotasi harga mengikut kad produk. Permulaan sebarisnya (inline start) dijajarkan dengan permulaan kandungan kad, dan saiz sebarisnya sepadan dengan kad tersebut. Hubungan ini mesti kekal utuh dalam mod penulisan kiri-ke-kanan, kanan-ke-kiri, dan menegak. Suatu senarai memaparkan banyak pasangan kad-dan-anotasi, manakala paparan lain meregangkan penanda julat (range marker) antara dua titik akhir yang berasingan.

Soalan ini adalah mengenai model susun atur CSS Anchor Positioning: bagaimana elemen menjadi sauh (anchor), bagaimana elemen dengan kedudukan mutlak (absolute) memilih sauh lalai, bagaimana fungsi kedudukan dan saiz diselesaikan, dan bagaimana skop nama serta blok yang mengandungi (containing block) mengekang hubungan tersebut. Perlanggaran viewport dan interaksi widget terapung adalah topik pelaksanaan yang berasingan.

2. Perkara yang Diuji oleh Penemuduga

Sama ada anda memahami bahawa anchor-name mendedahkan sauh dan position-anchor memilih sauh lalai untuk elemen yang diletakkan kedudukannya.
Sama ada anda membezakan anchor(), yang menyelesaikan kedudukan, daripada anchor-size(), yang menyelesaikan panjang.
Sama ada anda menggunakan inset logik dan saiz logik untuk sokongan mod penulisan dan bukannya menetapkan segalanya pada left dan right.
Sama ada anda mengetahui bahawa urutan sumber (source order), skop pepohon (tree scope), dan anchor-scope mempengaruhi pemadanan nama yang sama.
Sama ada anda memeriksa blok yang mengandungi bagi elemen berkedudukan tersebut kerana nilai sauh masih terlibat dalam pengiraan kedudukan biasa.

3. Soalan Penjelasan untuk Ditanya Dahulu

Adakah sasaran tersebut position: absolute atau position: fixed, dan elemen manakah yang membentuk blok yang mengandunginya?
Adakah hubungannya satu-ke-satu, banyak sasaran kepada satu sauh, atau satu sasaran kepada beberapa sauh?
Adakah halaman mengulangi komponen dengan nama yang sama atau merentasi sempadan pepohon seperti Shadow DOM?
Adakah komponen perlu menyokong mod penulisan kanan-ke-kiri dan menegak? Patutkah ia menyalin lebar fizikal atau saiz sebaris (inline) logik?
Apakah nilai kedudukan biasa yang patut digunakan jika sauh bernama tiada atau tidak boleh diterima dalam konteks semasa?

4. Rangka Jawapan 30 Saat

Berikan elemen sumber pengecam bertanda sempang (dashed identifier) dengan anchor-name, kemudian jadikan sasaran tersebut absolute atau fixed dan pilih sumber tersebut dengan position-anchor. Gunakan anchor() untuk membaca tepi sauh dan anchor-size() untuk membaca dimensi fizikal atau logik; inset sasaran masih diselesaikan dalam blok yang mengandunginya sendiri. Gunakan inset-inline-*, inset-block-*, dan inline-size untuk sokongan mod penulisan. Skopkan nama yang berulang dengan anchor-scope, dan namakan sauh secara eksplisit di dalam fungsi apabila satu sasaran bergantung pada beberapa sumber.

5. Daripada Sauh kepada Susun Atur Akhir

Langkah 1: Wujudkan Hubungan Sauh yang Eksplisit

Sumber mendedahkan satu atau lebih nama melalui anchor-name. Sasaran mesti diletakkan kedudukan secara mutlak (absolute) atau tetap (fixed) sebelum position-anchor boleh memilih sauh lalainya:

css

.product-card {
  anchor-name: --product-card;
}

.price-note {
  position: absolute;
  position-anchor: --product-card;
}

position-anchor hanya menetapkan rujukan lalai. Ia tidak menetapkan inset atau menggantikan blok yang mengandungi bagi sasaran. Jika nama tidak dapat diselesaikan kepada sauh yang boleh diterima, fungsi bergantung akan menggunakan sandaran (fallback) mereka atau menjadi tidak sah, jadi sandaran peletakan kedudukan biasa masih memerlukan hasil yang boleh diramal.

Langkah 2: Baca Kedudukan dengan anchor()

anchor() menghasilkan panjang untuk sifat inset, menyambungkan satu tepi sasaran ke tepi sauh. Inset logik membolehkan peraturan yang sama mematuhi mod penulisan yang berbeza:

css

.price-note {
  position: absolute;
  position-anchor: --product-card;
  inset-block-start: anchor(end);
  inset-inline-start: anchor(start);
}

Di sini, start dan end diselesaikan pada paksi yang berkaitan. Untuk merujuk sesuatu selain sauh lalai, letakkan namanya terus di dalam fungsi, seperti anchor(--sidebar end). Nama eksplisit membolehkan sifat berbeza pada satu sasaran bergantung pada sumber yang berbeza.

Langkah 3: Bina Hubungan Saiz dengan anchor-size()

anchor-size() mengembalikan dimensi fizikal atau logik, bukannya koordinat. Anotasi boleh menyalin lebar logik kad seperti ini:

css

.price-note {
  inline-size: anchor-size(inline);
  max-inline-size: min(32rem, anchor-size(inline));
}

width dan height sesuai untuk hubungan fizikal yang eksplisit; inline dan block sesuai untuk komponen yang mematuhi mod penulisan. Fungsi ini juga boleh mengambil bahagian dalam calc(), contohnya untuk mendapatkan jarak daripada sebahagian saiz sebaris (inline) sauh. Ia hanya membekalkan panjang; kedudukan elemen masih mengikut peraturan peletakan kedudukan mutlak.

Langkah 4: Rujuk Lebih daripada Satu Sauh

Penanda julat boleh mengaitkan permulaan sebagai sauh lalainya sambil membaca penamat secara eksplisit dalam inset yang lain:

css

.range-start { anchor-name: --range-start; }
.range-end { anchor-name: --range-end; }

.range-band {
  position: absolute;
  position-anchor: --range-start;
  inset-inline-start: anchor(--range-start center);
  inset-inline-end: anchor(--range-end center);
}

Elemen yang diletakkan kedudukan masih hanya mempunyai satu sauh lalai yang berkaitan melalui position-anchor; nama lain boleh mengambil bahagian dalam pengiraan kedudukan melalui anchor(). Perkaitan lalai tersebut juga mempengaruhi tingkah laku seperti lampiran tatal (scroll attachment). Kedua-dua nilai inset memasuki persamaan blok yang mengandungi sasaran, jadi reka bentuk mesti mentakrifkan sandaran untuk sauh yang hilang, bersilang, atau tidak boleh diterima.

Langkah 5: Skopkan Nama Sauh yang Berulang

Jika setiap komponen yang berulang mengisytiharkan --item, elemen berkedudukan tanpa skop mungkin sepadan dengan sauh terakhir yang boleh diterima mengikut urutan sumber. anchor-scope mengehadkan nama yang sama kepada sub-pepohon komponen:

css

.result-row {
  anchor-scope: --item;
}

.result-row__value { anchor-name: --item; }
.result-row__note {
  position: absolute;
  position-anchor: --item;
  inset-inline-start: anchor(end);
}

Ini mengawal keterlihatan nama. Ia tidak boleh memaksa rujukan merentasi skop pepohon, dan ia tidak membentuk blok yang mengandungi. Komponen masih memerlukan leluhur berkedudukan yang disengajakan.

Langkah 6: Sertakan Blok yang Mengandungi dalam Model

Kedudukan yang dikembalikan oleh anchor() ditukar kepada panjang yang boleh digunakan oleh inset sasaran, tetapi sasaran masih disusun atur oleh blok yang mengandungi kedudukan mutlaknya sendiri. Bertukar antara absolute dan fixed, mengalihkan sasaran dalam DOM, atau mewujudkan konteks kedudukan baharu pada leluhur boleh mengubah hasilnya. Apabila penempatan salah, periksa blok yang mengandungi bagi sasaran sebelum menyahpepijat pemadanan sauh.

6. Contoh Jawapan Berkualiti Tinggi

Anchor Positioning pertama sekali mengaitkan elemen sumber dengan sasaran yang diletakkan kedudukannya. Sumber mengisytiharkan nama dengan anchor-name; sasaran absolute atau fixed memilih sumber lalainya dengan position-anchor. anchor() membekalkan kedudukan kepada inset, manakala anchor-size() membekalkan dimensi fizikal atau logik. Saya menggunakan inset logik dan inline-size untuk penulisan kanan-ke-kiri atau menegak. Sasaran yang memerlukan dua sumber memilih satu perkaitan lalai dan menamakan setiap sumber di dalam anchor() yang berkaitan; komponen senarai yang berulang menggunakan anchor-scope untuk mengasingkan nama yang sama. Saya juga mengesahkan blok yang mengandungi bagi sasaran, kerana fungsi sauh tidak memintas model kedudukan mutlak.

7. Kesilapan Biasa

Mengisytiharkan hanya anchor-name dan mengharapkan pergerakan → hubungan berkedudukan belum wujud → jadikan sasaran absolute atau fixed dan rujuk nama tersebut.
Menganggap anchor() sebagai fungsi saiz → tanggungjawab kedudukan dan dimensi menjadi keliru → gunakan anchor() untuk tepi dan anchor-size() untuk dimensi.
Mengodkan secara keras (hard-code) left dan width → penulisan kanan-ke-kiri atau menegak menterbalikkan hubungan yang dimaksudkan → pilih inset logik dan saiz logik.
Menggunakan semula satu nama merentas item senarai tanpa skop → sasaran mengikut sauh bernama sama yang terakhir → tetapkan anchor-scope pada setiap bekas komponen.
Menganggap anchor-scope sebagai blok yang mengandungi → pemadanan adalah betul tetapi koordinat masih salah → periksa leluhur yang berkedudukan secara berasingan.
Menetapkan satu position-anchor lalai untuk sasaran berbilang sauh → sifat lain masih membaca sumber yang salah → namakan setiap sumber secara eksplisit dalam anchor() masing-masing.

8. Soalan Susulan dan Jawapan

Soalan Susulan 1: Bagaimanakah perbezaan anchor() berbanding position-area?

anchor() menukarkan tepi sauh tertentu kepada panjang untuk inset, yang berguna untuk hubungan tepi-ke-tepi yang tepat. position-area meletakkan sasaran dalam grid kawasan yang berpusat pada sauh, yang menyatakan kawasan penempatan yang lebih luas. Kedua-duanya berada di bawah model yang sama tetapi menyelesaikannya pada tahap yang berbeza.

Soalan Susulan 2: Adakah anchor-size() menyebabkan sasaran mengikut pergerakan sauh?

Tidak. Ia mengira panjang. Penjejakan kedudukan datang daripada anchor(), position-area, atau peraturan peletakan kedudukan yang lain. Menetapkan inline-size: anchor-size(inline) sahaja menyegerakkan saiz logik, bukan lokasi.

Soalan Susulan 3: Apakah yang berlaku apabila beberapa elemen berkongsi satu anchor-name?

Sasaran memilih sauh yang boleh diterima mengikut peraturan pemadanan, jadi komponen yang berulang semuanya boleh diselesaikan kepada sumber bernama sama yang terkemudian. Skopkan nama di dalam setiap komponen dengan anchor-scope, atau berikan kejadian nama eksplisit yang berbeza.

Soalan Susulan 4: Mengapakah sasaran boleh teranjak (offset) sedangkan sauh sudah betul?

Insetnya masih mengambil bahagian dalam peletakan kedudukan mutlak. Blok yang mengandungi, mod penulisan, margin, dan saiz sasaran semuanya mempengaruhi hasil akhir. Periksa blok yang mengandungi bagi sasaran terlebih dahulu, kemudian sahkan sauh lalainya dan nilai diselesaikan bagi setiap fungsi.