Prediction: margins in stylesheets will decline as hole in stylesheets climb
Relinquishing spacing possession to the mum or dad container put the spacing logic in 1 place as an alternative of scattered amongst the kids. Hole got here with CSS Grid, opened up our eyes, and is now a part of the Flexbox spec. I foresee in 2020 that hole will develop into the first method we house on the internet. Moreover, flexbox grid methods will transfer to hole primarily based syntaxes.
Prediction: margin/padding/border decline as their logical property counterparts climb
All y’all will likely be coming into new dimensions in 2020: block and inline dimensions. 😂
With support across the board for logical properties, there isn’t any purpose your staff shoudn’t be adjusting their muscle reminiscence to the brand new key phrases. There’s an excessive amount of the staff will get totally free by switching to logical property syntax. It took me method much less time to regulate my habits then I assumed, so simply do it!
Here is a tiny intro on what’s in retailer for y’all:
- peak/width 👉 block-size/inline-size
- margin/padding 👉 margin-block/margin-inline & padding-block/padding-inline
- borders 👉 border-block/border-inline
- overflow 👉 overflow-block/overflow-inline
- text-align 👉 begin/finish
- float 👉 block-start/inline-start/and so on
Firefox simply launched subgrid this week! In 2020, the remainder of the browsers might want to ramp up and ship it too. It is a rad addition to the online’s grid ecosystem. That is one other characteristic destined to closely affect CSS grid frameworks in 2020.
Prediction: extra prefers-* media queries, extra utilization from designers
2019 introduced OS stage preferences to net pages. They have been tremendous effectively acquired by customers and builders alike, and in 2020, I do not foresee this momentum slowing down. There’s already more being specced, and you may already preview sure options on the OS stage. Home windows is de facto main the cost in a few of these efforts.
Here is a preview of some on the horizon:
- mild stage
Prediction: extra revealed paint/format/animation worklets
Who would not wish to train CSS new methods!? We have seen neat paint worklets over the previous couple years, and I do not foresee that momentum dwindling. Anticipate extra, enjoyable, significant paint worklets to be created in 2020. But additionally, animation worklets, and format worklets. Houdini is essentially the most experimental and excessive performant place to go play with visuals on the internet, sounds enjoyable proper!?
It is also “off the primary thread”, one other development I predict will likely be necessary and on the rise in 2020. This prediction get’s some double crossover factors for being attention-grabbing on a number of ranges.
These are CSS issues I see percolating and/or at all times scorching:
- Customized properties
- Atomic CSS-in-JS
- Design tokens