Η Michelle Barker με την αγαπημένη μου ανάρτηση στο blog: σύντομη, πρακτική και σας αφήνει ένα πολύτιμο κομμάτι για το χρόνο σας. Εδώ, μπαίνει σε συντομογραφίες λογικών ιδιοτήτων στο CSS, ιδιαίτερα εκείνα που ορίζουν μήκη μόνο σε έναν μόνο άξονα, ας πούμε μόνο τον άξονα μπλοκ (κάθετο) ή μόνο τον εν σειρά (οριζόντιο) άξονα.
Λέω "block" και "inline" επειδή, όσον αφορά τις λογικές ιδιότητες, ο άξονας x θα μπορούσε εξίσου καλά να συμπεριφέρεται σαν ένας κάθετος άξονας ανάλογα με το ρεύμα writing-mode.
Έτσι, εκεί που είχαμε πάντα padding, margin, να border συντομογραφίες που μπορούν να υποστηρίξουν μια σύνταξη πολλών τιμών, καμία από αυτές δεν μας επιτρέπει να δηλώνουμε μήκη σε έναν συγκεκριμένο άξονα χωρίς επίσης να ορίζουμε μήκος στον άλλο άξονα.
Για παράδειγμα:
/* This gives us margin on the inline axis */
margin: 0 3rem;…αλλά έπρεπε να ορίσουμε τον άλλο άξονα για να φτάσουμε εκεί. Με τις λογικές ιδιότητες, ωστόσο, έχουμε πρόσθετες συντομογραφίες για κάθε άξονα που σημαίνει ότι μπορούμε να τον υποδείξουμε margin-inline συντομογραφία για εργασία συγκεκριμένα στον ενσωματωμένο άξονα:
margin-inline: 3rem;Η Μισέλ αναφέρει εν παρόδω την αγαπημένη μου συντομογραφία λογικής ιδιότητας. Πόσες φορές τοποθετείτε κάτι σε αυτό το είδος μελωδίας:
.position-me {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}Μπορούμε να εντάξουμε αυτές τις τέσσερις γραμμές inset: 0. Ή θα μπορούσαμε να στοχεύσουμε απευθείας το μπλοκ και τον ενσωματωμένο άξονα inset-block και inset-inline, Αντίστοιχα.
Ενώ μιλάμε για συντομογραφίες, πάντα μου αρέσει να κάνω μια λέξη προσοχής "τυχαίες" επαναφορές CSS. Μόνο ένα από τα συνηθισμένα λάθη CSS που κάνω.
