Closed
Description
Inspiration: https://codepen.io/primalivet/pen/ryjKmV?editors=0100
This Thread is a successor of #10134, just to attract more viewership needed!
Well, Things have changed a lot now!
Microsoft is also now supporting CSS Grid!
https://twitter.com/MSEdgeDev/status/908096400507858944
Again, Thanks to @gregwhitworth and Microsoft Team!
http://caniuse.com/#feat=css-featurequeries
Freaking 92% global ... even Opera Mini/UC Browser is supported
Atleast expect it to go to 95-97 by 2018? No?
IE (11) Support is going down day by day, its 3% right now, expect it to go 2% or even 1% in 2018
Update: We may be supporting IE 10 and 11 also most probably! Working on it!
So here What I propose for Foundation 7 and all of it without dirty hacks:
/**
* IE 6-10 Browser support = around 0%
* IE 11 Browser Support = 3% (Going down)
* But Still we will support IE
*/
@supports (display: grid) {
.grid-x, .grid-y {
/* CSS Grid */
/* Both 1D and 2D */
display: grid; /* Latest Chrome, Firefox, Safari, Opera, Edge */
}
}
@supports not (display: grid) {
@supports (display: flex) {
/* Flex Grid, Full fallback support for 1D without any code bloat. */
/* Progressive Enhancement for 2D */
.grid-x, .grid-y {
display: flex; /* Old Chrome, Firefox, Safari, Opera, Edge, Opera Mini */
}
}
@supports not (display: flex) {
/* Progressive Enhancement only! */
.grid-x, .grid-y {
display: inline-block; /* UC Browser */
}
}
}
/* Hack for IE, assuming that IE is a browser */
/* Sass Customisation to rip this duplicate code if you DONT want to support IE */
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
.grid-x, .grid-y {
display: flex; /* IE 10, 11 */
}
}Metadata
Metadata
Assignees
Type
Projects
Milestone
Relationships
Development
No branches or pull requests
Participants
Activity
IamManchanda commentedon Sep 19, 2017
@kball If we go like this, there is no need to support things like KISS
And I don't think just to support Old IE, Going down 3% browser users and its hacks, we need to change our whole dev environment with things Like KISS and PostCSS... There is no need for that
There is brand new EDGE after all.
[-][Feature Queries Part 2] CSS Grid and Progressive Enhancement | 2018[/-][+][Feature Queries] CSS Grid and Progressive Enhancement | 2018[/+]DaSchTour commentedon Sep 19, 2017
But consider, that display flex and display grid have very different behavior and are not substitutes. I'm not even sure if it's a good idea to wrap
display: gridinto css classes. Same as with flexbox many features "get lost" when wrapped into classes.IamManchanda commentedon Sep 19, 2017
I am not saying to use grid only for first support tag... we can and should use "Grid + Flex"
Also on not substitutes,
That is what Is called Progressive enhancement, No?
Show as much as possible for a fallback
See this example BTW => https://codepen.io/primalivet/pen/ryjKmV?editors=0100
EDIT: Just found out that Opera Mini also supports flexbox 😛 and its only UC browsers that don't support flexbox (old spec, doesn't support wrapping) fully so updated my thread
IamManchanda commentedon Sep 19, 2017
The thing that matter with layouts is that, CSS Grid is perfect for 2-directional layouts
But Flexbox can do some good stuff too, but with lot more work for 2-directional layouts
What we need is an answer to this question (choose one from two below)
IamManchanda commentedon Sep 19, 2017
Good article https://ihatetomatoes.net/message-for-grumpy-developers/
digitalfuel commentedon Sep 19, 2017
Build 7 now with the future in mind. Let those that want and can use it help make it better for those that don't and can't just yet. 6 is for IE, 7 is for the future. If 7 does not look forward enough, before the time 8 is due people will be looking for alternatives that are not a backward 7. Let hop skip then jump into a future version 7.
And what is wrong with a great foundation 6 for those that need to support old tech and what is a 7 that includes them going to do to change their or our developments. Not much. It would only be a lot of effort for a 6.7.
IamManchanda commentedon Sep 19, 2017
@digitalfuel All the thing aka normal grid remains same ... we are not changing that
In General for 2D,
What we are thinking is to create Sass mixins for some cool stuff like
https://codepen.io/primalivet/pen/ryjKmV?editors=0100
2d will only support CSS Grid with Flexbox fallback
In 1D,
I think we can use CSS Grid with flexbox and inline block fallback (Progressive Enhancement )
If needed we can support IE too
See this => https://s.codepen.io/matuzo/debug/Emddvx
You can read about progressive enhancement in this article to know more => https://www.smashingmagazine.com/2017/07/enhancing-css-layout-floats-flexbox-grid/
17 remaining items