This content originally appeared on Web development blog - Manuel Matuzović and was authored by Manuel Matuzović
It’s time to get me up on speed with modern CSS. There’s so much new in CSS that I know too little about. To change that I’ve started #100DaysOfMoreOrLessModernCSS. Why more or less modern CSS? Because some topics will be about cutting-edge features, while other stuff has been around for quite a while already, but I just have little to no experience with it.
If you use a shorthand property like margin with all 4 values, the properties will always be applied in the direction top - right - bottom - left, no matter the reading direction.
<button>Physical margin</button>
<button dir="rtl">Physical margin rtl</button>button {
margin: 20px 40px 10px 100px;
}
/*
LTR: 20px 40px 10px 100px
RTL: 20px 40px 10px 100px
*/
This might be desired, but it could also happen that you want margin to respect the reading direction. Logical Properties introduce 2 new shorthand properties, margin-inline and margin-block. These properties take 1 or 2 values.
.logical {
margin-inline: 5rem; /* start and end value (= left and right) */
margin-block: 5rem; /* start and end value (= top and bottom) */
margin-inline: 1rem 2rem; /* start / end value (= left / right in ltr) */
margin-block: 3rem 4rem; /* start / end value (= top / bottom in ltr) */
}Unlike margin, margin-inline and margin-block respect the reading direction.
<button>Logical margin</button>
<button dir="rtl">Logical margin rtl</button>button {
margin-inline: 100px 40px; /* 100px = start/left, 40px = end/right */
margin-block: 20px 10px; /* 20px = start/top, 10px = end/bottom */
}
/*
LTR: 20px 40px 10px 100px
RTL: 20px 100px 10px 40px
*/
This content originally appeared on Web development blog - Manuel Matuzović and was authored by Manuel Matuzović
Manuel Matuzović | Sciencx (2022-09-28T09:38:54+00:00) Day 3: logical property shorthands. Retrieved from https://www.scien.cx/2022/09/28/day-3-logical-property-shorthands/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.