inline-sizeείναι μια λογική ιδιότητα που καθορίζει το πλάτος ενός στοιχείου όταν ο τρόπος γραφής είναι οριζόντιος ή το ύψος του στοιχείου όταν writing-modeείναι κατακόρυφος.
.element ( inline-size: 700px; writing-mode: vertical-lr; )Όπως μπορεί να μαντέψατε από το παραπάνω παράδειγμα, η writing-modeιδιότητα αλλάζει τον προσανατολισμό της ροής κειμένου και διάταξης κατά 90 μοίρες. Υπάρχουν δύο κύριοι λόγοι για τους οποίους θέλετε να το κάνετε αυτό.
Πρώτον, ως επιλογή σχεδίασης, ίσως θελήσετε να εμφανίσετε κάθετο κείμενο σε ένα στοιχείο, ας πούμε μια κεφαλίδα:
Ο δεύτερος - και πιθανώς ο πιο σημαντικός - λόγος για τον οποίο ίσως θέλετε να χρησιμοποιήσετε μια λογική ιδιότητα, όπως το ενσωματωμένο μέγεθος είναι να διευκολύνετε τη διεθνοποίηση σε έναν ιστότοπο. Πολλά σενάρια της Ανατολικής Ασίας όπως τα κινέζικα, τα ιαπωνικά και τα κορεατικά μπορούν να γραφτούν οριζόντια ή κάθετα. Χρησιμοποιώντας λογικές ιδιότητες, μπορούμε να παρέχουμε τη σωστή κατεύθυνση μεγέθους των στοιχείων με βάση τη λειτουργία γραφής του χρήστη.
Ο Jen Simmons έχει ένα άρθρο και μια παρουσίαση που πηγαίνουν βαθύτερα στους τρόπους γραφής CSS.
Γιατί δεν μπορούμε απλώς να χρησιμοποιήσουμε την «αξιόπιστη widthιδιοκτησία»;
Μπορείς! Ωστόσο, ίσως θελήσετε να επικοινωνήσετε inline-sizeαν ανησυχείτε για το περιβάλλον του περιεχομένου σας που αλλάζει με βάση τη γλώσσα ενός χρήστη. widthείναι μια φυσική διάσταση, οπότε όταν αλλάζει η λειτουργία γραφής, ένα στοιχείο διατηρεί το οριζόντιο πλάτος του μέγεθος, σπάζοντας μια διάταξη όταν έχει ρυθμιστεί να είναι κατακόρυφη. Οι λογικές ιδιότητες, όπως inline-size, μπορούν να ανταποκριθούν σε αυτές τις αλλαγές και να εφαρμόσουν το πλάτος στη σωστή κατεύθυνση.
Για παράδειγμα, εάν ένα στοιχείο παραγράφου έχει πλάτος 400px χρησιμοποιώντας πλάτος, όταν ο τρόπος εγγραφής έχει ρυθμιστεί vertical-lr, το περιεχόμενο θα περιστραφεί, αλλάζοντας τη διάταξη, αλλά αυτή η παράγραφος θα παραμείνει πλάτος 400px αντί ύψους 400px.
Δες αυτό? Λοιπόν, inline-sizeείναι έξυπνο! Αλλάζει από πλάτος σε ύψος, ανάλογα με την writing-modeτιμή.
Σύνταξη
inline-size: - Αρχικός:
auto - Ισχύει για: ίδια όπως
heightκαιwidth - Κληρονομική: όχι
- Ποσοστά: για την αντίστοιχη φυσική ιδιότητα
- Υπολογισμένη τιμή: ίδια με
heightκαιwidth - Τύπος κινούμενης εικόνας: ανά τύπο υπολογισμένης τιμής
Αξίες
/* Length values */ inline-size: 250px; inline-size: 5rem;
/* Percentage values */ inline-size: 75%;
/* Keyword values */ inline-size: auto; inline-size: fit-content(5rem); inline-size: max-content; inline-size: min-content;
/* Global values */ inline-size: inherit; inline-size: initial; inline-size: unset; auto: Το ενσωματωμένο μέγεθος του στοιχείου θα συμμορφώνεται με το μέγεθος του γονικού του στοιχείου.fit-content(): Αυτή η λειτουργία επιτρέπει σε ένα κοντέινερ να αναπτυχθεί μέχρι το επιθυμητό μέγεθος και, στη συνέχεια, να κάνει την αναδίπλωση κειμένου, στερεώνοντας αποτελεσματικά το περιεχόμενο στην παρεχόμενη τιμή μεγέθους. Μπορεί να χρησιμοποιηθεί σε δοχεία πλέγματος, καθώς και σε μέγεθος κουτιού, και ενώ το caniuse δείχνει ισχυρή υποστήριξη για τη λειτουργία με ενσωματωμένο μέγεθος, οι δοκιμές μας ήταν λιγότερο πειστικές. Αυτό θα μπορούσε να οφείλεται στην κατάσταση του Draft Working Module Level 3 spec.max-content: Το εγγενές προτιμώμενο πλάτος, που σημαίνει ότι το στοιχείο τεντώνει το κείμενο όσο μπορεί να είναι και θα κάνει το πλαίσιο να είναι όσο το κείμενο.min-content: Το εγγενές ελάχιστο πλάτος, που σημαίνει ότι το πλαίσιο του στοιχείου μειώνεται στο ελάχιστο μέγεθος του περιεχομένου του. Το πλαίσιο θα έχει το μέγεθος της μεγαλύτερης συμβολοσειράς κειμένου.
Διαδήλωση
Υποστήριξη προγράμματος περιήγησης
| ΙΕ | Ακρη | Firefox | Χρώμιο | Σαφάρι | ΛΥΡΙΚΗ ΣΚΗΝΗ |
|---|---|---|---|---|---|
| Οχι | 79+ | 41+ | 57 | 12.1+ | 44+ |
| Android Chrome | Android Firefox | Πρόγραμμα περιήγησης Android | iOS Safari | Opera Mobile |
|---|---|---|---|---|
| 85+ | 79+ | 81+ | 12.2+ | 59+ |
Λάβετε υπόψη ότι η υποστήριξη για τη χρήση των παρακάτω λειτουργιών ενδέχεται να διαφέρει από την υποστήριξη της ιδιότητας:
fit-content()max-content()min-content()
Περισσότερες πληροφορίες
- CSS Λογικές ιδιότητες και τιμές Επίπεδο 1 προδιαγραφή (Πρόχειρο συντάκτη)
- Τεκμηρίωση MDN
- Λογικές ιδιότητες CSS` (CSS-Tricks)
- Κατανόηση λογικών ιδιοτήτων και τιμών (Περιοδικό Smashing)
- Λογικές ιδιότητες CSS (Adrian Roselli)
- Μέγιστο & Μέγιστο μέγεθος περιεχομένου σε πλέγμα CSS (Jen Simmons, βίντεο)
- Αμφίδρομοι οριζόντιοι κανόνες στο CSS (Hussein Al Hammad)