Beberapa Metode CSS yang Berbeda untuk Mengubah Urutan Tampilan

Dalam tutorial ini kita akan membahas beberapa metode CSS yang berbeda untuk penataan kembali elemen HTML.

Tujuan

Tata letak yang ingin kami bangun sangat sederhana. Secara khusus, pada layar kecil (yaitu <600px), seharusnya terlihat seperti ini:

Pada layar sedang dan di atasnya (yaitu lebih besar dari, atau sama dengan 600 px), kami ingin itu muncul sebagai berikut:

Tantangan terbesar kita adalah menemukan cara untuk membalikkan urutan tombol.

Markup

Kita akan menggunakan markup sederhana; hanya sebuah div elemen yang mengandung empat tombol:

1

<div class="boxes">

2

  <button>Button 1</button>

3

  <button>Button 2</button>

4

  <button>Button 3</button>

5

  <button>Button 4</button>

6

</div>

Basic Styles

Pada layar kecil, semua tombol berbagi gaya yang sama:

1

.boxes button {

2

  display: block;

3

  width: 100%;

4

  padding: 15px;

5

  border: none;

6

  margin-bottom: 5px;

7

  box-sizing: border-box;

8

  font-size: 1rem;

9

  text-align: center;

10

  text-decoration: none;

11

  background: gold;

12

  color: #000;

13

}

14

15

.boxes button:nth-of-type(even) {

16

  background: #e6c200;

17

}

Pada layar yang lebih besar, kami hanya menetapkan width: 25% untuk tombol. Gaya yang tersisa akan ditentukan dengan metode CSS apapun yang kita gunakan untuk membalikkan urutan tombol.

1

@media screen and (min-width: 600px) {

2

  /* we skip this property in flexbox and grid methods */

3

  width: 25%;

4

5

 /* more stuff here */

6

}

Akhirnya, kami akan menambahkan beberapa gaya untuk negara focus tombol kami:

1

.boxes button:focus {

2

  outline: none;

3

  color: #fff;

4

  background: firebrick;

5

}

Jadi, jika kita menggunakan keyboard ("Tab" key) untuk menavigasi melalui tombol, masing-masing tombol fokus akan mendapatkan gelap merah sebagai warna latar belakang.

Kolom memesan metode

Pada titik ini kita sudah siap untuk menguji pendekatan CSS yang berbeda untuk membalikkan tombol-tombol perintah ketika viewport melebihi 599px.

Metode #1: Floats

Satu solusi cepat adalah untuk mengapung tombol di sebelah kanan. Inilah CSS tambahan:

1

@media screen and (min-width: 600px) {

2

  .boxes button {

3

    float: right;

4

    width: 25%;

5

  }

6

}

Berikut adalah demo Codepen tertanam:

Metode #2: Positioning

Solusi alternatif adalah untuk posisi unsur-unsur, benar-benar atau relatif.

Setelah pilihan pertama, kami float tombol di sebelah kiri, memberikan mereka position: relative, dan kemudian menggunakan properti left untuk menetapkan posisi mereka.

CSS diperlukan terlihat sebagai berikut:

1

@media screen and (min-width: 600px) {

2

  .boxes button {

3

    position: relative;

4

    float: left;

5

    width: 25%;

6

   }

7

8

  .boxes button:nth-of-type(1) {

9

    left: 75%;

10

  }

11

12

  .boxes button:nth-of-type(2) {

13

    left: 25%;

14

  }

15

16

  .boxes button:nth-of-type(3) {

17

    left: -25%;

18

  }

19

20

  .boxes button:nth-of-type(4) {

21

    left: -75%;

22

  }

23

}

Demo Codepen tertanam:

Setelah opsi kedua, kita juga bisa memberikan posisi tombol position: absolute dan kemudian menggunakan properti left untuk menetapkan posisi mereka lebih tepatnya.

Aturan-aturan CSS yang sesuai:

1

@media screen and (min-width: 600px) {

2

  .boxes {

3

    position: relative;

4

  }

5

6

  .boxes button {

7

    position: absolute;

8

    width: 25%;

9

  }

10

11

  .boxes button:nth-of-type(1) {

12

    left: 75%;

13

  }

14

15

  .boxes button:nth-of-type(2) {

16

    left: 50%;

17

  }

18

19

  .boxes button:nth-of-type(3) {

20

    left: 25%;

21

  }

22

23

  .boxes button:nth-of-type(4) {

24

    left: 0;

25

  }

26

}

Codepen demo

Metode #3: direction Properti

