Розмір вкладки - CSS-хитрощі

Anonim

tab-sizeВластивість в CSS використовується для регулювання кількості просторів, відображення для символу табуляції.

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

Пограйте з цими повзунками діапазону, щоб побачити, як різні значення впливають на те, як відображаються вкладки (коли ви насправді можете бачити вкладки):

Дивіться Pen
rNBLYaP Кріса Койєра (@chriscoyier)
на CodePen.

Символ табуляції (unicode U + 0009), як правило, перетворюється в пробіли (unicode U + 0020) за правилами обробки пробілів, а потім згортається так, що у браузері відображається лише один пробіл в рядку. Тому tab-sizeвластивість корисна лише тоді, коли правила обробки пробілів не застосовуються, а саме всередині a

тегом і коли для white-spaceвластивості елемента встановлено значення pre-wrap.

Значення за замовчуванням для tab-sizeвластивості - 8 пробільних символів, і воно може приймати будь-яке додатне ціле значення.


Він наводить кілька прикладів різних способів tab-sizeвикористання:


Дивіться Pen
rNBLYjg від Chris Coyier (@chriscoyier)
на CodePen.





Як ви можете бачити на прикладах вище, tab-sizeвластивість регулює кількість місця, відведеного для символу табуляції. У другому прикладі


тегу має бути white-spaceналаштовано його властивість, щоб pre-wrapсимволи табуляції не перетворювались у звичайні пробіли та не згортались.


Ви також помітите в CSS, що префікси -moz-та -o-і потрібні для Firefox та Opera, але Chrome приймає не префіксну версію.


Поліфіл


За замовчуванням вісім пробілів жахливо великий. Якщо вам потрібна підтримка непідтримуваного браузера, ви можете скористатися цим поліфілом (JavaScript у цій ручці):


Дивіться полізаповнення
розміру вкладки «Ручка » від CSS-Tricks (@ css-tricks)
на CodePen.


Підтримка браузера


Дані про підтримку веб-переглядача подані компанією Caniuse, яка містить більше деталей. Цифра вказує на те, що браузер підтримує цю функцію на цій версії та вище.


Робочий стіл


 

 

 Chrome Firefox IE Край Сафарі 


 

 

 

 42 53 * Ні 79 13.1 


 

 



Мобільний / планшетний


 

 

 Android Chrome Android Firefox Android iOS Safari 


 

 

 

 88 85 * 81 13.4-13.7 


 

 



Ця властивість дуже витончено погіршується. Кожен браузер підтримує символи табуляції. Відсутність підтримки цієї властивості нічого не порушує, натомість браузер просто відображає восьмисимвольні широкі вкладки.