RE: [WSG] A simple IE and JS detection method?
-Original Message- From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On Behalf Of Thierry Koblentz Sent: 30 October 2010 20:30 To: wsg@webstandardsgroup.org Subject: RE: [WSG] A simple IE and JS detection method? snip On the second pahe I've checked (http://www.projectseven.com/products/menusystems/pmm2/index.htm), I found these: !--[if IE 7] link href=/06_includes/ie7.css rel=stylesheet type=text/css ![endif]-- !--[if IE 6] link href=/06_includes/ie6.css rel=stylesheet type=text/css ![endif]-- !--[if IE 5] link href=/06_includes/ie5.css rel=stylesheet type=text/css ![endif]-- These are three extra HTTP requests. Just so everyone is clear, this is only _one_ extra request, and only for that particular version of IE; No other browser will request any of these, nor will IE8, IE9 or future versions. Regards, Mike Mike Brockington Web Development Consultant This message does not reflect the opinions of any entity other than the author alone. *** 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 David,
How, without using conditional comments at all, do I target IE 6,7, and 8
I was asking how I'd be able to target all three *without* any CCs.
Add an extra script line?
script type=text/javascript/*![CDATA[*/var
isIE=/*...@cc_on!@*/false;document.documentElement.className+=
isIE;/*]]*//script
Not perfect but adequate for most cases.
.gradientBg {...
Sorry, mate. That won't work. All IEs will get the solid background with the
filter image on top. Not what you'd want at all... :(
I'll admit that snippet was untested but you can see a working example here:
http://websemantics.co.uk/online_tools/image_to_data_uri_convertor/
The Browse and Convert image are pure CSS.
Background gradients appear to work fine in IE6+, Firefox and Safari.
Untested in Opera though so please tell me if the button doesn't degrade well.
I considered the methods too clunky for use in production though.
Regards
Mike Foskett
http://websemantics.co.uk/
-Original Message-
From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On
Behalf Of David Hucklesby
Sent: 29 October 2010 16:51
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] A simple IE and JS detection method?
On 10/29/10 2:13 AM, Foskett, Mike wrote:
[...]
David,
How, without using conditional comments at all, do I target IE 6,7,
and 8
From the example:
bg {background: #fff}
.IE6 bg,
.IE7 bg { filter: progid: etc...}
.IE8 bg { -ms-filter: progid: etc}
Precisely. I was asking how I'd be able to target all three *without*
any CCs.
Though I personally for what you're asking I'd do it in one style
rule like this:
.gradientBg {
background:#f1f0f3;
background-image: -webkit-gradient(linear, left top, left bottom,
color-stop(0, #f8f7fa), color-stop(1, #cfcbd8));
background-image: -moz-linear-gradient(rgba(248,247,250, 1) 0%,
rgba(207,203,216, 1) 100%);
filter:
progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFf8f7fa,
endColorstr=#FFcfcbd8);
-ms-filter:
progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFf8f7fa,
endColorstr=#FFcfcbd8));
}
Covers everything you ask plus Firefox, Safari and IE8+.
Sorry, mate. That won't work. All IEs will get the solid background with
the filter image on top. Not what you'd want at all... :(
(FWIW - I actually tried this.)
And what about my browser of choice, Opera. Not popular in the US or UK,
I know, but has an equal presence with Safari and Chrome in Europe, an
even bigger presence in other parts of the world, and a major browser on
small devices like phones. RGBa() has my money...
Cordially,
David
--
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
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?
Foskett, Mike mike.fosk...@uk.tesco.com wrote:
Hi David,
How, without using conditional comments at all, do I target IE 6,7, and 8
I was asking how I'd be able to target all three *without* any CCs.
Add an extra script line?
script type=text/javascript/*![CDATA[*/var
isIE=/*...@cc_on!@*/false;document.documentElement.className+=
isIE;/*]]*//script
Not perfect but adequate for most cases.
.gradientBg {...
Sorry, mate. That won't work. All IEs will get the solid background with the
filter image on top. Not what you'd want at all... :(
I'll admit that snippet was untested but you can see a working example here:
http://websemantics.co.uk/online_tools/image_to_data_uri_convertor/
The Browse and Convert image are pure CSS.
Background gradients appear to work fine in IE6+, Firefox and Safari.
Untested in Opera though so please tell me if the button doesn't degrade well.
I considered the methods too clunky for use in production though.
Regards
Mike Foskett
http://websemantics.co.uk/
-Original Message-
From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On
Behalf Of David Hucklesby
Sent: 29 October 2010 16:51
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] A simple IE and JS detection method?
On 10/29/10 2:13 AM, Foskett, Mike wrote:
[...]
David,
How, without using conditional comments at all, do I target IE 6,7,
and 8
From the example:
bg {background: #fff}
.IE6 bg,
.IE7 bg { filter: progid: etc...}
.IE8 bg { -ms-filter: progid: etc}
Precisely. I was asking how I'd be able to target all three *without*
any CCs.
Though I personally for what you're asking I'd do it in one style
rule like this:
.gradientBg {
background:#f1f0f3;
background-image: -webkit-gradient(linear, left top, left bottom,
color-stop(0, #f8f7fa), color-stop(1, #cfcbd8));
background-image: -moz-linear-gradient(rgba(248,247,250, 1) 0%,
rgba(207,203,216, 1) 100%);
filter:
progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFf8f7fa,
endColorstr=#FFcfcbd8);
-ms-filter:
progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFf8f7fa,
endColorstr=#FFcfcbd8));
}
Covers everything you ask plus Firefox, Safari and IE8+.
Sorry, mate. That won't work. All IEs will get the solid background with
the filter image on top. Not what you'd want at all... :(
(FWIW - I actually tried this.)
And what about my browser of choice, Opera. Not popular in the US or UK,
I know, but has an equal presence with Safari and Chrome in Europe, an
even bigger presence in other parts of the world, and a major browser on
small devices like phones. RGBa() has my money...
Cordially,
David
--
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
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?
snip On the second pahe I've checked (http://www.projectseven.com/products/menusystems/pmm2/index.htm), I found these: !--[if IE 7] link href=/06_includes/ie7.css rel=stylesheet type=text/css ![endif]-- !--[if IE 6] link href=/06_includes/ie6.css rel=stylesheet type=text/css ![endif]-- !--[if IE 5] link href=/06_includes/ie5.css rel=stylesheet type=text/css ![endif]-- These are three extra HTTP requests. Just so everyone is clear, this is only _one_ extra request, and only for that particular version of IE; No other browser will request any of these, nor will IE8, IE9 or future versions. Yes, *one* extra request for IE browsers (lt 8). And authors can't combo these files (concatenate and minified them with other sheets). One thing *all browsers* get though is the *extra markup* which - unlike rules in styles sheets - is not cached. -- 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 ***
Re: [WSG] A simple IE and JS detection method?
On 11/1/10 3:15 AM, Foskett, Mike wrote:
Hi David,
How, without using conditional comments at all, do I target IE
6,7, and 8
I was asking how I'd be able to target all three *without* any
CCs.
Add an extra script line?
script type=text/javascript/*![CDATA[*/var
isIE=/*...@cc_on!@*/false;document.documentElement.className+=
isIE;/*]]*//script
Not perfect but adequate for most cases.
Nice. But hardly more clear for future CSS coders than CCs, especially
if they don't know JavaScript?
.gradientBg {...
Sorry, mate. That won't work. All IEs will get the solid
background with the filter image on top. Not what you'd want at
all... :(
I'll admit that snippet was untested but you can see a working
example here:
http://websemantics.co.uk/online_tools/image_to_data_uri_convertor/
The Browse and Convert image are pure CSS. Background gradients
appear to work fine in IE6+, Firefox and Safari. Untested in Opera
though so please tell me if the button doesn't degrade well.
I considered the methods too clunky for use in production though.
Not quite so nice in Opera, but good. Unfortunately I was not asking
about gradients--my question involved emulating RGBa colored backgrounds
in Internet Explorer... :\
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?
How, without using conditional comments at all, do I target IE 6,7, and 8 I was asking how I'd be able to target all three *without* any CCs. Using the basic filters you could go this route: http://tjkdesign.com/lab/ie-filters.asp For version 9+, nothing's sure ;-) -- 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 ***
Re: [WSG] A simple IE and JS detection method?
On 02.11.2010 04:48, Thierry Koblentz wrote: Using the basic filters you could go this route: http://tjkdesign.com/lab/ie-filters.asp ...which are similar to those I presented earlier ... without all the safeguarding and wrapping i use to keep uninformed people from using such hacks all over the place :-) For version 9+, nothing's sure ;-) That's for sure, which is why I haven't bothered to test hacks for it yet. regards Georg *** 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/29/10 3:22 PM, G.Sørtun wrote:
On 29.10.2010 23:33, David Hucklesby wrote:
Perhaps you know of a browser-safe filter for IE8?
Don't know about safe, but maybe you can find what you need here...
http://www.gunlaug.no/contents/styles/target-browser.css
Thank you, Georg. Your valuable comments in that file actually convinced
me to stay with the Paul Irish CCs method. It just seems safer, as
well as relatively easy to understand. After all, this:
.ie8 .hacked-element {...}
seems to me clearer than
@media all {
html:lang(en) body .hacked-element {...}
}
:)
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?
On 10/30/2010 11:58 AM, David Hucklesby wrote:
On 10/29/10 3:22 PM, G.Sørtun wrote:
On 29.10.2010 23:33, David Hucklesby wrote:
Perhaps you know of a browser-safe filter for IE8?
Don't know about safe, but maybe you can find what you need here...
http://www.gunlaug.no/contents/styles/target-browser.css
Thank you, Georg. Your valuable comments in that file actually convinced
me to stay with the Paul Irish CCs method. It just seems safer, as
well as relatively easy to understand. After all, this:
.ie8 .hacked-element {...}
seems to me clearer than
@media all {
html:lang(en) body .hacked-element {...}
}
:)
Indeed it is. There is nothing wrong about using CCs - absolutely
nothing. They have been a marvelous solution medium for handling
Microsoft browser bugs for years. People who obsess against their use
are usually just grappling to find another obtuse way to add more
complexity to CSS. Perhaps it's therapeutic :-)
--
Al Sparber - PVII
http://www.projectseven.com
Dreamweaver Menus | Galleries | Widgets
http://www.projectseven.com/go/hgm
The Ultimate Web 2.0 Carousel
***
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?
Thank you, Georg. Your valuable comments in that file actually
convinced
me to stay with the Paul Irish CCs method. It just seems safer, as
well as relatively easy to understand. After all, this:
.ie8 .hacked-element {...}
seems to me clearer than
@media all {
html:lang(en) body .hacked-element {...}
}
:)
Indeed it is. There is nothing wrong about using CCs - absolutely
nothing. They have been a marvelous solution medium for handling
Microsoft browser bugs for years. People who obsess against their use
are usually just grappling to find another obtuse way to add more
complexity to CSS. Perhaps it's therapeutic :-)
Add more complexity? Really? I can always remember the syntax for the two or
three CSS filters I use, while I'm never 100% sure how to properly write
CCs.
But let's take a concrete example. http://projectseven.com contains this:
!--[if IE 6]
style
.p7TTMcnt {zoom: 1;}
.p7TTMcall {display: none !important;}
/style
![endif]--
Instead of this CC, the styles sheet could include these two simple
declarations in the appropriate rules:
_zoom:1;
and
_display: none !important;
I'd say this approach is less bytes and better for maintenance. Imho, it's a
no brainer unless you are the kind who obsess about validation :)
On the second pahe I've checked
(http://www.projectseven.com/products/menusystems/pmm2/index.htm), I found
these:
!--[if IE 7]
link href=/06_includes/ie7.css rel=stylesheet type=text/css
![endif]--
!--[if IE 6]
link href=/06_includes/ie6.css rel=stylesheet type=text/css
![endif]--
!--[if IE 5]
link href=/06_includes/ie5.css rel=stylesheet type=text/css
![endif]--
These are three extra HTTP requests. Even if these files contain no more
than two rules each (sic):
--
div.prewrap {overflow-x:scroll;overflow-y:visible;}
pre {font-size: .9em;}
--
#mainbox, #mainbox #maincontent #datatable a {height: 1%;}
div.prewrap {overflow: auto !important;}
pre {font-size: .9em;}
--
body {text-align: center;}
#masthead, #layoutwrapper, #footer {text-align: left;}
--
Since they target IE 5, 6, and 7. Everything could be taken care of via CSS
filters. Keeping everything in the styles sheet rather than spreading rules
across four different files and adding expensive HTTP requests.
David's use of a CC for IE8 is legitimate, because there is not much better
solution; but imho, using CCs as the primary tool for styling across
browsers is plain wrong.
I think using CCs for styling is like using table for layout. We should use
such techniques when we have no other/better choice.
--
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
***
Re: [WSG] A simple IE and JS detection method?
On 10/30/2010 3:29 PM, Thierry Koblentz wrote: Add more complexity? Really? I can always remember the syntax for the two or three CSS filters I use, while I'm never 100% sure how to properly write CCs. I simply expressed an opinion, as you did. Readers can choose to agree or disagree with either, as hundreds have done before us :-) That's what makes the field democratic, rather than dictatorial. -- Al Sparber - PVII http://www.projectseven.com Dreamweaver Menus | Galleries | Widgets http://www.projectseven.com/go/hgm The Ultimate Web 2.0 Carousel *** 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 29 October 2010 16:56, David Dorward da...@dorward.me.uk wrote: On 28 Oct 2010, at 17:31, 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? The class http://www.w3.org/TR/html4/struct/global.html#adef-class attribute, in the latest, stable version of HTML is available for All elementshttp://www.w3.org/TR/html4/index/elements.htmlbut BASE http://www.w3.org/TR/html4/struct/links.html#edef-BASE, BASEFONThttp://www.w3.org/TR/html4/present/graphics.html#edef-BASEFONT, HEAD http://www.w3.org/TR/html4/struct/global.html#edef-HEAD, HTMLhttp://www.w3.org/TR/html4/struct/global.html#edef-HTML, META http://www.w3.org/TR/html4/struct/global.html#edef-META, PARAMhttp://www.w3.org/TR/html4/struct/objects.html#edef-PARAM, SCRIPT http://www.w3.org/TR/html4/interact/scripts.html#edef-SCRIPT, STYLE http://www.w3.org/TR/html4/present/styles.html#edef-STYLE, TITLEhttp://www.w3.org/TR/html4/struct/global.html#edef-TITLE http://www.w3.org/TR/html4/struct/global.html#edef-TITLESource: http://www.w3.org/TR/html4/index/attributes.html That isn't necessarily correct. or at least, that is only required for document validation. Browsers support expando elements (aka, you can bind properties into the DOM object), so adding a class attribute is valid... and a browser will CSS-render according to the class attribute, as the spec doesn't say that it shouldn't if being manipulated by the scripting engine. So technically speaking, adding a class to the html element, is perfectly valid. ... whether expando elements need to be spec-validated, after the document has already been parsed, would be a separate discussion... 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 29 October 2010 16:21, David Hucklesby huckle...@gmail.com wrote: 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... Hi David, I didn't actually say dont use conditional comments... I just said dont do it for the html or body tags. The reasoning being to keep the IE-specific logic all in one place (aka: target the element using existing selectors), rather than putting some logic in your main document (ie: adding a class) and some in one or more external files. Whether using distinct stylesheets for each browser or not, is an separate albeit related, discussion on how separation of logic/code/ideas works for a given person. regards, 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 29 Oct 2010, at 09:49, Mathew Robertson wrote: Browsers support expando elements (aka, you can bind properties into the DOM object), so adding a class attribute is valid Valid has a specific technical meaning when dealing with SGML and XML. What browsers supports isn't it. -- David Dorward http://dorward.me.uk *** 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 29 October 2010 20:01, David Dorward da...@dorward.me.uk wrote: On 29 Oct 2010, at 09:49, Mathew Robertson wrote: Browsers support expando elements (aka, you can bind properties into the DOM object), so adding a class attribute is valid Valid has a specific technical meaning when dealing with SGML and XML. What browsers supports isn't it. Once it is parsed into a DOM, it isn't SGML or XML. *** 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?
Thanks David,
My impression that it's valid to add a class to the html element was true.
I know that you should not actually apply a style to it though.
Hi Kurtis,
I think that it's positively Byzantine.
Why do you need or want to do this?
I manage, create and update hundreds of unique content pages.
I must assume that every developer uses Firefox / Firebug combination to build
/ hack / test pages.
Having separate overriding style sheets is a nightmare for maintenance.
A single sheet, or even better in the document head, improves efficiency.
Hi Thierry,
how far people are willing to go to have their styles sheets validate.
Couldn't agree more.
goes against the separation of the three layers
No it doesn't, it's purely presentational.
No better or worse than li class=last
What's wrong with the *property and _property hack?
Nothing at all in my eyes.
I prefer this technique compared to the more correct * html and *+html.
And your argument is sound.
Though increased specificity is the whole point.
David,
How, without using conditional comments at all, do I target IE 6,7, and 8
From the example:
bg {background: #fff}
.IE6 bg,
.IE7 bg { filter: progid: etc...}
.IE8 bg { -ms-filter: progid: etc}
Though I personally for what you're asking I'd do it in one style rule like
this:
.gradientBg {
background:#f1f0f3;
background-image: -webkit-gradient(linear, left top, left bottom,
color-stop(0, #f8f7fa), color-stop(1, #cfcbd8));
background-image: -moz-linear-gradient(rgba(248,247,250, 1) 0%,
rgba(207,203,216, 1) 100%);
filter:
progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFf8f7fa,
endColorstr=#FFcfcbd8);
-ms-filter:
progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFf8f7fa,
endColorstr=#FFcfcbd8));
}
Covers everything you ask plus Firefox, Safari and IE8+.
Mathew,
What is the point of adding a specific class to html/body for a specific
browser?
Purely to tweak presentation for IE6 mostly but yesterday I had to tweak IEv8.
Try and tweak IE8 specifically without the suggested method.
Example:
a.closeLink {display:block; font:bold large/1 arial,sans-serif;
padding:0 0.23em; position:absolute; right:4px; text-decoration:none; top:4px;}
.IE8 a.closeLink {top:14px; right:-4px}
Because the div has a drop shadow, via -ms-filter in IEv8. The placement of the
close link was messed up.
Its an idea which can be used, but that doesn't mean all ideas are good ideas.
Very true hence the posting.
Grant,
Would you need to style every element in the document
Certainly not, just the styles which require tweaking
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?
why did I get this set of 5 replies to this thread 12 times? did any body else get it 12 times, too? cs *** 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/29/10 2:13 AM, Foskett, Mike wrote:
[...]
David,
How, without using conditional comments at all, do I target IE 6,7,
and 8
From the example:
bg {background: #fff}
.IE6 bg,
.IE7 bg { filter: progid: etc...}
.IE8 bg { -ms-filter: progid: etc}
Precisely. I was asking how I'd be able to target all three *without*
any CCs.
Though I personally for what you're asking I'd do it in one style
rule like this:
.gradientBg {
background:#f1f0f3;
background-image: -webkit-gradient(linear, left top, left bottom,
color-stop(0, #f8f7fa), color-stop(1, #cfcbd8));
background-image: -moz-linear-gradient(rgba(248,247,250, 1) 0%,
rgba(207,203,216, 1) 100%);
filter:
progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFf8f7fa,
endColorstr=#FFcfcbd8);
-ms-filter:
progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFf8f7fa,
endColorstr=#FFcfcbd8));
}
Covers everything you ask plus Firefox, Safari and IE8+.
Sorry, mate. That won't work. All IEs will get the solid background with
the filter image on top. Not what you'd want at all... :(
(FWIW - I actually tried this.)
And what about my browser of choice, Opera. Not popular in the US or UK,
I know, but has an equal presence with Safari and Chrome in Europe, an
even bigger presence in other parts of the world, and a major browser on
small devices like phones. RGBa() has my money...
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?
goes against the separation of the three layers No it doesn't, it's purely presentational. No better or worse than li class=last imho, CCs have nothing to do with the presentational layer, they are part of the structural layer and they are junk markup if you ask me :) -- 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 ***
Re: [WSG] A simple IE and JS detection method?
On 10/29/10 12:05 PM, Thierry Koblentz wrote: goes against the separation of the three layers No it doesn't, it's purely presentational. No better or worse thanli class=last imho, CCs have nothing to do with the presentational layer, they are part of the structural layer and they are junk markup if you ask me :) In principle, I entirely agree. But this does not help me target IE6, IE7, and IE8, each of which has its own needs for which I know no other work-around. Yes, I can and do use underscore and star filters. But IE8??? Perhaps you know of a browser-safe filter for IE8? My source for CSS filters is this Wikipedia page... http://en.wikipedia.org/wiki/CSS_filters 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?
On 29.10.2010 23:33, David Hucklesby wrote: Perhaps you know of a browser-safe filter for IE8? Don't know about safe, but maybe you can find what you need here... http://www.gunlaug.no/contents/styles/target-browser.css regards Georg *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
[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 ***
