Was searching a bit to see if there was any parsers to handle flexbox for older versions of IE and stumbled upon this bad boy. My question isn't in regards to backwards compatibility of flex it is simply what does this syntax mean/do:
-js-display: flex;
That is a non-standard property that is only intended to work with the Flexibility Polyfill script, which emulates Flexbox support for older IE. The link you provided is a plugin for PostCSS that automatically adds that bit of custom syntax—there is a link to the Flexbility polyfill from the page you linked to as well.
Related
Is there a way find out which version of CSS a browser is using? Most of my end users use their phones, but some don't, and those who don't are amenable to telling me their CSS version if we can figure out what it is. The latest CSS version has elements and styles that will fix some problems I've been having, if I can write code just for it.
All modern browsers support CSS 3. It's been released in 2011.
Despite that, they have differences in support of its features.
Have a look at W3 CSS Browser Support Reference
I'm trying to get familiar with CSS flexbox. There are lots of helpful resources. However, when I run into -webkit-box;, -moz-box;, -ms-flexbox; & -webkit-flex; , I'm not sure what these are or how to handle them.
If anyone can shed some light on this I would be grateful.
Thanks!
These are the vendor prefexes
It will be more clear to you when you will understand the browser working functionality.
Actually all the browser running on their specific engines. What ever the CSS syntax or functionality we are writing, These engines render their behaviour on the browser.
Webkit
is most popular browser engine which is used by chrome safari etc.
So these vendor prefexes are used to tell the browser that which css properties we should use.
You can read all about the vendor prefixes here.
Summary from the link:
Browser vendors sometimes add prefixes to experimental or nonstandard CSS properties, so developers can experiment but changes in browser behavior don't break the code during the standards process. Developers should wait to include the unprefixed property until browser behavior is standardized.
is it possible to Workaround for display:inline-flex in IE 9
<div style="display:inline-flex"> Test </div>
I understand from your question, that you are aware of the fact that IE9 does not support flexbox.
A polyfill for flexbox, named flexie.js, does exist (not maintained afaik), but it works using the old 2009 syntax of flexbox.
Using the old syntax is of course not recommended, since the 2009 syntax is really outdated and many browsers won't recognize it anymore. But, you can try to use Autoprefixer, which transforms new-syntax rules to old-syntax rules (while preserving the new-syntax for browsers that do support it).
There are caveats - You won't be able to use inline-style, you would have to write your styles in CSS files, and I don't think it supports dynamic changes to the DOM.
Disclaimer: I haven't tried that method with IE9 + flexie.
It's my understanding that the CSS Flexible Box Layout module is being rewritten and that display:box is being deprecated in favor of display:flexbox.
Is display:flexbox currently supported in any browser (release, beta, or nightly)? Does anyone know where I can find some information as to what's new in flexbox, what the differences are between it and the old module, and/or why the old module was rewritten?
It looks like at this time good information is not available. I will update this post if and when I find good information.
Update: (2/20/2012) caniuse.com now shows the browser support for both the new and old versions of the Flexible Box Layout Module
Update: (8/7/2012) Chris Coyer has put together a nice article about how to tell the difference between the new and old syntax. http://css-tricks.com/old-flexbox-and-new-flexbox/
Compatibility table for flexbox support
In short: IE10+, Firefox, Chrome, Safari, iOS and Android.
As you mention, the official values for "display" in the Flexbox spec are "flexbox" and "inline-flexbox", as of the March 2011 Working Draft. The "box" value was mentioned in the first Working Draft (July 2009) and is the one that has most widespread support at the moment, but should now be replaced by "flexbox".
How do I find the version of CSS that I am using?
Although the CSS specification is defined in several versions (v2, 2.1, 3), the CSS version isn't really relevant to the developer; you need to be more concerned with which web browsers support a given feature.
It is useful to know that a given feature was defined in CSS2, 2.1 or 3 because that can give you an idea of how old the feature is, and therefore how likely it is that browsers will support it -- for example border-radius is a CSS3 feature, so browsers more than a couple of years old may not support it fully.
You can find out what CSS features are supported in which browsers from the following sites:
http://www.quirksmode.org/css/contents.html
http://caniuse.com/
The version is only defined by the CSS selectors, propreties and attributes that you use.
You are free to mix elements of CSS 1, 2 and 3 in any styles that you write.
You can refer to the CSS specifications to see more details. The specifications and drafts at the W3C is available via this index: http://www.w3schools.com/w3c/w3c_css.asp
Just an addition of what #Craig said.
In my .net 2.0 framework I have a property to show scroll bars. As I want just the vertical, I've added both properties and, if the browser that user is using support this new CSS 3.0 property (overflow-x), he will see just the vertical one.
In my opinion you should use object detection instead - check the MDC to understand the principle.
On Internet Explorer you might find compatMode and documentMode useful.
As far as I know, there's nothing in CSS code that specifies the version. Browsers are designed to interpret one or more versions of CSS at runtime. Therefore, I would imagine that you would need to get the version of the browser via javascript and then determine what version of CSS is understood by the browser.