The document discusses new CSS techniques for controlling layout, including logical properties for right-to-left and left-to-right languages, and best practices for using media queries. Logical properties allow using direction-agnostic names like "inline-start" instead of "left" or "right". Media queries work well with CSS Grid for responsive design. It recommends using em units over pixels for breakpoints, and that media queries can detect interaction like pointer type instead of just screen size with new Level 4 features.

1. New CSS ways to
control layout
 RTL/LTR Logical Properties
 Media Queries - Best Practices
By Lior Zamir, CET
Tech Talk

2. Bi-directional Websites

3. No More Mixins!
Until recently, the best way to support multiple direction websites
like RTL/LTR Websites was with SASS/LESS mixins.

4. The new Box Model

5. Logical Properties - Best Practices
• Stop thinking in terms of left/right or top/bottom
• Replace them with inline-start/inline-end and block-
start/block-end.
Logical Property Physical Property
inline-start / inline-end left / right
block-start / block-end top / bottom

6. Physical Properties vs Logical Properties
Logical Property
Physical Property
Left To Right (LTR) Right To Left (RTL)
margin-inline-start margin-left margin-right
margin-inline-end margin-right margin-left
padding-inline-start padding-left padding-right
padding-inline-end padding-right padding-left
border-inline-start{-size|style|color} border-left{-size|style|color} border-right{-size|style|color}
border-inline-end{-size|style|color} border-right{-size|style|color} border-left{-size|style|color}

7. Physical Properties vs Logical Properties
Logical Property
Physical Property
Left To Right (LTR) Right To Left (RTL)
inset-inline-start left right
inset-inline-end right left
text-align: start text-align: left text-align: right
text-align: end text-align: right text-align: left

9. Demo and References
• Demo: https://codepen.io/tutsplus/pen/gywJJK
• CSS Logical Properties and Values -
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties

10. Using Media Queries
for Responsive Design
in 2020

11. Do we need a Media Query at all?
• Flexbox and Grid Layout, along with Multi-column layout
are responsive by default.
• Responsive by default layout methods (3 examples: Multicol, Flexbox, Grid) –
https://codepen.io/lior-zamir/pen/poyqzRV

12. Media-queries and Grid work incredibly
well together…
Demo: Media Queries and Grid Layout

13. Media Queries Best Practices
• Don’t target devices, add breakpoints when the design breaks.
• When creating your breakpoints, consider moving away from pixels.
Use the em unit instead.
[ ref 1 - “…the only unit that performed consistently across all 4 browsers
is em…” ]
[ ref 2 - “…it’s best to be safe and use em breakpoints in your media queries…” ]
• Media Queries Level 4:
Detecting pointer type rather than screen size.

14. Media
Queries
Level 4:
interaction
media
features

15. @media pointer

16. @media hover

17. https://mediaQueriesTest.com

18. References
• Media Queries Level 4 - W3C Candidate Recommendation -
https://www.w3.org/TR/mediaqueries-4