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)
Related
I've only recently come to realise that Internet Explorer 10 doesn't support the CSS border-image property at all, not even using a vendor-prefix.
My normal go-to solution would be to use CSS3 PIE, however that's in the rather unique position of being unable to do a whole lot to help given that Microsoft have opted to depreciate support for .htc behaviours in IE10. There's a discussion about this on their forums here.
It seems possible that there might be a work-around by building a custom JS version of CSS3 PIE but I'm loath to take the performance-hit.
Is there any other way that anybody has discovered to convince IE10 to support border-image (as it really should!).
IE10 doesn't completely remove support for HTC behaviors. You can still use them if you force IE10 to emulate IE9, which you can do by adding the following meta tag:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">
This would let you use CSS3 PIE's HTC behaviors again, but it would also prevent you from using other new features introduced in IE10. It's a tradeoff, but one that would allow your site to appear as intended in IE10 until such time as a better border-image polyfill is available.
Similar to disabling JavaScript in browsers, is there a way to disable support for various CSS3 properties in Firefox or Chrome to quickly confirm a page is rendering OK if support for certain properties isn't there? I know it's only a presentation layer, but I'm just hoping there's a more efficient way to test against this without using old browsers, especially if Modernizr is being utilised.
A project called deCSS3 manages to disable a large majority of CSS3 properties through the use of a bookmarklet that overrides and neutralises their usage with !important rules.
A recent addition to the project is "Modernizr class toggling" for an added level of testing when Modernizr is utilised.
Even if there were a way to do so, would it help? Each browser has its own quirks, so there is no guarantee that e.g.:
Firefox - CSS3 = Older Browser
CSS3 isn't a set of additions to CSS2, it replaces CSS2. The backgrounds and borders module in CSS3 includes border and background as well as border-radius and box-shadow. If you 'turn off' CSS3 you turn off all CSS, and even if you could disable the new stuff Tom's answer is correct - that wouldn't leave you testing anything that actually exists in the real world.
If you need a way to "turn off CSS3" then I don't think you're thinking about/implementing progressive enhancement/graceful degradation properly. You should be starting with non-CSS3 stuff, then enhancing your site with it. When you build the non-CSS3 foundation and test it in your target browsers, then adding CSS3 shouldn't change anything (browsers ignore styles they don't recognize). If you sandbox your CSS3 in its own stylesheet, then you can tell old versions of IE to completely ignore it (or, if you're using stuff that's only partially supported in IE9, can tell all versions of IE to ignore it) to save a download.
That said, CSS is handled by the core rendering engine, so in order to view a page without CSS3, you have to view it in a browser that doesn't support CSS3. It sucks, it means you have to have several browsers, and even virtual machines (or physical machines) to test very well, but such is the state of web development, unfortunately. Theoretically, you should be testing in several browsers, anyway, and already know that IE6-8 have their own quirks that don't even relate to CSS3, and should already be set up to test them (so, therefore, if you need to test old versions of other browsers, you can install them in your IE test environment).
There's a useful add-on for Firefox called "User Agent Switcher" which allows you to bump your browser rendering down to an older version of IE (the iPhone rendering is also pretty useful). That should help you double check.
Should I fully learn CSS3 from the W3 "CSS specifications" or is CSS3 not fully supported on browsers yet?
All in the title :)
It is worth to learn. Even if will take some time until all browser supports the same things most browsers gives the possibility to user browser-based properties for css3 support. IE is the biggest problem is this field, but using scripts like css3pie then you can support css3 for internet explorer also. Some good sites offer you cross browser css3 are the following:
http://css3please.com/
http://css3generator.com/
Also visit http://www.css3.info to keep in touch with all news about css3. In any case worth.
Good overview of CSS3 support among various browsers is e.g. here http://www.findmebyip.com/litmus and here http://www.deepbluesky.com/blog/-/browser-support-for-css3-and-html5_72/
Do I need some special DOCTYPE when I want to use CSS3 ? I have div with dashed border and I want to set border-image (only can with CSS3), but when I set border-image:url(.., nothing happens.
Some browsers may only support CSS 3 features in Standards Mode, but a standards mode triggering Doctype should be considered business as usual and not "special".
Keep in mind that CSS 3 is a collection of specifications that have not yet reached recommendation stage. They are very new and browser support is far from universal (and isn't a binary state of 'supports CSS 3 or not' — the current versions of all the major web browsers support some of CSS 3 (for different values of 'some'). Your problem could simply be that you aren't using a browser that supports border-image.
border-image currently works in Safari
and Firefox 3.1 (Alpha). The syntax to
use it is:
border-image: url(border.png) 27 27 27
27 round round;
See demonstration page
CSS3 is not available on all browsers at this time. Right now, only Chrome, Opera, and Safari support it. CSS3 commands will not work on IE; you'll have to find other work-arounds or wait until browsers catch up with the standards.
Most likely the border-image did not show up, because you didn't use the correct prefixes.
Right now, just "border-image" is not supported by major browsers, hence you need to add the prefix for the browser.
E.g.
-webkit-border-image
-moz-border-image
-o-border-image
-webkit - for WebKit-based browsers such as Google Chrome and Safari
-moz - for Firefox
-o - for Opera
You do not need a specific DOCTYPE, but border-image is only supported in some browsers. You can also use:
-webkit-border-image
-moz-border-image
-khtml-border-image
-o-border-image
to broaden the range of support for browsers. CSS3 has not been implemented as a standard across all current browsers, so using specific CSS tags is the best way to go for now.
Support is very limited and inconsistent across the browsers that do support it. Check Quirksmode (bottom of the table) to see the bad news http://www.quirksmode.org/css/background.html
As of right now I believe only Firefox support -moz-border-radius property. I am surprised that twitter uses it.
Are any other browsers planning on supporting this or does CSS3 have something like this in the works?
Edit: I also found -webkit-border-top-left-radius and then the CSS3 version
So when is CSS3 coming out?
CSS3 has border-radius.
For now, Mozilla- and WebKit-based browsers have experimental support, -moz-border-radius and -webkit-border-radius. It's not bad to use them now, as long as you understand they are temporary measures until they are properly implemented. I would expect it's not too long before you see full support for border-radius in Mozilla, Firefox and IE. (Well, hopefully IE.)
Update: as of August 2016, with border-radius being natively available in all native desktop browsers (and most mobile browsers, not to mention), the stringency of using -moz-border-radius, -webkit-border-radius and similar is being slowly relaxed.
Because the CSS3 spec hasn't been finalised, Mozilla and Webkit decided to implement their own method of rounded corners, doing it in the correct way, by adding the vendor-specific tag at the front.
This is done so that when the CSS3 is FINALLY released, should they change how border-radius is supposed to work (eg: the order of the parameters), then none of the sites using the vendor-specific methods will be broken. Mozilla and WebKit can just go ahead and implement the W3C style and developers can slowly move over to that.
It's not too surprising that you're seeing some websites using it, especially for something like rounded corners where it's not going to make a massive difference to the user experience. And I mean, it's just IE users who are missing out, and they deserve everything they get.
It bugs me when people talk about CSS3 coming out. It's not a complete spec like the previous ones. It has been broken up into separate modules that may increment their versions independently.
So Selectors Level 4 may make Recommendation before CSS Backgrounds and Borders Level 3 does.
So, will CSS3 arrive? Eventually, but not all a once. So don't wait for it, start using it now (where applicable).
CSS3 has something like this in the works.
According to this, IE 8 will not support border-radius.
Any CSS property that starts with a dash (e.g. -moz, -webkit) is a browser-specific property.
This allows browser vendors to experiment with new CSS properties. Doing so is a common part of the process for writing new CSS specs, to allow web developers to see how the properties work and raise issues.
Hence you’ll find a lot of CSS 3 properties, like border-radius currently implemented in some browsers with vendor-specific extensions.
There’s nothing particularly wrong with using these on production sites, as long as you’re aware they’ll only work in the one browser.
CSS 3 should be out any decade now :)
Browser-based properties are only meant for interim fixes for that particular browser, and are supposed to be deprecated when either the W3C adopts them into CSS, or not. I wouldn't rely on them to be cross-browser or even be kept for the particular browser.