Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Add 2012 spec of flexbox. #115

Closed
hotmeteor opened this Issue · 21 comments

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

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

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
@plapier plapier referenced this issue
Closed

New flex box #152

@xzyfer

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

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

@plapier

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

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

@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
@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

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
@hotmeteor hotmeteor closed this
@hotmeteor hotmeteor reopened this
@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

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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.