Penyelesaian responsif untuk jadual perbandingan ciri

mata utama

Reka bentuk dan jadual web responsif tidak sesuai dengan sempurna, tetapi disebabkan struktur stabil mereka, masih ada ruang untuk penambahbaikan dalam jadual perbandingan berfungsi.
Jadual perbandingan fungsi responsif yang berjaya dengan mudah membezakan produk, dengan jelas mengenal pasti fungsi, dan tunjukkan sama ada fungsi produk wujud.
Dua pilihan untuk mewujudkan jadual perbandingan ciri responsif termasuk: menggunakan Flexbox (kadar sokongan penyemak imbas moden melebihi 80%, 93% kadar sokongan termasuk versi penyemak imbas yang memerlukan awalan) dan menggunakan tag tambahan dan peranan aria (lebih sesuai untuk versi lama Android dan iOS).
Sama ada pilihan dipilih, kebolehbacaan, kebolehcapaian dan ketersediaan mesti dipertimbangkan apabila merancang jadual perbandingan ciri responsif untuk memastikan bahawa mereka mesra dan boleh diakses oleh semua pengguna, termasuk pengguna kurang upaya.

Reka bentuk dan jadual web responsif bukan rakan kongsi terbaik. Ramai orang telah mengkaji ini dan merancang banyak kaedah (beberapa di antaranya baru -baru ini diringkaskan dalam artikel di SitePoint). Walau bagaimanapun, kami masih jauh dari penyelesaian yang sempurna dan carian berterusan.

Walaupun keadaan umum masih rumit, beberapa situasi tertentu dapat mendapat perhatian lebih. Apa yang saya bicarakan di sini adalah jadual perbandingan fungsi. Kami boleh menemuinya di banyak tempat-apabila memilih kereta dan cuba menentukan pilihan tambahan yang dipilih; sebagai pertukaran wang di portal.

Oleh kerana jenis jadual ini mempunyai struktur yang agak stabil dan konsisten, ia dapat mengawal kelakuannya dengan lebih baik apabila dipaparkan pada skrin kecil.

Struktur Jadual Perbandingan Fungsi

Jadual perbandingan klasik meletakkan sekurang -kurangnya tiga produk (ditunjukkan dalam lajur) bersama -sama, manakala fungsi dipaparkan dalam baris di bawah. Dalam struktur tradisional, sel pertama setiap baris mengandungi nama fungsi, manakala sel di bawah setiap produk mengandungi tanda semak atau beberapa simbol lain yang menunjukkan sama ada fungsi itu dimiliki oleh produk. Kita boleh mencari contoh hebat struktur klasik ini: di sini, di sini dan di sini.

Berdasarkan contoh -contoh ini, kita boleh menggunakan kod berikut untuk meringkaskan struktur jadual perbandingan:

<code class="language-html"><table>
  <thead>
    <tr>
      <th></th>
      <th>产品 1</th>
      <th>产品 2</th>
      <th>产品 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>功能 1</td>
      <td>✔</td>
      <td>✔</td>
      <td>✔</td>
    </tr>
    <tr>
      <td>功能 2</td>
      <td>—</td>
      <td>✔</td>
      <td>✔</td>
    </tr>
    <tr>
      <td>功能 3</td>
      <td>—</td>
      <td>—</td>
      <td>✔</td>
    </tr>
    <tr>
      <td>功能 4</td>
      <td>—</td>
      <td>—</td>
      <td>✔</td>
    </tr>
  </tbody>
</table></code>

Adalah mudah untuk mengenal pasti unsur-unsur yang disebutkan di atas: nama produk, nama ciri, dan tanda yang menunjukkan sama ada fungsi atau tidak wujud atau tidak. Ambil perhatian bahawa kod ✔ mewakili watak semak (✔).

Sekarang kita berada di akar masalah. Agar jadual untuk mengekalkan kecekapan optimum pada lebar skrin rendah, syarat -syarat berikut mesti dipenuhi:

Pengguna mesti dapat dengan mudah membezakan produk;
• Fungsi mesti diiktiraf dengan mudah;
Adalah perlu jelas sama ada fungsi produk wujud.
• Cara terbaik untuk mencapai hasil ini adalah untuk memindahkan sel yang mengandungi nama ciri ke bahagian atas tiga sel lain yang menandakan kehadiran atau ketiadaan fungsi.

Pelan 1: Flexbox

bagaimana kita melakukan ini? Satu jawapan ialah Flexbox. Jika anda tidak tahu apa Flexbox, atau memerlukan ulasan, anda boleh menyemak artikel terbaru Nick Salloum mengenai topik ini. Selebihnya kita boleh menyelidiki penyelesaiannya.

Pertama sekali, kita perlu memastikan perubahan kita hanya berlaku pada skrin kecil. Untuk melakukan ini, kami menggunakan pertanyaan media untuk mencari kod kami, menggunakan lebar klasik 768 piksel sebagai titik putus:

<code class="language-html"><table>
  <thead>
    <tr>
      <th></th>
      <th>产品 1</th>
      <th>产品 2</th>
      <th>产品 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>功能 1</td>
      <td>✔</td>
      <td>✔</td>
      <td>✔</td>
    </tr>
    <tr>
      <td>功能 2</td>
      <td>—</td>
      <td>✔</td>
      <td>✔</td>
    </tr>
    <tr>
      <td>功能 3</td>
      <td>—</td>
      <td>—</td>
      <td>✔</td>
    </tr>
    <tr>
      <td>功能 4</td>
      <td>—</td>
      <td>—</td>
      <td>✔</td>
    </tr>
  </tbody>
</table></code>

