Max-inline-size - CSS-Κόλπα

max-inline-sizeείναι μια λογική ιδιότητα σε CSS που καθορίζει το μέγιστο πλάτος ενός στοιχείου όταν writing-modeείναι οριζόντιο ή το μέγιστο ύψος του στοιχείου όταν writing-modeείναι κάθετο.

.element ( max-inline-size: 500px; writing-mode: vertical-lr; )

Όπως μπορεί να μαντέψατε από το παραπάνω παράδειγμα, η writing-modeιδιότητα αλλάζει τον προσανατολισμό της ροής κειμένου και διάταξης κατά 90 μοίρες.

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

Ο Jen Simmons έχει ένα άρθρο και μια παρουσίαση που πηγαίνουν βαθύτερα στους τρόπους γραφής CSS.

Δεν μπορούμε απλώς να χρησιμοποιήσουμε το `max-width`ακίνητο;

Ναί! Αν όμως δεν υποστηρίζετε τον Internet Explorer, δεν υπάρχει λόγος να μην το χρησιμοποιήσετε max-inline-size. max-widthείναι μια φυσική διάσταση, οπότε όταν αλλάζει η λειτουργία γραφής, ένα στοιχείο διατηρεί το οριζόντιο πλάτος του μέγεθος, σπάζοντας μια διάταξη όταν έχει ρυθμιστεί να είναι κατακόρυφη. Οι λογικές ιδιότητες, όπως max-inline-size, μπορούν να ανταποκριθούν σε αυτές τις αλλαγές και να εφαρμόσουν το μέγεθος με τον σωστό προσανατολισμό.

Σύνταξη

max-inline-size: ;

Αρχικός: auto
Ισχύει για: ίδια όπως heightκαιwidth
Κληρονομική: όχι
Ποσοστά: για την αντίστοιχη φυσική ιδιότητα
Υπολογισμένη τιμή: ίδια με heightκαιwidth
Τύπος κινούμενης εικόνας: ανά τύπο υπολογισμένης τιμής

Αξίες

/* Length values */ max-inline-size: 250px; max-inline-size: 5rem;   /* Percentage values */ max-inline-size: 75%;   /* Keyword values */ max-inline-size: auto; max-inline-size: fit-content(5rem); max-inline-size: max-content; max-inline-size: min-content;   /* Global values */ max-inline-size: inherit; max-inline-size: initial; max-inline-size: unset;

Διαδήλωση

Όταν το writing-modeρυθμιστεί σε vertical-rl, το περιεχόμενο θα περιστραφεί, αλλάζοντας τη διάταξη. Το πλάτος του max-widthκουτιού θα περιστραφεί με το περιεχόμενο. Αλλά max-inline-sizeείναι έξυπνο! Αφήνει το πλάτος του σε διακριτικότητα, ανεξάρτητα από την writing-modeαξία Ενεργοποιήστε την writing-modeπαρακάτω επίδειξη για να δείτε τη διαφορά μεταξύ των δύο.