Pendekatan yang kurang jelas adalah dengan menggunakan properti direction; sesuatu yang biasanya disediakan untuk mengubah arah membaca teks. Dalam kasus kami, kita menetapkan direction: rtl (kanan ke kiri) untuk pembungkus elemen, langsung membalikkan tata letak.

Catatan: untuk contoh ini, kami membuat kami elemen yang berperilaku seperti tabel-elemen untuk mencapai tata letak horisontal.

Anda dapat melihat gaya CSS yang diperlukan di bawah ini:

1

@media screen and (min-width: 600px) {

2

  .boxes {

3

    display: table;

4

    width: 100%;

5

    direction: rtl;

6

  }

7

8

  .boxes button {

9

    display: table-cell;

10

    width: 25%;

11

  }

12

}

It's worth menyebutkan bahwa jika (untuk beberapa alasan) kita ingin mengubah arah tekstual tombol, kita dapat menyertakan "Timpa bi-directional" aturan berikut dalam stylesheet kami:

1

.boxes button {

2

  unicode-bidi: bidi-override;

3

}

Codepen demo

Metode #4: Transforms

Rapi solusi adalah untuk mengapung tombol di sebelah kiri dan kemudian menerapkan transform: scaleX(-1) kepada mereka dan parent mereka. Dengan menetapkan nilai negatif, elemen yang diubah tidak diskalakan. Faktanya, mereka membalik sepanjang sumbu horizontal.

Di bawah ini adalah CSS yang dibutuhkan:

1

@media screen and (min-width: 600px) {

2

  .boxes {

3

    transform: scaleX(-1);

4

  }

5

6

  .boxes button {

7

    float: left;

8

    transform: scaleX(-1);

9

    width: 25%;

10

  }

11

}

Demo Codepen tertanam:

Kita bahkan dapat menggunakan fungsi rotate mengubah untuk mencapai urutan yang diinginkan. Semua harus kita lakukan adalah menambahkan transform: rotateY(180deg) untuk tombol dan parent mereka.

Inilah CSS diperlukan untuk solusi ini:

1

@media screen and (min-width: 600px) {

2

  .boxes {

3

    transform: rotateY(180deg);

4

  }

5

6

  .boxes button {

7

    float: left;

8

    transform: rotateY(180deg);

9

    width: 25%;

10

  }

11

}

Dan Codepen demo:

Metode #5: Flexbox

Flexbox adalah cara lain untuk mengubah kolom pemesanan. Dalam contoh kita, kita dapat mengambil keuntungan dari dua sifat flexbox yang berbeda untuk membuat tata letak yang diinginkan.

Pendekatan pertama adalah untuk menetapkan orangtua tombol sebagai wadah flex dan kemudian tambahkan flex-direction: row-reverse nilai properti untuk itu.

Berikut adalah gaya yang sesuai:

1

@media screen and (min-width: 600px) {

2

  .boxes {

3

    display: flex;

4

    flex-direction: row-reverse;

5

  }

6

}

Demo Codepen tertanam ditampilkan di bawah ini:

Flexbox pilihan kedua adalah untuk membuat orang tua dari tombol sebagai wadah flex dan kemudian menggunakan properti pesanan untuk menentukan di mana urutan tombol akan muncul.

CSS yang sesuai:

1

@media screen and (min-width: 600px) {

2

  .boxes {

3

    display: flex;

4

  }

5

6

  .boxes button:nth-of-type(1) {

7

    order: 4;

8

  }

9

10

  .boxes button:nth-of-type(2) {

11

    order: 3;

12

  }

13

14

  .boxes button:nth-of-type(3) {

15

    order: 2;

16

  }

17

18

  .boxes button:nth-of-type(4) {

19

    order: 1;

20

  }

21

}

Codepen demo:

Metode #6: CSS Grid Layout

Solusi yang menjanjikan untuk mengatur unsur-unsur adalah CSS Grid Layout. Bahkan jika ada sangat terbatas dukungan browser pada saat tulisan ini, mari kita mencobanya. Perhatikan bahwa contoh kami hanya akan berfungsi di Chrome, yang secara default tidak mendukung fitur CSS ini, tetapi kami dapat mengikuti beberapa langkah sederhana untuk mengaktifkannya.

Tanpa terlalu banyak detail, mari kita gambarkan dua cara untuk mencapai pesanan yang diinginkan.

Opsi pertama adalah mengatur induk tombol sebagai penampung grid dan kemudian menggunakan properti grid-column untuk menentukan urutan tombol mana yang akan muncul. Selain itu, kami memastikan bahwa semua tombol milik baris (pertama) sama dengan menambahkan grid-row: 1 kepada mereka.

