I am on the stage where I need to make my website cross-browser compatible.
I need tips on how to get started.
I have developed my website on firefox, so it works great with firefox.
I guess I have to download a couple of versions of all major browsers now, right?
Then just test each browser one by one?
Should I do this before uploading the entire website onto a server or afterwards?
All tips and SW which makes this easier is appreciated.
BTW, it is a classifieds website using MySql, Solr, PHP, js etc...
Thanks
Cross-browser compatibility is best planned for in advance, as there are ways to build your site that will make it much easier.
Consider using a CSS reset script like Eric Meyer's.
Consider using a JavaScript library like jQuery.
You can make use of Adobe BrowserLab to do cross-browser testing.
Consider the mobile audience.
You need to have some kind of local webserver so you can edit the code and test it in a comfortable way. It is also helpful if you make it accessible for validator.w3.org so you can do syntax checking.
Testing it in IE6, 7 and 8, Firefox and Chrome would be a good start I would say.
Since you are working with server side code, you need to have a server.
Once the site goes live you will need both a live and a development server.
Yes, I'd make it cross browser compatible before uploading to the server. The reason for this is that you may need to change the server-side code, adding ids and classes to the markup, plus it may well be necessary to change the markup. Make sure it's working locally first.
IE Tester is very useful for testing on the various IE browsers. I'd ensure that I've tested it on a Webkit browser (such as Chrome), a Gecko Browser (such as Firefox) and Opera. See this list for different browsers.
Related
I was wondering if any of you know some libraries that will help/improve the response of IE >= 7 for a website that I have to modify.
I already loaded the modernizr library, but I know that there are some libraries ment to help IE behave as a modern browser should. So, what do you recommend? What options do I have?
I'm really sick of spending hours trying to fix a 1 thing for X Version of IE.
I don't think it's that simple. I don't know of a single library that makes them all act "normal". A few I use are:
Modernizr can help with new html5 elements in older browsers
jQuery for cross browser DOM manipulation
jQuery UI for cross browser theming
But there is no silver bullet library that works everywhere all the time. Sometimes you will have to adjust the UI based on the browser capabilities. One common method of doing so is called progressive enhancement.
Progressive enhancement is a strategy for web design that emphasizes
accessibility, semantic HTML markup, and external stylesheet and
scripting technologies. Progressive enhancement uses web technologies
in a layered fashion that allows everyone to access the basic content
and functionality of a web page, using any browser or Internet
connection, while also providing an enhanced version of the page to
those with more advanced browser software or better bandwidth.
Check out ie7.js http://code.google.com/p/ie7-js/ its not perfect, but it can help with some issues.
You can tell users they need to install Google Chrome Frame https://developers.google.com/chrome/chrome-frame/
"Google Chrome Frame is an open source plug-in that seamlessly brings Google Chrome's open web technologies and speedy JavaScript engine to Internet Explorer"
I use CSS3Pie. This is a .htc file you place on the server which provides poly-fills for many CSS3 styling elements such as border-radius, text shadows, box shadows and gradients. It's quite handy in that is solves many of the same problems for IE8 and IE9 as well.
It can a be a little tricky to set up in that you sometimes need to define a MIME type on your server for .htc and you have to ensure that you set the path in your CSS file to where the .htc file resides, other than that, it's great.
I don't think there's a general fix-all solution for your problem.
I recommend trying this tool called dynaTrace AJAX Edition (http://www.compuware.com/application-performance-management/ajax-performance-testing.html), the free version is more than enough to help you.
What you do is:
Start a session and choose your IE browser
Open and click through your web application
Close the browser
Double-click the "Timeline" on dynaTrace.
You'll see a breakdown of your site's performance so you can identify which Javascript is the problem.
You'll also see if the slowdown is simply because your loading external resources which are unavailable - something which I've found IE to handle poorly.
As part of a third level project I am going to attempt to build a web based sound synthesiser using HTML5 and JavaScript.
Does anyone know of any APIs that would allow me to deploy it on all or most browsers?
I have so far seen an API that works with Firefox only and another on GitHub that works with Chrome only.
It would be great to be able to use this in Safari, as with the iPad it could become a stand alone instrument.
Is this feasible?
If you go to http://caniuse.com they will tell you if a technology is supported by Safari or not. Go check it out. Then, any API that you use will tell you what support you will get for it.
I think your best bet might be to do it server side. I would have your app use AJAX to call a server-side script to generate the sound file if it doesn't already exist, then return it's URL so you can use it in JS. Eventually, all the different sound files should be created by the server and named properly allowing you to look them up quickly.
http://mohayonao.github.com/timbre.js/ seems pretty powerful. Pity some of the documentation appears to be in Japanese only!
WebPd is a partial Puredata port to JS - https://github.com/sebpiq/WebPd - it works well with Chrome and Firefox. "It is also a standalone DSP library. Every object as you know it in Pure Data exposes a complete API, allowing developers to control everything with JavaScript."
Is there anything that provides a console, error logging, etc. for testing Windows Gadgets? I've searched but I'm unable to find anything.
Thanks in advance!
A simple and easy start is to just use any web developing toolkit. I found out myself that for developing simple Windows Gadgets, Notepad++ and Firefox with its Web Developer toolbar was more than enough. You can implement all the business logic and just test the results in a browser. Actually starting it as a Gadget was only needed to fine-tune some graphical glitches that always occur because of different browsers still interpreting CSS a little differently.
Firefox has some nice tools for debugging Javascript.
You can use firebug lite for IE (i.e put a script tag and include the latest firebug lite version).It does look a bit crude but it works nonetheless and its seamless integration for testing.
http://getfirebug.com/lite/ie.html
Though your gadget might seem a bit mutilated when using it.
:)
I need make an quick estimation on project (not sure we got):
It's an old banking CMS java web app, but the UI aimed for getting near the winform style:
Server: jdk5, weblogic 9 (JSP 1.x), only use weblogic internal servlet (not strut...).
Client: winXP, Ie6.
It was design only for use with ie6 but now we need make it also run well on new client: ie8,ie7 on win7. I understand the most difference is the client: DOM and CSS.
But my problem is we hasn't been worked with ie8, and I have not enough time to build an testing environment because our developing environment is not ready to make test (its remoting completely, and managed by another partner)
Any experience or suggestion to help me weighing this task need will be welcomed.
Edit: HTML, CSS is fairy outdated, not work on firefox at all, JS is barely procedure, no ajax, no plugins.
Client PC is limited for banking and, internal use (user not be supposed to change config or choose the browser)
Using activeX to manipulating printer and creating the report (increase ability to meet security problem )
This has nothing to do with Java, or weblogic. What you need to worry is javascript and css.
As long as your concern is limited to IE7 and IE8 only (ignoring Firefox, Chrome, etc), I think you are pretty safe. These two browsers have compatibility mode that should work with IE6 designed websites. Most problem would probably cosmetic rather than functions.
In my eyes, this is going to be impossible to tell without actually testing the application.
It'll totally depend on what kind of markup was used. Possible problems can range from near zero (if only standard markup, simple design, and basic Javascript or a framework like jQuery was used) to several weeks of fixing (heavy use of complex CSS rules optimized for IE6; heavy use of IE specific Javascript).
I'm not sure about any DOM problems since IE8 hasn't had any significant DOM updates since 1998 while any other browser is far more advanced than that. CSS and, maybe, javascript will be the big issue since you say it doesn't work in any modern browser (Firefox, Chrome, etc.)
There is a particular website I must use for work which is absolutely heinous and despised by all who must use it. In particular, the site's Javascript is fundamentally broken and works only in IE, which pretty much makes it the only site I must use outside my preferred browsers.
So, to the question. If I could 'patch' the javascript after loading the website in such a fashion as to 'do the right thing', I could then use the website without IE.
( Just to cut out some of the superfluous answers: I have already tried masking both browsers as IE, which has no effect because the issue is with the javascript, not browser detection on the server. )
I would prefer solutions which are for Opera, though I'm not opposed to Firefox answers. Also, I would rather not have to view the site though a proxy, though I will entertain such answers.
For Opera, you want User JavaScript. Similar to Greasemonkey, but built-in to Opera. Built to be used for exactly the sort of situation you're in: fixing sites that are broken in Opera...
For Firefox, you could use the Greasemonkey addon to do this.
You could probably use the Greasemonkey addon for firefox to do this. It would let you write javascript to run in their page, and could probably use that to do a "patch" at runtime. I've never written a greasemonkey script before, so I don't know how easy it would be to get something working, but it might be worth a look.
Greasemonkey is exactly what you want for this. I have extensively hacked some sites using it and there are a plethora of good examples at www.greasespot.net. Although this page is about Opera it has some good examples that are applicable to Greasemonkey in firefox too. I also noticed that the Greasemonkey wikipedia article has information about using Greasemonkey or equivalents in other browsers too.
You can use also a proxy (I used Proxomitron a long time ago, there are more modern equivalences) which alters the page on the fly before they reach the browser... Thus you can remove all original JavaScript, and add your own, by this way, or with Greasemonkey or user scripts.
I'm not sure that GreaseMonkey will be much good for patching.
GM scripts run after the page has loaded and all native scripts have run so anything that was going to break will already have broken.