Inset-block-start - CSS-Κόλπα

Anonim

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

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

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

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

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

Σύνταξη

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

Αξίες

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

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