Here's me fiddle:
http://jsfiddle.net/6yU6N/10/
I want to work some CSS magic on the table header:
Rounded corners in upper left and upper right
Gradient color background
Gradient border
Cross-browser compatibility
How can this all be done?
Gradients:
Most modern browsers have implemented these using CSS3 but for Internet Explorer you'll have to use special filters. Since CSS3 is an emerging standard, you have to use browser specific prefixes.
.gradient{
background: -moz-linear-gradient(top, #fff, #eee);
background: -webkit-linear-gradient(top, #fff, #eee);
background: -o-linear-gradient(top, #fff,#eee);
background: linear-gradient(top, #fff, #eee);
/* versions of IE use these */
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#ffffff',EndColorStr='#eeeeee');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#eeeeee)";
}
there may be a third approach
keep in mind that you could always use an image with a repeat-x on the background.
Rounded Corners:
Rounded corners are covered by border-radius in most of your modern browsers:
border-radius:5px 5px 0px 0px;
For older versions of Internet Explorer, you'll unfortunately have to do more hackerly things that are probably not worth the time and effort really. http://webdesign.about.com/od/css/a/aa072406.htm is an example I found scanning the web really quickly.
For more stuff, the MDC is usually pretty good in my experience about explaining browser features and their compatibility and alternatives for the other browsers.
Related
I've created radial-gradient
background: radial-gradient(ellipse at center, #595959 0%, #000000 40%);
And as far as I know, this should help me to make it cross-browser
background: -webkit-radial-gradient(ellipse at center, #595959 0%, #000000 40%);
background: -moz-radial-gradient(ellipse at center, #595959 0%, #000000 40%);
background: -ms-radial-gradient(ellipse at center, #595959 0%, #000000 40%);
background: -o-radial-gradient(ellipse at center, #595959 0%, #000000 40%);
background: radial-gradient(ellipse at center, #595959 0%, #000000 40%);
However this isn't support IE-9 and after some searching, I found this:
Create a radial gradient for Internet Explorer 6/7/8 but this doesn't seem to work anymore. And well, I'm curious how to make my gradient work in IE-9. Thanks
I think I have bad news for you.
IE9 dropped support for the old IE-specific filter styles -- ie the ones that you pointed out in the other question you linked to.
The intention was that IE9 was supposed to be properly standards compliant, and those filter styles were non standard so they were dropped. At the same time, the idea was all the functionality provided by those styles was being replaced by standards-based CSS features.
Unfortunately, as you're finding, not quite all of the functionality was replaced with standard CSS in IE9. In particular, CSS gradients were a noticeable omission and have caused a lot of code to be written using awkward work-arounds.
The bottom line is that IE9 specifically has a particular blind-spot in this area, where newer IE versions and even the older ones do support this feature one way or another.
Your only real ray of light is that IE9 usage has dropped through the floor recently; hardly anyone is still using it. So my advice is that you can probably get away with having a fall-back solution that just uses a plain background colour; let IE9 have that and concentrate on the newer browsers that people do actually use.
I'm giving my a linear gradient but in Firefox, even new versions, what I get is something like bars of solid color building the gradient. This is what's in my CSS:
background-color: #d3d3d3;
background-repeat: repeat-x;
background: -moz-linear-gradient(top, rgba(145,145,142,1) 0%, rgba(253,253,253,1) 99%);
background: -webkit-gradient(linear, left top, left bottom, from(#d3d3d3), to(#fcfcfc));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d3d3d3',endColorstr='#fcfcfc');
background: -o-linear-gradient(rgb(211,211,211),rgb(253,253,253));
According to this, it is most unlikely you are facing a version problem. Firefox, as usual, was the first to implement a standards-compliant (no prefix) CSS property (and it has already been 9 versions back).
Try removing the background-repeat property as it is mostly useless for gradients unless you've set a background size. If it solves, I'd recommend posting a bug report on Bugzilla. Does it work well on IE10 and Chrome?
I have been pulling my hair out trying to get the shadows to work on IE... They are working fine in chrome, safari, and firefox! Does someone have experience with this subject? I put the site up so you can see the full code and output.
Test Site
I am using lesscss, so maybe that is my issue? I hope not!!! I am also using the IE CSS3 Fix, ie-css3.htcThe code I am using is as follows... I was attempting to do this without the htc, but with no luck.. at least the htc got my background gradients to work in IE... before it was showing only blue-black, the default Microsoft background gradient colors.
predefine.less
.RUNgradient(#COLOR: #CLR1){
#CLRL:lighten(#COLOR, 10%);
#CLRD:darken(#COLOR, 10%);
background-color: #CLRL;
background-repeat:repeat-x;
background-image: -khtml-gradient(linear, left top, left bottom, from(#CLRL), to(#CLRD));
background-image: -moz-linear-gradient(top, #CLRL, #CLRD);
background-image: -ms-linear-gradient(top, #CLRL, #CLRD);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #CLRL), color-stop(100%, #CLRD));
background-image: -webkit-linear-gradient(top, #CLRL, #CLRD);
background-image: -o-linear-gradient(top, #CLRL, #CLRD);
background-image: linear-gradient(top, #CLRL, #CLRD);
behavior: url(css/ie-css3.htc);
}
styles.less
div.wrapper{
width:500px;
margin:25px auto;
padding: 10px 25px;
text-align:center;
.RUNgradient;
.RUNshadow;
p{
font:24px #HEADERFONT;
color:#ffffff;
.RUNtextshadow;
}
}
Filters are the answer! Almost...
For the gradient,
filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorStr="#CLRL~", EndColorStr="#CLRD~")";
And for the shadows,
filter: ~"progid:DXImageTransform.Microsoft.shadow(color="#SCLR~", Direction="#DIR~", Strength="#STR~")";
Only thing left is changing the direction in a way to have the shadow visible all around the element, not just to one side.
Solution
After researching Microsoft Filters, I figured out how to get a similar effect. The corners are a bit rough for my liking, but this is MUCH closer than before!
This is the shadow filer I used...
.RUNshadow(#BLURRING:10px){
#SCLR:#111111;
#DIR:225;
#DIR2:45;
#DIR3:135;
#DIR4:315;
#STR:4;
box-shadow: 0px 1px #BLURRING #111111;
-moz-box-shadow: 0px 1px #BLURRING #111111;
-webkit-box-shadow: 0px 1px #BLURRING #111111;
filter: ~"progid:DXImageTransform.Microsoft.shadow(color="#SCLR~", Direction="#DIR2~", Strength="#STR~")
progid:DXImageTransform.Microsoft.shadow(color="#SCLR~", Direction="#DIR~", Strength="#STR~")
progid:DXImageTransform.Microsoft.shadow(color="#SCLR~", Direction="#DIR3~", Strength="#STR~")
progid:DXImageTransform.Microsoft.shadow(color="#SCLR~", Direction="#DIR4~", Strength="#STR~")";
}
I have been pulling my hair out trying to get the shadows to work on IE... They are working fine in chrome, safari, and firefox! Does someone have experience with this subject?"
Yeah, that's normal. Most people don't bother. Remember to ask yourself, Do Websites Need To Look Exactly The Same In Every Browser?
If you really want this, you'll have to use the gradient filter for IE. Add the following style to your RUNgradient class:
filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorStr="#CLRL~", EndColorStr="#CLRD~")";
For both of them you can use IE filters.
You can use the gradient filter for gradients and the Shadow filter for shadows. The gradient filter works very well, the shadow filter looks really bad.
You can read in the documentation of the filters how to use them. But if you want to do it automatic you need see how CSS3 please is dealing with the filters and convert gradients to IE filter gradients.
You need to add these lines to the style tag for making this to work in IE,
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#444444', endColorstr='#222222'); /* IE6 & IE7 */
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#444444', endColorstr='#222222')"; /* IE8 */
Sample code Snippet:
.ms-viewheadertr ms-vhltr
{
background: #222 ;/when gradients doesn't fill it fills the color/
background: -webkit-linear-gradient(#444, #222);/* For Safari 5.1 to 6.0 */
background: -moz-linear-gradient(#444, #222);/* For Firefox 3.6 to 15 */
background: -o-linear-gradient(#444, #222);/* For Opera 11.1 to 12.0 */
background: linear-gradient(#444, #222);/* Standard syntax */
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#444444', endColorstr='#222222'); /* IE6 & IE7 */
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#444444', endColorstr='#222222')"; /* IE8 */
}
I would like to get a gradient in CSS (perhaps through Compass) that works in every major browser, including IE7+. Is there an easy way to do this (without writing a lot of code, and without a custom image file)?
I looked at Compass's gradient mixin, but it does not work with Internet Explorer.
Any ideas? (It does not need to be Compass -- I am happy install something else.)
Edit: What I am trying to get is some framework (like Compass?) that generates code like what Blowsie posted that's been tested across browsers. Basically like the Compass gradient mixin I mentioned, but with IE support. (I am a bit wary of just rolling my own SCSS mixin and pasting in blocks like Blowsie's code, because I haven't tested it and do not have the resources to do so.)
I just noticed that the current Compass beta (0.11.beta.6) has support for generating IE gradients in the compass/css3/images module (which supersedes the previous gradient module), so you can generate your gradients with a total of two short commands:
#import "compass/css3/images";
#import "compass/utilities/general/hacks"; /* filter-gradient needs this */
.whatever {
/* IE; docs say this should go first (or better, placed in separate IE-only stylesheet): */
#include filter-gradient(#aaaaaa, #eeeeee);
/* Fallback: */
background: #cccccc;
/* CSS 3 plus vendor prefixes: */
#include background(linear-gradient(top, #aaaaaa, #eeeeee));
}
This generates the following slew of CSS:
.whatever {
*zoom: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFAAAAAA', endColorstr='#FFEEEEEE')";
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFAAAAAA', endColorstr='#FFEEEEEE');
background: #cccccc;
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #aaaaaa), color-stop(100%, #eeeeee));
background: -moz-linear-gradient(top, #aaaaaa, #eeeeee);
background: -o-linear-gradient(top, #aaaaaa, #eeeeee);
background: linear-gradient(top, #aaaaaa, #eeeeee);
}
I guess I would have preferred to have the IE and non-IE gradient code in one call, but since IE's DXImageTransform gradient function is pretty limited, that is probably not possible.
The code I use for all browser gradients..
background: #0A284B;
background: -webkit-gradient(linear, left top, left bottom, from(#0A284B), to(#135887));
background: -moz-linear-gradient(top, #0A284B, #135887);
background: -o-linear-gradient(#0A284B, #135887);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0A284B', endColorstr='#135887');
zoom:1;
You will need to specify a height or zoom:1 to apply hasLayout to the element for this to work in ie
While gradients are of limited complexity, they're complex enough to require what you would consider "lots of code".
Consider:
starting colour, ending colour and the hexadecimal math required to transition between one and the other
The number of "steps"
The width/height of each step
Since there is no pure CSS way of doing this, it means rendering HTML, one element for each colour/step, without messing up your existing HTML
So, no, without a plug-in that does all of this for you, it would require a bit of code, or an image.
In the webkit and moz vendor specific properties for CSS gradients, you can specify the height of the gradient. Is there something similar for IE?
For example:
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#aaaaaa', endColorstr='#ffffff'); /* IE */
background: -webkit-gradient(linear, left top, left 3, from(#aaaaaa), to(#ffffff)); /* webkit */
background: -moz-linear-gradient(top, #aaaaaa, #ffffff 3px); /* firefox */
How can I specify a 3px high gradient in IE?
It's a hack, but you could create a duplicate div with a defined height of 3px and apply the IE filter to that.
Or you could avoid the IE code bloat, and accept that IE will have a different aesthetic than more capable browsers (square corners included).