0
votes

Sometimes in my .jsp i use User-Agent in order to define what .css class or attribute to use dependently upon client's browser.

example:

<c:set var="browser" value="${header['User-Agent']}" scope="session"/>

        <c:if test="${(fn:contains(browser,'Safari'))||(fn:contains(browser,'Chrome'))}">
             <c:set var="cellClass" value="cell-nonFF"/>
        </c:if>

        <c:if test="${(fn:contains(browser,'Safri') == false)&&(fn:contains(browser,'MSIE') == false)}">
            <c:set var="cellClass" value="cell-FF"/>
        </c:if>

        <c:if test="${fn:contains(browser,'MSIE')}">
            <c:set var="cellClass" value="cell-IE"/>
        </c:if>

Conditionals are valid for IE only, so for various browsers, I should define User-Agent such a way.

That way work's for now OK. But i suppose that there is another more graceful or stable way, because User-Agent definition for every browser are very mixed and we plan to support mobile browsers further.

Safari 4 detected as: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/528.16 (KHTML, like Gecko) Version/4.0 Safari/528.16
IE 6 detected as::Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; iOpus-I-M; Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1) ; InfoPath.1; .NET CLR 1.1.4322; .NET CLR 2.0.50727)

Is it more stable alternative?

2

2 Answers

1
votes

Try using a library like Jquery to detect the browser, it has the detection baked in and it will make your life much easier by avoiding the wheel being reinvented.

http://docs.jquery.com/$.browser.name

Also something to check out is the Yahoo YUI library, there are a lot of CSS related tools there to help standardize the experience across browsers. http://developer.yahoo.com/yui/reset/

1
votes

Instead of doing the switch in your code (jsp here), you could do it when you read the css file.

You would gain:

  • Only one conditional per page
  • Possibility to implement the switch as a Servlet Filter instead of in the page, so it could be generic to all your pages.

You would have :

  • one css that applies to all browsers
  • one specific css per browser.