Inset-inline - CSS-Κόλπα

Πίνακας περιεχομένων:

Anonim

inset-inlineείναι μια σύντομη λογική ιδιότητα CSS που καθορίζει το μήκος που ένα στοιχείο αντισταθμίζεται κατά την ενσωματωμένη κατεύθυνση που συνδυάζει inset-inline-startκαι inset-inline-end. Είναι περίπου όπως δηλώνει rightκαι leftεκτός εκκίνησης και λήξης είναι τα σημεία που καθορίζεται από το στοιχείο του direction, text-orientationκαι writing-mode, ακριβώς όπως και οι άλλες λογικές ιδιότητες.

Η ιδιότητα είναι μέρος των προδιαγραφών CSS Logical Properties και Value Level 1 που βρίσκεται επί του παρόντος στην κατάσταση πρόχειρου του Editor. Αυτό σημαίνει ότι ο ορισμός και οι πληροφορίες σχετικά με αυτό μπορούν να αλλάξουν από τώρα έως την επίσημη σύσταση.

.element ( inset-inline: 50px 15%; position: relative; /* Applies to positioned elements */ writing-mode: vertical-rl; /* Determines the block start direction */ )

Έτσι, για παράδειγμα, εάν ο τρόπος γραφής έχει οριστεί horizontal-lrη inset-inlineιδιότητα θα λειτουργήσει ακριβώς όπως η ρύθμιση topκαι bottomκαι να ρυθμίσετε το στοιχείο που αντισταθμίζεται από το κάτω άκρο. Πρέπει ακόμη να καθορίσετε ένα ρητό positionστο ίδιο στοιχείο για να τεθεί σε ισχύ, όπως ακριβώς και οι ιδιότητες φυσικής αντιστάθμισης.

Αλλά αλλάξτε το στοιχείο writing-modeσε κάτι σαν vertical-lrκαι η "κάτω" άκρη περιστρέφεται στην κατακόρυφη κατεύθυνση, ενεργώντας περισσότερο σαν leftκαι τις rightιδιότητες.

Σύνταξη

inset-inline: ;
  • Αρχική τιμή: auto
  • Ισχύει για: τοποθετημένα στοιχεία
  • Κληρονομική: όχι
  • Ποσοστά: για την αντίστοιχη φυσική ιδιότητα
  • Υπολογισμένη τιμή: ίδια με αντίστοιχη topκαι leftιδιότητες
  • Τύπος κινούμενης εικόνας: ανά τύπο υπολογισμένης τιμής

Αξίες

inset-inlineπαίρνει μια τιμή μήκους και υποστηρίζει καθολικές λέξεις-κλειδιά. Η προεπιλεγμένη τιμή είναι auto.

/* Length values */ inset-inline: 50px; inset-inline: 4em; inset-inline: 3.5rem inset-inline: 25vh; /* Percentage values */ inset-inline: 50%; /* Keyword values */ inset-inline: auto; /* initial value */ /* Global values */ inset-inline: initial inset-inline: inherit; inset-inline: unset;

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

ΙΕ Ακρη Firefox Χρώμιο Σαφάρι ΛΥΡΙΚΗ ΣΚΗΝΗ
Οχι Οχι 63+ Οχι Οχι Οχι
Android Chrome Android Firefox Πρόγραμμα περιήγησης Android iOS Safari Opera Mini
Οχι 79+ Οχι Οχι Οχι
Πηγή: caniuse

Διαδήλωση

Περαιτέρω ανάγνωση

  • CSS Λογικές ιδιότητες και τιμές Επίπεδο 1 προδιαγραφή (Πρόχειρο συντάκτη)
  • Τεκμηρίωση MDN
  • Κατανόηση λογικών ιδιοτήτων και τιμών (Περιοδικό Smashing)
  • Λογικές ιδιότητες CSS (Adrian Roselli)
  • Αμφίδρομοι οριζόντιοι κανόνες στο CSS (Hussein Al Hammad)