Το insetακίνητο στο CSS είναι μια συντομογραφία για τις τέσσερις ένθετο ιδιότητες, top, right, bottomκαι leftσε μια δήλωση. Ακριβώς όπως και οι τέσσερις μεμονωμένες ιδιότητες, insetδεν επηρεάζει τα μη τοποθετημένα (στατικά) στοιχεία. Με άλλα λόγια, ένα στοιχείο πρέπει να δηλώνει μια ρητή positionτιμή προτού τεθούν σε ισχύ οι ιδιότητες ένθετου.
.box ( inset: 10px 20px 30px 40px; position: relative; )inset ορίζεται αρχικά στην προδιαγραφή CSS Logical Properties and Values Level 1, η οποία βρίσκεται στο Πρόχειρο του Προγράμματος από τις 20 Απριλίου 2020.
Σύνταξη
Όπως ίσως έχετε συγκεντρώσει από το παραπάνω παράδειγμα, insetακολουθεί την ίδια σύνταξη πολλαπλών τιμών του paddingκαι margin. Αυτό σημαίνει ότι δέχεται μέχρι και τέσσερις τιμές (σε αντισταθμιστικά οφέλη δηλώνουν για top, right, bottomκαι left) και όσο το δυνατόν λιγότερα ως μία τιμή (για να δηλώσουν ένα ισόποσο συμψηφισμό και για τις τέσσερις ιδιότητες). Και, όπως paddingκαι margin, οι τιμές ρέουν δεξιόστροφα, ξεκινώντας από top.
.element ( inset: 1em 2em 3em 0; /* top right bottom left */ inset: 10% 5% -10%; /* top left/right bottom */ inset: 0 10px; /* top/bottom left/right */ inset: 20px; /* all edges = 20px */ )Πριν inset, θα έπρεπε να δηλώσουμε κάθε insetυπο-ιδιοκτησία ξεχωριστά, ως εξής:
.box ( position: absolute; top: 0; right: 0; bottom: 0; left: 0; )Τώρα, μπορούμε απλά να το κάνουμε σε μία μόνο γραμμή CSS:
.box ( position: absolute; inset: 0; /* ? */ )Αξίες
Η insetιδιότητα δέχεται αριθμητικές τιμές όπως πάνω, δεξιά, κάτω και αριστερά. Οι τιμές αυτές μπορεί να είναι οποιοδήποτε έγκυρο μήκος CSS, όπως px, em, remκαι %, μεταξύ άλλων.
Ας μιλήσουμε για λογικές ιδιότητες
Απλώς πρόκειται να χαράξουμε την επιφάνεια των λογικών ιδιοτήτων εδώ, καθώς η πραγματική εστίαση είναι insetκαι οι σχετικές υπο-ιδιότητες. Ρίξτε μια βαθιά βαθιά βουτιά στο θέμα σε αυτό το άρθρο Smashing Magazine της Rachel Andrew.
Υπάρχουν περισσότερες insetυπο-ιδιότητες από top, right, bottomκαι leftόμως, προκειμένου να τους καταλάβουμε, αξίζει τον κόπο για να γνωριστείτε με λογικές ιδιότητες και αξίες.
Το περιεχόμενο μπορεί να εμφανιστεί σε διαφορετικές κατευθύνσεις (π.χ. τρόπους γραφής), συμπεριλαμβανομένων από αριστερά προς δεξιά, από δεξιά προς αριστερά, από πάνω προς τα κάτω και από κάτω προς τα πάνω. Όταν μιλάμε για «λογικές» έννοιες, αναφερόμαστε πραγματικά στο σημείο εκκίνησης με βάση την κατεύθυνση γραφής του περιεχομένου.
Φανταστείτε ότι δημιουργείτε έναν ιστότοπο που πρέπει να υποστηρίζει γλώσσες από αριστερά προς τα δεξιά (LTR), όπως Αγγλικά και Ισπανικά και από γλώσσες από δεξιά προς τα αριστερά (RTL), όπως Περσικά ή Αραβικά. Ας υποθέσουμε ότι θέλετε να προσθέσετε ένα περιθώριο μεταξύ ενός εικονιδίου και ενός γραμμικού κειμένου δίπλα του.
Φυσικά, ενδέχεται να φτάσετε στην margin-rightιδιότητα για να υποστηρίξετε το LTR και, στη συνέχεια, να προσθέσετε ένα άλλο σύνολο κανόνων που αφαιρεί αυτό το περιθώριο και το αντικαθιστά με το margin-leftRTL:
.icon ( margin-right: 1em; )
/* or .icon:dir(rtl) */ (dir="rtl") .icon ( margin-right: 0; margin-left: 1em; )Αυτό είναι ένα μικρό μέρος μιας σελίδας. Τώρα φανταστείτε να δημιουργήσετε έναν μεγάλο ιστότοπο με αυτόν τον τρόπο - αυτό είναι πολλή δουλειά! Όμως, οι λογικές ιδιότητες το κάνουν ένα γρήγορο λαμβάνοντας υπόψη τη λειτουργία γραφής για εμάς. Για παράδειγμα, μπορούμε να προσθέσουμε περιθώριο στο τέλος του στοιχείου, όπου κι αν συμβαίνει:
.icon ( margin-inline-end: 1em; )
Αυτό εννοούμε όταν αναφερόμαστε σε λογικές ιδιότητες - σχετίζονται με τον τρόπο γραφής και όχι με τη φυσική κατεύθυνση. Δες πώς λογικές ιδιότητες είναι πολύ πιο λογικές για να δουλέψεις;
Εισαγωγή λογικών ιδιοτήτων
Έτσι, γνωρίζοντας τι γνωρίζετε τώρα σχετικά με τις λογικές ιδιότητες, ακολουθούν τέσσερις επιπλέον δευτερεύουσες ιδιότητες:
| Λογική ιδιοκτησία | Οριζόντια ροή ισοδύναμη | Τι κάνει |
|---|---|---|
inset-block-start | top | Καθορίζει την μετατόπιση για το αρχικό άκρο στην κατεύθυνση που είναι κάθετη προς την κατεύθυνση γραφής. |
inset-block-end | bottom | Καθορίζει την μετατόπιση για το τελικό άκρο στην κατεύθυνση που είναι κάθετη προς την κατεύθυνση γραφής. |
inset-inline-start | left | Καθορίζει την μετατόπιση για το αρχικό άκρο στην κατεύθυνση γραφής, η οποία αντιστοιχεί σε μια φυσική μετατόπιση ανάλογα με τη λειτουργία γραφής του στοιχείου, την κατεύθυνση και τον προσανατολισμό του κειμένου. |
inset-inline-end | right | Καθορίζει την μετατόπιση για το τελικό άκρο στην κατεύθυνση γραφής. |
Μπορούμε ακόμη και να ομαδοποιήσουμε αυτές τις τέσσερις υπο-ιδιότητες σε δύο πρόσθετες στενές ιδιότητες:
| Λογική ιδιοκτησία | Σύντομο για | Τι κάνει |
|---|---|---|
inset-inline | inset-inline-startinset-inline-end | Δέχεται μία τιμή για να ορίσετε inset-inline-startκαι τα δύο και inset-inline-end.Αποδέχεται επίσης δύο τιμές, όπου η πρώτη καθορίζει inset-inline-startκαι η δεύτερη καθορίζει inset-inline-end. |
inset-block | inset-block-startinset-block-end | Δέχεται μια μεμονωμένη τιμή για να ορίσετε και τα inset-block-start και inset-block-end.Αποδέχεται επίσης δύο τιμές, όπου η πρώτη καθορίζει inset-block-startκαι η δεύτερη καθορίζει inset-block-end. |
Διαδήλωση
Αλλάξτε τη λειτουργία γραφής και τις τιμές των ιδιοτήτων ένθετων για να λάβετε μια καλύτερη ιδέα για το πώς λειτουργούν:
Προσοχή: Η insetιδιότητα δεν είναι λογική
Αν και insetείναι μέρος της προδιαγραφής Λογικές ιδιότητες και τιμές, δεν ορίζει λογικό μπλοκ ή ενσωματωμένα όφσετ. Αντίθετα, ορίζει φυσικές μετατοπίσεις, ανεξάρτητα από τη λειτουργία γραφής, την κατεύθυνση και τον προσανατολισμό του κειμένου του στοιχείου. Με άλλα λόγια, insetείναι απλώς συντομογραφία για top, right, bottomκαι left.
Υπάρχει κάποια συζήτηση εδώ στο GitHub σχετικά με τη χρήση ορισμένων λέξεων-κλειδιών για να μπορείτε να χρησιμοποιήσετε αυτήν την ιδιότητα και με λογικό τρόπο.
Λοιπόν, εξακολουθούμε να χρησιμοποιούμε φυσικά όφσετ; Φανταστείτε ότι θέλετε ένα σήμα ή ένα λογότυπο σταθερό στην επάνω και αριστερή γωνία της σελίδας σας και, ανεξάρτητα από τη γλώσσα, θέλετε να είναι εκεί. Σε αυτήν την περίπτωση δεν μπορείτε να χρησιμοποιήσετε λογικές αντισταθμίσεις και θα πρέπει να καταφύγετε σε φυσικές ιδιότητες.
Υποστήριξη προγράμματος περιήγησης
Η υποστήριξη για την insetιδιοκτησία βρίσκεται ακόμη στα αρχικά της στάδια. Από αυτό το γράψιμο, το caniuse εκτιμά την παγκόσμια υποστήριξη σε μόλις 3,79%.
Επιφάνεια εργασίας
| Internet Explorer | Ακρη | Firefox | Χρώμιο | Σαφάρι | ΛΥΡΙΚΗ ΣΚΗΝΗ |
|---|---|---|---|---|---|
| Οχι | Οχι | 66+ | Οχι | Οχι | Οχι |
Κινητό
| iOS Safari | Opera Mini | Πρόγραμμα περιήγησης Android | Chrome Android | Firefox Android |
|---|---|---|---|---|
| Οχι | Οχι | 68 | Οχι | Οχι |
Περισσότερες πληροφορίες
- Λογικές ιδιότητες και τιμές CSS Επίπεδο 1 (Προδιαγραφή, Πρόχειρο συντάκτη)
- Κατανόηση λογικών ιδιοτήτων και τιμών (Περιοδικό Smashing)
- Λογικές ιδιότητες CSS (CSS-Tricks)