Related
I'm using pretty recent CSS features such as viewport units and flex-boxes. These are great for making fluid layouts, and to get rid of extra-markup and dirty CSS hacks.
I'm using prefix-free to handle some vendor-prefix issues, but that got me thinking, is there any sort of script that can detect the use of recent CSS features and somehow make calculations in order to render the elements that use that feature correctly? (if the browser doesn't support those features, of course)
The site I'm making makes use of Bitcoins and WebSockets (and to my knowledge, socket.io falls back to long-polling), so I guess maybe many of the users will be somewhat "tech-savvy" and have recent browsers, but I don't really know what to expect, honestly. And it'd suck if the site looked completely broken for some people.
I'm the sole developer of this and the idea of making a bunch of the layout compatible with older browsers is... well, daunting. I just got started so I might as well use old CSS techniques, but I'd really like to use the latest stuff.
It really sucks that there is a lot of new, cool stuff, but old browsers are holding everyone back...
Thank you.
What you're looking for is commonly called a "polyfill".
There are many polyfills available... usually several for each feature. You can find packages like Webshim which come with many out of the box: http://afarkas.github.io/webshim/demos/
Use http://caniuse.com/ to check for browser compatibility. It often links to polyfills in the comments section.
Closed. This question is off-topic. It is not currently accepting answers.
Want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed 12 years ago.
Improve this question
I am working on my first project that requires me to worry about cross browser compatibility. Since this is my first time doing so, I dont know how to go about completing the project. I am specifically worried about IE. Should I complete my project in a more graceful browser then hack it to work in IE, or should I simultaneously build my program up in both environments?
Design your site to work in standards complaint browsers first. I always start with Firefox, even when developing on my company Intranet (where everyone uses IE). Doing so will let you focus on getting your markup and CSS correct. This is what is most important.
The important thing to note is that you'll want to "future proof" your site, and concentrating on a standards compliant browser will help you do that.
Then, once you're confident your site is looking correct (validators are your friend!), try it out in the versions of IE you want to support. In order to get your layout to look OK in IE, I strongly suggest using different stylesheets for each version of IE, using conditional comments.
Also, you should note that many others have been in the same scenario as yourself, and there is quite a bit of help available. One popular method of forcing IE to behave is the ie-7.js project.
Lastly, be mindful of the top IE bugs, such as:
IE6 Box Model Bug
IE6 transparent PNG images (I have used this fix in the past)
A few tips:
Code to Standards — Start by ensuring that what you've just developed works in Firefox and Chrome, and then verify it in IE. I'll usually then check it out in Safari. It's always better to make sure your markup/code works in a more standards compliant browser first.
Validate Early, Validate Often — You don't want your design to look perfect in one browser, find out that it's broken in another, discover that to fix the broken layout you needed to correct some invalid HTML/CSS, only to find that now the first browser looks wrong.
Progressive enhancement — will be your friend. Start basic, with simple HTML and simple CSS, and no JavaScript whatsoever. Repeat tips #1 and #2, then move on to more complex styles and layout. Contiue this iterative process until you are happy with the design in all browsers. Only then should you consider JavaScript to polish the site.
Check each browser often — Don't develop the entire website in a single, compliant browser like Firefox, and then decide to "see what's broken" in IE. If you've got a complex, dynamic website, there could be MANY problems in Internet Explorer. Trying to decipher each one when they are compounding on each other is a nightmare.
Reset Stylesheet — As #Eir mentioned in the comments, find a good reset stylesheet. Although, they have fallen out of favor for some people, I find putting every browser on the same footing from the start helps tremendously.
Use a Framework — I find CSS Frameworks to be excessive, but some people swear by them, so to each his own. On the other hand, as soon as you have made it to the JavaScript phase of development, I highly recommended using jQuery or MooTools. They are very focused on circumventing cross-browser inconsistencies.
Let JSLint hurt your feelings — Even when using a JavaScript framework, there are certain standards of coding to which JSLint will help you conform. Some of the options are a bit overly strict, but I promise that if you clean your scripts through this tool often enough during development, you will almost never encounter those strange times when everything seems to work in all browsers except IE.
And some great tools! Everything in the above list you should consider mandatory practice. The following can spice it up for you in a pinch, but is optional:
CSS Browser Selector — it is rare that you will need this, but if all else fails, it's way cooler than using a separate stylesheet just for one browser (I despise conditional comments). It basically adds classes to your <html> tag, so you can do things like the following in your main stylesheet: .ie7 #header {/*stylese here for IE7 only*/}. It supports a lot of browsers on many operating systems. And it's fast.
Browsershots — Nothing beats the real thing, but if you can't install a suite of browsers, this and other tools like it can help.
IE6 CSS Fixer — I outright refuse to debug my designs in IE6. I coerced my company (via many chagrin-filled meetings with IT and management) to drop support for it (thank god). It's just counter-productive to waste so much time forcing this pile-of-ahem... Anyway, if you aren't like me and need to support IE6, this tool can help.
Also you should focus on resetting css like this
OOoooo, good question:
here's my take:
Decide which browsers you are supporting. I suggest IE 7 + 8, FF, Chrome and Safari as in order of importance. (only support IE6 if you absolutely have to!). It helps if you know your userbase here.
Use a css reset. Different browsers have different default styles. a css reset gives you a consistent base.
Keep your markup as simple as possible. Follow Standards (and see progressive enhancement on Stephen's answer).
Test every step of the way on your target browsers. That way you can correct problems right away. http://crossbrowsertesting.com/ is the best resource for this, but there are free ones for screenshots as well.
Avoid Hacks as much as possible. Most cross-browser issues these days can be solved without resorting to hacks.
Ask questions here when you get stuck. If this is your first project dealing with browsers, you will get bewildered by inconsistencies. We all face these issues, and are glad to help.
Be ok with the fact that webpages are not going to look exactly the same in all browsers. (once again, see progressive enhancement).
Good luck coding!
I develop for Firefox first, and then work out the IE buggery. Rarely do I "hack" it, rather find something that works in both, or at worst use IE conditional comments. Just one coder's preference. Always a good idea to test with Safari, too.
Two big advantages of Firefox are: the Error Console, and the Firebug plugin.
there is alot of greate tools that makes life alot easier for you there is for example a
css framework called blueprint you could use, it has already everything set for every specific browser so that you get the same outcome in all browsers. And using jquery as your javascript framework does add an extra insurance that you'll have it working in most browser.
but remeber there is no such thing as 100% cross browser compatibility for all the browsers and all the versions in world.
In theory would be best to develop for all browsers at once, always testing for every browser...
Realistically, that rarely happens... I typically develop/test with firefox. when I introduce complex javascript or css, I check in ie... this tool is incredibly handy for checking all versions at once... google ie tester.
By checking all browsers at regular intervals, and when you make complex changes, you ensure that major features are compatable :)
Also, ensuring that all of your code is valid is not only good practice, but helps identify cross browser issues.. google w3schools validator :)
Using javascript libraries such as jquery also aid in cross browser compatability, and some even come with css libraries as well. These libraries are purpose built for quick, reliable features that are typically cross browser guaranteed.
Finally, before launching, use launchlist to check that all works: http://lite.launchlist.net/
Hope all that makes sense and helps with your first project :)
I was wondering if there are any packages available out there to make CSS3 capabilities available to browsers that do not support it yet.
The way I envision this, and I've been unable to find anything via search, is the JS would detect the browser and load its own library that essentially do the CSS3 functions using JavaScript.
I know there is a JS library to make PNG files work property on older IE browsers, I was wondering if anybody's been working on something to allow other things to work as well.
This would allow developers to utilize CSS3 in their web applications, and let the JS handle the comparability. I'd be willing to pay for something like this.
Thank you.
I recently came across a rather elegant new solution for CSS3 in IE. I think it's pretty close to what you want: http://css3pie.com/
The closest thing I have found to doing this is Dean Edwards' IE scripts. I don't think it fully supports all CSS3 features yet (as most of CSS3 is still in the works and hasn't been solidified), but what it will do, is allow you to use all common CSS selectors that normally don't work in earlier versions of IE. It really helps to make IE a more standards compliant browser and avoid the use of CSS hacks and/or multiple stylesheets. I've been looking for anything about CSS3 support in his script and haven't found anything yet. Like I said, it mostly allows the use of all the selectors, plus it does have a PNG fix built into it. Bonus!
http://code.google.com/p/ie7-js/
For your info, there's also such a pack to do stuff from allowing :hover in other stuff than anchors, there's also stuff to fix IE's screw-ups of the DOM etc.
But I don't think there's a definitive list/pack to do what you want.
If there was, it would have taken on the internet like a storm ;).
I don't believe there is such a library yet. It would be alot of work, and most are satisfied with graceful degradation in old browsers rather than trying to implement the missing features in javascript. However, there is a library that does the first half: feature detection. It's call modernizr: http://www.modernizr.com/
I am currently half-decided to use Kohana + Zend as needed for the PHP part. What I would need next is an excellent base for JavaScript code. There are a bazillion of contenders here and choosing isn't exactly as easy as with PHP.
I would need practically everything from form posting and retrieving results to skinnable widgets and animations. For this reason using multiple libraries will probably be a must, as no one framework can do it all. The requirements I have would be this (initial list):
Good browser support. WebKit-based is hardly an issue and Firefox 3+ is good. However, I'm looking at you Internet Explorer. IE 6 can be ditched, seriously, but 7+ support is needed.
Good performance. While WebKit has had a stupidly fast JS implementation for quite a while (and Chrome even before), Firefox has only recently got TraceMonkey and don't even get me started on Internet Explorer. While it is true that you can't do much about IE as anything will be slow, I don't want to try running Chrome Experiments in the others either.
Excellent support. This is a total must. The better the support, the more inclined will I be towards a library.
I am currently looking into jQuery as it is a very neat library, but the quality of plugins is questioned by some. Processing.js looks extremely promising, but IE does not support canvas, thus something has to be done about that and I am not sure how it could be replaced.
Go with a known library that is used by many sites. This will ensure all 3 of the points you have mentioned.
Personally, I would go with jQuery for these above reasons:
Great cross browser support
Good performance, as it is a thin api layer
Excellent support. Good documentation, loads of other devs
Although jQuery seems to be the most used library these days, there are other very good candidates as well.
One of them are YUI Library.
YUI has excellent documentation, and support. And the source code is really good.
YUI is developed by Yahoo!, where Douglas Crocford is architect (the author of JavaScript: The Good Parts, and the man behind JSON). Yahoo! is well known for their focus on JavaScript development.
YUI has good browser support and is fast and robust.
If it's war simulation and you have custom objects that you want to animate beyond the simple CSS effects and animations, then canvas tag is your best bet. It's as close as you can get to Flash but much more smoother. Processing.js looks really good for manipulating the canvas.
If that's the core component of your game, then I see the other libraries as adjunct to Processing.js that can be scrapped out without any deep commitments. That said, jQuery is great if you're dealing heavily with the DOM. It has really good support and community. MooTools is highly modular and has been traditionally strong with animations. YUI is a great library too, but a little verbose for my taste. Thought, Yahoo has made heavy changes with v3 to fix that. And a bunch of other libraries, that I don't use at all.
Dojo is a great library for writing web applications; however, never having written a game, I'm not sure if it is well suited for that sort of application. I must warn you though that the Dojo documentation is crap. Absolute crap. On the other hand, things like dojo.hitch, dojo.require, and dojo.partial are absolute joys.
I would try to avoid using cross-cutting libraries (like Dojo+jQuery) as much as possible. There's not really a good reason to do it and will create bloat and confusion in your application from day one.
That said, using multiple, non-overlapping libraries does make sense for a project like this. You might want to look into using Processing.js for visual needs and either Dojo or jQuery for your core.
Some other things to consider. Targeting IE, even IE8, for JavaScript game development is a bit ridiculous because of its slow performance and lack of canvas support. Also, according to John Resig, developing games in JavaScript is hard.
Have you considered being a pioneer (wink) and trying something out in 03D?
I'm developing a web application for a new service, starting from Firefox 3.5.
The interface design is tableless, only using divs + CSS & performance-blessed practices.
Now, while being compatible with Safari has taken just a small amount of time, IE is a pain.
My question is: is there anything out there that could be used to speedup cross-browser checking? I already know many points of difference between FF and IE for instance, but a specific tool would maybe help some more.
Could you suggest one, if any?
Thanks,
Scarlet
Cross Browser Development
No tool can ever make up for bad behaviour, but they can sure make life easier on you.
That being said, you should really come up with a workflow that lets you optimize for cross-browser compatability in the least amount of work spent. If that means small iterative or large monolithical steps for you, well that is up to you to decide. But generally working against several browsers during development saves you if not time at least a major headache on d-day.
List of tools/resources I find useful
Selenium is a tool for frontend
testing
IETester lets you view
a page in different IE versions
Browsershots lets you view the
page on different platforms as well
Google lets you search for known and obscure IE perversions
IE 6 No More saves you a lot of headache not bothering about the preshistorical crap that goes by the name of IE 6
YUI Graded Browser Support - make sure you know which browsers to focus on
jQuery - cross browser javascript library
YUI 3: Reset CSS - reset your CSS (link contains useful information as well as the CSS)
9 Most Common IE Bugs and How to Fix Them - very useful tips on how to get the most bang for the buck by fixing the common problems first.
Cross browser development contains lots of useful tutorials regarding cross browser development.
References
Selenium alternatives / Cross Browser Testing / Litmus
This will not answer your question, but just an advice based on my personal experience.
When you are developing for many browsers, the best thing to do is to test simultaneously on all of them while you're coding.
This way you will just have to correct small bugs each time as opposed to overwhelming complicated layout problems.
I don't know of any software that actively check for problems, but Adobe has recently released BrowserLab, which really does speed up cross-browser testing.
I would also recommend using CSS reset. This way you get a lot of inconsistencies out of the way right from the start.
I do cross-browser development and I don't really use any of the prescribed patterns, like cross-browser testing. I instead use a decorative pattern. Sometimes it works wonderfully, sometimes it's a headache, but that can be said for any development pattern.
Most of my development takes place in which browser I consider the most standards-compliant. I prefer WebKit to Presto, but both are generally neck and neck for standards compliance. With these browsers, proper use of HTML and CSS almost always leads to desirable results. My WebKit browser of choice is Google Chrome. Safari works too, but keep in mind that on Mac OS X the font smoothing tends to make text bigger. To ensure compatibility with sites designed for Safari Mac, Safari Win emboldens fonts, so it's not always the most pixel-perfect representation of your site.
Blueprint CSS can be a huge help if you're trying to quickly prototype a cross-browser site design. I'm not convinced that such a framework is always necessary, and they can also influence the way you structure your XHTML markup, and contorting your markup to match a pre-existing CSS class hierarchy isn't always a great idea.
Once I have a design that I'm happy with in my standards compliant browser, I then decorate it with bug fixes in other, less standards-compliant browsers using conditional styles or stylesheets. Firefox, at least since version 3.0, is almost never a huge issue, but there are ways of targeting Firefox specifically, and even differentiating between Gecko 1.9 and 1.8, using only CSS. It's a hack, technically, so CSS purists might scoff at the code blasphemy, but it's a reliable, usable solution. For clarity and ease of maintenance, I usually maintain my Firefox/IE fixes in isolated stylesheets and compile them with some kind of server side script, which I consider preferable to conditional include statements and JavaScript hacks. If you make use of caching with PHP, this isn't a significant bottleneck or waste of CPU time.
IETester is an indispensible tool for checking a design in all of the different IE versions, and it even uses the proper JScript engine for each release, which previous, less reliable solutions like MultipleIEs lacked.
These days, the biggest problem with cross-browser development is JavaScript, and jQuery will basically save your life here. As someone who maintained a sizable JavaScript framework for a corporate website in the days before AJAX and JavaScript interfaces, so there's no limit to the amount of praise I can give for jQuery/Prototype/Dojo.
When you say only using divs and CSS, I hope you're not absolutely positioning everything. That's a sure-fire way to mess designs up in lots of browsers. (Generally the best practice is to use floats.)
You could also try IE7.js to fix a bunch of problems with IE 6-7.
In general I'd suggest developing in IE and one of the standards-compliant browsers side-by-side (Firefox/Chrome/Safari/Opera). And try and keep both the HTML and CSS as simple as possible.
A couple more tools include
Browsera - automatic detection of cross-browser layout problems
LitmusApp - screenshots with pass/fail tagging
SuperPreview - extension to Microsoft Expression Web (currently available standalone download) where you can view an overlay screenshot of a different browser
Browserlab - extension to Adobe Dreamweaver (currently available standalone online) where you can view an overlay screenshot of a different browser
I'd also strongly recommend using a CSS reset to start such as http://meyerweb.com/eric/tools/css/reset/
Why? Because many of the cross-browser inconsistencies stem from the fact that the default style in the browser differs. For instance, a default margin may make an element layout correctly in one browser, but not the others.
It may seem weird to always be overriding default behavior, because it seems like a waste, but its absolutely necessary in order to have a baseline with which to work.
I'd recommend looking at a CSS framework like BluePrint. It has a generic way to build pages using grids, and also has some default css for forms etc.
Frameworks will have dealt with many of these cross-browser quirks during their development, so it could save you a lot of time.