Bahagian pedas

Bayangkan HTML dengan fungsi tab terbina dalam! Itulah idea yang menarik Dave dan "Tabvengers" dari Openui sedang meneroka. Penyelidikan mereka mendedahkan sentuhan yang mengejutkan: sejagat<tabs></tabs> Unsur bukan penyelesaian terbaik.

Penyelidikan yang meluas ke dalam pelaksanaan tab sedia ada di pelbagai platform (sistem operasi, permainan, perpustakaan, dan komponen web) menyerlahkan variasi reka bentuk yang signifikan. Pasukan menyimpulkan bahawa memberi tumpuan kepada kemampuan reka bentuk - bagaimana UI membentangkan dirinya sendiri - adalah kunci. Walaupun reka bentuk tab seperti folder klasik adalah satu pendekatan, ia berfungsi sama dengan akordion dan <details>/<summary></summary></details> unsur -unsur. Penyelesaian yang paling berkesan mungkin untuk menyokong pelbagai kemampuan reka bentuk dan membolehkan beralih di antara mereka (contohnya, berdasarkan saiz skrin).

Penyelesaian yang elegan? Memanfaatkan HTML semantik yang ada:

<h2> Header</h2>
<p>Kandungan</p>

<h2>Header</h2>
<p>Kandungan</p>

<h2>Header</h2>
<p>Kandungan</p>

Pendekatan ini menawarkan beberapa kelebihan:

1. Foundation Solid: Struktur HTML asas adalah sah dan memberikan dengan betul.
2. Fleksibiliti reka bentuk: Headers boleh digayakan sebagai tab atau elemen ringkasan bergantung kepada reka bentuk yang dipilih.
3. Kesesuaian: Kemampuan reka bentuk yang berbeza boleh dilaksanakan menggunakan CSS.

Tabvengers mencadangkan<spicy-sections></spicy-sections> - Komponen web membungkus HTML semantik ini. CSS kemudian secara dinamik mengawal reka bentuk berdasarkan faktor seperti lebar skrin:

<spicy-sections>
  <h2>Header</h2>
  <p>Kandungan</p>

  <h2>Header</h2>
  <p>Kandungan</p>

  <h2>Header</h2>
  <p>Kandungan</p>
</spicy-sections>

bahagian pedas {
  -Const-MQ-Affordances:
    [Skrin dan (Max-Width: 40EM)] Keruntuhan |
    [Skrin dan (Min-lebar: 60EM)] tab-bar;
  paparan: blok;
}

Contoh -contoh yang menggambarkan pendekatan ini tersedia, termasuk video yang menunjukkan reka bentuk responsif. Walaupun kini komponen web tersuai, harapannya ialah konsep ini akan memberi inspirasi kepada perbincangan yang membawa kepada sokongan HTML dan CSS asli, memudahkan pelaksanaan tab untuk pemaju dan meningkatkan kebolehcapaian.

Untuk maklumat lanjut, meneroka Shoptalk 486 (15:17), penyelidikan Hidde de Vries, dan persembahan Dave "HTML dengan kuasa besar" untuk mendapatkan pandangan tentang kuasa komponen web.

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