COT: css grid layouts update

[pziecina]

COT = Completely Of Topic

Just though I would let those interested know that the css grid layouts spec has been updated, and that a few features may be 'ignored' in order to speed up making it a recommendation -

https://www.w3.org/TR/2017/CR-css-grid-1-20170209/

Currently FF has 9 more features in order to be compliant, and Chrome 7 features.

The features, at risk of dropping, (probably will be) are -

• the subgrid value
• overflow applied to subgrids
• the <percentage> value in grid-row-gap/grid-column-gap (low priority)
• application of grid placement to absolutely-positioned boxes

Which basically means that, FF has 3 in order to pass, and Chrome 1.

Also I would like to explain, (sorry Ben, no insult intended) what the specs meen when they say flexbox is one direction, and grids 2 dimension, and it has nothing to do with how one uses them, but how one defines them.

If you look at the 2 following diagrams -

Exemplary Flex Layout Example

Exemplary Grid Layout Example

You will I hope see the meaning, but for those who do not, it is the alignment of the containers, flexbox does not allow someone to tell the flex child item to span 2x the vertical space, without extra css and possibly html mark-up, css grids does this without extra mark-up -

The W3C specs says -

Although many layouts can be expressed with either Grid or Flexbox, they each have their specialties. Grid enforces 2-dimensional alignment, uses a top-down approach to layout, allows explicit overlapping of items, and has more powerful spanning capabilities. Flexbox focuses on space distribution within an axis, uses a simpler bottom-up approach to layout, can use a content-size–based line-wrapping system to control its secondary axis, and relies on the underlying markup hierarchy to build more complex layouts. It is expected that both will be valuable and complementary tools for CSS authors.

As an aside -

If the css grid features are to be 'dropped' as the specs say they may, then there is likely that both flexbox and grids will become recommendations at roughly the same time.

[pziecina]

BenPleysier  wrote

Continuing reading the article, after having paused at the above sentence, I became very disappointed when I noticed that Eric did not utilise the strongest GRID-feature, namely grid-template-*.

I think he was trying to make it compatible with IE browsers, without the use of @support or additional mark-up.

I have looked at the creation of IE fallback if someone uses the grid-template feature, and even though I will not say with 100% certainty it can be done, I do think, (95% certain) that it is possible, if a visual or js code generation tool was used to create the layout initially.

As for flexbox, let's say I disagree with yourself and Erics views

[osgood_]

I wouldn't  feel too at home if youre still using float to build a website - that was never intended as a way of laying out a website. As with any progression one should use the latest 'hack' if you think of it like that because its a better hack than float. Grid isnt going to be a serious contender for at least a couple of years on any developers radar save for those who like to create themselves more work so you may as well use the next best method available now and that is Flexbox

[pziecina]

Sorry, was not allowed to say my previous post, (now deleted)

[BenPleysier]

[pziecina]

Now for some news I can say.

Microsoft have begun work on updating the MS Edge implementation of css grid layouts, so it complies with the 'recommendation' specs.

[pziecina]

This is getting repetitious.

The latest update to iOS (10.3), also now includes support.

Nancy OShea​

I don't know if you remember posting the caniuse usage data, a few weeks back, and me saying that it will be 80% by the end of this years, and then posting that I though caniuse is not really representative of what we can actually use anymore?

Well the latest stats, I think confirm both, with support now being 37%,

http://caniuse.com/#feat=css-grid

At this rate we should be able to use css grid layouts, without any problems by November, (some hope ).

[Nancy OShea]

Global = 37%

US =  34.5%

I don't know where Can I Use derive their data.    But I feel like old devices & browsers which many people still use BTW, are holding us all back.   I'm the 1st to admit  that I don't upgrade OSs on my older mobile devices because it's a mixed bag of tricks.  Sometimes it's OK but quite often it's catastrophic and the device stops working.   So I don't mess with it.  I'm sure I'm not alone.

Nancy

[pziecina]

I'm still running iOS 6 on my iPod touch, and I still have a smartphone that uses Android 2.2, both of which only support the old original version of flexbox, and will never support css grids.

If I was developing a public commercial site, I would use all these shiny new features with caution. The problem is users need to have support in programs like Dw, just so they can develop and exchange ideas on 'how to use' fallbacks, and Dw will not support the features, until users can actually use them without any requirement for a fallback, (javascript or other).

Even if a lot of what they do include will not work without javascript.