Filters like
img {filter:flipV;}
I'm guessing are pretty old, I just was asked by a colleague why they weren't working for him in FF. I assume they were an IE only thing that died out a while back?
Yes, it is IE-only. They didn't die-out, they were just a bad idea to begin with.
They were the only way to do some things in IE, for example PNG transparency in IE6...so they're still around. Web developers everywhere are hoping they die :)
Even in the latest jQuery UI files you can find it being used for Alpha transparency: http://dev.jqueryui.com/browser/trunk/themes/base/jquery.ui.theme.css
By no means are they gone...unfortunately. At this point, I'm hoping they don't stick something like this into IE9 and call it a "feature"...
You may find this article interesting. While filter is IE only, there is a Firefox equivalent (opacity) which is part of the CSS3 recommendation.
They are pretty old and work only in IE. Bad, don't use them unless you are targetting only IE (not good again). There are some things in CSS3 not supported by IE, you can sometimes use these filters to get around things.
For example, box shadow effect can be easily done with CSS3 but IE again does not support that, you can use these filters for IE and normal CSS3 for other browsers to create a cross-browser solution.
Related
What are my options here? I'd like to have some text change from color A to color B constantly, not on hover.
I'm thinking CSS3 animations, or maybe Javascript. But JS seems a bit bulky for this.
I know I can use a .gif for this, but I'd prefer to actually have it be 'text' in case it is needed to be changed or dynamically generated, say, for a username.
Is CSS keyframes the best way to go? I'm a bit reluctant for the CSS animation method because of browser support. Does anyone have any better ideas? Thanks!
I'd personally recommend using CSS3 animations and gracefully degrading to non-animated text for unsupported browsers.
According to Can I Use, CSS 3 animations are supported by all major modern browsers: IE 10, Firefox 5+, Chrome, and Safari 4+ (for desktop browsers anyways). Mobile support looks pretty good as well. Of course, some of the browsers require prefixes (i.e. -webkit-).
If you require IE <= 9 support, you can always write the JavaScript and put it in a conditional comment. It's a bit redundant, but then again what isn't redundant when it comes to cross-browser compatible web design with leading technologies?
Also see the MDN article on CSS animations.
Can anyone tell me the best way to ensure asp.net sites look the same when view in IE, Chrome or Firefox?
I've just finished one which in testing seems fine in IE but not the other 2.
I have not used CSS on this site as its not that big, I just formatted the masterpage as I wanted it.
Could that be the problem?
I usually code for Firefox first. That makes things match almost 100% in Chrome, Safari and IE9 usually. Then I go through and test in IE 8 and 7. Minor adjustments are typically made within the same CSS file. For example, IE7 usually needs to have dimensions of a container explicitly set, where most modern day browsers don't require it and render things properly.
In those rare cases that you do need to style something specifically for one or more versions of IE, use conditional comments. Here are some good links on conditional comments and how to target specific browsers and versions:
http://msdn.microsoft.com/en-us/library/ms537512%28v=vs.85%29.aspx
http://www.quirksmode.org/css/condcom.html
Unfortunately you will need to use CSS to get this to look similar in all browsers. I say similar as it is unlikely you will ever get it looking exactly the same.
Basically you will need to use the conditional CSS tags http://www.javascriptkit.com/dhtmltutors/csshacks.shtml
I would recommend spliting out the style to the a CSS and getting that working in Chrome and Firefox. Then use the tutorial linked and add in IE hacks to make it look better.
There isn't an easy way of making a site look the same in all the browsers. As caveman_dick said, maybe it's even impossible. You have to use CSS and sometimes javascript...
But to help you, you can use some programs that simulate different browsers engines, so that you could see how your site behaves. Just google browser simulator. :)
Here's something interesting, turnsout that many people out there had this problem, but i couldn't find a solution:
Problem is related (and observed) only with IE8 and IE7:
If i add filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFEEBB', endColorstr='#FFEEBB',GradientType=0 ); to css "body" then all fonts on my page are messed up! If i remove "filter", font's are back in normal.
What's wrong?
P.S. Messed up -> Fonts look jagged, exactly like there's no cleartype!
Internet Explorer disables ClearType rendering in all elements that use a DXTransform.
There's a workaround described here that involves a relatively positioned wrapper element. It seems to be working in IE8 at least.
That looks very much like a proprietary Microsoft filter. Unless you know that 99% of your website users use ie, don't use those filters. Of course, if you are using this in an ie-specific style-sheet, to complement another style-sheet for proper browsers, you can use that filter without ruining your market.
Either way, I would highly recommend not using an ie-specific filter (or anything ie-specific really). Instead you should recommend to your users subtly to change to a more compliant browser, with less security holes and privacy-concerning back doors.
I"m no expert, but it sounds like you are using something that is IE specific. If so, I could not recommend highly enough that you find another way. Gone are the days of IE being the only browser to develop for and doing so will turn away numerous people.
Is it better to have a different CSS file for each user-agent or is it better to use CSS Hacks that only certain browsers can see?
Neither.
The best is to write code that works in all browsers without the need of browser specific code or css hacks. It's of course not quite as easy to accomplish, which is why many people use the other methods.
The key is to avoid things that some browsers (very often Internet Explorer) has problems with. One such thing is to use padding rather than margin, because IE doesn't handle margin collapsing correctly.
Some methods that is in the border line of being hacks is using code that doesn't affect browsers that work correctly, but fixes problems for a specific browser. That could be things like specifying a height for an element that normally shouldn't need one, or specifying display:inline on a floating element.
The page Position is everything has examples of some bugs and suggested fixes. (Often the fix is some kind of hack, so you should of course also consider if you can avoid the problem altogether.)
It's better to do neither.
A good css-reset and css that works the same cross-browser is a much better solution.
If your design absolutely precludes that, then (and only then) would I try hacks or IE conditional comments.
I haven't yet seen the need for mutliple css files (beyond a few IE6 corrections addressed via a conditional comment).
Neither if possible. Now that the old Netscape, IE <= 6 etc. are not longer really that much in use, I try to use features which work in all those browsers (e.g. FF >= 2, IE >= 7, Chrome, Opera).
Conditional comments for issues with Internet Explorer appear to be the norm. Combined with a little bit of JavaScript, like Dean Edward's ie7.js you can mitigate most cross browser issues without resorting to hacks within your CSS files.
its better to use a different css files for Internet Explorer 6-7 (include them via conditional comments), and a hacks for other browsers.
A sort of follow up is how to develop the single file that works.
The best approach that I've seen work is to start from nothing, slowly building it up and checking change by change that it's still compatible across your core browsers (especially the problematic ones).
When you get it fully working with one browser and then say "time to convert it" is when the pain really starts and where you have to start hacking.
My approach using a PHP class to detect os, browser and browser version. You can target any version of almost any browser on any operating system.
As of right now I believe only Firefox support -moz-border-radius property. I am surprised that twitter uses it.
Are any other browsers planning on supporting this or does CSS3 have something like this in the works?
Edit: I also found -webkit-border-top-left-radius and then the CSS3 version
So when is CSS3 coming out?
CSS3 has border-radius.
For now, Mozilla- and WebKit-based browsers have experimental support, -moz-border-radius and -webkit-border-radius. It's not bad to use them now, as long as you understand they are temporary measures until they are properly implemented. I would expect it's not too long before you see full support for border-radius in Mozilla, Firefox and IE. (Well, hopefully IE.)
Update: as of August 2016, with border-radius being natively available in all native desktop browsers (and most mobile browsers, not to mention), the stringency of using -moz-border-radius, -webkit-border-radius and similar is being slowly relaxed.
Because the CSS3 spec hasn't been finalised, Mozilla and Webkit decided to implement their own method of rounded corners, doing it in the correct way, by adding the vendor-specific tag at the front.
This is done so that when the CSS3 is FINALLY released, should they change how border-radius is supposed to work (eg: the order of the parameters), then none of the sites using the vendor-specific methods will be broken. Mozilla and WebKit can just go ahead and implement the W3C style and developers can slowly move over to that.
It's not too surprising that you're seeing some websites using it, especially for something like rounded corners where it's not going to make a massive difference to the user experience. And I mean, it's just IE users who are missing out, and they deserve everything they get.
It bugs me when people talk about CSS3 coming out. It's not a complete spec like the previous ones. It has been broken up into separate modules that may increment their versions independently.
So Selectors Level 4 may make Recommendation before CSS Backgrounds and Borders Level 3 does.
So, will CSS3 arrive? Eventually, but not all a once. So don't wait for it, start using it now (where applicable).
CSS3 has something like this in the works.
According to this, IE 8 will not support border-radius.
Any CSS property that starts with a dash (e.g. -moz, -webkit) is a browser-specific property.
This allows browser vendors to experiment with new CSS properties. Doing so is a common part of the process for writing new CSS specs, to allow web developers to see how the properties work and raise issues.
Hence you’ll find a lot of CSS 3 properties, like border-radius currently implemented in some browsers with vendor-specific extensions.
There’s nothing particularly wrong with using these on production sites, as long as you’re aware they’ll only work in the one browser.
CSS 3 should be out any decade now :)
Browser-based properties are only meant for interim fixes for that particular browser, and are supposed to be deprecated when either the W3C adopts them into CSS, or not. I wouldn't rely on them to be cross-browser or even be kept for the particular browser.