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)
Related
I am having problem while rotating the image in IE 8 , it works perfect in other browsers(Chrome,Mozilla,Firefox).
Is there any other way for this except filter progid:DXImageTransform.Microsoft.Basic Image(rotation) as I am having some problem while using this filter in zooming the image in IE 8.
After a perticular level of zoom ,image resets to its normal rotation(Angle 0) before that zoom level everything goes perfect but once this scenario occurs image resets on every zoom level on rotation of image. I think it may be the filters issue.
if any good article is there for the same then kindly share , this can also be helpful.
The transform property is CSS3 and is not supported in IE8. Your only options are to use the filter property, or draw vector shapes using VML.
IE's old filter styles are notoriously buggy. Thank goodness it's less of an issue now that modern IE versions don't need it any more.
Yes, it's possible to use them to do things like rotation and gradients, etc in older IE versions, but you have to be careful to understand that they are ActiveX controls, and not a native part of the browser.
This means that they have some limitations and quirks, some of which cannot be worked around. In particular, you will have problems if you try to combine them with other browser features that modify the element or the layout around it.
I've never tried using zoom in conjunction with a filter rotation, but it sounds like a classic case of features that may not work well together. If that's the case, you may simply have to accept that it's not going to work in old IE versions.
Perhaps you could find an alternative way to do what you want without using zoom? If it's a text element, maybe doubling the font-size would do the trick? Or if it's an image, maybe increasing the width and height and letting the browser scale the image for you.
If none of that works, the final solution may simply be to provide IE8 users with a slightly less exciting version of your site that doesn't do zooming and rotation quite a much as it does in other browsers.
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.
To create rounded corners on my container elements I use this CSS:
border-radius:12px; -moz-border-radius: 12px; -webkit-border-radius: 12px;
However, IE does not appear to recognize and interpret the border-radius property (at least version 7-8, apparently its slated for version 9).
Is there a workaround for this that's doable entirely in CSS (no script, no extra markup)?
For JavaScript/jQuery solutions: I'd use a solution based on these if I could include a single script that would read my CSS, interpret the border-radius properties (including border-top-left-radius, border-top-right-radius), and apply the corners accordingly. Does this exist?
As far as I know for IE<9 there is no way to do this in pure CSS.
It has been documented that IE9 has border radius support.
There are Javascript workarounds available, but as you said you don't want to implement them, you're a bit stuck.
Unless you want to use images, this works well if you have static size elements, but doesn't work if they change size.
Other than that, I am not aware of any pure CSS solution without a lot of hacky markup.
Update:
I already linked to a resource that can do this for you, the CurvyCorners jQuery will detect the use of -webkit-border-radius and moz-border-radius on DOM elements and duplicate the effect in IE using a series of small DIVs with no images. You can also tell it to apply the effect to specific elements.
Update #2:
After Spudley's suggestion of checking out CSS3Pie, I would very much suggest this as the way to go as it uses the CSS property behaviour which only applies to IE, so it won't screw with the rest of the browsers, also this means no hacky markup added to your page (Curvy Corners adds many small divs) and no use of images.
Hope it helps :)
You ask for a way to do it without scripting and without any extra markup. This simply isn't possible. The feature is missing from IE7/8, and the only way to get IE to do it is by simulating the feature either with scripting or markup.
The best options are ones which only affect IE and are invisible to other browsers. This means that CSS3Pie stands head and shoulders above all the other options, because the technique it uses is only supported by IE. It also allows you to specify your border radius in CSS in the same way as for other browsers, making it more consistent.
Personally, I'd go for this solution every time. It's by far the cleanest solution you'll find for IE. Forget about any jQuery or pure javascript solutions; they almost all have issues of one sort or another, and as for markup options that involve corner graphics; just don't even think about it!
The real benefit that CSS3Pie has over other common solutions is that it uses a vector-graphics based solution, rather than pasting loads of divs into your document as CurvyCorners and others do. This means that the rounded corners CSS3Pie generates are smoothly drawn and works properly with background graphics on both the element itself and those behind it. Most other solutions have serious issues in these areas.
I don't know why you'd object to using scripting - especially HTC-based ones like this which don't get in the way of the other scripts. The absolute worst case is that a user has scripting turned off. And in that case, all they get is square corners; it's not the end of the world.
you can use .htc for border radius. link1 for htc files link2 for htc files
I suggest to have a look at this site. CSS3 Please
The scripting / jQuery solution you are talking about does exist, take a look at jQuery Curvy Corners.
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.