With some CSS styling properties, we need all these different kinds of approaches, tricks and hacks to make things work cross browser. I never wanted to be an expert in IE, and making it work, no...I wanted to specialize in designing good looking, practical and user friendly web applications without wondering if that rounded corner is going to be round in browser x and y.
CSS3 and even CSS doesn't work in browsers like IE7 like it's intended to, (I don't care for IE6), and one has to spend so much time in making things work across different browsers, that the creative concepts, and actual goal of a site goes out the window.
Is there is a solution for making/morphing CSS/CSS3 to be compatible with browsers that don't support it. Perhaps a JavaScript library?
It would be nice to be able to change opacity like this:
.style { opacity: 0.5; }
and not like this:
.style {
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
filter: alpha(opacity=70);
opacity: 0.7;
}
...similar to Prefix Free which currently doesn't support IE
So are there JavaScript libraries out there that will dynamically expand CSS as needed by a particular browser, and also enable CSS3 support, and future proofing of CSS3?
One idea might be looking into the LESS framework. It's a object oriented way of doing CSS. So to set opacity, you'd do something like this:
.opacity (#opacity) {
opacity: #opacity;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=#opacity*100)";
filter: alpha(opacity=#opacity*100);
}
Then to use it, you'd just "call it" like a function.
.style {
.opacity(0.7);
}
And the output would be like your second code snippet
I use CSS3PIE for IE compatibility!
Not sure if there'd be any clashes between Prefix Free and CSS Pie - but it's worth a shot!
http://css3pie.com/
It requires a little bit of work to set up, but after that it's pretty good!
http://cssprefixer.appspot.com/ is possibly a good option! And using it in conjunction with something like LessCSS would be a viable option, but I guess the end results would be down to some proper benchmarking.
It's all about minimizing CSS file sizes, and also at the same time, trying to get the maximum client side performance in terms of rendering HTML and JS execution.
Related
Here's an example style supported by most browsers:
.class {
background: rgba(0,0,0,0.3);
}
Old IE (IE 6-8) don't support rgba. There are at least three methods I could potentially use to support this.
Same class
.class {
background: grey;
background: rgba(0,0,0,0.3);
}
Modernizr
.class {
background: rgba(0,0,0,0.3);
}
.no-rgba .class {
background: grey;
}
star hacks
.class {
background: rgba(0,0,0,0.3);
background: grey\9; /*IE8 and below*/
}
I prefer to use methods 1 and 2 because they cover more than just IE browsers, but I'm not sure which method I should use.
Method 1 is good because it works even if JS is disabled. However, there's an extra attribute to render for all modern browsers.
Method 2 is good because it segregates the bad browsers into their own classes. Modern browsers won't render this class which saves milliseconds of rendering time.
Maybe there's something else I'm not thinking of that could be better? I'd like to avoid using PIE.htc or filters. What is the best method for optimization and load time?
For this kind of style, the correct answer is the first one you listed:
.class {
background: grey;
background: rgba(0,0,0,0.3);
}
Specify the fall-back options first, followed by the preferred option.
IE will set the background to grey because it doesn't support rgba; other browsers will use the rgba version as intended.
The reasons this is the best answer are:
It is the canonical "correct" answer for this exact scenario: CSS was designed to work this way, with exactly this kind of situation in mind.
It is the least expensive option, because no browser has to do any extra rendering or scripting. IE will completely ignore the second background, so nothing extra happens there; other browsers will parse both, but parsing the second will overwrite what has been parsed for the first, so the only overhead is the parsing, which would have to be done anyway for whichever option you pick.
Of the other possible solutions, Modernizr is great, but is overkill for this scenario -- if you have a solution that doesn't involve any scripting, there's no need to use a scripted solution. And the CSS hacks should be avoided at all costs. There may be cases where they are worth using, but I personally haven't seen a legitimate use for one since I stopped trying to support IE6.
The other solution that is available but which you didn't mention is conditional comments: ie use IE's <!--[if IE]> syntax to load an alternative stylesheet for IE. However I would avoid this as well if possible, and again, the need for this kind of solution is fading away as IE6 and IE7 become more distant memories.
Finally, a slightly different option for you: Just ignore old IE. For some things, IE8 may not render things the way you want, and it's a pain to make it do so. In these cases, it is a perfectly legitimate strategy to just let it fail. For the example in the question, this isn't necessary, as we have a perfectly good CSS solution, but for other more complex styles, consider how bad the site will look if IE doesn't get things right; if it's still usable, then there may be a case for simply letting it slide. This option needs to be weighed against the number of users that will be affected and how much of a problem it causes for them, and also the requirements you're working to, but it should be considered as an option.
Your method #1 is the generally accepted way, because not only does it handle IE, but it also handles any browser that doesn't support the CSS in question (in this case, RGBA). The rule for CSS that browsers are supposed to follow is that if they don't recognize a line, they ignore it and move on. As for more capable browsers, CSS such as this is cheap, and the browser may not even render the fallback CSS at all (I know most don't download the image for image-based fallbacks).
Method 2 not only adds classes (which add weight), but adds an entire JavaScript library. If you're dealing with a bunch of other CSS3 type stuff (especially things that don't have such easy fallbacks), then it's not a big deal, but if you're using to handle fallbacks such as these, or just one or two, then you're adding a lot of overhead (including potentially another HTTP request) for not a lot of extra benefit. Even if the modern browsers don't render the classes, they do have to run the JavaScript to check for the capability.
Method 3 is a hack and should be avoided whenever possible (I recommend conditional stylesheets over resorting to hacks). Not only does it target only specific versions of a specific browser (thus leaving all the other browsers that don't support this CSS out in the cold), but relies on bugs in a browser to get the job done. And what happens if that code triggers a different bug in a different browser, or if a browser recognizes the line with the hack, but also behaves properly with the correct CSS? Have a look at some of the tutorials circa 2005, when IE6 and IE5 for Mac were still major contenders, and see the crazy lengths people went to with browser hacks to keep them from stepping on each others' toes. (Note: I do not consider prefixed CSS to be hacks. Prefixed CSS items are documented functionality that the browser vendors chose to add and serve the stated purpose of sandboxing those features. If they are for things that make it into the standard, then they are designed to be phased out over time.)
So, in order of preference - Fallback CSS, Modernizr, Conditional Stylesheets, Browser Hacks.
I want to put a red rectangular <div> element over my webpage so that it would look not only transparent, but also like blended in Photoshop’s Multiply mode.
The <div> would have position: fixed, so the content below it would change quickly.
Is that possible with any HTML5 / CSS3 / canvas / SVG trick?
I have created a separate, lightweight, open-source library for perform Photoshop-style blend modes from one HTML Canvas context to another: context-blender. Here's the sample usage:
// Might be an 'offscreen' canvas
var over = someCanvas.getContext('2d');
var under = anotherCanvas.getContext('2d');
over.blendOnto( under, 'screen', {destX:30,destY:15} );
See the README for more information, including the currently-supported blend modes.
You could use this to perform multiply from one canvas to another, but not over standard HTML elements.
No (not natively) but it's coming soon: http://blogs.adobe.com/webplatform/2012/04/04/bringing-blending-to-the-web/
You can also look at this demo: http://media.chikuyonok.ru/canvas-blending/ to see how to do this with canvas.
Check the source for blending modes' formulae and how to apply them (formulae are much more readable than in pixastic or context-blender).
This isn't HTML5, but it's as close as I can find for what you're asking.
Javascript blending modes (OpenGL).
I don't think "blend modes" like Photoshop could be emulated with just pure HTML, unless the language took a sharp turn in another direction. But it would be great to see some easier way of doing this.
I am also very interested in doing that. Many layouts that I coded for visual designers could have used that. Aside from the other posts in this thread, there is a way to do this, currently only in Firefox 4, without using OpenGl or Canvas. It's trough the use of SVG filters. Aparrently it's on nighties from Webkit and Chrome also, but I couldn't see anything working yet.
Here are some demos and explanations:
(demo) http://people.mozilla.org/~roc/filter.xhtml
https://developer.mozilla.org/en/applying_svg_effects_to_html_content
https://developer.mozilla.org/web-tech/2008/09/15/svg-effects-for-html-content/
http://weblogs.mozillazine.org/roc/archives/2008/06/applying_svg_ef.html
IMHO something anyware close to blend modes are too much hard to achieve right now. It's very hard to find any references on feConvolveMatrix, feSpecularLighting, or feColorMatrix, and the examples are just impossible to figure out for me. They could work but I don't know how.
I wish something like EffectGames suggested:
div.sprite {
position: absolute;
z-index: 2;
composite: add;
}
This would be a way better approach. Maybe some ninja there skiled in mathematics could make us a lib to do that.
EDIT: There is an easier SVG spec to do exactly blend modes. But no browser that I tested have this working (FF4, IE9, Opera11, Webkit Nightly): http://dev.w3.org/SVG/modules/compositing/master/SVGCompositingPrimer.html - But I also don't know if this will be possible to use in HTML-DOM elements.
This is the closest I have seen, and yes, all assets have to be in the canvas. Note that Internet Explorer starts supporting canvas in version 9 which is not out yet, so if you have to support IE<9 you'll have to use a workaround.
It's landed in Chrome Canary so should reach release soon. http://blogs.adobe.com/webplatform/2013/04/23/all-blend-modes-for-css-fragment-shaders-have-landed/
You can already use it with just simple CSS (no Canvas). Example:
mix-blend-mode: 'multiply'
Internet Explorer may not support it, but the other browsers do.
https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode
Depending on the images involved and the exact effect you are after, you might be able to do some creative layering of images and CSS gradients to achieve the desired affect:
http://jonathonhill.net/2012-04-23/blending-css-gradients-like-photoshop/
I have implemented most popular blend modes known from gimp/photoshop using canvas in http://canvasquery.com/ however it is not suitable for relatime.
This will change with introduction of native blend modes in canvas
https://dvcs.w3.org/hg/FXTF/rawfile/tip/compositing/index.html#blendingseparable
How do I place a background image to the left in every odd page and to the right in every even page with CSS when printing?
I have searched for quite some time to a solution about this. W3C mentions #page :left but also says that the context can only be used for margins.
Looking through the W3C CSS3 instead of CSS2 I do see somethings that might help (#page :left { #left-middle { content: url(..) }}). But It doesn't seem to work in any of the browsers I tried with namely Safari and FireFox.
CSS printing is always tricky, especially considering the multitude of ways different browsers handle it.
Have you considered exporting the print stuff to something like pdf format where print handling is much more consistent?
Is there a list of 'good' clean CSS hacks, which are certain to be future-proof?
For example, zoom:1 is safe, as long as it's only served to IE, and you remember it's there. The very common hack of using child selectors is not safe because IE7 supports them. Using height:1% just feels dirty (but that might just be me).
I know of ie7-js, so IE6 bugs don't worry me much. Also, I'm not looking for a religious debate, just sources.
Thanks for the replies - I've selected the one with best sources as answer.
Thanks also for the suggestions to use separate CSS files, or not to worry about it. I entirely agree with you, and for me, those are givens. But when faced with a layout problem, I want a safe fix that will minimise the risk that I'll have to revisit the problem in $IE or $FF + 1. Sorry I didn't make that clearer.
For the majority of IE bugs I think you're best off using conditional comments around a link to a browser specific stylesheet. It tends to keep things pretty neat and it's quite self documenting.
This is a good place for well-documented and well-tested browser bugs and the hacks allow you to work around them:
http://www.positioniseverything.net/
I've used Peter-Paul Koch's "QuirksMode" website a lot for issues involving CSS and cross-browser compatibility. He tends to frown on browser-specific methods, but he does have a page on CSS Hacks.
Nicole Sullivan (AKA Stubbornella) who works for the Yahoo Performance team suggested in The 7 Habits for Exceptional Perf that you should use the CSS underscore hack to patch up IE6 bugs because:
Hacks should be few and far between.
If you will only have 5-6 hacks (which is already plenty) then it would not make sense placing those in an external file and thereby separating it from its context.
An extra file would lead to performance penalties (Yahoo Best Practices, Rule 1).
It should however be noted that this is not valid CSS.
There's no such thing as a good clean/acceptable [css] hack - always code to Standards, and then use browser+version specific stylesheets for any hacks required to make things work.
For example:
default.css
default.ie6-fix.css
default.ie7-fix.css
default.ff2-fix.css
etc
Then, when new version of a browser are released, copy the previous version's hacks and remove the bits that no longer apply (and add new bits, if necessary).
(Load individual stylesheets using Conditional Comments for IE, and user-agent sniffing for other browsers.)
Underscore-hack for IE6-stuff works quite well, eg.
min-height:50px;
_height:50px;
It doesn't require moving things out of context into new css-files, only IE6 gets them and they're easy to filter out if you should decide to stop supporting IE6. They're also very minimal and won't clutter your CSS that much.
Modifying your CSS for browser-specific support is never wrong - as long as you can easily contain it. As you'll notice, standards-compliant browsers, * cough * everything except MSIE, will never break with future releases. New W3C standards also don't break previous standards, they usually deprecate or extend previous standards at the most.
People have mentioned conditional comments which are great for handling IE. But you'll need a bit more for handling all browsers (mobile, gecko, webkit, opera, etc.). Usually you'll parse the incoming request headers to fetch the browser type and version from the User-Agent param. Based on that you can begin loading your CSS files.
I belive the way most of us do it is by:
First developing for one standards-compliant browser (let's take FF for example)
Once the CSS is complete you approach providig support for IE (this can be easily done with the conditional comments, as perviously mentioned)
First create a CSS file that will fine tune everything for IE6 and any other version below
Then create a CSS file that will handle everything for IE7
Lastly, create a CSS file that will handle everything for IE versions of IE8 and greater
Once IE9 comes out, make sure you set IE8+ handling to IE8 specific, and create a IE9+ CSS file with required fixes
Finally, create an additional CSS file for webkit fixes
If required, you can also create additional files to specifically target Chrome or Safari if required
Concerning browser specific CSS implementations, I usually group all of those in my main css file (you can easily do a search for those and replace them in one document if needed). So if something has to be transparent, I'd set both opacity and filters (MSIE) in the same block. Browsers just ignore implementations they don't support, so your safe. Specific implementations I'd tend to avoid are custom implementations (hey, I like the -moz box above the W3C one, but I just don't want to rely on it).
As it goes with CSS inheritance and overriding, you don't have to redefine all the CSS declarations and definitions in every CSS file. Each consecutively loaded CSS file should only contain the selector and specific definitions required for the fix, and nothing else.
What you end up with in the end is your (huge) main css file and others, containing a few lines each, for specific browser fixes - which sums up to something that's not that very hard to maintain and keep track of. It's a personal preference what browser your base css file will be based off, but usually you'll be targeting a browser that will create the least amount of issues for other browsers (so yes, developing for IE6 would be a very poor decision at that point).
As always, following good practices and being pragmatic and meticulous with selectors and specifics about each class and using frameworks will lead you down the path of goodness with seldom fixes required. Structuring your CSS files is a huge plus unless you want to end up with an unordered meaningless mess.
Centricle has a good list of CSS hacks and their compatibilities.
I don't think you'll find a list of hacks that will be future proof, as know one can tell what stupid thing will be implemented in IE next.
This article is a good summary of CSS hacks: http://www.webdevout.net/css-hacks
Here's a good list of filters that are very stable:
/* Opera */
.dude:read-only { color: green; }
/* IE6/IE7 */
#media,
{
.dude { color: silver;}
}
/* IE8 \0 */
#media all\0
{
.dude { color: brown; }
}
/* IE9 monochrome and \9 */
#media all and (monochrome: 0)
{
.dude { color: pink\9; }
}
/* Webkit */
* > /**/ .dude, x:-webkit-any-link { color:red; }
/*
* > /**/
/* hides from IE7; remove if unneeded */
/* Firefox */
#-moz-document url-prefix()
{
.dude { color: green; }
}
When defining rules, I find it good to allow natural degradation take place, for instance, in CSS3 there is support for RGBA Colour models, but there isn't in CSS2, so I find myself doing:
background-color: #FF0000;
background-color: rgba( 255,0,0, 50% );
So that when the later rule fails on older browsers which don't support it, it will degrade to the previously defined style.
I prefer the global conditional comment technique described by Hiroki Chalfant;
I find it helpful to keep my IE-targeted rules side-by-side with my standards-targeted rules in a single valid stylesheet.
I'm using CSS Filters to modify images on the fly within the browser. These work perfectly in Internet Explorer, but aren't supported in Firefox.
Does anyone know what the CSS Filter equivalent for these is for Firefox? An answer that would work cross browser (Safari, WebKit, Firefox, etc.) would be preferred.
<style type="text/css">
.CSSClassName {filter:Invert;}
.CSSClassName {filter:Xray;}
.CSSClassName {filter:Gray;}
.CSSClassName {filter:FlipV;}
</style>
Update: I know Filter is an IE specific feature. Is there any kind of equivalent for any of these that is supported by Firefox?
Please check the Nihilogic Javascript Image Effect Library:
supports IE and Fx pretty well
has a lot of effects
You can find many other effects in the CVI Projects:
they are also JS based
there's a Lab to experiment
Good Luck
Could you give us a concrete example of what exactly you're trying to do? You'd probably get fewer "Your brower sux" responses and more "How about trying this different approach?" ones.
Normally CSS is used to control the look and feel of HTML content, not add effects or edit images in clever ways. What you're trying to do might be possible using javascript, but a behavior-oriented script still probably isn't very well suited for the kind of tweaking you want to do (although something like this is a fun and very inefficient adventure in CSS / JS tomfoolery).
I can't imagine a scenario when you would need the client to perform image tweaking in real-time. You could modify images server-side and simply reference these modified versions with your CSS or possibly Javascript, depending on what you're doing exactly. ImageMagick is a great little command-line tool for all the image effects you would ever need, and is pretty simple to use by itself or within the server-side language of your choice. Or if you're using PHP, I believe PHP's GD library is pretty popular.
There are no equivalents in other browsers. The closest you could get is using a graphics library like Canvas and manipulating the images in it, but you'd have to write the manipulations yourself and they'd require JavaScript.
filter is an IE-only feature -- it is not available in any other browser.
SVG filters applied to HTML content.
Only works in Firefox 3.1 and above, though I think Safari is heading in the same direction.
None that I know of. Filter was an IE only thing and I don't think any other browser has followed with similar functionality.
What is there a specific use case you need?
I'm afraid that you are pretty much out of luck with most of the cross-browser filter-type functionality. CSS alone will not allow you to do most of these things. For example, there is no way to invert an image cross-browser just using CSS. You will have to have two different copies of the image (one inverted) or you could try using Javascript or maybe go about it a completely different way, but there is no simple solution solely in CSS.
There are filters, such as Gaussian Blur et al in SVG, which is supported natively by most browsers except IE.
Pure thought experiment here, you could wrap your images in an SVG object on the fly with javascript and attempt to apply filters to them.
I doubt this would work for background images, though perhaps with alot of clever positioning it could work.
It's unlikely to be a realistic solution. If you don't want to permanently modify your source images, Rudi has the best answer, using server side tools to apply transformations on the fly (or cached for performance) will be the best cross browser solution.
This is a very very old question but css has updated to now support filters. Read more about it at
https://developer.mozilla.org/en-US/docs/Web/CSS/filter
Syntax
With a function, use the following:
filter: <filter-function> [<filter-function>]* | none
For a reference to an SVG element, use the following:
filter: url(svg-url#element-id)
Not really, and hopefully there never will be. It's not a web standard CSS feature for the reason that you're using CSS to format the webpage, not the browser itself. The day that other web designers and developers think they should style my browser how they wish and are then do so is the day I stop visiting their pages (and I say this as a front end web guy).