I´m developing a website with bootstrap4, CSS3, HTML5 but what I've developed and designed isn't supported by different browsers.
There are many things in HTML and CSS which are Not Supported or Partially Supported by different browsers.
Have a look at https://caniuse.com/ here you can see which things are supported by which browsers.
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.
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)
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/
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.