A lot of the stuff that I seem to end up doing to support older less-than-compliant browsers seems to be (1) repetitive and (2) easy to forget. Two things that indicate to me they should probably be dealt with by a computer instead of my brain.
For instance, anywhere I use...
.element-selector {
display:inline-block;
}
...in order to support IE7 I actually need to apply the additional rules...
.element-selector {
display: inline-block;
/* IE7 */
zoom: 1;
display: inline;
/* End IE7 */
}
...in order for things to render properly in IE7.
I'm not sure exactly what I'm asking for here. But it seems like there should be something that I can setup to "do this for me". Maybe some script that statically analyzes my CSS docs and inserts these things? Some crazy jQuery plugin that inserts them into the DOM? Some CSS generating pseudo-language that allows for the automated creation of CSS documents?
Automating & Simplifying Crossbrowser
Support
I'm assuming by "Crossbrowser", you're mostly talking about Internet Explorer. It is the biggest troublemaker, and some of the older versions are still in annoyingly widespread usage. The usage of older versions of other browsers is negligible enough that you can forget about them.
It looks like you've (wisely) already forgotten about older versions of non-IE browsers; to make (your example) display: inline-block work in Firefox 2, you need display: -moz-inline-stack.
Some crazy jQuery plugin that inserts
them into the DOM?
Not jQuery :) But this fixes many issues: http://code.google.com/p/ie7-js/
IE9.js - Upgrade MSIE5.5-8 to be
compatible with modern browsers.
I do have to point out that anything JavaScript based obviously won't work when JavaScript is turned off.
Maybe some script that statically
analyzes my CSS docs and inserts these
things?
The closest thing I can think of to that is this: http://www.onderhond.com/tools/ie6fixer/
Welcome to the IE6 CSS Fixer: starter
kit page. A tool specifically designed
to ease the pain of the ie6 css
debugger. .. It is extremely
important to note that this tool is
not a miracle solution. .. In some
circumstances it can even introduce
new errors, so keep that in mind when
you add one of the potentially
harmfull fixes. Also know that it does
not output clean, lean and optimized
css code. .. This tool was concieved
to decrease the monkey work when
starting an ie6 css fix file. It
applies a series of basic fixes that
are known to conquer many problems and
cause as little harm as possible.
It only specifically tries to fix IE6 related issues, which is thankfully becoming less and less important.
Something like Sass or Less can help you with that. You can define mixins and use those.
.inline-mix {
display: inline-block;
/* IE7 */
zoom: 1;
display: inline;
/* End IE7 */
}
.element-selector {
.inline-mix;
}
This isn't an automated solution but it can help a little to dry up your css.
I worked on a compliance project team for a large bank, redoing over 1,000 websites for their credit card business. Requirements were ridiculously strict and specified backwards compatibility for users below IE6, screenreader support, and lack of javascript/images. The single tool that made it quick and possible was 960.gs
The reset took us back to baseline, and eliminated the need for quite a few IE specific hacks (they were already done by the code) The grids eliminated box-model deficiencies of IE, and helped ensure that layout wasn't eating up time in the production process. The time saved allowed us to exceed production expectations and more thoroughly test, which was a win all around.
In my time there, I wasn't allowed to use JQuery, used EXTREMELY sparce Javascript, and 3 total IE hacks across hundreds of pages. The only way that was possible was with grids. It's not a super high-tech, sexy answer. But, I swear by the idea of a battle tested framework to speed up production.
Related
Before I launch into the specifics of the issues I am facing, I just need to ask: Is it a mistake to use IE8 as the reference for building a website, particularly one that uses JavaScript animation? I ask because I have written a fairly simple animation page, mostly from scratch, even with my weak grasp of HTML and JavaScript languages, using IE8 to monitor the progress. I have tweaked the code so that it works just fine in IE8 (compatibility mode turned off), but when I tried it in Safari and Chrome, it does some weird hiccuping in the animation.
I find a lot of questions with the opposite problem: that it works well in everything but IE. So I am wondering, should I be using a different browser for my reference? Or is there a better approach to make it compatible with all browsers? It's so frustrating (as I am sure most of you will agree) to have to deal with the different interpretations of the different browsers.
Thanks for any help!
p.s. I have not coded yet for Mozilla.
Using ie8 as a reference from a performance point of view is not a bad idea, since it has weak js and rendering performance. Using ie7 is even better.
Cross browser compatibility wise, it doesn't matter what you use - unless you use a crossbrowser library like jQuery as your base for the animations you will have to write specific code for the various js and render engines.
Even if you use a library like jQuery, you will still run into rendering issues since the various html/render engines are different across browsers. chrome/safari uses webkit, firefox uses gecko etc.
The only way to do it right is to start your project by defining what browsers you wish to support and then test what you do in all of them while you are developing your code.
If you're doing animations, I encourage you to take advantage of css transitions instead of controlling the elements via javascript - you'll have an opportunity to take advantage of graphics hardware as well as more efficient drawing of pixels in general.
If you need to still perform animations in browsers that don't support those css transitions ( some in ie9, none in ie6-8) then you can use a tool like modernizr to detect what's available and control those elements in the event those features aren't available.
Typically, the animations are extra - so I've had good success in ditching the animations for IE users - if you're making slow, javascript driven animations just to work for IE users, you're punishing users that are using better browsers.
Just my $0.02 of course
I want to make my own custom CSS elements that will be handled by a js file of mine. Is this possible?
Here would be an example:
div {
rounded-corners:15px 15px
}
And then use Javascript to apply the styles for each browser for rounding corners.
Is there a way to do something like this?
EDIT
The point isn't to add a common support for browsers. I want to implement my own CSS things.
The answer is "no". While it is possible to easily get style values from stylesheets in Internet Explorer by accessing the currentStyle property, like so:
alert(myDiv.currentStyle['rounded-corners']);
//-> "15px 15px"
...other browsers don't support the currentStyle property, opting instead to support the W3C standard window.getComputedStyle(). getComputedStyle() doesn't include "expando" style properties in the outcome, which means your only option would be to iterate over the rules in each stylesheet instead, which could be an expensive procedure depending on how many stylesheets and rules you have. Obviously, you also lose out on the browser's cascading/computing.
IE9 and the latest versions of Firefox and Chrome all handle border-radius anyway.
And you can use CSS3 Pie to add support to older version of IE. No need to write your own script.
EDIT: I suppose you could write your own version of CSS3 Pie, but why would you want to?
You may want to look into SASS/SCSS or LESS, which both offer "mixins". These act like functions in CSS, and should let you do what you want. LESS at least can be made to work client-side through Javascript; I suspect SCSS can too.
CSS already has a property for rounded corners, called border-radius.
This is supported by virtually all browsers in current use. The only exception of any significance is IE8 and earlier.
The good news in this case is that IE8 can indeed be programmed to work the way you're asking. Other browsers cannot, but IE can, and this is lucky, as it's the one browser that needs it more often than most.
So the direct answer to your question is "sometimes". Most browsers drop the styles they don't support, but IE keeps them. It obviously don't do anything with them, but you can access them via the DOM, which means that you can do what you're asking.... but only really in IE.
In the case of rounded corners, there is already an excellent Javascript-based hack for it called CSS3Pie. This is open source, so you can examine their source code to learn how it's done.
The CSS3Pie code is quite complex though, so if you want a simpler example to work from, take a look at this older script which does the same thing a lot more simplistically. Easier to read, but not as functional. For real life use, use CSS3Pie, but for learning, this one is a better starting point.
For working with IE, I would suggest following the examples in these scripts to achieve what you're asking. For other browsers, you will have a much harder time.
I'm wondering if folks can tell me how trouble free CSS3PIE is for IE6 - IE8 (beyond the known issues). It seems like an excellent addition to allow one to use CSS3 features -- rounded corners, gradients, shadows, etc -- I just have limited time to invest into investigating stability / errors.
Thanks
P.S. Does it turn off automatically in browsers that support CSS3?
It has worked perfectly for me and it only affects IE so you dont have to worry about the other browsers.
Don't worry it's transparent.
The only "real" problem I've been having was with opacity transitions in ie8 :
In order to make a div fade out, you need to apply this css definition to every child element :
filter: inherit
Problem is it doesn't seem to work on the shape elements css3pie generates with css only. I had to modify the minified .htc file as folows :
look for the second occurance of "shape" in the script. It's in a function called 'Aa'.
After this statement:
g=e[a]=f.p.Za("shape");
you can add:
g.style.filter="inherit";
This clearly is a hack but it works great!
It is just for IE8. IE7 deals with transparency differently (http://www.jacklmoore.com/notes/ie-opacity-inheritance)
I have seen a few sites now that use SIFR, and I can see the benefits. I have (quickly) looked into other plugins similar, but SIFR seems to be quite good. So it good in terms of cross-browser compatibility?
I was part of a team that used SIFR in the design of a web application in 2008 so we could get a custom font for headlines.
It works OK most of the time but we frequently ran into problems where the SIFR text would be unnaturally wrapped.
That is
A Headline
Would Look
like This
Whenever this happened, we'd have to have our designer look at it and fix it, usually through some fiddling with the CSS.
The other thing I don't like about SIFR is the way the content flashes or blinks as it's replaced. This is really hard to avoid.
All in all, we spent a lot more time fixing SIFR issues that we thought we would, and in the final analysis I don't think it was worth it.
These days, I might look at a CSS-only solution like TypeKit or Kernest.
It basically runs on everything that has Flash enabled.
On browsers that have flash disabled or no plugin installed a fall back with basic CSS styling can be used.
I use SIFR in a number of sites, CMSs and web apps.
SIFR's fallback behaviour is quite good, so you don't need to worry much about compatibility. It works fine with all major flash-enabled browsers. Due to the replacement of "native" HTML tags it's perfect for SEO, too.
Setting sIFR up is tricky, be prepared for some initial debugging, changing relative paths, and so on. I tend to forget how to set it up every time, it's not very intuitive. But when it works, it works all right. On older machines, you will notice the split second SIFR needs to do the actual replacement. It can be notable and is not nice. On modern, fast machines you will notice nothing, as long as you just replace a few headlines and such. Sifr is not suitable for replacing entire paragraphs of text.
An alternative I have been meaning to check out some time is Cufon. While many people here like it, I can't say much about it myself. It's definitely also worth a look before you commit yourself to a solution.
Is there any JavaScript (library) or any other solution, through which we can fix most of IE6 issues like PNG fix and also make IE6 to support CSS3 properties?
No. CSS3 support in IE6 is not going to happen. There is library available that will make IE6 more-or-less compatible with IE7:
http://code.google.com/p/ie7-js/
Short answer: No.
A little bit longer answer: While you can cobble together pieces of code here and there that help you get most of what you want in IE6, the problem is that none of these technologies out there are perfect (with most PNG fixes - try using transparent PNGs on a background image and change the background image by changing a class). There may be solutions for rounded corners or shadows but they will likely be glitchy too.
Many JavaScript frameworks offer nearly complete JavaScript feature-support for IE6, but the case is not the same for CSS. Many things in advanced CSS (2 and 3) will never be possible in IE6, but have to be achieved in different ways. There is no content property, :hover only works on anchor tags, attribute-based pseudo selectors don't work.
Even technologies like GWT that compile seamlessly to JavaScript for all browsers offer conditional CSS so that you can code your own hacks or graceful degradation.
I'm assuming jQuery goes a long way toward resolving IE6 issues because the library tries for cross-browser compatibility and deals with CSS. At least there might not be a better option.
You might check the Test Swarm for jQuery to see where the IE6 tests are at.
Late in the game but http://css3pie.com/ should help people looking for an alternative
PIE makes Internet Explorer 6-8 capable of rendering several of the most useful CSS3 decoration features
jQuery and other popular frameworks handle many cross browser compatibility options but won't address PNG transparency, most unsupported CSS3 etc.
If you want to take it a step up though, Google Chrome Frame is an option, however this has to be installed on client computers.