I am working on app which platform is targeted to modern browsers but exceptionally its required to run on IE9 which doesn't supports CSS3 gradient. Can anyone please suggest any alternative (except SVG) would benefit me greatly.
.GRAD_LINEAR(#start:#EEA611; #end:#E3EE11) {
background: #start;
background-image:-webkit-gradient(linear, left top, left bottom, from(#start), to(#end));
background-image:-webkit-linear-gradient(top, #start, #end);
background-image:-moz-linear-gradient(top, #start, #end);
background-image:-o-linear-gradient(top, #start, #end);
background-image:linear-gradient(to bottom, #start, #end);
//Your suggestion...
}
There are several ways you can achieve this.
Try ColorZilla Gradient Editor. Since Microsoft provides its own filters, something like
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
will be fine for you.
Use an HTC file, something like CSS3 PIE which adds the necessary functionality to older versions of IE to emulate modern CSS3 features. It has its own pros and cons but worth a shot.
The next, least recommended, way of doing it will be using images. But then you will increase the number of HTTP Requests your application makes. Also if an image fails to load, your element might look ugly.
You can make gradients work in IE9 Check this -- Colorzilla
Related
How do I use a CSS linear gradient with Netscape?
I am trying this code:
#gr {
background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#000));
background: -moz-linear-gradient(top, #ffffff, #000);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#000');
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#000');
}
It works with IE, Firefox, and Chrome but it does not work with Netscape.
Netscape Navigator 9, last updated between 2006 and 2008 as a Firefox derivative, does not offer any real support for CSS beyond a large subset of the CSS2.1 spec. It does not support CSS3 gradients, or most any other CSS3 feature.
Netscape Navigator/Communicator 4.x and older don't have a lot of CSS support at all.
If you really need a gradient, you're better off using a background image. That's the traditional, tried and tested method designers have been using for the past 10 years, with great cross-browser compatibility yet very little friction.
If you're trying to support Netscape only because you are a Netscape user, stop wasting your time. Switch to Firefox. No serious web designer uses Netscape anymore in this day and age.
Netscape is no longer supported and is very rarely used by anyone.
But if you still want to use a linear gradient on your site, you can create an image using Photoshop or any other graphic editor, and then use it as:
background-image: url('url-of-img.jpg');
I have this :
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,0.56)), color-stop(100%,rgba(210,210,210,1)));
Its working for all browsers and for IE9 , but not working for IE6
Can someone tell me what to use else
Regards
You need to use IE's old filter rules, the rule you mentioned in the question has a vendor prefix which is targeting webkit (chrome, safari etc) browsers only. - there's a neat generator here which will help you out in making cross-platform gradients. IE6-9's rules look like this:
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 *
The webkit prefix only works in Webkit browsers, which are Chrome, Safari, and Android and iPhone. For example, you'd need to use -moz for Firefox, and -o for Opera.
IE6 doesn't have any gradient support at all, so you'll need to use an image instead, or drop IE6 support, which is probably a good choice; not many users are still on IE6. (Unless this is meant for use specifically in for example governments, they're often stuck.)
Internet Explorer gradient filter doesn't support color-stop, gradient angle, and radial gradient. That means you can only specify either horizontal or vertical linear gradient with 2 colors: StartColorStr and EndColorStr.
Internet Explorer 8 and lower aren't the only browsers that don't support gradients, so using filters won't catch all browsers.
Another approach is to use Modernizr to feature detect support and use a fallback image or solid colour.
For example:
#box {
// Normal gradient syntax
}
.no-cssgradients #box {
// Fallback image
}
i have just downloaded dreamweaver cs5.5 and am trying to apply css3 to my page, however although my current css is working fine both in dreamweaver and other coders the new css3 is not being applied.
eg i am trying to apply border-radius, although it is showing up in my css list as i type it out (unlike microsoft expression 4, which is'nt although i believe it should), it is not being applied to the actual page.
i have also tried using box-shadow, and linear-gradient, both unsuccessfully which made me believe that it is a css3 issue.
could it be something like setting up dreamweaver to accept css3, (ticking/unticking something in settings).
i am a beginner, any help would be appreciated and also i have looked it up before submitting q, but it seems not much info on css3 and especially css3 with dreamweaver.
thanks in advance
Did you make sure to include properties for all browsers? also, can we see your css?
Cross compatible linear gradient needs to look like this:
linear-gradient(bottom, rgb(48,54,48) 0%, rgb(54,61,54) 100%);
-o-linear-gradient(bottom, rgb(48,54,48) 0%, rgb(54,61,54) 100%); /*opera*/
-moz-linear-gradient(bottom, rgb(48,54,48) 0%, rgb(54,61,54) 100%);/*mozilla*/
-webkit-linear-gradient(bottom, rgb(48,54,48) 0%, rgb(54,61,54) 100%);/*chrome*/
-ms-linear-gradient(bottom, rgb(48,54,48) 0%, rgb(54,61,54) 100%);/*IE*/
Please see what browser you are using Internet explorer 8 and below may not support the css3 newly introduced styles.check it in a browser like chrome. Also refer to the answer from #rfinz you can see how he does it for different browsers. You probably have to work along the same lines
I am a web developer, I recently looked at GMAIL's new LOGIN PAGE preview and there is a Sign In button, I was really excited about its UI. I did some surgery of Page's CSS and found some properties like:
**background-color: #4D90FE;
background-image: -webkit-gradient(linear,left top,left bottom,from(#4d90fe),to(#4787ed));
background-image: -webkit-linear-gradient(top,#4d90fe,#4787ed);
background-image: -moz-linear-gradient(top,#4d90fe,#4787ed);
background-image: -ms-linear-gradient(top,#4d90fe,#4787ed);
background-image: -o-linear-gradient(top,#4d90fe,#4787ed);
background-image: linear-gradient(top,#4d90fe,#4787ed);**
Now can anyone please tell me how can I maximize the page's optimization for all popular browsers using these kind of CSS extension properties. I mean is there any reference link for these extensions or some other good stuff.
Thanks.
You should use google to find such information, a lot of it has been around since early 2010.
but here are some examples of browser specific gradient codes:
.gradient-bg {
/* fallback/image non-cover color */
background-color: #1a82f7;
/* fallback image */
background-image: url(images/fallback-gradient.png);
/* Safari 4+, Chrome 1-9 */
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#2F2727), to(#1a82f7));
/* Safari 5.1+, Mobile Safari, Chrome 10+ */
background-image: -webkit-linear-gradient(top, #2F2727, #1a82f7);
/* Firefox 3.6+ */
background-image: -moz-linear-gradient(top, #2F2727, #1a82f7);
/* Opera 11.10+ */
background-image: -o-linear-gradient(top, #2F2727, #1a82f7);
}
Taken from here.
To find out which browser supports which selector has a lot to with testing.
If you just need cross-browser-gradients, use http://www.colorzilla.com/gradient-editor/ (supports also IE6-9).
To find out, which technique is supported by which browser http://caniuse.com is a good resource.
There is a pretty comprehensive list of Mozilla's CSS extensions (or simply things that haven't been fully standardized yet) here: https://developer.mozilla.org/en/CSS_Reference/Mozilla_Extensions
There is also an attempt to list all vendor-specific CSS properties under http://webdesign.about.com/od/css/a/css-extensions.htm but it is probably pretty incomplete and outdated - this area changes fast. In the end, you should better look at CSS3. Either a feature is already listed there which means that vendor prefixes will likely be dropped soon - or it is not and then using this feature in a production webpage isn't recommendable (its meaning might change significantly or browsers might stop supporting it altogether).
This is a list that I keep on me all times as a point of reference.
I hope this is of some use to you
http://qooxdoo.org/documentation/general/webkit_css_styles
Using CSS for creating gradients instead of images, does it have any negativity?
For example the following code:
#gradient {
color: #fff;
height: 100px;
padding: 10px;
/* For WebKit (Safari, Google Chrome etc) */
background: -webkit-gradient(linear, left top, left bottom, from(#00f), to(#fff));
/* For Mozilla/Gecko (Firefox etc) */
background: -moz-linear-gradient(top, #00f, #fff);
/* For Internet Explorer 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF0000FF, endColorstr=#FFFFFFFF);
/* For Internet Explorer 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF0000FF, endColorstr=#FFFFFFFF)";
}
Thanks.
Gradients are not standardized yet and many browsers do not suport it, in your exemple -moz-linear-gradient works in firefox 3.6 but on older version doesn't. If your site is for public purposes, many people won't see you gradients, so you could check what version of browser they use, and use gradients or images based on that. I use gradients on an intranet site (where I can force users to use a specific browser), If the browser if not Firefox 3.6 or greater, the site will show just a message that tells the user to upgrade, but this is not a good way if you go public.
So i choose negative for public sites. :)
As you've illustrated in your example, there's no one way to do it that works in all commonly used browsers at the moment. I would consider that a "negative" for maintenance and code readability purposes.
A bit of constructive criticism: the word you're looking for is "instead", not "instant".
CSS gradients are used on many large websites using the fallbacks you are using. I would add PIE.htc as well. If you do use PIE remember that it needs to be absolutely or relatively positioned to show up.
If you have to support really old browsers the best way is to give them a fallback solid background-color.
To be it it silly to expect old browsers to display gradients at all. If you absolutely have to you can set up a conditionally loaded stylesheet:
<!--[if lt IE 8]>
<link rel="stylesheet" type="text/css" href="http://mysite/css/ie7_hacks.css" /><![endif]-->
In there you can declare a repeating image-based gradient. Just like how it used to be done before CSS3.
By doing it this way you are making your site a little faster for modern web browsers.