rafaelp / css_browser_selector

A very small javascript library that allows you to create browser specific CSS to be merged into your normal classes. No more hacks or mischievous code in your CSS code.
http://rafael.adm.br/css_browser_selector/
626 stars 168 forks source link

Firefox 3.6 showing IE6 #15

Closed sirjonathan closed 12 years ago

sirjonathan commented 12 years ago

I'm running 0.6.1, updated by verbatim - I couldn't find a way to leave an issue on his fork, though, and I am guessing that the issue may affect this version as well. On Firefox 3.6, mac, "ie6" is being added to the body class.

verbatim commented 12 years ago

Please send a link if you have a test page available to view the markup, CSS, JS and and everything else in action, so I can see what may be going on.

sirjonathan commented 12 years ago

I suppose that would be helpful!

http://coolkidz.com/wp/contact

On Sun, May 20, 2012 at 6:42 PM, verbatim < reply@reply.github.com

wrote:

Please send a link if you have a test page available to view the markup, CSS, JS and and everything else in action, so I can see what may be going on.


Reply to this email directly or view it on GitHub:

https://github.com/rafaelp/css_browser_selector/issues/15#issuecomment-5813486

verbatim commented 12 years ago

I gotta start by saying I'm honored that you found my code and wanted to use it. How did you find my script by the way?

I don't know if this is the problem, but start by removing Paul Irish's conditionals, as this is duplication of what css_browser_selector does.

You shouldn't need

refactor to just

"no-js" will be removed by css_browser_selector and replaced with "js" this way, if one of your users turns off all JS, you could present them with CSS for those users. For example, a div that might be hidden for most users, but displayed for only them: .js .thisDiv { display:none; } .no-js .thisDiv { display:block; } and that DIV might warn users: you currently have JS turned off. for a better experience consider turning it back on. or if you can even use css_browser_detector in conjunction with Jquery, as the classes are added to the DOM before jQuery gets started.
verbatim commented 12 years ago

sorry, github rendered the conditional code:

<!-- http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -> <!--[if lt IE 7]> <html lang="en-us" class="ie6"> <![endif]--> <!--[if IE 7]> <html lang="en-us" class="ie7"> <![endif]--> <!--[if IE 8]> <html lang="en-us" class="ie8"> <![endif]--> <!--[if gt IE 8]><!--> <html lang="en-us"> <!--<![endif]-->

verbatim commented 12 years ago

Sorry, don't mean to blather on, but can you also post the rendered HTML you get for mac/ff3.6. when i look at your test page in mac/FF12, I see:

<html class="gecko firefox firefox12 firefox12_0 mac mac10 mac10_6 js orientation_landscape maxw_1440" lang="en-us">

verbatim commented 12 years ago

Were you able to solve the problem?

sirjonathan commented 12 years ago

First off, thank you for the detailed feedback! I found your script while searching for an update to the original, about 2-3 weeks back. I was really happy to see further development and as it has proved very useful!

I went ahead and removed Paul Irish's conditionals - Good catch! For whatever reason, that actually appears to have been the problem! IE6 isn't showing up anymore in the HTML. For your reference, here's the rendered:

<html lang="en-us" class="gecko firefox firefox3 firefox3_6 mac mac10 mac10_7 lang_en lang_en_us js orientation_landscape maxw_1280">
verbatim commented 12 years ago

Again, I'm honored that you liked what I did and wanted to use it.

I actually took over this script from its original creator after he stopped working on it. I found the script myself several years ago and found I couldn't live without it. I use it on EVERY project I do.

I noticed your html tag: <html lang="en-us">

you might want to consider adding a default class="no-js"

<html lang="en" dir="ltr" class="no-js">

that way if you ever need to display information for users with Javascript turned off, you can easily have it already baked into the CSS (a little more detail above)

Good luck with your project.