I just noticed that the look of the form elements in Chrome has changed. I couldn't find any explanation with a quick search. Even the official Chrome's blog doesn't mention anything. I must say, the new look feels a bit foreign.
I would like to find out the reason behind the change. My guess would be that it has something to do with rendering speed. Is there the official benchmarks of the old look vs new look.
The speed might not be the reason. Does anyone know the official reason?
I didn't look into the official reason, but I noticed that checkbox elements are now vector graphics so they can scale/resize (like in the newer Internet Explorer).
The Chrome changelog probably has the answers you seek, but I'm guessing they wanted them with more consistent usability/presentation across platforms instead of using the OS' native look and feel.
Related
I have developed working D3 driven charts and as far as all the other browsers go, there are no problems.
but recently the need to support them also in Internet Explorer 8 cropped up.
But so far i can't make this html display in IE8.
these are the tags used in D3:
<svg> <path> <g> <line> <circle> <rect>
for the last 6 hours i have skimmed through a lot of materials and questions including:
"Display inline SVG in IE8" which has this answer from October 2012:
I have been looking into this too and a number of options came up.
Chrome Frame - A browser plug-in that actually uses chrome underneath, meaning SVG just works. This is great if you're able to deploy plugins to the browser, for a real commercial environment however this may not be possible.
SVG Web - The aim is it bring SVG to all browsers. It looks like a fairly large project, one that's had Google's input. This doesn't however work out of the box with D3 though I don't know much about the issues.
D34Raphael - You've mentioned this one, I found again it doesn't work out of the box. Check the project out on GitHub, there hasn't been any commit activity in months and there's some pull requests "first pass on trying to get support for .on() required for event binding". If it doesn't support events, is that an issue to you? I'd generally keep away from this one.
R2D3 - Again another one you mentioned. I took the Sankey example from the D3 website and had to make a few changes to get it working. The main things I couldn't get working (Drag Events, Groups - though can use an alternative). It took about a day of effort to get the example working in IE8 and I believe is in a useable state. The project on GitHub is also much more active, the developer is committing, pulling work in and is very active on discussions etc. This gets my vote.
Also:
D3 IE8 Compatibility?
wikipedia.org/wiki/Scalable_Vector_Graphics
SVG Web Compatibility
But the solutions using client-side plugins are not acceptable and so far it looks that i can't display svg in IE8.
So the solution is to find some other ways to render vector graphs.
I presume that others have had the same problems
Edit:
either way, people that will encounter this same problem after me will at least have somewhat concentrated materials and will realize that there is no easy/real solution to display svg on IE8 and better to spend time starting on the existing code rewriting/adjusting for non-svg version
Edit:
after some testing i would say that its worth trying to go through R2D3 examples and see if its possible to simplify/execute the code in IE8
Samples
Edit:
During the process of testing different elements separately some r2d3 problems seem to arise
most common would be Invalid argument and Object doesn't support this property or method
as i am not used to develop for IE8 there were some useful tips that i found:
dump javascript vars
and
display objects
Not sure if you are still looking for an answer, but I ran into this issue on a project a few years back. We ended up switching over to HighCharts for the browser compatibility. At the time it was still in its infancy as a charting library, since then it's become much more powerful and still maintains browser support back to IE6.
Unfortunately for most people now supporting IE8 its down to client restrictions rather than consumers.
Without informing those that have requested it of the restraints, backwards compatibility and cost implications along with valued links from this post, the solutions for making canvas work in IE7/8 and using the JScharts variants is your best option.
Of course, it means not using D3 unless you want to double your work load = cost. Just remember to mention that every time.
Good luck
IE8 (as far as I can see) simply doesn't support SVG. The only solution I can see working is using a different graph library which uses a canvas to draw it's components. Think of libraries like CanvasJS, ChartsJS, GoJS or VisJS Network Graphs and then using excanvas to make them work for IE8.
Another solution I found when researching this topic is using Chrome Frame. It makes IE8 support SVG. Though, sadly, Chrome Frame is retired and no longer supported anymore.
Knowing all this you have to ask yourself: "Is it worth going through all of this for the less than 0,1% of people who still use IE8 and below?".
Because, if you want complete d3 compatibility you probably would have to write your own converter from svg to canvas and even then, you still have to hope that excanvas supports all the canvas functions you write.
Edit: Changed browser percentage to current IE8 usage
I need to render some HTML content (created by the application) and I'm wondering whether I should use QTextBrowser or QWebView. Although they seem quite similar, the doc doesn't discuss the differences between then.
I guess QWebView is almost a full-featured browser, but how about QTextBrowser? Does it also use webkit? Am I likely to run into some limitations if I use it?
QTextBrowser supports only a subset of HTML and CSS, documenation see here.
It has the advantage that it is lightweight, QWebView uses a lot more code and ressources.
Some more information The answer is accurate, however I feel compelled to complete it with some more info (OP). As a warning, read through the provided link to get the tags and styles that work. em sizes don't seem to work at all so set all your sizes in pixels; HR styling is extremely limited; bottom-border styling is not available (which could have been a good alternative to HR); . So don't do your design in Firefox and expect it's going to work in Qt. It most likely won't. Check the ref when things don't work as you except and tweak as you go. Eventually, it's probably possible to do many designs with QTextBrowser but it's better to check as you go.
Is there any tool that allows you to automatically test page under different browser and make sure CSS looks good?
P.S. I know it sounds impossible, but maybe there are some solutions (like taking screenshots and comparing them)
https://browserlab.adobe.com/ - adobe id is needed, but it's free.
and
http://netrenderer.com - just for IE.
Both only take screenshots, but with a very little delay.
also for ie http://www.my-debugbar.com/wiki/IETester/HomePage - It's still in alpha state so it can only be trusted to a point.
Personally though, I pretty much have every browser in my comp so I can test things out in the actual browser. Plus all of the major ones do have web dev tools so.. if you can download all the browsers that's a good choice.
And I really just test all around functionality. For example if text is little different in some browsers then so be it, as long as it doesn't get cut or anything.
Tried BrowserStack? http://www.browserstack.com/
There was some other site I occasionally used to use that returned a set of images, but I can't remember what it was, and it wasn't always accurate.
You can use http://browsershots.org/ to create screenshots on all types of devices and browsers. This might be what you are looking for.
I imagine there must be out there a website that collects information about HTML 5 feature and what browsers version started to support them.
This might be a good way to decide based on your website profile, if you can apply that HTML 5 feature without a fallback for your visitors.
Do you know such a site/resource ?
For example I want to know what browsers support the multiple upload feature for inputs and what browser version was the first.
Update
I'm not pleased with the sites suggested so I'm opening a bounty.
Suggestions so far: Html5Test, Caniuse, modernizr.com, QuirksMode
Update 2
Some people don't understand the question. I need to implement the multiple upload feature. I know from analytics what browser are they using ( I know this is not 100% correct ).
I'm willing to sacrifice some of the visitors by not offering some advance features but I need to understand how big is this procent. I'm NOT trying to DETECT in anyway the browser. It's a similar approach with other sites that dropped IE 6 support.
So please don't talk about bad practice.
Try to look at Html5Test or caniuse.
If it's server side, you can analyze user agent to find out if client's version supports HTML5. Wikipedia is your friend.
If it's client side, there's Modernizr library.
A quick search gave me this interesting result (reproduced in several blogs): http://www.findmebyip.com/litmus/
And you can may also want to take a look at this list of how to detect each feature: http://diveintohtml5.ep.io/everything.html
Here is another website, quite incomplete but verbose and "work in progress" as of March 2011, so it might be worth keeping an eye on: http://html5accessibility.com/
This one is off topic, but since I found it, I add it. CSS compatibility in IE browsers (very extensive): http://msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx
And here you can find info specific to the gecko engine: https://developer.mozilla.org/en/HTML/HTML5
And, of course, MDC has compatibility tables for each feature, but separated in different pages, not as a table, e.g.: https://developer.mozilla.org/en/HTML/Element/input
http://www.modernizr.com/
HTML5Test.com collects the information but they don't give detailed reports for perusal.
A good reference site for some stuff is http://www.browserscope.org/ but that doesn't go into a lot of detail with HTML5 specific support
Another source of related stuff is http://w3c-test.org/html/tests/reporting/report.htm which is creating a set of HTML testing tools that can be run.
You or someone who wanted to create this information could use these tests and then store the UA String of each browser that hit the site with the results of each test.
Then you could just find the earliest version of each browser type that a feature successfully run on.
I think this information is stored in the databases of the sites mentioned but they just don't display it which sort of sucks. Maybe try emailing them and suggesting they add these reports.
Take a look at caniuse.com, it’s exactly what you are searching for.
QuirksMode is also a great resource, and there is an entry for multiple files input.
My vote is for:
http://www.findmebyip.com/litmus
Which i found via this blog:
http://www.deepbluesky.com/blog/-/browser-support-for-css3-and-html5_72/
You should try this website. I hope this is what you were looking for.
A design is a very important part of a web site. But making a layout cross browser compatible is very tough task.
What is the easiest way for this?
You may want to read about browser inconsistencies if you have a reason to be concerned. Other than that, I would not assume you have a problem unless you observe your pages being rendered differently across browsers. You should follow ANeves' advice and design in a browser other than IE and then test your pages as you develop.
You can use the tools located here in an article entitled "Cross-Browser Testing: A Detailed Review Of Tools And Services" to test that your pages in fact function correctly in different browsers.
The way I do it is by writing it and testing in Firefox, and each change I make I run it in IE. A lot of the times it will be different, but if you keep the changes small and isolate them then each one should be work-aroundable.
After it is completed, I check it in Safari and Chrome, and 99% of the time it's fine.
Also try to avoid tables if you can, learn to use CSS properly and it will save you a lot of time in the future.
I actually think it´s not that big of a problem. A very good starting point: CSS Mastery
Don't recrate the wheel. Try finding a website example that works in all browsers and check out it's code. It might help you out a lot.
For instance, if you want to develop just a layout (header, footer, sidebars, content, containers, menus and things like this)...I sincerely suggest you try different options available online.
For example:
http://matthewjamestaylor.com/blog/ultimate-3-column-holy-grail-pixels.htm
http://layouts.ironmyers.com/
You can find a lot of help for this online. That's only for a LAYOUT. I'm not sure about Visual Effects, I have to fight with each design every time I create a new one.
What works for me is to re-use the things that have worked for me in the past.