Quick question about using .htc files in CSS.
If I use * to stop anything but IE using the style and it's a file I'm using it on (htc, image etc), do other browsers load it in as well?
I've got a SASS mixin for box sizing but don't want to load the htc file if I don't have to.
// Box sizing
#mixin box-sizing($boxmodel) {
-webkit-box-sizing: $boxmodel;
-moz-box-sizing: $boxmodel;
-ms-box-sizing: $boxmodel;
box-sizing: $boxmodel;
#if $boxmodel == border-box {
*behavior: url(/js/boxsizing.htc);
}
}
Thanks
Other browsers don't identify behavior as a valid CSS attribute, so your .htc file will not be loaded by anything than IE.
Note that the proprietary behavior property gets parsed and interpreted by IE8; you're warned against this in the polyfill usage section:
If you prefix the behavior property with a star, like seen above [sic], it
will only be seen by IE6 & IE7, not by IE8+ (it's a hack) which is
better for the performance on those newer browsers.
If you are not big on css hacks (or big on neat setups and performance), you should use IE conditional comments to include a separate stylesheet for IE7:
<!--[if lte IE 7]>
<link rel="stylesheet" href="ie7.css">
<![endif]-->
<!--[if (gt IE 7)|!(IE)]><!-->
<link rel="stylesheet" href="majestic.css">
<!--<![endif]-->
You would also be able to use a custom mixin for the property and compile two versions of the stylesheet:
#mixin border-box($ie7) {
#if $ie7 {
//forget vendor prefixes, this is for IE7 only!
behavior: url(/js/boxsizing.htc);
} else {
//remember the vendor prefixes this time!
box-sizing: border-box;
}
}
Define $ie7 as truthful in the ie7.scss and you're good to go.
Related
I have been trying to solve this for 2 hours now but no luck. The less code snippet works fine in all browsers except IE8. I checked IE8 supports :after and :before
I'm using standard IE8 doctype, using HTML5 shiv and also not running this in compatibility mode?
#media print {
.app-header .large-header {
.logo span,
h1,
.action-links {
display: none;
}
.logo:before {
content: url('images/logo.png');
position:absolute;
top:0;
left:0;
width:150px;
height:28px;
}
}
}
UPDATE
Issue is that IE8 doesn't support printing content url. The workaround is to use an image instead.
IE8 does not support media queries this: #media print {} is not supported.
create a separate css for IE8 and in the HTML put a conditional like this:
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" media="all" href="style-ie.css"/>
<![endif]-->
See for yourself https://msdn.microsoft.com/en-us/library/ms530813(v=VS.85).aspx
Dynamic HTML (DHTML) expressions can be used in place of the preceding
value(s). As of Windows Internet Explorer 8, expressions are not
supported in IE8 Standards mode. For more information, see About
Dynamic Properties.
I don't know about your markup but is it an option to remove the background image of the logo and use an actual <img> tag for it?
That way you would not need to change a lot of styles for printing pages. You should also keep in mind that there are a lot of printers out there, which disable background-imagery and background-colors by default!
I am wanting to use a separate CSS sheet on my web-page for Chrome & Safari, than the one used for all other borwser types. I have previously used conditional comments when doing this for IE, such as:
<!--[if !IE]><link rel="stylesheet" type="text/css" href="style.css"><!--<![endif]-->
<!--[if IE]><link rel="stylesheet" type="text/css" href="style2.css"><![endif]-->
but I am wanting the above to work for Chrome & Safari instead. Is this possible?
Conditional comments only work in IE.
This is a creative way to address this problem. I learned it from here
#media screen and (-webkit-min-device-pixel-ratio:0) {
/* CSS Statements that only apply on webkit-based browsers (Chrome, Safari, etc.) */
}
Mozilla has a vendor specific one as well.
#media screen and (min--moz-device-pixel-ratio:0) {
/* Firefox browser based CSS goes here */
}
I googled in here, and tried to print only the div's i want.
used this,
#media print
{
#top_area { display: none; }
#left_area { display: none; }
#buttom_area { display: none; }
#contents_area { display: block; }
}
and it works fine in chrome and over IE9.
But the problem is under IE8.
It just immediately shutdowns the browser :(
Any good solution?
Internet Explorer versions before IE9 do not support media queries.
If you're using the #media print directive to provide a print stylesheet to modern browsers, you can take advantage of Internet Explorer's conditional comments to target specific versions of IE and deliver a print stylesheet to them. You will, of course, need to have a separate print.css for these versions of IE to consume.
For example, in your HTML's <head>:
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
<![endif]-->
This code snippet says, "if I am a version of Internet Explorer BEFORE IE9, use this print stylesheet". Versions of IE9 and up will not use this stylesheet.
This way, modern browsers that understand the #media directive get the benefit of not having an additional http request for the print stylesheet, while providing a fallback for browsers that do not support #media.
Windows Internet Explorer 9 introduces support for media queries. That is why it is not working for you in IE 8
This is not supported in IE8. Possible workarounds are suggested at IE8 support for CSS Media Query. Hope this helps. :-)
I used special character '#' '_' and '\' for IE browser compatibility. But now my style sheet is fail in W3c validation because of using IE hack. Is there anyway for error less stylesheet with browser compatibility.
Now I am not able to remove these IE hack because of my HTML files are now in Java program development.
My hack are like this :
/* For IE8 */top:-15px;
/* For IE7 */#top:-10px;
/* For IE6 */_top:-1px;
Yeah, don't use invalid CSS hacks, they're super-fragile.
For the specific case of picking up IE, conditional comments are better. Most solutions put extra stylesheets in CCs, but if you don't want to do that you can do class-switching with CCs:
<!--[if IE 6]> <body class="ie6"> <![endif]-->
<!--[if IE 7]> <body class="ie7"> <![endif]-->
<!--[if gte IE 8]><!--> <body> <!--<![endif]-->
and then do all your styling in one place based on the class:
#something { top:-15px; }
body.ie7 #something { top:-10px; }
body.ie6 #something { top:-1px; }
(This is assuming that IE8 is “all right” and should be served the same rules as other browsers, hence the ‘downlevel-revealed’ CC that allows everyone else to see the classless <body>.)
Used the particular html page in conditional statement.
<!--[if IE ]>
<link href="iecss.css" rel="stylesheet" type="text/css">
<![endif]-->
Your reference
http://reference.sitepoint.com/css/conditionalcomments
Factor your adaptions for IE out into separate style sheets, and include them via conditional comments, e.g. for the IE8 style sheet:
<!--[if IE 8]
<link rel='stylesheet' href='ie8.css' />
<![endif]-->
I would say don't worry too much about validation.
It is helpful to use when trying to figure out when something is broken, but not the goal of any Web site.
Instead of hacks within your css, why not use conditional comments?
<!--[if lt IE 8]>
//styles here
<![endif]-->
You can either place individual styles in there or a link to a stylesheet.
Either way, only IE less than 8 sees it.
http://msdn.microsoft.com/en-us/library/ms537512(v=vs.85).aspx
There is also a solution without the conditional comments, which allows you to store all CSS rules in one file.
* html selector { /* rules for IE6 */ }
*:first-child+html selector { /* rules for IE7 */ }
For IE8, you shouldn't need any CSS hacks; it's a browser with very good CSS 2.1 support. If you, despite this fact, do need one, you may try setting a value with no hack and then rewrite it using some CSS3 selector that won't be recognized by IE8.
selector { /* rules for IE8 */ }
html:root selector { /* rules for IE9, Firefox, Chrome, etc. */ }
How could I select IE7 with pure (valid) CSS?
If you don't want to use a conditional comment (outside the CSS, e.g. defining a separare <style> section), the only thing you can use is CSS Hacks. See here for a "IE7 only" hack.
IE does support conditional comments, an IE-specific HTML comment syntax. You can use them to include IE7-specific CSS, e.g.
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie7.css" />
<![endif]-->
There’s no equivalent in CSS, unfortunately. But, as mentioned in other answers, there are some valid CSS hacks you can use to target CSS rules as just IE 7.
I personally prefer the conditional comment syntax as it’s a bit more explicit, but you can make the hacks explicit with comments.
If you don't want a separate stylesheet for IE hacks, here's another way doing it with using conditional comments:
<!--[if lt IE 7]><body class="ie6"><![endif]-->
<!--[if (gte IE 7)&(lt IE 8)]><body class="ie7"><![endif]-->
<!--[if gte IE 8]><!--><body><!--<![endif]-->
...page content...
</body>
This give IE6, IE7 and [all other browsers] a different body element class. Now you can write rules like:
body.ie7 div.scroll { padding-bottom: 16px; }
are expressions valid? if so:
cssAttr: expression( /msie 7/i.test( navigator.userAgent ) ? '#ie7val' : '#0th3r1' );
I highly doubt they are though, and technically that's CSS, but it's really JavaScript in disguise!
IE7-Only css jack:
*:first-child+html{ }