I'm trying to update one of our older ZPT based applications and I would like to implement the following HTML5 Boilerplate best practice for adding conditional IE classes to the <html>.
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
Since I've used this technique on many non-ZPT sites I didn't think too much about it, however when I went to implement it I ran into a few problems.
ZPTs remove HTML comments so the rendered source lacks the conditional comments
We're using a whole page macro to define a reusable page template and that definition occurs in the <html> element like so, <html metal:define-macro="page">. Even once I get the conditional comments to display it seems that my next hurdle will be properly defining the page macro.
Can anyone shed some light on either of these questions?
It's estrange, zpt doesn't remove comments. Maybe it's a particular implementation of zpt who does that? Anyways, have you tried using tal:replace="strucutre string:...."
<metal:macro metal:define-macro="page">
<tal:doctype tal:replace="structure string:<!DOCTYPE html">" />
<!-- If the comments are eaten, you can generate them using the same trick that
tal:doctype above -->
</metal:macro>
Related
I am designing a responsive website. My CSS file starts with a block for the mobile layout, followed by a media query for the notepad layout and another media query for the desktop layout. I would like to make some concessions for IE8, which does not support media queries. SO, as currently structured, when my site is viewed in IE8, it reverts to the mobile layout, which is the first CSS block encountered in the style sheet. Not a good look for a desktop monitor, which I would expect the IE8 user to be.
Is it possible to insert some code in the CSS sheet that says "If you are an old IE browser, go to the desktop block for the layout?" OR, "Skip the mobile layouts"? ALternatively, I can create a separate IE CSS sheet, using conditional comments in the source code to call it up. If that's the way to go.
Will the extra style sheet be a drag on the load time for my page? (There's a limit to how far I'll go to accommodate people still on IE8!)
I like the way html5 boilerplate handles conditionals. It attaches ie classes to the html tag like so:
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
It makes it pretty easy to target what you want after that. Paul Irish talks about it. I would probably just stick with one large css file rather than have multiple, unless it's only one page of my site or I want to punish ie users.
Thanks for checking out my post. I am currently re-skinning a html5 template for my employer and have noticed while doing a bit of QA that the site appears to come out completely wrong on ie7 and 8. It seems as if the css styles are not even being pushed to the page.
here is my test link: http://daniloportal.com/NPC/index.html
I have added a couple of ifIE7 ifIE8 lines to my head but doesn't seem to do the trick. Im a newbie when it comes to ie compatibility fix's - any help is GREATLY appreciated.
Thanks!
D
You're just missing a doctype (<!DOCTYPE html>) at the top of your file.
This just triggers IE to go into Quirks Mode which causes all sorts of problems. Put the doctype at the top of your file and make sure no-white space or comment precedes it.
Put Doctype and place IE condition at top
<!--[if lt IE 7 ]> <html class="ie6" lang="en" xml:lang="en" dir="ltr"> <![endif]-->
<!--[if IE 7 ]> <html class="ie7" lang="en" xml:lang="en" dir="ltr"> <![endif]-->
<!--[if IE 8 ]> <html class="ie8" lang="en" xml:lang="en" dir="ltr"> <![endif]-->
<!--[if IE 9 ]> <html class="ie9" lang="en" xml:lang="en" dir="ltr"> <![endif]-->
Currently I am working on a webpage and need to set a style only for IE. I am using a conditional comment:
<!--[if IE]>
<link rel="Stylesheet" href="../../IEstyles.css" rel="Stylesheet" />
<![endif]-->
Is this the best way of doing this or would using javascript be the best practice?
That's nearly the best practice. You should probably instead be checking for [if lt IE 9], because IE 9 supports CSS pretty well, but definitely don't use browser-sniffing JavaScript. That's almost always the worst solution to a problem.
Html5Boilerplate is the site for best practices and here's what they suggest:
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7 ]> <html class="no-js ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]> <html class="no-js ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]> <html class="no-js ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
This allows you to keep one stylesheet and just prepend any of the above classes to target a specific conditional hack.
Not everyone has JavaScript enabled - HTML comments are supported in every mainstream browser that I know of.
As this is just a stylesheet, and therefore a UI concern, I would avoid javascript and just use the conditional comments to target IE. This then also gets around the issue of people who have javascript disabled, should you try and do some kind of browser sniffing.
Use Conditional Comments. They prevent other browsers from having to download/run any scripts, yet have the benefit of always working for IE users.
Using the conditional would be the best idea, as you have no guarantee that the visitor won't have javascript disabled, or scripting disabled. Where as this will only work in IE browsers, other browsers will ignore it, where as all browsers will process Javascript, whether it's for IE or not.
Javascript can be disabled, so I'd say conditional comments are the best way to serve IE-specific CSS.
I've finished making my website, but then I loaded it up in IE8. Big problems! For instance, a bunch of my div and span elements seem to be transparent (they should have coloured backgrounds), and floating elements don't work.
When I was developing my site, I had hoped I would just be able to ignore the older internet explorers - ie9 is standards compliant, and eventually everyone will end up using that. However, Microsoft are not releasing IE9 for XP, but people are going to be using that operating system for a long time still, I think. As such, I need to support IE8.
Does there exist a comprehensive list of all the things that IE8/ do wrong? Not something like Quirksmode.org, but a guide to the common issues with layout in IE8, and the hacks needed to fix them?
EDIT: The transparent elements thing seems to be somehow related to my use of css3pie.
You could try using conditional classes to target specific fixes for specific versions of IE. This is from Paul Irish's HTML5 Boilerplate:
<!doctype html>
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
With these comments you can specify something like:
.ie7 #container {margin-left:-1px;}
And it would only change your #container margin on IE7.
If those don't work, post some of your code and people might be able to point out some incompatibilities.
I want to uses some css attibutes only for IE 6,7,8 in a css file. is it possible?
Is it possible to target specific version of IE for each attribute.
somthing like this:
.mystyle {
top:5px
top:-30px //only if ie6
top:-5px //only if ie8
}
i know about <![If lt IE7]> tags but, i dont want to create one more css file.
This script is tiny, and filled with awesome: http://rafael.adm.br/css_browser_selector/
It will put classes on the HTML element that correspond to the user's browser. That will let you do things like this:
.ie7 .mystyle { top:5px;}
.ie8 .mystyle { top:-30px;}
I wouldn't create a new external javascript file just for this script. Its so small that I usually just add it to the top of my existing external javascript file.
there are a number of hacks you can use in your stylesheets themselves but this is generally considered bad practise. Here is an example
Why don't you want to use multiple stylesheets?
inspired by Stephen's post you could do this (stolen from html5 boilerplate by paul irish):
<!--[if lt IE 7 ]> <html lang="en" class="ie6"> <![endif]-->
<!--[if IE 7 ]> <html lang="en" class="ie7"> <![endif]-->
<!--[if IE 8 ]> <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html lang="en" class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]-->
Final edit
should explain. If you add this to the html you will conditionally set an IE overriding class. The final line renders no class if browser is greater than IE9 (none) or not IE
You can use IE hacks, which will achieve what you're looking for. However, it's not advised to do that; long term maintenance will become difficult.
The conditional comments solution is the easiest and cleanest solution, and it's supported by MS. You should use them.