Ukuran tab - Trik CSS

Anonim

The tab-sizeproperti di CSS digunakan untuk mengatur jumlah ruang yang layar untuk karakter tab.

pre ( tab-size: 8; /* default. Pretty big! */ tab-size: 2; tab-size: 13px; /* you can set a width-per-tab also */ )

Bermain-main dengan slider rentang ini untuk melihat bagaimana nilai-nilai yang berbeda mempengaruhi bagaimana tab dirender (ketika Anda benar-benar dapat melihat tab):

Lihat Pen
rNBLYaP oleh Chris Coyier (@chriscoyier)
di CodePen.

Karakter tab (unicode U + 0009) biasanya diubah menjadi spasi (unicode U + 0020) oleh aturan pemrosesan spasi putih dan kemudian diciutkan sehingga hanya satu spasi dalam satu baris yang ditampilkan di browser. Oleh karena itu, tab-sizeproperti hanya berguna jika aturan pemrosesan spasi putih tidak berlaku, yaitu di dalam a

tag dan saat white-spaceproperti elemen disetel ke pre-wrap.

Nilai default untuk tab-sizeproperti adalah 8 karakter spasi, dan dapat menerima nilai bilangan bulat positif.


Dia adalah beberapa contoh dari berbagai cara yang tab-sizedapat digunakan:


Lihat Pen
rNBLYjg oleh Chris Coyier (@chriscoyier)
di CodePen.





Seperti yang Anda lihat pada contoh di atas, tab-sizeproperti menyesuaikan jumlah ruang yang dialokasikan untuk karakter tab. Dalam contoh kedua, file


tag harus memiliki white-spacepropertinya yang disesuaikan pre-wrapagar karakter tab tidak dikonversi ke spasi biasa dan diciutkan.


Anda juga akan melihat di CSS bahwa awalan -moz-dan -o-diperlukan untuk Firefox dan Opera, tetapi Chrome menerima versi non-prefiks.


Polyfill


Default delapan ruang sangat besar. Jika Anda perlu mendukung browser yang tidak didukung, Anda dapat menggunakan polyfill ini (JavaScript di Pena ini):


Lihat
polyfill ukuran-tab Pen oleh CSS-Tricks (@ css-trick)
di CodePen.


Dukungan Browser


Data dukungan browser ini berasal dari Caniuse, yang lebih detail. Angka menunjukkan bahwa browser mendukung fitur pada versi tersebut dan yang lebih baru.


Desktop


 

 

 Chrome Firefox YAITU Tepi Safari 


 

 

 

 42 53 * Tidak 79 13.1 


 

 



Ponsel / Tablet


 

 

 Android Chrome Android Firefox Android iOS Safari 


 

 

 

 88 85 * 81 13.4-13.7 


 

 



Properti ini terdegradasi dengan sangat anggun. Setiap browser mendukung karakter tab. Kurangnya dukungan untuk properti ini tidak merusak apa pun, browser hanya menampilkan tab selebar delapan karakter sebagai gantinya.