Saiz tab - Trik CSS

Anonim

The tab-sizeharta di CSS digunakan untuk menyesuaikan jumlah ruang yang paparan untuk watak tab.

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

Bermain dengan slider julat ini untuk melihat bagaimana nilai yang berbeza mempengaruhi bagaimana tab dibuat (ketika anda benar-benar dapat melihat tab):

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

Karakter tab (unicode U + 0009) biasanya ditukar menjadi spasi (unicode U + 0020) oleh peraturan pemprosesan ruang putih dan kemudian runtuh sehingga hanya satu ruang berturut-turut dipaparkan di penyemak imbas. Oleh itu tab-sizeharta itu hanya berguna apabila peraturan pemprosesan ruang putih tidak terpakai, iaitu di dalam a

tag dan apabila white-spacesifat elemen ditetapkan ke pre-wrap.

Nilai lalai untuk tab-sizeharta tanah adalah 8 aksara ruang, dan dapat menerima nilai bilangan bulat positif.


Dia adalah beberapa contoh pelbagai cara yang tab-sizeboleh digunakan:


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





Seperti yang anda lihat dalam contoh di atas, tab-sizeharta itu menyesuaikan jumlah ruang yang diperuntukkan untuk watak tab. Dalam contoh kedua, the


tag harus mempunyai sifatnya white-spacedisesuaikan pre-wrapagar watak tab tidak ditukar ke ruang biasa dan runtuh.


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


Poli Isi


Lalai lapan ruang sangat besar. Sekiranya anda perlu menyokong penyemak imbas yang tidak disokong, anda boleh menggunakan polyfill ini (JavaScript di Pena ini):


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


Sokongan Penyemak Imbas


Data sokongan penyemak imbas ini berasal dari Caniuse, yang mempunyai lebih terperinci. Nombor menunjukkan bahawa penyemak imbas menyokong ciri pada versi dan ke atas.


Desktop


 

 

 Chrome Firefox IE Hujung Safari 


 

 

 

 42 53 * Tidak 79 13.1 


 

 



Mudah Alih / Tablet


 

 

 Android Chrome Android Firefox Android Safari iOS 


 

 

 

 88 85 * 81 13.4-13.7 


 

 



Harta tanah ini merosot dengan sangat anggun. Setiap penyemak imbas menyokong watak tab. Kekurangan sokongan untuk harta tanah ini tidak mematahkan apa-apa, penyemak imbas hanya memaparkan tab lebar lapan watak.