Add 2012 spec of flexbox. #115

Closed
hotmeteor opened this Issue Aug 21, 2012 · 21 comments

Projects

None yet

7 participants

@hotmeteor

As per Chris Coyier's post on the latest spec for flexbox, which is in CR (Candidate Recommendation) status: http://css-tricks.com/old-flexbox-and-new-flexbox/.

Should be a pretty simple addition... display: flex;

@plapier
plapier commented Aug 21, 2012

Yep. Been meaning to get around to adding the new spec. Flex-box ftw!

Thanks for the issue. I'll get it in soon if someone doesn't beat me to it.

@plapier
plapier commented Sep 5, 2012

I created mixins for the new flex-box spec. They live in the new-flex-box branch: https://github.com/thoughtbot/bourbon/blob/new-flex-box/app/assets/stylesheets/css3/_flex-box.scss

Though, because the new spec is approaching Candidate Recommendation stage, browser vendors are encouraged to drop vendor prefixes at CR stage. Because of this, these mixins may never actually get introduced into Bourbon master.

As far as I can tell, these mixins only have effect on webkit right now. As of Aug 30th, when I tested mozilla nightly, new flexbox has yet to be implemented.

New flex box is worth playing around with though!

@plapier plapier was assigned Dec 5, 2012
@plapier plapier referenced this issue Dec 11, 2012
Closed

New flex box #152

@xzyfer
xzyfer commented Jul 25, 2013

FWIW it appears all modern browser now have support (to some extent) for the new syntax, including FF: http://caniuse.com/#feat=flexbox

Since there are performance impacts between the two syntaxes it'd be good to have the choice.
http://css-tricks.com/does-flexbox-have-a-performance-problem/#comment-490956

It's trivial to feature detect the old syntax and and fallback to the old mixins.

@kerns
kerns commented Jul 26, 2013

Agree with @xzyfer ...look forward to see Bourbon catch up with this.

@plapier
plapier commented Jul 26, 2013

The real question I was waiting to have answered is weather the new flex-box mixins are needed. Seems like chrome 29.0+ has full unprefixed spec support.

I can't find an conclusive evidence whether iOS7 will have prefixed support or not. If it required prefixes, I would move forward and get the new mixins implemented + backwards compatibility.

iOS7 is also still in beta. So we may have to wait until the stable version is shipped.

@zakdances

It's probably ok to wait until flexbox mixins can be dropped entirely, however in the meantime, it appears that Chrome is beginning to drop support for the 2009 spec. For example, multiline/wrap flexboxes don't work in Chrome v28+ using the 2009 spec (but they work fine with the 2012 spec). Maybe now's a good time to merge the flexbox 2012 branch into master....

@zakdances

On second thought, just forget it. As of v.22, Firefox's support for the 2012 spec is a bit spotty (no multiline/wrapping) so that would defeat much of the purpose.

@xzyfer
xzyfer commented Jul 27, 2013

The other big consideration is mobile browsers. Although Chrome and FF are picking up the v2 spec, the adoption is going to be slower with mobile webkit-based browsers now that Chrome is on blink. Not to mention the default Android browser is still way behind the pack even in 4.2.

I don't see there being any way around supporting both implementations for a while.

@zakdances

@xzyfer I'm not certain, but according to caniuse, the new flexbox spec is fully supported on v.7 of both OSX Safari and iOS Safari.

@xzyfer
xzyfer commented Jul 29, 2013

@zakdances looks like that might be the case, but the real kicker is Android's default browser which even in 4.2 is running the old flexbox spec. It also a larger market share than IOS so it can't be ignored IMO http://gs.statcounter.com/#mobile_browser-ww-monthly-201301-201306

@hotmeteor

Agreed. As much as it would be great to drop old flexbox I think it's premature. I find a combo of Modernizr and the two flexbox sets works great.

On Jul 29, 2013, at 7:45 PM, xzyfer notifications@github.com wrote:

@zakdances looks like that might be the case, but the real kicker is Android's default browser which even in 4.2 is running the old flexbox spec. It also a larger market share than IOS so it can't be ignored IMO http://gs.statcounter.com/#mobile_browser-ww-monthly-201301-201306


Reply to this email directly or view it on GitHub.

@zakdances

@hotmeteor Merging the two branches doesn't mean dropping the old flexbox. It just means adding the new one as an option. They don't override each other.

@hotmeteor

@zakdances Of course - my bad. I mistook this conversation as a consideration to drop support rather than merging.
I've got some of my own mixins for 2009/2011/2012 flexbox functionality, I can chip in on a merge.

@plapier
plapier commented Sep 20, 2013

I'd appreciate help with creating some kind of hybrid 2008, 2009, 2011, 2012 mixins. If someone is knowledgeable enough to merge the new spec in with the old so that backwards and compatibility is maintained, that would be super helpful.

//@hotmeteor

@hotmeteor

I'll give it a whirl. I've been working with it a lot lately.
Guess I said that 2 months ago as well... but this time I mean it!

@hotmeteor hotmeteor closed this Sep 20, 2013
@hotmeteor hotmeteor reopened this Sep 20, 2013
@hotmeteor

I just forked a new branch called flexbox-unified with an initial commit of the unified flexbox specs. Give it a look, and fixes are welcomed.

@drewlustro

@hotmeteor been goofing around with this for a few days now... although I haven't tested extensively cross-browser, this updated mixin works great for the 2012 spec as far as i can tell.

@hotmeteor

@drewlustro Great. I just added some fixes for -ms-flex, coming out of some real usage I've been putting it through on a project. Going to give it some more rigorous testing today, but it's about ready for a pull I think.

@jviotti
jviotti commented Oct 14, 2013

Has this been already merged? Really looking forward to see this implemented in Bourbon's core.

@hotmeteor

Just did a pull request: #288

@plapier plapier closed this Mar 11, 2014
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment