[WSG] A simple IE and JS detection method?
Hi All,
I was wondering if you had a little time to comment on the following technique?
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd;
!--[if IE]
![if gt IE 8]html lang=en-gb class=gtIE8 xml:lang=en-gb
xmlns=http://www.w3.org/1999/xhtml;![endif]
![if IE 8]html lang=en-gb class=IE8 xml:lang=en-gb
xmlns=http://www.w3.org/1999/xhtml;![endif]
![if IE 7]html lang=en-gb class=IE7 xml:lang=en-gb
xmlns=http://www.w3.org/1999/xhtml;![endif]
![if IE 6]html lang=en-gb class=IE6 xml:lang=en-gb
xmlns=http://www.w3.org/1999/xhtml;![endif]
![endif]--
!--[if !IE]!--html lang=en-gb class=xIE xml:lang=en-gb
xmlns=http://www.w3.org/1999/xhtml;!--![endif]--
script
type=text/javascript/*![CDATA[*/document.documentElement.className+=
hasJS;/*]]*//script
... yada ...
style type=text/css
body {background:#ccc; color:#000}
.IE8 body {background:#fcc;}
.IE7 body {background:#cfc;}
.IE6 body {background:#ccf;}
.xIE body {background:#fff;}
/style
... yada ...
Not thoroughly tested I admit but it appears reasonable.
The only failure I can see is detecting IEv6 and JS on because:
.IE6.hasJS {background:#f000}
will not work as IE 6 cannot concatenate class names.
What do you think?
Regards,
Mike Foskett
http://websemantics.co.uk/
This is a confidential email. Tesco may monitor and record all emails. The
views expressed in this email are those of the sender and not Tesco.
Tesco Stores Limited
Company Number: 519500
Registered in England
Registered Office: Tesco House, Delamare Road, Cheshunt, Hertfordshire EN8 9SL
VAT Registration Number: GB 220 4302 31
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
Re: [WSG] A simple IE and JS detection method?
Take it you pulled this from HTML5 Boilerplate's latest update. Reading
through Paul Irish's comments on the update (
http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/)
the change makes sense.
On Thu, Oct 28, 2010 at 7:21 AM, Foskett, Mike mike.fosk...@uk.tesco.comwrote:
Hi All,
I was wondering if you had a little time to comment on the following
technique?
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd;
!--[if IE]
![if gt IE 8]html lang=en-gb class=gtIE8 xml:lang=en-gb xmlns=
http://www.w3.org/1999/xhtml;![endif]
![if IE 8]html lang=en-gb class=IE8 xml:lang=en-gb xmlns=
http://www.w3.org/1999/xhtml;![endif]
![if IE 7]html lang=en-gb class=IE7 xml:lang=en-gb xmlns=
http://www.w3.org/1999/xhtml;![endif]
![if IE 6]html lang=en-gb class=IE6 xml:lang=en-gb xmlns=
http://www.w3.org/1999/xhtml;![endif]
![endif]--
!--[if !IE]!--html lang=en-gb class=xIE xml:lang=en-gb xmlns=
http://www.w3.org/1999/xhtml;!--![endif]--
script
type=text/javascript/*![CDATA[*/document.documentElement.className+=
hasJS;/*]]*//script
... yada ...
style type=text/css
body {background:#ccc; color:#000}
.IE8 body {background:#fcc;}
.IE7 body {background:#cfc;}
.IE6 body {background:#ccf;}
.xIE body {background:#fff;}
/style
... yada ...
Not thoroughly tested I admit but it appears reasonable.
The only failure I can see is detecting IEv6 and JS on because:
.IE6.hasJS {background:#f000}
will not work as IE 6 cannot concatenate class names.
What do you think?
Regards,
Mike Foskett
http://websemantics.co.uk/
--
This is a confidential email. Tesco may monitor and record all emails. The
views expressed in this email are those of the sender and not Tesco.
Tesco Stores Limited
Company Number: 519500
Registered in England
Registered Office: Tesco House, Delamare Road, Cheshunt, Hertfordshire EN8
9SL
VAT Registration Number: GB 220 4302 31
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
Re: [WSG] A simple IE and JS detection method?
Mike,
You might find it easier to use the Modernizr script to detect
JavaScript (amongst other tests it runs to see the capabilities of a
browser) and then apply a similar method to what you have described
here, but on the body tag instead.
!DOCTYPE html
html lang=en dir=ltr class=no-js
head
title!-- Enter a title here --/title
meta charset=utf-8
!--[if ! lt IE 6]!--
link rel=stylesheet href=/styles/screen.css media=screen,
projection /
link rel=stylesheet href=/styles/print.css media=print /
!--![endif]--
!--[if gte IE 6 ]
link rel=stylesheet href=/styles/ie.css media=screen, projection /
![endif]--
script src=/scripts/modernizr-1.5.min.js/script
/head
!--[if lt IE 6 ] body class=iex ![endif]--
!--[if IE 6 ] body class=ie6 ![endif]--
!--[if IE 7 ] body class=ie7 ![endif]--
!--[if IE 8 ] body class=ie8 ![endif]--
!--[if IE 9 ] body class=ie9 ![endif]--
!--[if (gt IE 9)|!(IE)]!--
body
!--![endif]--
Modernizr replaces the class of no-js in the HTML tag, with js when
JavaScript is present. This combined with the conditional statements on
the BODY tag will couple to give you what you require.
http://www.modernizr.com/
Kevin Rapley
DigiKev
0772 345 7862
digikev.co.uk http://digikev.co.uk
On 28/10/2010 14:21, Foskett, Mike wrote:
Hi All,
I was wondering if you had a little time to comment on the following
technique?
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd;
!--[if IE]
![if gt IE 8]html lang=en-gb class=gtIE8 xml:lang=en-gb
xmlns=http://www.w3.org/1999/xhtml;![endif]
![if IE 8]html lang=en-gb class=IE8 xml:lang=en-gb
xmlns=http://www.w3.org/1999/xhtml;![endif]
![if IE 7]html lang=en-gb class=IE7 xml:lang=en-gb
xmlns=http://www.w3.org/1999/xhtml;![endif]
![if IE 6]html lang=en-gb class=IE6 xml:lang=en-gb
xmlns=http://www.w3.org/1999/xhtml;![endif]
![endif]--
!--[if !IE]!--html lang=en-gb class=xIE xml:lang=en-gb
xmlns=http://www.w3.org/1999/xhtml;!--![endif]--
script
type=text/javascript/*![CDATA[*/document.documentElement.className+=
hasJS;/*]]*//script
... yada ...
style type=text/css
body {background:#ccc; color:#000}
.IE8 body {background:#fcc;}
.IE7 body {background:#cfc;}
.IE6 body {background:#ccf;}
.xIE body {background:#fff;}
/style
... yada ...
Not thoroughly tested I admit but it appears reasonable.
The only failure I can see is detecting IEv6 and JS on because:
.IE6.hasJS {background:#f000}
will not work as IE 6 cannot concatenate class names.
What do you think?
Regards,
Mike Foskett
http://websemantics.co.uk/
This is a confidential email. Tesco may monitor and record all emails.
The views expressed in this email are those of the sender and not Tesco.
Tesco Stores Limited
Company Number: 519500
Registered in England
Registered Office: Tesco House, Delamare Road, Cheshunt, Hertfordshire
EN8 9SL
VAT Registration Number: GB 220 4302 31
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
RE: [WSG] A simple IE and JS detection method?
Mike,
I like it.
You have styled the body element as an example. Would you need to
style every element in the document using this technique, or would
inheritance deal with the other elements? Sorry if the answer is obvious
but I'm not a JavaScript guru ...
Regards,
Grant Bailey
-Original Message-
From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org]
On Behalf Of Foskett, Mike
Sent: Friday, 29 October 2010 12:22 AM
To: wsg@webstandardsgroup.org
Subject: [WSG] A simple IE and JS detection method?
Hi All,
I was wondering if you had a little time to comment on the following
technique?
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd;
!--[if IE]
![if gt IE 8]html lang=en-gb class=gtIE8 xml:lang=en-gb
xmlns=http://www.w3.org/1999/xhtml;![endif]
![if IE 8]html lang=en-gb class=IE8 xml:lang=en-gb
xmlns=http://www.w3.org/1999/xhtml;![endif]
![if IE 7]html lang=en-gb class=IE7 xml:lang=en-gb
xmlns=http://www.w3.org/1999/xhtml;![endif]
![if IE 6]html lang=en-gb class=IE6 xml:lang=en-gb
xmlns=http://www.w3.org/1999/xhtml;![endif]
![endif]--
!--[if !IE]!--html lang=en-gb class=xIE xml:lang=en-gb
xmlns=http://www.w3.org/1999/xhtml;!--![endif]--
script
type=text/javascript/*![CDATA[*/document.documentElement.className+=
hasJS;/*]]*//script
... yada ...
style type=text/css
body {background:#ccc; color:#000}
.IE8 body {background:#fcc;}
.IE7 body {background:#cfc;}
.IE6 body {background:#ccf;}
.xIE body {background:#fff;}
/style
... yada ...
Not thoroughly tested I admit but it appears reasonable.
The only failure I can see is detecting IEv6 and JS on because:
.IE6.hasJS {background:#f000}
will not work as IE 6 cannot concatenate class names.
What do you think?
Regards,
Mike Foskett
http://websemantics.co.uk/
_
This is a confidential email. Tesco may monitor and record all emails.
The views expressed in this email are those of the sender and not Tesco.
Tesco Stores Limited
Company Number: 519500
Registered in England
Registered Office: Tesco House, Delamare Road, Cheshunt, Hertfordshire
EN8 9SL
VAT Registration Number: GB 220 4302 31
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
RE: [WSG] A simple IE and JS detection method?
Hi Ty,
It must've come from that article, it looks vaguely familiar.
Personally I saw it as a furtherance to the hasJS technique.
My perspective was to remove separate style sheets, and obscure hacks, purely
to simplify editing exactly as Paul Irish's article states.
Without using * html and *+html which obfuscates the meaning in the style sheet.
Since querying here I've had difficulty validating code with a class on the
html element.
Am I incorrect in the belief that it should actually be valid?
Mike
From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On
Behalf Of Ty Hatch
Sent: 28 October 2010 16:15
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] A simple IE and JS detection method?
Take it you pulled this from HTML5 Boilerplate's latest update. Reading through
Paul Irish's comments on the update
(http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/)
the change makes sense.
On Thu, Oct 28, 2010 at 7:21 AM, Foskett, Mike
mike.fosk...@uk.tesco.commailto:mike.fosk...@uk.tesco.com wrote:
Hi All,
I was wondering if you had a little time to comment on the following technique?
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd;
!--[if IE]
![if gt IE 8]html lang=en-gb class=gtIE8 xml:lang=en-gb
xmlns=http://www.w3.org/1999/xhtml;![endif]
![if IE 8]html lang=en-gb class=IE8 xml:lang=en-gb
xmlns=http://www.w3.org/1999/xhtml;![endif]
![if IE 7]html lang=en-gb class=IE7 xml:lang=en-gb
xmlns=http://www.w3.org/1999/xhtml;![endif]
![if IE 6]html lang=en-gb class=IE6 xml:lang=en-gb
xmlns=http://www.w3.org/1999/xhtml;![endif]
![endif]--
!--[if !IE]!--html lang=en-gb class=xIE xml:lang=en-gb
xmlns=http://www.w3.org/1999/xhtml;!--![endif]--
script
type=text/javascript/*![CDATA[*/document.documentElement.className+=
hasJS;/*]]*//script
... yada ...
style type=text/css
body {background:#ccc; color:#000}
.IE8 body {background:#fcc;}
.IE7 body {background:#cfc;}
.IE6 body {background:#ccf;}
.xIE body {background:#fff;}
/style
... yada ...
Not thoroughly tested I admit but it appears reasonable.
The only failure I can see is detecting IEv6 and JS on because:
.IE6.hasJS {background:#f000}
will not work as IE 6 cannot concatenate class names.
What do you think?
Regards,
Mike Foskett
http://websemantics.co.uk/
This is a confidential email. Tesco may monitor and record all emails. The
views expressed in this email are those of the sender and not Tesco.
Tesco Stores Limited
Company Number: 519500
Registered in England
Registered Office: Tesco House, Delamare Road, Cheshunt, Hertfordshire EN8 9SL
VAT Registration Number: GB 220 4302 31
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.orgmailto:memberh...@webstandardsgroup.org
***
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
Re: [WSG] A simple IE and JS detection method?
On 10/28/10 9:31 AM, Foskett, Mike wrote: Since querying here I've had difficulty validating code with a class on the html element. Am I incorrect in the belief that it should actually be valid? Yes, you're incorrect. :-) Which could have been quickly answered by reading the recommendation. Hint :-) -- Hassan Schroeder - has...@webtuitive.com webtuitive design === (+1) 408-621-3445 === http://webtuitive.com twitter: @hassan dream. code. *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] A simple IE and JS detection method?
I'll stick my neck out and say... dont do it for the CSS bit... specifically, you should be asking - What is the point of adding a specific class to html/body for a specific browser? In particular, using this technique discourages the whole graceful degradation thing. And it adds complexity to the markup too, which doesn't necessarily help your brain. Its an idea which can be used, but that doesn't mean all ideas are good ideas... Somewhat related, given the revelation that DOCTYPE html does the right thing, I tend to drop the whole strict / xmlns stuff too. cheers, Mathew Robertson *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] A simple IE and JS detection method?
On 10/28/10 5:25 PM, Mathew Robertson wrote: I'll stick my neck out and say... dont do it for the CSS bit... specifically, you should be asking - What is the point of adding a specific class to html/body for a specific browser? In particular, using this technique discourages the whole graceful degradation thing. And it adds complexity to the markup too, which doesn't necessarily help your brain. Its an idea which can be used, but that doesn't mean all ideas are good ideas... Okay. A specific scenario: I use RGBa backgrounds quite a lot. IE prior to v.9 supports RGBa backgrounds via its gradient filter. How, without using conditional comments at all, do I target IE 6,7, and 8, bearing in mind that the solid background color I give very old browsers must be removed from these versions of IE? IMHO, adding classes to the HTML tag this way is far cleaner than using a number of IE-only style sheets, and the complexity all those conditional comments add to the markup as well... Cordially, David -- *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] A simple IE and JS detection method?
It must've come from that article, it looks vaguely familiar. Personally I saw it as a furtherance to the hasJS technique. My perspective was to remove separate style sheets, and obscure hacks, purely to simplify editing exactly as Paul Irish's article states. Without using * html and *+html which obfuscates the meaning in the style sheet. Since querying here I've had difficulty validating code with a class on the html element. Am I incorrect in the belief that it should actually be valid? It amazes me to see how far people are willing to go to have their styles sheets validate. Using hacks like this one goes against the separation of the three layers. It is using markup for presentation, it is no better than using things like p/p or brbrbr. Plus, it messes up with the cascade as the rules are more specific. What's wrong with the *property and _property hack? These are extremely reliable, they do not increase specificity, they facilitate maintenance because the styling for IE versions is where one would expect it to be (in the same rule), and it does not create extra HTTP request (IE styles sheets)... As a side note, an ID on HTML passes validation and I believe using the HTML5 doctype allows to use CLASS on the HTML element. -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
