Tampilan pohon di CSS

Tampilan hierarki (daftar yang dapat dilipat) hanya dapat dibuat menggunakan HTML dan CSS, tanpa perlu JavaScript. Perangkat lunak aksesibilitas akan melihat tampilan hierarki sebagai daftar bersarang di dalam widget pengungkapan, dan interaksi keyboard standar didukung secara otomatis.

Itu HTML

Kita mulai dengan HTML untuk daftar bersarang sederhana:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

<ul>
  <li>
    Giant planets
    <ul>
      <li>
        Gas giants
        <ul>
          <li>Jupiter</li>
          <li>Saturn</li>
        </ul>
      </li>
      <li>
        Ice giants
        <ul>
          <li>Uranus</li>
          <li>Neptune</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Kami kemudian menambahkan kelas ke terluar <ul> elemen, dan untuk setiap item daftar yang berisi daftar bersarang, kami memasukkan konten item daftar di dalamnya <details> dan <summary> elemen, dengan menggunakan open atribut untuk mengontrol daftar bersarang mana yang awalnya diperluas:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<ul class="tree">
  <li>
    <details open>
      <summary>Giant planets</summary>
      <ul>
        <li>
          <details>
            <summary>Gas giants</summary>
            <ul>
              <li>Jupiter</li>
              <li>Saturn</li>
            </ul>
          </details>
        </li>
        <li>
          <details>
            <summary>Ice giants</summary>
            <ul>
              <li>Uranus</li>
              <li>Neptune</li>
            </ul>
          </details>
        </li>
      </ul>
    </details>
  </li>
</ul>

Tanpa gaya apa pun, ini HTML menghasilkan:

Browser mengimplementasikan <details> elemen sebagai widget pengungkapan, memberikan kemampuan untuk memperluas dan menciutkan daftar bersarang, tetapi kombinasi poin-poin dan panah pengungkapan menghasilkan antarmuka pengguna yang membingungkan.

Properti khusus

Ada dua dimensi yang memengaruhi tata letak tampilan hierarki: jarak antar baris (yang sama dengan tinggi baris teks) dan radius penanda. Kita mulai dengan membuat properti khusus CSS untuk dimensi ini:

1
2
3
4

.tree
  --spacing : 1.5rem;
  --radius  : 10px;

Meskipun kami biasanya menggunakan unit relatif untuk menskalakan kontrol antarmuka pengguna berdasarkan ukuran teks, untuk penanda ini dapat menyebabkan kontrol yang terlalu kecil atau terlalu besar, jadi kami akan menggunakan ukuran tetap yang wajar.

Lapisan

Kami kemudian menata item daftar dan daftar bersarang untuk memberi ruang bagi garis dan penanda:

 6
 7
 8
 9
10
11
12
13
14
15

.tree li
  display      : block;
  position     : relative;
  padding-left : calc(2 * var(--spacing) - var(--radius) - 2px);


.tree ul
  margin-left  : calc(var(--radius) - var(--spacing));
  padding-left : 0;

Baris 7 menghapus poin-poin dari item daftar. Baris 8 menetapkan konteks susun baru dan berisi blok yang akan kita gunakan untuk memposisikan garis dan penanda.

Baris 9 mengindentasi item daftar. Lekukan sama dengan dua kali spasi, dikurangi radius penanda, dikurangi lebar garis dua piksel. Hasilnya adalah teks dalam item daftar akan sejajar dengan sisi kiri penanda di bawahnya.

Baris 13 menggunakan margin negatif untuk mengkompensasi indentasi yang diperkenalkan oleh baris 9, memastikan daftar bersarang diindentasi hanya dengan spasi yang diinginkan. Baris 14 menghapus padding default yang diterapkan browser ke daftar.

Pada tampilan hierarki dengan semua daftar bersarang yang awalnya diperluas, menerapkan gaya ini akan menghasilkan:

Garis vertikal

Selanjutnya kita menambahkan garis vertikal yang membentuk bagian dari garis yang menghubungkan penanda setiap item daftar ke penanda daftar bersarangnya:

17
18
19
20
21
22
23

.tree ul li
  border-left : 2px solid #ddd;


.tree ul li:last-child
  border-color : transparent;

Kami menggunakan batas untuk membuat garis, dan menyembunyikannya pada item terakhir di setiap daftar karena garis tidak boleh melewati penanda item ini. Membuat perbatasan transparan, daripada menghapusnya sepenuhnya, menghindari kebutuhan untuk menambah padding untuk mengkompensasi.

Menerapkan gaya ini menghasilkan:

Garis horizontal

Kami menggunakan konten yang dihasilkan untuk menambahkan garis horizontal yang menggabungkan garis vertikal ke penanda setiap item daftar:

25
26
27
28
29
30
31
32
33
34
35

.tree ul li::before
  content      : '';
  display      : block;
  position     : absolute;
  top          : calc(var(--spacing) / -2);
  left         : -2px;
  width        : calc(var(--spacing) + 2px);
  height       : calc(var(--spacing) + 1px);
  border       : solid #ddd;
  border-width : 0 0 2px 2px;

Kode ini juga membuat garis vertikal pendek, karena garis vertikal yang dibuat sebelumnya tidak memanjang sampai ke penanda di ujung atas dan bawahnya.

Baris 26 dan 27 menghasilkan sebuah blok, dan baris 28 sampai 30 memposisikannya mulai dari titik tengah baris teks sebelumnya, tumpang tindih dengan garis vertikal di sebelah kirinya.

Baris 31 dan 32 mengatur ukuran balok. Perlu dua piksel lebih lebar dari jarak karena tumpang tindih dengan garis vertikal di sebelah kirinya, dan satu piksel lebih tinggi dari jarak karena setengah lebar garis horizontal terletak di bawah titik tengah baris teks. Perhatikan bahwa kami mengasumsikan penggunaan ukuran kotak batas, jadi dimensi ini menyertakan batas.

