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.
Related
My team is developing an ASP.NET web application, and we are attempting to maintain a consistent look and feel across browser type and version for a couple of the major browsers(IE, Chrome, Firefox). We would also like to allow themeing if possible , so that users can have a choice of color, font size, and so on.
However, I am having a serious issue with Acheiving compatibility with IE 8 and 9 due to some CSS3 rules currently in place. In particular, the shading gradient's used in this div are causing trouble, as they are not supported in IE 8 or 9:
#logos
{
width:1024px;
height:100px;
border-radius:15px;
color: -moz-linear-gradient(bottom, #297381, #FFFFFF);
color: -ms-linear-gradient(bottom, #297381, #FFFFFF);
color: -webkit-linear-gradient(bottom, #297381,#FFFFFF);
background:-moz-linear-gradient(bottom, #297381,#FFFFFF);
background:-ms-linear-gradient(bottom, #297381,#FFFFFF);
background:-webkit-linear-gradient(bottom, #297381,#FFFFFF);
}
I believe(correct me if I am wrong) I can achieve the gradient in IE9 by adding these rules:
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#297381', EndColorStr='#FFFFFF')";
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=’#297381’, EndColorStr='#FFFFFF');
But I don't think there is any corresponding option in IE8 and I don't believe it supports border-radius either. I was hoping to just have a separate theme or rule utilizing a static image for the background of that div. Is there any way I can detect browser version in css and apply the correct rule or theme? Or does this have to be done in the code behind and set the theme accordingly from there?
Try CSS PIE - http://css3pie.com/. This is a library which enables CSS3 functionality in IE6-8 via behaviors in a .htc file.
I have built a module for galleries, here you have 2 examples, at the bottom of the page:
http://www.we-do.com/referenzen/watch-your-web/
As you see, in modern borwsers, clicking anywhere in the box will open the lightbox, but in IE 7 and 8 has completely different behaviours. How could I normalize it?
Here is the dirty hack for IE7 and IE8,
CSS
/* IE Fixes */
html.ie7 .gallery-links, html.ie8 .gallery-links {
background: url("http://triggertek.com/r/transparent_png/pixel.png") repeat;
} // i used 1px transparent png to solve it.
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 would like to make use of border-radius and the different variations on my web pages. I'd also like to have alternate CSS for the browsers that don't support this. I am using MVC3.
Is there a simple way that I could have different CSS presented depending on if the browser does or does not support border-radius and just have ONE CSS file. In other words I would prefer to not have to have an additional CSS file to manage different variations of browser.
I read about BrowserCaps. Is anyone using this with MVC3 for CSS switching?
Use the excellent jQuery round corner plugin.
http://jquery.malsup.com/corner/
It's supported in all browsers including IE. It draws corners in IE using nested divs (no images). It also has native border-radius rounding in browsers that support it (Opera 10.5+, Firefox, Safari, and Chrome). So in those browsers the plugin simply sets a css property instead.
Here's How to use it
You need to include the jQuery and the Corner js script before </body>. Then write your jQuery like $('div, p').corner('10px'); and place before ''. So your html will look like the below code. Here i'm making round corners for all div and p tags. If you want to do it for specific id or class then you can do something like $('#myid').corner();
<body>
<div class="x"></div>
<p class="y"></p>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://github.com/malsup/corner/raw/master/jquery.corner.js?v2.11"></script>
<script>$('div, p').corner();</script>
</body>
Check working example at http://jsfiddle.net/VLPpk/1
UPDATE
If you want a cross browser Solution using only CSS, then use the following
.curved {
behavior: url("border-radius.htc");
-moz-border-radius: 20px; /* Firefox */
-webkit-border-radius: 20px; /* Safari and Chrome */
-khtml-border-radius: 20px; /* Linux browsers */
border-radius: 20px; /* Opera 10.50, IE and CSS3 */
}
Download the htc file from http://code.google.com/p/curved-corner to make this work in IE browsers. jQuery plugin mentioned above remains the easiest way to do this where you don't have to modify so many CSS properties everytime you want to issue a radius.
Modernizr might be helpful for you. It would add either borderradius or no-borderradius to your markup using javascript and you can then style based on that:
http://www.modernizr.com/docs/#borderradius