2010-08-23 12:26:48 +00:00
<?xml version="1.0" encoding="utf-8"?>
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
< html xmlns = "http://www.w3.org/1999/xhtml" lang = "fr" xml:lang = "fr" >
< head >
< meta http-equiv = "Content-Type" content = "text/html; charset=UTF-8" / >
< meta name = "keywords" content = "web, webdesign, jQuery" >
< link rel = "shortcut icon" type = "image/x-icon" href = "/Scratch/img/favicon.ico" / >
< link rel = "stylesheet" type = "text/css" href = "/Scratch/assets/css/main.css" / >
< link rel = "stylesheet" type = "text/css" href = "/Scratch/css/twilight.css" / >
< link rel = "stylesheet" type = "text/css" href = "/Scratch/css/idc.css" / >
< link rel = "alternate" type = "application/rss+xml" title = "RSS" href = "http://feeds.feedburner.com/yannespositocomen" / >
< link rel = "alternate" lang = "fr" xml:lang = "fr" title = "Une CSS pour IE seulement" type = "text/html" hreflang = "fr" href = "/Scratch/fr/blog/2009-10-30-How-to-handle-evil-IE/" / >
< link rel = "alternate" lang = "en" xml:lang = "en" title = "How to handle evil IE" type = "text/html" hreflang = "en" href = "/Scratch/en/blog/2009-10-30-How-to-handle-evil-IE/" / >
< script type = "text/javascript" src = "/Scratch/js/jquery-1.3.1.min.js" > < / script >
< script type = "text/javascript" src = "/Scratch/js/jquery.cookie.js" > < / script >
< script type = "text/javascript" src = "/Scratch/js/index.js" > < / script >
< title > How to handle evil IE< / title >
< / head >
< body lang = "en" >
< script type = "text/javascript" > / / < ! [ C D A T A [
document.write('< div id = "blackpage" > < img src = "/Scratch/img/loading.gif" alt = "loading..." / > < / div > ');
// ]]>
< / script >
< div id = "content" >
2010-09-27 18:49:15 +00:00
< div id = "choix" >
< div class = "return" > < a href = "#entete" > ↓ Menu ↓ < / a > < / div >
< div id = "choixlang" >
< a href = "/Scratch/fr/blog/2009-10-30-How-to-handle-evil-IE/" onclick = "setLanguage('fr')" > en Français< / a >
< / div >
< / div >
< img src = "/Scratch/img/presentation.png" alt = "Presentation drawing" / >
2010-08-23 12:26:48 +00:00
< div id = "titre" >
< h1 >
How to handle evil IE
< / h1 >
< / div >
< div class = "flush" > < / div >
< div class = "flush" > < / div >
< div id = "afterheader" >
< div class = "corps" >
< p > For developer IE is a nightmare. This is why, I use a method to disable my standard CSS and enable a IE only CSS. I use jQuery to accomplish that.< / p >
< div > < pre class = "twilight" >
< span class = "Keyword" > $< / span > (< span class = "Support" > document< / span > ).ready( < span class = "Storage" > function< / span > () {
< span class = "Keyword" > if< / span > (< span class = "Keyword" > $< / span > .browser[< span class = "String" > < span class = "String" > " < / span > msie< span class = "String" > " < / span > < / span > ]) {
< span class = "Comment" > < span class = "Comment" > //< / span > include the ie.js file< / span >
< span class = "Keyword" > $< / span > (< span class = "String" > < span class = "String" > '< / span > head< span class = "String" > '< / span > < / span > ).append(< span class = "String" > < span class = "String" > '< / span > < script type=" text/javascript" src=" /js/ie.js" > < /scr< span class = "String" > '< / span > < / span > < span class = "Keyword" > +< / span > < span class = "String" > < span class = "String" > '< / span > ipt> < span class = "String" > '< / span > < / span > );
}
});
< / pre > < / div >
< div > < div class = "code" > < div class = "file" > < a href = "/Scratch/en/blog/2009-10-30-How-to-handle-evil-IE/code/ie.js" > ➥ ie.js < / a > < / div > < div class = "withfile" >
< pre class = "twilight" >
< span class = "Comment" > < span class = "Comment" > //< / span > Remove all CSS I don't want to use on IE< / span >
< span class = "Keyword" > $< / span > (< span class = "String" > < span class = "String" > '< / span > link[rel=stylesheet]< span class = "String" > '< / span > < / span > ).each(< span class = "Storage" > function< / span > (i)
{
< span class = "Keyword" > if< / span > (< span class = "Variable" > this< / span > .< span class = "SupportFunction" > getAttribute< / span > (< span class = "String" > < span class = "String" > '< / span > href< span class = "String" > '< / span > < / span > ) < span class = "Keyword" > ==< / span > < span class = "String" > < span class = "String" > '< / span > /css/layout.css< span class = "String" > '< / span > < / span > )
< span class = "Variable" > this< / span > .< span class = "SupportConstant" > disabled< / span > < span class = "Keyword" > =< / span > < span class = "Constant" > true< / span > ;
< span class = "Keyword" > if< / span > (< span class = "Variable" > this< / span > .< span class = "SupportFunction" > getAttribute< / span > (< span class = "String" > < span class = "String" > '< / span > href< span class = "String" > '< / span > < / span > ) < span class = "Keyword" > ==< / span > < span class = "String" > < span class = "String" > '< / span > /css/shadows.css< span class = "String" > '< / span > < / span > )
< span class = "Variable" > this< / span > .< span class = "SupportConstant" > disabled< / span > < span class = "Keyword" > =< / span > < span class = "Constant" > true< / span > ;
< span class = "Keyword" > if< / span > (< span class = "Variable" > this< / span > .< span class = "SupportFunction" > getAttribute< / span > (< span class = "String" > < span class = "String" > '< / span > href< span class = "String" > '< / span > < / span > ) < span class = "Keyword" > ==< / span > < span class = "String" > < span class = "String" > '< / span > /css/gen.css< span class = "String" > '< / span > < / span > )
< span class = "Variable" > this< / span > .< span class = "SupportConstant" > disabled< / span > < span class = "Keyword" > =< / span > < span class = "Constant" > true< / span > ;
}) ;
< span class = "Comment" > < span class = "Comment" > //< / span > Append the CSS for IE only< / span >
< span class = "Keyword" > $< / span > (< span class = "String" > < span class = "String" > '< / span > head< span class = "String" > '< / span > < / span > ).append(< span class = "String" > < span class = "String" > '< / span > < link rel=" stylesheet" type=" text/css" href=" /css/ie.css" /> < span class = "String" > '< / span > < / span > );
< span class = "Comment" > < span class = "Comment" > //< / span > I also add a message on top of the page< / span >
< span class = "Keyword" > $< / span > (< span class = "String" > < span class = "String" > '< / span > body< span class = "String" > '< / span > < / span > ).prepend(< span class = "String" > < span class = "String" > '< / span > < div id=" iemessage" > < p> < span class=" fr" > < em> Avec < a href=" http://www.firefox.com" > Firefox < /a> et < a href=" http://www.apple.com/safari" > Safari< /a> cette page est bien plus jolie !< /em> < /span> < span class=" en" > < em> This page is far nicer with < a href=" http://www.firefox.com" > Firefox < /a> and < a href=" http://www.apple.com/safari" > Safari< /a> !< /em> < /span> < /p> .< /div> < span class = "String" > '< / span > < / span > );
< / pre >
< / div > < / div > < / div >
< p > That’ s it.< / p >
< / div >
< div id = "choixrss" >
< a id = "rss" href = "http://feeds.feedburner.com/yannespositocomen" >
Subscribe
< / a >
< / div >
< script type = "text/javascript" >
$(document).ready(function(){
$('#comment').hide();
$('#clickcomment').click(showComments);
});
function showComments() {
$('#comment').show();
$('#clickcomment').fadeOut();
}
document.write('< div id = "clickcomment" > Comments< / div > ');
< / script >
< div class = "flush" > < / div >
< div class = "corps" id = "comment" >
< h2 class = "first" > comments< / h2 >
< noscript >
Vous devez activer javascript pour commenter.
< / noscript >
< script type = "text/javascript" >
var idcomments_acct = 'a307f0044511ff1b5cfca573fc0a52e7';
var idcomments_post_id = '/Scratch/en/blog/2009-10-30-How-to-handle-evil-IE/';
var idcomments_post_url = 'http://yannesposito.com/Scratch/en/blog/2009-10-30-How-to-handle-evil-IE/';
< / script >
< span id = "IDCommentsPostTitle" style = "display:none" > < / span >
< script type = 'text/javascript' src = '/Scratch/js/genericCommentWrapperV2.js' > < / script >
< / div >
< div id = "entete" class = "corps_spaced" >
< div id = "liens" >
< ul > < li > < a href = "/Scratch/en/" > Homepage< / a > < / li >
< li > < a href = "/Scratch/en/blog/" > Blog< / a > < / li >
2010-09-30 13:01:14 +00:00
< li > < a href = "/Scratch/en/softwares/" > Softwares< / a > < / li >
2010-09-28 01:00:51 +00:00
< li > < a href = "/Scratch/en/about/" > About< / a > < / li > < / ul >
2010-08-23 12:26:48 +00:00
< / div >
< div class = "flush" > < / div >
< hr / >
< div id = "next_before_articles" >
< div id = "previous_articles" >
previous entries
< div class = "previous_article" >
2010-09-28 15:10:12 +00:00
< a href = "/Scratch/en/blog/2009-10-28-custom-website-synchronisation-with-mobileme--2-/" > < span class = "nicer" > «< / span > custom website synchronisation with mobileme (2)< / a >
2010-08-23 12:26:48 +00:00
< / div >
< div class = "previous_article" >
2010-09-28 15:10:12 +00:00
< a href = "/Scratch/en/blog/2009-10-Wait-to-hide-a-menu-in-jQuery/" > < span class = "nicer" > «< / span > Menu waiting to hide himself< / a >
2010-08-23 12:26:48 +00:00
< / div >
< div class = "previous_article" >
2010-09-28 15:10:12 +00:00
< a href = "/Scratch/en/blog/2009-10-launch-daemon-from-command-line/" > < span class = "nicer" > «< / span > launch daemon from command line< / a >
2010-08-23 12:26:48 +00:00
< / div >
< / div >
< div id = "next_articles" >
next entries
< div class = "next_article" >
2010-09-28 15:10:12 +00:00
< a href = "/Scratch/en/blog/2009-11-12-Git-for-n00b/" > Git for n00b < span class = "nicer" > »< / span > < / a >
2010-08-23 12:26:48 +00:00
< / div >
< div class = "next_article" >
2010-09-28 15:10:12 +00:00
< a href = "/Scratch/en/blog/2009-12-06-iphone-call-filter/" > iphone call filter < span class = "nicer" > »< / span > < / a >
2010-08-23 12:26:48 +00:00
< / div >
< div class = "next_article" >
2010-09-28 15:10:12 +00:00
< a href = "/Scratch/en/blog/2009-12-14-Git-vs--Bzr/" > Git vs. Bzr < span class = "nicer" > »< / span > < / a >
2010-08-23 12:26:48 +00:00
< / div >
< / div >
< div class = "flush" > < / div >
< / div >
< / div >
< div id = "bottom" >
< div >
< a rel = "license" href = "http://creativecommons.org/licenses/by-sa/3.0/" > Copyright ©, Yann Esposito< / a >
< / div >
< div id = "lastmod" >
2010-08-31 13:06:43 +00:00
Created: 10/30/2009
2010-09-02 09:51:46 +00:00
Modified: 05/09/2010
2010-08-23 12:26:48 +00:00
< / div >
< div >
Entirely done with
< a href = "http://www.vim.org" > Vim< / a >
and
< a href = "http://nanoc.stoneship.org" > nanoc< / a >
< / div >
< div >
< a href = "/Scratch/en/validation/" > Validation< / a >
< a href = "http://validator.w3.org/check?uri=referer" > [xhtml] < / a >
.
< a href = "http://jigsaw.w3.org/css-validator/check/referer?profile=css3" > [css] < / a >
.
< a href = "http://validator.w3.org/feed/check.cgi?url=http%3A//yannesposito.com/Scratch/en/blog/feed/feed.xml" > [rss]< / a >
< / div >
< / div >
< div class = "clear" > < / div >
< / div >
< / body >
< / html >