Terdapat beberapa perkara penting dalam set peraturan ini yang dapat mencapai kesan ajaib:

• Kami menukar nilai paparan baris jadual untuk flex dan memberitahu unsur -unsur anaknya untuk diedarkan secara merata dalam baris.
• Seterusnya, kami mengarahkan sel -sel untuk menormalkannya ke dalam bekas normal (memelihara nilai lalai akan menyebabkan gangguan dengan peraturan jadual, terutamanya dari segi saiz).
• Langkah seterusnya adalah mencari sel pertama dalam setiap baris untuk menjadi 100% lebar dan menukar warna latar untuk meningkatkan kontras. Peraturan proses menyimpannya di bahagian atas tiga sel lain - itulah yang kita perlukan.
• Kami membuat perubahan dengan menyembunyikan th pertama supaya tiada apa yang dipaparkan di atas nama produk.

Anda boleh melihat demo di sini.

Jelas sekali, keberkesanan penyelesaian hanya bergantung pada tahap sokongannya. Menurut Caniuse.com, Flexbox mempunyai lebih daripada 80% sokongan untuk kebanyakan varian moden, dan lebih dari 93% jika kita memasukkan versi pelayar sebelumnya yang memerlukan awalan atau peraturan penggunaan. Sokongan IE bermula dengan IE10 (hanya sintaks 2012), manakala IE11 sepenuhnya menyokongnya. Kerana kita memberi tumpuan terutamanya kepada sokongan pada skrin kecil, kita boleh mengabaikan kekurangan sokongan untuk versi IE sebelumnya. Di sisi mudah alih, sokongan bermula dengan Android 4.4 dan iOS 7.1. Versi terdahulu memerlukan awalan vendor dan tidak menyokong fungsi bungkus.

anda juga harus menyediakan pilihan sandaran seperti div menatal yang digunakan dalam bootstrap. Dengan cara ini, pelawat di luar sokongan masih mempunyai alternatif paparan yang lain.

Skema 2: Tanda Tambahan ARIA Peranan

Jika kebanyakan penyemak imbas yang anda mahu menyokong tidak menyokong Flexbox, terdapat alternatif. Malah, ini adalah penyelesaian yang saya gunakan dalam projek sebenar pada tahun 2013. Kami memerlukan beberapa tag tambahan: Kami perlu menambah garis tambahan, menyalin nama fungsi. Walaupun operasi manual boleh kelihatan membosankan, mereka boleh dilakukan secara automatik jika anda membaca maklumat dari sumber data. Akhirnya, kod dalam contoh awal kita sepatutnya kelihatan seperti ini:

<code class="language-css">@media screen and (max-width: 768px) {
  tr {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
  }

  td, th {
    display: block;
    width: 33%;
  }

  th:first-child,
  td:first-child {
    text-align: center;
    background: #efefef;
    width: 100%;
  }

  th:first-child {
    display: none;
  }
}</code>

CSS juga sangat mudah:

<code class="language-html"><table>
  <thead>
    <tr>
      <th></th>
      <th>产品 1</th>
      <th>产品 2</th>
      <th>产品 3</th>
    </tr>
  </thead>
  <tbody>
    <tr class="visible-xs" aria-hidden="true">
      <td></td>
      <td colspan="3">功能 1</td>
    </tr>
    <tr>
      <td>功能 1</td>
      <td>✔</td>
      <td>✔</td>
      <td>✔</td>
    </tr>
    <tr class="visible-xs" aria-hidden="true">
      <td></td>
      <td colspan="3">功能 2</td>
    </tr>
    <tr>
      <td>功能 2</td>
      <td>—</td>
      <td>✔</td>
      <td>✔</td>
    </tr>
    <tr class="visible-xs" aria-hidden="true">
      <td></td>
      <td colspan="3">功能 3</td>
    </tr>
    <tr>
      <td>功能 3</td>
      <td>—</td>
      <td>—</td>
      <td>✔</td>
    </tr>
    <tr class="visible-xs" aria-hidden="true">
      <td></td>
      <td colspan="3">功能 4</td>
    </tr>
    <tr>
      <td>功能 4</td>
      <td>—</td>
      <td>—</td>
      <td>✔</td>
    </tr>
  </tbody>
</table></code>

Untuk meningkatkan kebolehcapaian, kita boleh melangkah lebih jauh dan menggunakan aria-hidden = "true" untuk menyembunyikan penanda tambahan dari pembaca skrin. Dengan cara ini, aplikasi pembaca skrin yang menghormati spesifikasi tersembunyi Aria tidak membaca kandungan pendua dua kali.

Ini adalah demonstrasi penyelesaian kedua.

Kesimpulan

kami mendapati dua cara untuk membuat jadual perbandingan benar -benar responsif. Kedua -duanya mempunyai kelebihan dan kekurangan mereka. Akhirnya, pilihan harus bergantung pada penonton anda. Bagi kebanyakan kes, pilihan pertama (dengan pelan sandaran) sepatutnya mencukupi. Jika anda benar -benar perlu memenuhi versi lama Android dan iOS, anda boleh menggunakan pilihan kedua. Sama ada cara, jadual perbandingan ciri anda akan kelihatan lebih baik dari sekarang, tanpa mengira saiz skrin.

(bahagian Soalan Lazim dalam dokumen asal ditinggalkan di sini kerana kandungan bahagian ini tidak sepadan dengan matlamat asal pseudo dan terlalu lama. Jika perlu, pseudo-asal Soalan Lazim dapat ditangani secara berasingan.)

Atas ialah kandungan terperinci Penyelesaian responsif untuk jadual perbandingan ciri. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!