Μέγεθος καρτέλας - 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 */ )

Παίξτε με αυτά τα ρυθμιστικά εύρους για να δείτε πώς οι διαφορετικές τιμές επηρεάζουν τον τρόπο απόδοσης των καρτελών (όταν μπορείτε πραγματικά να δείτε τις καρτέλες):

Δείτε το στυλό
rNBLYaP του Chris Coyier (@chriscoyier)
στο CodePen.

Ο χαρακτήρας καρτέλας (unicode U + 0009) συνήθως μετατρέπεται σε κενά (unicode U + 0020) από τους κανόνες επεξεργασίας λευκού χώρου και στη συνέχεια συμπτύσσεται έτσι ώστε να εμφανίζεται μόνο ένα κενό στη σειρά στο πρόγραμμα περιήγησης. Επομένως, η tab-sizeιδιότητα είναι χρήσιμη μόνο όταν δεν ισχύουν οι κανόνες επεξεργασίας λευκού χώρου, δηλαδή μέσα σε ένα

και όταν η white-spaceιδιότητα ενός στοιχείου έχει οριστεί σε pre-wrap.

Η προεπιλεγμένη τιμή για την tab-sizeιδιότητα είναι 8 χαρακτήρες διαστήματος και μπορεί να δεχτεί οποιαδήποτε θετική ακέραια τιμή.


Είναι μερικά παραδείγματα των διαφόρων τρόπων που tab-sizeμπορούν να χρησιμοποιηθούν:





Δείτε το στυλό
rNBLYjg του Chris Coyier (@chriscoyier)
στο CodePen.


Όπως μπορείτε να δείτε στα παραπάνω παραδείγματα, η tab-sizeιδιότητα προσαρμόζει το χώρο που διατίθεται για τον χαρακτήρα καρτέλας. Στο δεύτερο παράδειγμα, το


Η ετικέτα πρέπει να έχει την white-spaceιδιότητά της προσαρμοσμένη pre-wrapώστε οι χαρακτήρες της καρτέλας να μην μετατρέπονται σε κανονικούς χώρους και να συμπτύσσονται.


Θα παρατηρήσετε επίσης στο CSS ότι τα προθέματα -moz-και τα -o-προθέματα απαιτούνται για τον Firefox και το Opera, αλλά το Chrome αποδέχεται τη μη προκαταρκτική έκδοση.


Polyfill


Η προεπιλογή οκτώ διαστημάτων είναι εξαιρετικά μεγάλη. Εάν πρέπει να υποστηρίξετε ένα μη υποστηριζόμενο πρόγραμμα περιήγησης, θα μπορούσατε να χρησιμοποιήσετε αυτό το polyfill (το JavaScript σε αυτό το στυλό):


Ανατρέξτε στην
καρτέλα Pen σε μέγεθος καρτέλας από CSS-Tricks (@ css-tricks)
στο CodePen.





Υποστήριξη προγράμματος περιήγησης


Αυτά τα δεδομένα υποστήριξης του προγράμματος περιήγησης προέρχονται από την Caniuse, η οποία έχει περισσότερες λεπτομέρειες. Ένας αριθμός υποδεικνύει ότι το πρόγραμμα περιήγησης υποστηρίζει τη λειτουργία σε αυτήν την έκδοση και νεότερη.


Επιφάνεια εργασίας


 

 

 Χρώμιο Firefox ΙΕ Ακρη Σαφάρι 


 

 

 

 42 53 * Οχι 79 13.1 


 

 



Κινητό / Tablet


 

 

 Android Chrome Android Firefox Android iOS Safari 


 

 

 

 88 85 * 81 13.4-13.7 


 

 



Αυτή η ιδιότητα υποβαθμίζεται πολύ χαριτωμένα. Κάθε πρόγραμμα περιήγησης υποστηρίζει χαρακτήρες καρτελών. Η έλλειψη υποστήριξης για αυτήν την ιδιότητα δεν σπάει τίποτα, το πρόγραμμα περιήγησης εμφανίζει απλώς καρτέλες οκτώ χαρακτήρων.