Sekme boyutu - CSS Hileleri

Anonim

CSS'deki tab-sizeözellik, sekme karakteri için görüntülenen boşluk miktarını ayarlamak için kullanılır.

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

Farklı değerlerin sekmelerin nasıl oluşturulduğunu nasıl etkilediğini görmek için bu aralık kaydırıcıları ile oynayın (sekmeleri gerçekten görebildiğinizde):


CodePen'de Chris Coyier (@chriscoyier) tarafından Kalem rNBLYaP'a bakın
.

Sekme karakteri (unicode U + 0009) genellikle beyaz boşluk işleme kuralları tarafından boşluklara (unicode U + 0020) dönüştürülür ve ardından tarayıcıda bir satırda yalnızca bir boşluk görüntülenecek şekilde daraltılır. Bu nedenle, tab-sizeözellik yalnızca beyaz boşluk işleme kuralları geçerli olmadığında, yani bir

etiketi ve white-spacebir öğenin özelliği olarak ayarlandığında pre-wrap.

Özelliğin varsayılan değeri tab-size8 boşluk karakteridir ve herhangi bir pozitif tam sayı değerini kabul edebilir.


tab-sizeKullanılabilecek çeşitli yolların bazı örnekleri :



CodePen'de Chris Coyier (@chriscoyier) tarafından Kalem rNBLYjg bakın
.





Yukarıdaki örneklerde görebileceğiniz gibi, tab-sizeözellik, sekme karakteri için ayrılan alan miktarını ayarlar. İkinci örnekte,


sekme karakterlerinin normal boşluklara dönüştürülüp daraltılmaması için etiketinin white-spaceözelliğinin ayarlanması gerekir pre-wrap.


Ayrıca CSS'de Firefox ve Opera için -moz-ve -o-ön eklerinin gerekli olduğunu, ancak Chrome'un önekli olmayan sürümü kabul ettiğini fark edeceksiniz .


Polyfill


Sekiz boşluk varsayılanı çok büyük. Desteklenmeyen bir tarayıcıyı desteklemeniz gerekiyorsa, bu polyfill'i (bu Pen'deki JavaScript) kullanabilirsiniz:


CodePen'de
CSS-Tricks (@ css-tricks) tarafından Kalem sekmesi boyutunda
çoklu dolgusuna bakın.


Tarayıcı Desteği


Bu tarayıcı destek verileri, daha fazla ayrıntıya sahip olan Caniuse'den alınmıştır. Bir sayı, tarayıcının özelliği o sürümde ve sonrasında desteklediğini gösterir.


Masaüstü Bilgisayar


 

 

 Krom Firefox IE Kenar Safari 


 

 

 

 42 53 * Hayır 79 13.1 


 

 



Mobil / Tablet


 

 

 Android Chrome Android Firefox Android iOS Safari 


 

 

 

 88 85 * 81 13.4-13.7 


 

 



Bu özellik çok zarif bir şekilde bozulur. Her tarayıcı sekme karakterlerini destekler. Bu özelliğin desteklenmemesi hiçbir şeyi bozmaz, tarayıcı bunun yerine yalnızca sekiz karakter genişliğinde sekmeler görüntüler.