Comparison
Logical propertiesvsMedia query
Logical properties
you wrote `margin-inline-start` and the layout mirrored itself correctly in Arabic without a second stylesheet.
Properties named by writing direction — inline and block, start and end — rather than by physical edge. They make right-to-left support a property of the markup's `dir` attribute rather than a duplicate stylesheet, and the shorthands like `padding-inline` are shorter than the physical pairs they replace. The only real cost is that a team has to commit to them consistently, because a mix of physical and logical values is worse than either.
Full entry →Media query
the sidebar collapses below 768 pixels because you picked that number once and never revisited it.
A conditional block applied on properties of the viewport or device — width, orientation, pointer type, colour scheme, motion preference. Width breakpoints are the familiar use and the weakest one, because they describe the window rather than the space a component actually has. The non-width queries are the more valuable half and the more forgotten one: `prefers-color-scheme` and `prefers-reduced-motion` are both accessibility features.
Full entry →