Kích thước tab - Thủ thuật CSS

Anonim

Các tab-sizebất động sản trong CSS được sử dụng để điều chỉnh số lượng của không gian mà hiển thị cho các ký tự tab.

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

Chơi với các thanh trượt phạm vi này để xem các giá trị khác nhau ảnh hưởng như thế nào đến cách các tab hiển thị (khi bạn thực sự có thể thấy các tab):

Xem Pen
rNBLYaP của Chris Coyier (@chriscoyier)
trên CodePen.

Ký tự tab (unicode U + 0009) thường được chuyển đổi thành dấu cách (unicode U + 0020) theo quy tắc xử lý khoảng trắng và sau đó thu gọn để chỉ một khoảng trắng trong một hàng được hiển thị trong trình duyệt. Do đó, thuộc tab-sizetính chỉ hữu ích khi không áp dụng các quy tắc xử lý khoảng trắng, cụ thể là bên trong

và khi thuộc white-spacetính của một phần tử được đặt thành pre-wrap.

Giá trị mặc định cho thuộc tab-sizetính là 8 ký tự khoảng trắng và nó có thể chấp nhận bất kỳ giá trị nguyên dương nào.


Anh ấy là một số ví dụ về những cách khác nhau tab-sizecó thể được sử dụng:


Xem Pen
rNBLYjg của Chris Coyier (@chriscoyier)
trên CodePen.





Như bạn có thể thấy trong các ví dụ ở trên, thuộc tab-sizetính điều chỉnh lượng không gian được phân bổ cho ký tự tab. Trong ví dụ thứ hai,


thẻ phải được white-spaceđiều chỉnh pre-wrapthuộc tính để các ký tự tab không bị chuyển đổi thành dấu cách thông thường và thu gọn.


Bạn cũng sẽ nhận thấy trong CSS rằng tiền tố -moz-và -o-là bắt buộc cho Firefox và Opera, nhưng Chrome chấp nhận phiên bản không có tiền tố.


Polyfill


Mặc định tám khoảng trắng là quá lớn. Nếu bạn cần hỗ trợ một trình duyệt không được hỗ trợ, bạn có thể sử dụng polyfill này (JavaScript trong Bút này):


Xem
polyfill kích thước tab Pen bằng CSS-Tricks (@ css-trick)
trên CodePen.


Hỗ trợ trình duyệt


Dữ liệu hỗ trợ trình duyệt này là từ Caniuse, có nhiều chi tiết hơn. Một con số cho biết rằng trình duyệt hỗ trợ tính năng ở phiên bản đó trở lên.


Máy tính để bàn


 

 

 Trình duyệt Chrome Firefox I E Cạnh Safari 


 

 

 

 42 53 * Không 79 13.1 


 

 



Di động / Máy tính bảng


 

 

 Chrome dành cho Android Android Firefox Android iOS Safari 


 

 

 

 88 85 * 81 13,4-13,7 


 

 



Thuộc tính này xuống cấp rất duyên dáng. Mọi trình duyệt đều hỗ trợ các ký tự tab. Việc thiếu hỗ trợ cho thuộc tính này không làm hỏng bất cứ điều gì, thay vào đó, trình duyệt chỉ hiển thị các tab rộng tám ký tự.