Lihat style terkait di bawah ini:

1

@media screen and (min-width: 600px) {

2

  .boxes {

3

    display: grid;

4

    grid-template-columns: repeat(4, 1fr); 

5

  }

6

7

  .boxes button {

8

    grid-row: 1;

9

  }

10

11

  .boxes button:nth-of-type(1) {

12

    grid-column: 4;

13

  }

14

15

  .boxes button:nth-of-type(2) {

16

    grid-column: 3;

17

  }

18

19

  .boxes button:nth-of-type(3) {

20

    grid-column: 2;

21

  }

22

23

  .boxes button:nth-of-type(4) {

24

    grid-column: 1;

25

  }

26

}

Demo Codepen tertanam:

Pilihan grid kedua ini mirip dengan flexbox's solusi kedua. Kami menetapkan parent tombol sebagai wadah grid dan kemudian menggunakan properti order untuk menentukan di mana urutan tombol akan muncul.

CSS yang dibutuhkan:

1

@media screen and (min-width: 600px) {

2

  .boxes {

3

    display: grid;

4

    grid-template-columns: repeat(4, 1fr);

5

  }

6

7

  .boxes button:nth-of-type(1) {

8

    order: 4;

9

  }

10

11

  .boxes button:nth-of-type(2) {

12

    order: 3;

13

  }

14

15

  .boxes button:nth-of-type(3) {

16

    order: 2;

17

  }

18

19

  .boxes button:nth-of-type(4) {

20

    order: 1;

21

  }

22

}

Codepen demo:

Sekali lagi, Anda akan perlu untuk mengaktifkan "Fitur eksperimental Platform Web" di Chrome untuk melihat hasil.

Source Order vs Urutan Visual

Seperti yang kita telah ditunjukkan, kita dapat mengikuti pendekatan CSS yang berbeda untuk mengubah urutan tombol kami. Jadi, saat ini Mari kita meninjau kembali setiap dari demo dan menggunakan keyboard (klik pena dan tekan tombol "Tab") untuk menavigasi melalui tombol. Apa yang akan Anda perhatikan adalah bahwa bahkan jika "Tombol 4" visual muncul pertama, tombol pertama yang mendapat terfokus "Tombol 1" karena itulah yang muncul pertama kali di DOM. Yang sama akan terjadi jika kita uji demo dengan pembaca layar (saya melakukan tes di NVDA).

Mengingat ini pemisahan antara urutan DOM dan urutan CSS, kita harus sangat berhati-hati dengan bagian-bagian halaman kami yang kita susun dengan CSS. Sebagai contoh, sementara flexbox di order properti adalah salah satu cara yang paling fleksibel untuk penataan kembali unsur-unsur, spec mengatakan:

"Penulis harus menggunakan order hanya untuk visual, tidak logis, penataan kembali konten. Style sheet yang menggunakan perintah untuk melakukan penataan ulang secara logis tidak sesuai.”

Dengan cara yang sama, di sini adalah spec mengatakan untuk grid order properti:

"Seperti dengan penataan kembali flex item, properti order hanya dapat digunakan ketika urutan visual perlu out-of-sync dengan urutan pidato dan navigasi; Sebaliknya sumber dokumen yang mendasari harus dapat mengatur kembali sebaliknya."

Catatan: Jika Anda menguji solusi kedua flexbox's (dengan order properti) di Firefox, Anda akan melihat bahwa karya navigasi keyboard yang halus dan tombol pertama yang mendapat terfokus pada layar menengah dan di atas adalah "Tombol 4". Perilaku ini telah dilaporkan sebagai bug.

Kesimpulan

Dalam tutorial ini, kita meneliti metode CSS yang berbeda untuk penataan kembali elemen HTML. Tentu saja, tidak semua metode ini tepat dalam semua kasus. Sebelum memutuskan metode mana yang digunakan, Anda harus mempertimbangkan beberapa hal:

• Browser Anda ingin mendukung. Misalnya, beberapa pendekatan tersebut tidak bekerja di versi sebelumnya dari Internet Explorer (misalnya < 10).
• Kompleksitas penataan ulang Anda. Apakah itu sesuatu yang sederhana seperti yang kita lihat dalam contoh kita atau sesuatu yang lebih rumit?

Jika Anda dapat memikirkan metode lain untuk membatalkan pesanan tombol, pastikan untuk membaginya dengan kami di komentar di bawah.

Bacaan lebih lanjut

• HTML Order sumber vs Display Order CSS oleh Adrian Roselli
• Flexbox & navigasi keyboard disconnect oleh Léonie Watson