JSF - List of supported Browsers - cross-browser

Can someone help me to find out the list of all Supported Browsers for JSF2?

Technically the JSF is converted to html on the server side like JSP and php and such, so unless you are doing something really crazy or using a feature not supported by certain browsers yet (CSS3 or HTML5) it should work with most browsers
(source: I've used my JSF apps on IE, Firefox, Chrome, and Opera Mobile with no issues so far)
I wasn't able to find a place online that officially lists supprted browsers, only sites like IceFaces and RichFaces
just found this, not actually looking for it but thought it might be useful
CaniUse.com lets you select features and then it shows a table of browsers and whether they support the features or not

Related

Consistent website rendering across different browsers

I'm making an old website with HTML. I used the reset.css and I can see this perfectly on the web (http://www.ceachile.cl/revista/) with Chrome, Firefox and IE10, but my client can't see some elements properly. I don't know what else can I do to fix this table that is in a wrong place. Here's a folder with a lot of screenshots of the site in many browsers and OS.
Some snapshots of what the website looks like under various browsers can be found here
You have to check with elements of HTML and CSS each of the browsers support. Trident has historically been behind in implementing a lot of newer features. If you aim to support older browser, you have to look at their documentation and write code based on what they can handle.
Take a look at http://msdn.microsoft.com/en-us/library/bb250496(v=vs.85).aspx for ie7.
If you know your client's OS and browser version, you can use a service like www.browserstack.com to test your website in this environment and debug it with the usual developer tools.

HTML 5 Substitute to javascript validation

I would like to know if HTML5 validation could already by used as a substitute to javascript validation.
HTML validation is so much easier and I want to implement it in my website but I am not sure of it is safe enough.
HTML5 validation is a feature that is fully implemented in several browsers, but is not fully implemented in many older browser versions, notably IE <10, Safari (all versions), as well as older versions of Chrome, Firefox, and Opera.
For those browsers that do not support it, however, you should look into using a Javascript polyfill such as Modernizr to ensure that users with other browsers will have their inputs validated as well. (There may be other polyfills available, but Modernizr is the most popular and widespread option currently available)
Check out this resource for HTML5 validations (see the required attribute). It goes on to explain browser compatibility:
http://diveintohtml5.info/forms.html

Why does my site look different on every browser?

Please check out this snippet of my site.
http://jsfiddle.net/TmnPV/
The logo is made up of the 'circle1' and other div tags in the same html sections. It doesn't show up on jsfiddle either and it looks different on every browser.
On chrome = shows all
On firefox = no logo shows and bottom text under input field is larger
On safari = no logo shows
What can I do?
This is called, umm... , welcome to wild wild world of web. Every browser vendor parses html/css/javascript differently. Some are lenient, some are strict. (Chrome Vs. Opera). Some have different Box model, some have standard operational behavior, some tend to do their own thing.(Opera Vs. IE6)
Answer to different renderings : You have to hunt down each and every little quirk. One by one.
Welcome.
You'll need to adjust your styles for older browsers if you plan on doing alot of css3 transforms.
IE 6, 7, and 8 just don't have the ability to read those styles.
Even on Firefox, depending on the version, you'll run into various spacing issues since the rendering engine is different than Chrome (and Safari).
For using html5 and css3 in older IEs you can (sparingly) use polyfills, which duplicate the effect using javascript. You can see a list of available polyfills here:
https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills
Quirksmode is a great resource for checking compatibility: http://www.quirksmode.org/compatibility.html
I would highly recommend the Firebug add-on for Firefox to see where the extra spacing, etc is happening.
When you run into a specific issue with a specific browser that you can't figure out post a question here. It's much easier to help with one bug than just general browser problems.
That's mostly because you are using code to work with one browser. Different browser uses different code renderer. It's hard to make everything look the same, even tho Internet explorer is the worst, other browsers have different features. Opera has most of the HTML5 form features, that no other browser supports so far, but Chrome and Firefox supports the most of the HTML5 attributes. Hope this helps understand the reason why.

broswer support for canvas.toDataUrl and how reliable it is

Like the title says I'm just wondering the current support for canvas.toDataUrl? I have it working in Firefox 4 but haven't really tried it in any other browers. When I look it up on Google most of the results are pretty scattered as some are from a year ago. It says its only supported with webkit nightly builds. (which I assume now are the actual releases)
I'd also like to know the support for mobile devices as well.
I personally prefer using caniuse.com for finding out the current browser support. Caniuse covers various major releases of each browser, as well as some mobile browsers. However, I always recommend that with anything mission critical, you test in all browsers just to be on the safe side.
If you take a look again at caniuse.com you will see that the support tables are all color-coded and they tell you whether a browser fully-supports, partially-supports, does not support, or does not support (but a polyfill exists). The canvas.toDataUrl, property would fall under the category of "basic support", which shows that the canvas api (or rather the current working draft for it) is fully supported in all major browsers, and there is a polyfill available for IE.
So while it doesn't go into great detail about the specific properties browsers support, it stands to reason if a browser "fully-supports" the basic canvas API, you can safely assume that includes toDataUrl. Once again, if you dont want to leave things to chance, or if you for some reason do not trust caniuse.com, your best bet is to build a test-suite and personally test your app against all browsers.
Actually it's currently broken in the webkit nightly build, a minor security bug I found a couple days ago:
http://code.google.com/p/chromium/issues/detail?id=91016
But in general in the stable release of Chrome it works just fine. In IE9 it works just fine too.

Are multiple CSS classes per tag safe to use?

I am starting up a brand new web project and would like to know if I can safely use multiple CSS classes nowadays.
<div class="float-left bold bordered"></div>
Do most common browsers support this, or will a significant percentage of my visitors run into major trouble viewing the page?
I'm not worried about special cases like Netscape 1.0 users, but browsers and versions usually used in companies these days.
Nearly any modern browser should support this, it is apparently buggy in IE <= 6, but you should be fine as this lack of functionality would hinder many major sites / applications.
The following link has a chart showing support for multiple CSS classes by browser:
CSS Support By Browser
Netscape 1.0 will probably not support this, as Netscape lacked support for it in 4.0. Source
Netscape 4.0+
Multiple class names for an element are not supported.
Yes, every major browser supports this.