New CSS ways to control layout
Download as PPTX, PDF0 likes49 views
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.
![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.](https://image.slidesharecdn.com/newcsswaystocontrollayout-201021140822/85/New-CSS-ways-to-control-layout-13-320.jpg)
New CSS ways to control layout
- 1. New CSS ways to control layout RTL/LTR Logical Properties Media Queries - Best Practices By Lior Zamir, CET Tech Talk
- 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.
- 15. @media pointer
- 16. @media hover
- 18. References • Media Queries Level 4 - W3C Candidate Recommendation - https://www.w3.org/TR/mediaqueries-4
Editor's Notes
- #12: These specifications were written in a world where responsive design and supporting multiple devices was already a thing.