Inset-inline-end - CSS-Κόλπα

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

Anonim

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

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

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

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

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

Σύνταξη

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

Αξίες

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

/* Length values */ inset-inline-end: 50px; inset-inline-end: 4em; inset-inline-end: 3.5rem inset-inline-end: 25vh; /* Percentage values */ inset-inline-end: 50%; /* Keyword values */ inset-inline-end: auto; /* initial value */ /* Global values */ inset-inline-end: initial inset-inline-end: inherit; inset-inline-end: 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)