From a blog:
The basic idea with CSS expressions is
that you will have calculation and
dynamic values for properties in the
CSS code, something that people have
found very useful. A simple example
can be implementing max-width behavior
in IE 6:
width: expression(document.body.clientWidth > 1100)? "1100px" : "auto";
This is the first time I read about them. It seems IE used to support CSS expressions but dropped them in IE8. What other browsers still use them and are they generally a good or bad thing?
The blog post I got this from says the alternative is Javascript, but I thought CSS was more supported and therefore better than Javascript.
AFAIK, it was only ever IE6/7 (maybe) 5.
I never thought they were a good thing. May as well just use JavaScript directly.
They are in fact implemented in JavaScript, and I'm pretty sure disabling JS disables these expressions.
The sample you posted...
width: expression(document.body.clientWidth > 1100)? "1100px" : "auto";
...is just a ternary operator that says If the width is larger than 1100px, set it 1100px, otherwise set property to auto.
To finish, no scripting language on the web is more widely supported than JavaScript.
Expressions are unique to IE and were dropped in 8:
http://msdn.microsoft.com/en-us/library/cc304082(VS.85).aspx#expressions
More about expressions:
http://msdn.microsoft.com/en-us/library/ms537634(v=VS.85).aspx
Firefox has a similar setup, XBL - check out this answer to a very similar question. HTML5 editor Ian Hickson recently stirred things up a little by releasing a new draft of the W3C attempt to standardize XBL (see also the WG response), so we may ultimately see something similar to Microsoft 's expressions as part of the HTML5 family of technologies.
Related
In CSS Text Decoration Module Level 3, there’s text-decoration-skip. It does magic like this:
This representation is allegedly produced by using text-decoration-skip: ink;. For web typography, it’d be great if descenders are no longer struck through by native underlining.
There’s an entry at CSS-Tricks and more recently also one on MDN. There, it says it’s “not on a standards track”. Is that right? The property is listed in the W3C Candidate Recommendation.
How can I use text-decoration-skip? Or when? Are there flags to enable it?
As someone said in the comments to the question, there's no saying when and how it will be implemented.
For reference anmd clarification, the origin article of the picture you posted isn't what the actual spec necessarily will look like, but a draft of what Marcin Wichary had in mind when tinkering with it. So don't make the mistake and consider that image a reference for the CSS3 output, as it may look entirely different when finally implemented.
I also can't tell you why MDN doesn't list it as a feature necessarily to be implemented, whether it's a decision of the development team not to implement it, or they just missed it. I can, however, tell you that they are correct in saying "This property has not yet been implemented in any modern browser."
As for browser support, take note of this comment in the CSS-Tricks article, linking to the folliowing image:
It's not only interesting because that's quite a dated browser (which of course didn't do this because of some CSS3 spec, but likely because they had the same basic idea), but also because that's likely what the property will look like when finally implemented.
While text-decoration-skip seems to have been “deferred to Level 4 to allow for major changes”, Chrome 64 (2018-01) and Firefox 70 (2019-10) implemented a close relative (applied by default), because “most other browsers are converging on supporting the simpler text-decoration-skip-ink property”, and it certainly does work:
u{font-size:444%;}
u:first-of-type{ text-decoration-skip-ink: none; }
u:last-of-type{ text-decoration-skip-ink: auto; }
<u>parapsychologists</u>
<br>
<u>parapsychologists</u>
Note that there’s even more cutting-edge text-decoration stuff, like text-underline-offset or text-decoration-thickness.
I wanted to know if there's any way to get CSS Style XSS on modern browsers?
For example, on older IE browsers the following is susceptible:
<div style="width:expression(prompt('XSS'))">
No. As this example perfectly illustrates, Javascript (or any scripting) has no place in CSS, therefore XSS (the second S is for 'Scripting') is not possible. CSS should be declarative only, and is when implemented conforming to the W3 standards. Dynamic expressions are now done with calc which can only evaluate simple mathematical expressions, without resorting to the JS engine.
expression was an IE-only hack to facilitate specific features until W3 came up with an alternative. As calc appeared, expression was deprecated. Starting with IE11, expression is no longer supported in the Internet Zone. It was announced in 2008 that it would end up this way, specifically citing 'to reduce the attack surface' as one of the core reasons. In older versions than IE11 it has already been for quite a while only supported in quirks mode and IE7 emulation mode anyway.
Summarizing: CSS has no place for Javascript, and as such cannot be attacked with XSS when implemented properly as it is in every current browser.
Any solution for reducing browser compatibility problem while writing css style.
These three are the main points you need to do yourself:
Write correct markup - make sure it validates
Make sure your markup is in standards mode
Write correct CSS - make sure it validates
In addition, you can do some of the following to reduce the amount of headache:
You can use a CSS framework, like Blueprint, 960.gs, YUI CSS library, etc.
For Internet Explorer -related issues, there is ie7.js and ie8.js
Know how HTML and CSS work
Test in all browsers you target
You may also want to use a CSS reset file to start on the common ground.
Well, as of now there is nothing like fixall() which will make all browsers compatible...however, you can reduce compatibility problems by using the correct doctype.
Read thisarticle on using doctypes. Also, validate your markup.
Edit: You can go to Browser shots to see screenshots of your web design in different browsers.
Discipline!
Validate your HTML. Use a correct DOCTYPE.
Use standards, hack the bugs.
Be descriptive, or use a reset stylesheet.
Simple -- test, test, test.
First thing, you should have at least these browsers on your computer: FireFox3.5B , InternetExplorer7 (+ optional Safari 3, Google Chrome 2 Beta and Opera).
Now for a more definite answer:
avoid css3 styling like "opacity" et cetera as CSS3 is not a standard yet. Instead use Javascript libraries like jQuery to apply those effects selectively
avoid png transparency like the plague... instead use dithered gif transparency (this is now somewhat old, as it now works on IE7+)
Test and test and test
Should we use IE's CSS Dynamic properties?
I read IE8+ would not support these.
What is the best strategy to handle this?
If you mean CSS expressions, you should avoid them because they're slow.
Your question about how to avoid them is pretty vague. It would be easier to answer a more specific question. But here's a vague answer: Javascript. :)
They are very useful to solve incompatibility problems with older versions of IE, for example to get png transparency in IE6. I always (when needed...) include style-sheets using these functionalities in IE's conditional comments.
The dynamic properties wasn't anything that really took off. It could be used in applications that targeted IE only (i.e. intranets and such), but as it never became a standard and no other browser supports it, it never came into wide use on the web.
I haven't read what you say about IE8 not supporting dynamic properties, and I haven't tried it, but it sounds very plausible that the will not be supported when the browser renders a page in standards compliant mode. They will probably be supported in quirks mode for a few versions longer.
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).