Baris 33 dan 34 membuat batas di sisi kiri dan bawah blok.

Menerapkan gaya ini menghasilkan:

Ringkasan

Selanjutnya kami menghapus gaya default dari ringkasan:

37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

.tree summary
  display : block;
  cursor  : pointer;


.tree summary::marker,
.tree summary::-webkit-details-marker
  display : none;


.tree summary:focus
  outline : none;


.tree summary:focus-visible
  outline : 1px dotted #000;

Baris 38 dan 44 menghapus panah pengungkapan. Baris 44 diperlukan untuk Safari, dengan dua pemilih pada baris 42 dan 43 mencakup versi browser yang berbeda. Baris 39 mengubah kursor untuk menunjukkan bahwa ringkasan dapat diklik untuk berinteraksi dengannya.

Safari menampilkan indikator fokus di sekitar ringkasan, bahkan saat menggunakan penunjuk daripada navigasi keyboard, jadi kami menghapus gaya fokus pada baris 48 dan kemudian menggunakan :focus-visible pseudo-class untuk menambahkannya kembali untuk pengunjung menggunakan navigasi keyboard di baris 52.

Menerapkan gaya ini menghasilkan:

Penanda

Kami menggunakan konten yang dihasilkan lagi untuk membuat penanda:

55
56
57
58
59
60
61
62
63
64
65
66

.tree li::after,
.tree summary::before
  content       : '';
  display       : block;
  position      : absolute;
  top           : calc(var(--spacing) / 2 - var(--radius));
  left          : calc(var(--spacing) - var(--radius) - 1px);
  width         : calc(2 * var(--radius));
  height        : calc(2 * var(--radius));
  border-radius : 50%;
  background    : #ddd;

Perhatikan bahwa kami membuat penanda untuk keduanya <li> elemen (untuk item daftar yang tidak berisi daftar bersarang) dan untuk <summary elemen, memungkinkan item daftar yang berisi daftar bersarang memiliki gaya penanda yang berbeda bergantung pada apakah daftar bersarang diperluas atau diciutkan.

Baris 57 dan 58 menghasilkan sebuah blok, dan baris 59 sampai 61 memusatkannya di sudut tempat garis horizontal dan vertikal bertemu. Bagian atas diposisikan di titik tengah baris teks, minus radius. Kiri diposisikan di tepi garis vertikal, dikurangi jari-jarinya, dikurangi satu piksel yang sesuai dengan setengah lebar garis.

Baris 62 dan 63 mengatur ukuran balok, dan baris 64 dan 65 memberi gaya sebagai lingkaran.

Menerapkan gaya ini menghasilkan:

Perluas dan ciutkan tombol

Terakhir, kami menambahkan tombol perluas dan ciutkan:

68
69
70
71
72
73
74
75
76
77
78
79

.tree summary::before
  content     : '+';
  z-index     : 1;
  background  : #696;
  color       : #fff;
  line-height : calc(2 * var(--radius) - 2px);
  text-align  : center;


.tree details[open] > summary::before
  content : '−';

Baris 69 dan 78 menunjukkan tanda plus dan minus pada tombol. Perhatikan bahwa kami menggunakan tanda minus yang sebenarnya (−) daripada tanda hubung (-) karena ini cocok dengan tampilan tanda tambah, sedangkan di sebagian besar font tanda hubung lebih sempit dan lebih rendah.

Baris 70 menyebabkan tombol ditampilkan di atas penanda yang dibuat sebelumnya. Karena penanda dibuat menggunakan ::after jika tidak, itu akan ditampilkan di atas tombol.

Baris 71 hingga 74 mengatur warna tombol dan memusatkan teksnya, dengan font khusus ini memerlukan a 2px penyesuaian vertikal pada baris 73.

Menerapkan gaya ini menghasilkan tampilan hierarki yang telah selesai:

Kode selesai

Menggabungkan semua hal di atas mengarah ke kode yang sudah jadi:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79

.tree
  --spacing : 1.5rem;
  --radius  : 10px;


.tree li
  display      : block;
  position     : relative;
  padding-left : calc(2 * var(--spacing) - var(--radius) - 2px);


.tree ul
  margin-left  : calc(var(--radius) - var(--spacing));
  padding-left : 0;


.tree ul li
  border-left : 2px solid #ddd;


.tree ul li:last-child
  border-color : transparent;


.tree ul li::before
  content      : '';
  display      : block;
  position     : absolute;
  top          : calc(var(--spacing) / -2);
  left         : -2px;
  width        : calc(var(--spacing) + 2px);
  height       : calc(var(--spacing) + 1px);
  border       : solid #ddd;
  border-width : 0 0 2px 2px;


.tree summary
  display : block;
  cursor  : pointer;


.tree summary::marker,
.tree summary::-webkit-details-marker
  display : none;


.tree summary:focus
  outline : none;


.tree summary:focus-visible
  outline : 1px dotted #000;


.tree li::after,
.tree summary::before
  content       : '';
  display       : block;
  position      : absolute;
  top           : calc(var(--spacing) / 2 - var(--radius));
  left          : calc(var(--spacing) - var(--radius) - 1px);
  width         : calc(2 * var(--radius));
  height        : calc(2 * var(--radius));
  border-radius : 50%;
  background    : #ddd;


.tree summary::before
  content     : '+';
  z-index     : 1;
  background  : #696;
  color       : #fff;
  line-height : calc(2 * var(--radius) - 2px);
  text-align  : center;


.tree details[open] > summary::before
  content : '−';