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".
Related
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.
What is the basic difference between -moz-linear-gradient and -webkit-gradient. I know the changes are in parameters and -moz is meant for mozilla. But why we have different CSS property for Mozilla. What does webkit represents here ?
Most often, though, the extensions are used to release and test
browser features that have been developed in the preparation of W3C
drafts that have not yet reached Candidate Recommendation status—the
extensions allow these new properties to be widely tested before they
become available as standard CSS properties.
http://reference.sitepoint.com/css/vendorspecific
Some of these properties have been included in draft CSS specification
for inclusion in the final recommendation, but are still experimental.
The final standard property may be different from the current prefix
implementation.
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Mozilla_Extensions
Webkit CSS properties
http://css-infos.net/properties/webkit
WebKit is an open source web browser engine. WebKit is also the name of the Mac OS X system framework version of the engine that's used by Safari, Dashboard, Mail, and many other OS X applications. WebKit's HTML and JavaScript code began as a branch of the KHTML and KJS libraries from KDE.
CSS3 Gradients
Introduction
WebKit paved the way for gradients in CSS by adding support for -webkit-gradient back in early 2008, and they’ve become widely used since their introduction.
Over the past several months, the CSS Working Group has had extended discussions about making the gradient syntax easier to use, and recently Tab Atkins included a proposal in the latest draft of the Image Values and Replaced Content module. WebKit and Mozilla have now implemented this proposal so that web authors can experiment with it, and provide feedback to the Working Group. Note that the proposal is still an editor’s draft, which means that it’s still possible, and even likely to change due to user feedback.
The main goal of the new syntax is simplicity; it’s now really easy to code up common gradients, as you’ll see in the examples below. A secondary goal was to specify something where implementations were compatible across browsers.
If you’re not already running one, go and grab a recent nightly build so that you can see the examples in this post.
Here are some simple examples (note that all these examples are resizable, so you can see how resizing the box affects the gradients):
Where can I find a complete "browser specific css attributes" reference?
I mean some attributes such as -moz-border-radius that is just for Firefox or -webkit-min-device-pixel-ratio. These examples work just in a specified web browser. I want a complete reference for these attributes.
Each vendor should maintain a list of custom CSS extensions. The ones I've found are linked below.
Mozilla (Firefox)
Opera
Safari (merged with standard CSS properties)
Internet Explorer (outdated)
Ones I can't find ...
Chrome (same engine as Safari, some slight differences in vendor extensions supported)
Peter Baverloo's table is the best reference I have been able to find for all browsers in one single page.
Check out css3files. It's a site that talks about all popular css3 functions, in what browsers they work and what code you need to use.
You can take a look at this page: http://caniuse.com/
It also shows most, if not all, HTML5 and CSS3 features and their support.
I know IE8 and below don't support rounded buttons with plain css but does ie9?
I had a more recent table showing CSS3 properties handled by IE9 but border-radius was already part of them in september: http://www.impressivewebs.com/css3-support-ie9/
Microsoft's stated aim in releasing IE9 is to support all HTML5, CSS3 and other features which for which finalised specifications have been released.
This means that there are a number of features which Firefox, Chrome, Safari and others support already which IE9 will not support.
The good news for you is that border-radius (the CSS3 feature which gives you rounded corners) is fully specified, and as a result, it is implemented in IE9.
I recommend using the site CanIUse.com to check for browser support for individual features. It has a comprehensive list of which browsers support which features.
You may also want to look up Quirksmode.org, which offers a similar service. However although I am a big fan of Quirksmode, it is getting somewhat out of date now. (but it is still a great resource for checking feature support in older versions of IE in particular)
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.