Rozmiar zakładki - CSS-Tricks

Anonim

tab-sizeNieruchomość w CSS służy do regulacji ilości przestrzeni, która będzie wyświetlana dla znaku tabulacji.

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

Zagraj z tymi suwakami zakresu, aby zobaczyć, jak różne wartości wpływają na renderowanie kart (kiedy faktycznie widzisz karty):

Zobacz Pen
rNBLYaP autorstwa Chrisa Coyiera (@chriscoyier)
na CodePen.

Znak tabulacji (unicode U + 0009) jest zwykle konwertowany na spacje (unicode U + 0020) przez reguły przetwarzania białych znaków, a następnie zwinięty, tak że w przeglądarce wyświetlana jest tylko jedna spacja z rzędu. Dlatego tab-sizewłaściwość jest użyteczna tylko wtedy, gdy nie mają zastosowania reguły przetwarzania białych znaków, a mianowicie wewnątrz pliku

tag i kiedy white-spacewłaściwość elementu jest ustawiona na pre-wrap.

Wartość domyślna tab-sizewłaściwości to 8 znaków spacji i może akceptować dowolną dodatnią liczbę całkowitą.


Oto kilka przykładów różnych sposobów, które tab-sizemożna wykorzystać:


Zobacz Pen
rNBLYjg autorstwa Chrisa Coyiera (@chriscoyier)
na CodePen.





Jak widać w powyższych przykładach, tab-sizewłaściwość dostosowuje ilość miejsca przeznaczonego na znak tabulacji. W drugim przykładzie


tag musi mieć white-spacedostosowaną pre-wrapwłaściwość, aby znaki tabulacji nie zostały zamienione na zwykłe spacje i zwinięte.


Zauważysz również w CSS, że przedrostki -moz-i -o-są wymagane dla przeglądarek Firefox i Opera, ale Chrome akceptuje wersję bez prefiksu.


Wypełnij


Domyślne osiem miejsc jest strasznie duże. Jeśli potrzebujesz obsługiwać nieobsługiwaną przeglądarkę, możesz użyć tego polyfill (JavaScript w tym piórze):


Zobacz
wypełnienie rozmiaru zakładki pióra autorstwa CSS-Tricks (@ css-tricks)
w CodePen.


Wsparcie przeglądarki


Te dane dotyczące obsługi przeglądarek pochodzą od Caniuse, który zawiera więcej szczegółów. Liczba wskazuje, że przeglądarka obsługuje tę funkcję w tej wersji i nowszych.


Pulpit


 

 

 Chrom Firefox TO ZNACZY Brzeg Safari 


 

 

 

 42 53 * Nie 79 13.1 


 

 



Telefon komórkowy / tablet


 

 

 Android Chrome Android Firefox Android iOS Safari 


 

 

 

 88 85 * 81 13,4-13,7 


 

 



Ta właściwość degraduje się bardzo wdzięcznie. Każda przeglądarka obsługuje znaki tabulacji. Brak obsługi tej właściwości niczego nie psuje, przeglądarka wyświetla jedynie ośmioznakowe zakładki.