I'm building a web site that uses a fair amount of drop shadows and gradients. I can accomplish a lot of this via CSS's box-shadow properties.
Alas, we're still supporting IE, so we need to add background images in those situations.
I could be lazy and just give everyone the background images, but I'm trying to streamline things for those that are using the modern browsers. Ideally, I'd like to have those users not have to request the images.
So, I'm adding an extra class via javascript if the browser supports the box shadow (box-shadowSupport) and my CSS ends up looking like this:
.box {
background: url('myImage.jpg');
}
.box-shadowSupport {
background: none;
[box shadow properties go here]
}
If the HTML ends up looking like this:
<div class="box box-shadowSupport"></div>
Will the image be requested? Or does the browser understand that it isn't needed due to the second style over-riding the background image property?
If the image is requested, I need to rearrange my CSS and javascript so instead of over-riding a style via the cascade, I'll have to swap out the classes so the first isn't even referenced in the HTML.
I believe every web browser will treat this in it's own way - as usual :) My suggestion is to use a web proxy like Charles and see, if the image has been requested or not. And of course, test this in the different browsers.
What you might want to consider is defining the IE specific styles in a separate sheet and loading it with conditional comments, like this:
<!--[if IE]>
<link rel="stylesheet" id="ie-css" href="ie-specific.css"
type="text/css" media="all" />
<![endif]-->
This will only load the sheet with IE-specific settings and you can override the other classes with !important markers. Conditional comments have been around since IE5, and any other browser will ignore the block above.
I would recommend just to skip the shadows in IE.
Most people use only one browser and they won't know that there have to be shadows. It isn't a big deal if the site looks different in different browsers as long they look normal (that means not glitchy).
Otherwise use with a if tag for ie specific css, and you can do drop-shadow there with:
.box {
filter: progid: DXImageTransform.Microsoft.dropShadow(
color=#818181,
offX=5, offY=5,
positive=true);
}
For more about that see here.
I am pretty sure that all modern browsers will load 'myImage.jpg'. Actually, the code you provided described the pure CSS way of preloading images without using javascript :)
Related
Sorry for the silly question, but I am really beginner and I need your help.
I added modernizr-2.8.3.min.js in my website.
I visited the modernizr home page, but I don't understand how to download it.
Then, I found this modernizr file in the html5 boilerplate.
When I add this in my , is this helping me not to add vendor prefix?
Or, if I do not do anything with modernizr, should I use some kind of 'prefix free' file?
Thanks.
Modernizr is a javascript library that detects the browser features. You can use it two ways.
Just include this in your file.
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js">
Go to https://modernizr.com/download?setclasses and select the features you want modernizer to detect. I can see how this can be confusing if you are a beginner so I suggest that you use the first option.
Once you include this in your html change your html tag to this <html class="no-js"> and when you see your page in the browser you will see something like this.
<html class=" js no-flexbox no-canvas no-canvastext no-webgl no-touch no-geolocation no-borderimage no-borderradius no-boxshadow no-textshadow no-opacity no-cssanimations no-csscolumns no-cssgradients ... etc">
Now you can write your css for regular browsers and the one that doesn't support your feature.
So if you want to add gradients to <div class="gradient"> for regular browsers you do something like this.
div.gradient{
background: linear-gradient(red, yellow);
}
but for browsers that doesn't support border-radius modernizr adds no-borderradius to your html tag, see above. So for these browsers you can write your css like this to ensure a consistent view.
.no-cssgradients div.gradient{
background: url("glossybackground.png");
}
IE doesn't support CSS3 columns — no big deal, right? Even though, I'm trying to find any modernizr-like library to do the trick. I don't really want to code different CSS for IE, as that would be giving way too much care and attention to something we all despise. Any suggestions?
As of IE10, there is now native (and un-prefixed) support for CSS3 columns.
http://msdn.microsoft.com/en-us/library/ie/hh673534(v=vs.85).aspx
Pragmatic Programmer's HTML5 and CSS3 book has some great advice on stuff like this. For columns, it recommends using the Columnizer Plugin for jQuery for IE.
Without seeing your code, I would suggest putting each column in a div. Then redefine the body tag after you load the stylesheet for IE only, and add the styles for the divs.
For IE only:
<!--[if IE]>
**** your styles ****
<![endif]-->
You could even take it a step further and move the body style into it's own style sheet and load the style sheet you need depending on the browser. It'll depend on how far you want to take it.
Try setting display: inline-table; on the items you want laid out as a table
Does anyone know how can I detect the browser type in css? What I trying to do is when the user viewing the page by using IE 8, then will set class 'black2' to { font-size:0.75em; color:#1e549b;} in css else will set it to { font-size:0.95em; color:#1e549b;}
See this similar question
You can use special commenting for IE detection in the CSS, or you can do the logic using javascript and apply the CSS classes programmatically (for example using JQuery).
<!--[if IE 8]>
<style>.black2 { font-size:0.75em; color:#1e549b;} </style>
<![endif]-->
Not really recommended...but why are you serving a different font size? You can't get them to be consistent? Have you tried setting an initial percent, then use ems?
If you are running server-side code (php, asp.net, asp, ..), you would be better off detecting the browser on the server and including an additional style sheet in the header for browser specific code.
Otherwise, the are a number of browser hacks you could use to inject CSS for different browser types and version. As they are "hacks", the css gets ugly fast.
I am mentioning this for the sake of completeness, but I strongly advise that you go a different route because CSS expressions impact performance and may not be cross-platform-friendly:
You can use a CSS expression coupled with JavaScript to dynamically set your styles. An example:
<style>
P
{
background-color: expression( getBackgroundColor(this) );
}
</style>
<script type="text/javascript">
function getBackgroundColor(elem)
{
return "green";
}
</script>
You can use this JavaScript function to sniff out the browser version (also not the best idea) and color accordingly.
I want to have a particular CSS style different for IE6. Basically I am using CSS sprites with a PNG file. But for IE6 I want to use the .gif version.
I dont want to use the <!-- if lte IE6 statement. I want to include it within my CSS file itself.
How do I do that?
Edit:
I need this because I want my users to include a single CSS file and not 4 lines of code. My users are absolute newbies. I don't want to confuse them. Plus the only change I want is to use .gif instead of the current .png.
Edit:
How does _background-image: sound? Is there anything wrong with that?
Alternatively, can I use a conditional statement inside a CSS file?
If you don't want to use conditional comments, then you can use the * html hack:
h1 {
color: green;
}
* html h1 {
color: red; /* this will only be applied by IE 6, 5.5, 5, and 4 */
}
Apparently you can put IE6 specific statements into a CSS by prefixing them with an underscore.
See http://vexxhost.com/blog/2007/03/01/only-css-hack-you%E2%80%99ll-ever-need-seriously/
As you obviously will have noticed from the answers you're getting, using conditional comments for this is so standard that people tell you to do that even when you've specifically said you don't want to.
But if you absolutely have to have the user agent determination made at the CSS file level, what I would do is write a PHP script that outputs the CSS (rather than HTML) and analyze the user agent in PHP. If the file has to be referred to as stylesheet.css or whatever, Apache rewrites or MultiViews can be used to make a PHP script available under that name.
Here's a pretty comprehensive list of unrecommended hacks:
http://www.javascriptkit.com/dhtmltutors/csshacks3.shtml
You said you don't want to use conditional statements, but they are very much the recommended and best way to go. The main reason is maintinability, CSS browser hacks are often hard for the next person, or you several months down the line, to understand. Having non-hacky CSS in a completely separate file makes it far easier to manage.
I would very much recommend you don't do user agent sniffing, it is open to lots of problems, for instance many browsers report themselves as IE even when they are not (default in Opera 7 I think). The User-Agent string is not to be trusted and should only be used as a last resort.
Use a conditional comment.
<!--[if IE 6]>
<link rel="stylesheet" href="/ie6.css">
<![endif]-->
edit: Now that Wellbog has fixed your question, no, there's no way to do that with pure valid CSS.
You could conceivably use PHP or another server-side language to detect IE6 from the user agent string and serve a different CSS file, but it's much better to just use the conditional commenting technique.
What's your reason for refusing to use the existing, working, non-hacky solution Microsoft provides?
I have a png with transparent background that doesn't work in IE 6. I have gotten round the problem by replacing the few img tags using that image with a DIV, and in CSS I use:
#div {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="./Images/img.png")}
the problem I have with this is that I then lose alt and title attributes which doesn't make the site very accessible. If I use the above CSS with an img tag I see the correct image but it has the big 'X' over it that IE shows when it can't display an image.
Any suggestions on how I can get IE to behave by showing the transparency correctly in an IMG tag?
One way you can continue to use the DIV tags, but still be accessable is to place a second SPAN tag within the DIV element and put the value for the ALT inside that, then style it to not be off the page... for example...
div.image {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="./Images/img.png");
}
div.image span {
position : absolute;
top : -9999px;
}
Then the HTML would look like this...
<div class="image" title="The title for the image" >
<span>The ALT Text</span>
</div>
The title tag will still work on the DIV so you should be okay on that part.
I don't think you can simply hide the text (as in display:none;) because I think screen readers will respect that rule (as in not read it)
you could use javascript to enable transparency in ie6. there are many examples you can find. here is a link to one i have used.
http://jquery.andreaseberhard.de/pngFix/
another option is to use htc for ie6 - see here for solution:
http://www.twinhelix.com/css/iepngfix/
only requires an extra line added to your css file - sorry still may require javascript - not too sure.
I used a small javascript tool for solving this problem a couple of month ago. It's named Unit PNG FIX and it's very easy to use.
While someone here gave a JS implementation for this, this solution will be also executed for FF and other browsers. There are better ideas, for example using MS technology :)
One of them uses something called HTC (hypertext component, if I am not mistaking). It's something like... a CSS for behavior. It's really an XML file which lets you attach some functions to a CSS selector. Again, an MS only technology.
In short, visit this site:
http://www.twinhelix.com/css/iepngfix/
I am using this withing a drupal module and I am very happy. If you are wondering, this is the module: http://drupal.org/project/pngbehave
Note: this does not work under IE tester: http://www.my-debugbar.com/wiki/IETester/HomePage
I am using a Windows 2000 with IE6 (running under vmware, if you have to know) to test IE6 sites.
IE6 supports PNG-8 transparency, but not PNG-24. One of my favorite tools to "fix" IE6 is IE8.js.