YAGNI
Edition
Simon MacDonald
![](https://s3.amazonaws.com/media-p.slid.es/uploads/323432/images/5159799/js.jpg)
Simon MacDonald
@macdonst@mastodon.online
I ❤️
![](https://s3.amazonaws.com/media-p.slid.es/uploads/323432/images/5159799/js.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/323432/images/9945310/olive-oil.jpeg)
〞
In programming, the rule of least power is a design principle that "suggests choosing the least powerful language suitable for a given purpose".
– W3C TAG Finding 23 Feb 2006
HTML &
CSS &
JS
![](https://s3.amazonaws.com/media-p.slid.es/uploads/323432/images/10806823/mohammad-rahmani-oXlXu2qukGE-unsplash.jpg)
Tree View
![](https://s3.amazonaws.com/media-p.slid.es/uploads/323432/images/3815527/chrome-logo_318-40217.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/323432/images/3814161/1495057673_edge.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/323432/images/3925943/safari1600.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/323432/images/3814154/firefox.png)
Popover
![](https://s3.amazonaws.com/media-p.slid.es/uploads/323432/images/3815527/chrome-logo_318-40217.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/323432/images/3814161/1495057673_edge.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/323432/images/3925943/safari1600.png)
Dialog
![](https://s3.amazonaws.com/media-p.slid.es/uploads/323432/images/3815527/chrome-logo_318-40217.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/323432/images/3814161/1495057673_edge.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/323432/images/3925943/safari1600.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/323432/images/3814154/firefox.png)
Search
![](https://s3.amazonaws.com/media-p.slid.es/uploads/323432/images/3815527/chrome-logo_318-40217.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/323432/images/3925943/safari1600.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/323432/images/3814154/firefox.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/323432/images/10806824/ferenc-almasi-NzERTNpnaDw-unsplash.jpg)
CSS Logical Properties
Physical | Left to Right | Logical |
---|---|---|
top & bottom | margin-block | |
left & right | margin-inline | |
top | margin-top | margin-block-start |
bottom | margin-bottom | margin-block-end |
left | margin-left | margin-inline-start |
right | margin-right | margin-inline-end |
Inline
Block
Logical Properties
![](https://s3.amazonaws.com/media-p.slid.es/uploads/323432/images/3815527/chrome-logo_318-40217.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/323432/images/3814161/1495057673_edge.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/323432/images/3925943/safari1600.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/323432/images/3814154/firefox.png)
Typography
![](https://s3.amazonaws.com/media-p.slid.es/uploads/323432/images/3815527/chrome-logo_318-40217.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/323432/images/3814161/1495057673_edge.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/323432/images/3814154/firefox.png)
Balance
![](https://s3.amazonaws.com/media-p.slid.es/uploads/323432/images/3815527/chrome-logo_318-40217.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/323432/images/3814161/1495057673_edge.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/323432/images/3925943/safari1600.png)
Initial Letter
Colour
![](https://s3.amazonaws.com/media-p.slid.es/uploads/323432/images/3815527/chrome-logo_318-40217.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/323432/images/3814161/1495057673_edge.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/323432/images/3925943/safari1600.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/323432/images/3814154/firefox.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/323432/images/10844260/Modern-CSS-in-Real-Life.072.webp)
New Color Spaces
oklch(luminosity, chroma, hue)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/323432/images/3815527/chrome-logo_318-40217.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/323432/images/3814161/1495057673_edge.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/323432/images/3925943/safari1600.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/323432/images/3814154/firefox.png)
Color Mix
![](https://s3.amazonaws.com/media-p.slid.es/uploads/323432/images/3815527/chrome-logo_318-40217.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/323432/images/3814161/1495057673_edge.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/323432/images/3925943/safari1600.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/323432/images/3814154/firefox.png)
Accent Color
Layout
![](https://s3.amazonaws.com/media-p.slid.es/uploads/323432/images/3815527/chrome-logo_318-40217.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/323432/images/3814161/1495057673_edge.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/323432/images/3925943/safari1600.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/323432/images/3814154/firefox.png)
Container Queries
![](https://s3.amazonaws.com/media-p.slid.es/uploads/323432/images/3815527/chrome-logo_318-40217.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/323432/images/3814161/1495057673_edge.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/323432/images/3925943/safari1600.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/323432/images/3814154/firefox.png)
Dynamic Viewport
![](https://s3.amazonaws.com/media-p.slid.es/uploads/323432/images/10844292/Viewport-units-new.png)
Blue arrow: 100vh, the height of the page displayed
Red arrow: 100dvh, the height of visible screen
![](https://s3.amazonaws.com/media-p.slid.es/uploads/323432/images/3815527/chrome-logo_318-40217.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/323432/images/3814161/1495057673_edge.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/323432/images/3925943/safari1600.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/323432/images/3814154/firefox.png)
Subgrid
Selectors
![](https://s3.amazonaws.com/media-p.slid.es/uploads/323432/images/3815527/chrome-logo_318-40217.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/323432/images/3814161/1495057673_edge.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/323432/images/3925943/safari1600.png)
:has()
![](https://s3.amazonaws.com/media-p.slid.es/uploads/323432/images/3815527/chrome-logo_318-40217.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/323432/images/3925943/safari1600.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/323432/images/3814154/firefox.png)
:user-invalid
Animation
![](https://s3.amazonaws.com/media-p.slid.es/uploads/323432/images/3815527/chrome-logo_318-40217.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/323432/images/3814161/1495057673_edge.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/323432/images/3925943/safari1600.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/323432/images/3814154/firefox.png)
Smooth Scrolling
![](https://s3.amazonaws.com/media-p.slid.es/uploads/323432/images/3815527/chrome-logo_318-40217.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/323432/images/3814161/1495057673_edge.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/323432/images/3925943/safari1600.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/323432/images/3814154/firefox.png)
Scroll Snapping
![](https://s3.amazonaws.com/media-p.slid.es/uploads/323432/images/3670025/css_is_awesome.png)
Use 👏
In Conclusion
The 👏
Platform 👏
Thanks!
Contact me via email or Mastodon if you have any questions.
Bento
By Simon MacDonald
Bento
- 264