{"id":487,"date":"2011-12-31T14:00:27","date_gmt":"2011-12-31T14:00:27","guid":{"rendered":"http:\/\/www.sitekickr.com\/blog\/?p=487"},"modified":"2011-12-31T14:00:40","modified_gmt":"2011-12-31T14:00:40","slug":"cross-browser-css-javascript-conditionals","status":"publish","type":"post","link":"https:\/\/www.sitekickr.com\/blog\/cross-browser-css-javascript-conditionals\/","title":{"rendered":"Cross Browser CSS: No JavaScript, No Conditionals"},"content":{"rendered":"

You may or may not be familiar with the various methods of forcing non-compliant browsers to conform to your style needs. JavaScript and Conditional IE statements<\/a> are among the most popular.<\/p>\n

This methods however, are both difficult to maintain across a large site with many different stylesheets.<\/p>\n

I'm presently considering a method which I have not extensively tested, nor considered any negative effects. But, on the surface, it appears to make sense and provide a much cleaner solution than either of the above.<\/p>\n

It relies on your web servers ability to determine the clients web browser. Using ColdFusion as an example, the following gives us the "raw" user agent string.<\/p>\n

<cfoutput>#CGI.HTTP_USER_AGENT#<\/cfoutput>
\n\t<\/code><\/p>\n

If we do just a little string manipulation, we can come up with a less clunky string that we can use a a CSS class.<\/p>\n

<cfset user_agent_class = LCase(IIF(Find("MSIE", CGI.HTTP_USER_AGENT), DE(ListFirst(Replace(ListGetAt(CGI.HTTP_USER_AGENT, 2, ";"), " ", "", "ALL"), ".")), DE(ListFirst(ListLast(CGI.HTTP_USER_AGENT, " "), "\/"))))>
\n\t<\/code><\/p>\n

Keeping in mind that this code will be executed with each page request, my goal is to keep it somewhat simple, even if it doesn't cover every possible browser combination. We're trying to deal differences in browser vendors and major releases only.<\/p>\n

Given the assignment statement above, we can drop this into a class attribute on our body <\/em>tag:<\/p>\n

<body class="<cfoutput>client-#user_agent_class#<\/cfoutput>"><\/code><\/p>\n

Now, we see it coming together! You can now tailor your CSS to a given browser, simply by using the class above, i.e.:<\/p>\n

p { margin-top: 0; }
\n\t.client-msie7 p { margin-top: 1em; }
\n\t<\/code><\/p>\n","protected":false},"excerpt":{"rendered":"

You may or may not be familiar with the various methods of forcing non-compliant browsers to conform to your style needs. JavaScript and Conditional IE…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"amp_status":""},"categories":[34,12],"tags":[154],"_links":{"self":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts\/487"}],"collection":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/comments?post=487"}],"version-history":[{"count":2,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts\/487\/revisions"}],"predecessor-version":[{"id":489,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/posts\/487\/revisions\/489"}],"wp:attachment":[{"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/media?parent=487"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/categories?post=487"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.sitekickr.com\/blog\/wp-json\/wp\/v2\/tags?post=487"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}