Search code examples
javascriptjquerybrowser-feature-detection

javascript detect option tag text indent feature or detect type of browser as a fallback

I have a select drop-down that is supposed to represent the hierarchy of pages in a site.

<select id="parent" name="parent">
<option value="">(none)</option>
<option class="inset0" value="home">home</option>
<option class="inset1" value="aboutpage">aboutpage</option>
<option class="inset2" value="about">about</option>
<option class="inset2" value="staff">staff</option>
<option class="inset1" value="news">news</option>
<option class="inset1" value="products">products</option>
<option class="inset2" value="starter">starter</option>
<option class="inset3" value="nesso">nesso</option>
</select>

The construction is made on the backend and styled using css.

option.inset0 {text-indent:0px;}
option.inset1 {text-indent:10px;}
option.inset2 {text-indent:20px;}
option.inset3 {text-indent:30px;}
option.inset4 {text-indent:40px;}
option.inset5 {text-indent:50px;}
option.inset6 {text-indent:60px;}

This is making options of deeper levels display as indented according to the depth each page is in the site hierarchy. However this styling only works in FireFox, and not in Chrome. I know that styling of controls is largely uneven among browsers and operating systems, so I will not go there. Instead I would like to add "-" characters before the text of each option in order to make the hierarchy visible. I only need to do this for Chrome, since I am not supporting IE at all in this project.

The manipulation of the object's text will be done in javascript.

My question is this:

Knowing that browser detection is not recommended and feature detection is favored instead, how can I perform a feature detection for this browser behavior? If this is not possible, is there a quick test that will allow me to know if I'm in Chrome/webkit or Firefox/Gecko?

Solution

  • I can't imagine how one would feature detect this. I thought maybe the computed style may not be set, however a quick test showed it is.

    There is an offical page (http://trac.webkit.org/wiki/DetectingWebKit) about detecting WebKit, but it's 4 years old, and the script simply checks the User Agent string, which is basically the same thing jQuery does for $.browser.webkit.

    As for specifically detecting Chrome, it defines window.chrome (I can't find an official documentation, but see Safe feature-based way for detecting Google Chrome with Javascript?), but I guess the rendering problem will be in all Webkit browsers.