Acid3 Test

Acid3 test focuses on technologies used on modern, highly interactive websites characteristic of Web 2.0, such as ECMAScript and DOM Level 2. Controversially, it includes several elements from the CSS2 recommendation that were later removed in CSS2.1 but reintroduced in World Wide Web Consortium(W3C) CSS3 working drafts that have not made it to candidate recommendations yet.

Tool of Choice

 One can handle most of the browser issues by using hacks but hacks are dangerous. Since they are based on non-standard exploits, you can’t predict how they are going to behave in future browsers. The tool of choice for fighting these problems is the conditional Stylesheet and JavaScript. Browsers provide comment tags, to target specific versions, as well as greater-than/less-than stuff for targeting multiple versions at once.

Conditional Stylesheets and JavaScripts

The core idea is based on the method of Conditional Comments found in Internet Explorer, extended to include other browsers, and to move the conditional statements inline with your CSS definitions.

Conditional-CSS isn’t really all that interested in which browser the user using, but rather what is rendering engine the user’s browser utilises. This is why Conditional-CSS uses ‘Gecko’ rather than the well known Firefox as one of it’s browser conditions. Likewise for Safari ‘Webkit’ is used. This allows other browsers using the same rendering engines to receive the same targeted CSS. An exception to this rule is made for IE (rather than using ‘Trident’) since this is what the IE conditional comments use and Trident isn’t particuarly well known. Similarly for Opera, since only the Opera browser uses it’s Presto rendering engine, ‘Opera’ is used.

How to go about it?

1. Choose one of the standard conforming browsers (Acid3 score 100/100) like Chrome 4.0 or Opera 10 to create and test a standard compliant Stylesheets and JavaScripts common for all browsers.
2. Create a separate Stylesheet and Javascripts for each of the browser versions you want to target e.g. IE and Firefox versions..
3. Include the Stylesheets and JavaScripts from step 2 by using conditional comments. This overrides the statements in the common CSS and javaScript file created in step 1.

<!–[if IE]> <style type=”text/css”>@import “IE-override.css”;</style> <![endif]–>

This CSS file is only loaded if the detected browser is IE, otherwise it won’t. You should put this conditional statement into the head of your html file after every other CSS import code. It should be the last in the list, so that it overwrites the main css files:

Now if for example you had a statement in your main.css file: #logo { margin:10px } and it doesn’t work properly in IE, you can add the same statement with a different value in your IE-override.css file: #logo { margin:20px }.

The Conditional Comment Code Examples

The syntax to note is “!” stand for “not”, so !IE means “not IE”. gt means “greater than”, gte means “greater than or equal”, lt means “less than”, lte means “less than or equal.”

Target ALL VERSIONS of IE

<!–[if IE]>

            <link rel=”stylesheet” type=”text/css” href=”all-ie-only.css” />

<![endif]–>

Target everything EXCEPT IE

<!–[if !IE]>

            <link rel=”stylesheet” type=”text/css” href=”not-ie.css” />

<![endif]–>

Target IE 7 ONLY

<!–[if IE 7]>

            <link rel=”stylesheet” type=”text/css” href=”ie7.css”>

<![endif]–>

Target IE 6 ONLY

<!–[if IE 6]>

            <link rel=”stylesheet” type=”text/css” href=”ie6.css” />

<![endif]–>

Target IE 6 and LOWER

<!–[if lt IE 7]>

            <link rel=”stylesheet” type=”text/css” href=”ie6-and-down.css” />

<![endif]–>

<!–[if lte IE 6]>

            <link rel=”stylesheet” type=”text/css” href=”ie6-and-down.css” />

<![endif]–>

Target IE 7 and LOWER

<!–[if lt IE 8]>

            <link rel=”stylesheet” type=”text/css” href=”ie7-and-down.css” />

<![endif]–>

<!–[if lte IE 7]>

            <link rel=”stylesheet” type=”text/css” href=”ie7-and-down.css” />

<![endif]–>

Target IE 8 and LOWER

<!–[if lt IE 9]>

            <link rel=”stylesheet” type=”text/css” href=”ie8-and-down.css” />

<![endif]–>

<!–[if lte IE 8]>

            <link rel=”stylesheet” type=”text/css” href=”ie8-and-down.css” />

<![endif]–>

Target IE 6 and HIGHER

<!–[if gt IE 5.5]>

            <link rel=”stylesheet” type=”text/css” href=”ie6-and-up.css” />

<![endif]–>

<!–[if gte IE 6]>

            <link rel=”stylesheet” type=”text/css” href=”ie6-and-up.css” />

<![endif]–>

Target IE 7 and HIGHER

<!–[if gt IE 6]>

            <link rel=”stylesheet” type=”text/css” href=”ie7-and-up.css” />

<![endif]–>

<!–[if gte IE 7]>

            <link rel=”stylesheet” type=”text/css” href=”ie7-and-up.css” />

<![endif]–>

Target IE 8 and HIGHER

<!–[if gt IE 7]>

            <link rel=”stylesheet” type=”text/css” href=”ie8-and-up.css” />

<![endif]–>

<!–[if gte IE 8]>

            <link rel=”stylesheet” type=”text/css” href=”ie8-and-up.css” />

<![endif]–>

Why use conditional stylesheets?

• You got problems, they need fixin’
• Keeps your code hack-free and valid
• Keeps your main stylesheet clean
• Perfectly acceptable technique, sanctioned by Microsoft

1.    Create a stylesheet and javascript common for all browser, without using any hacks to work around rendering problems in MSIE
2.    Create a stylesheet and javascripts common for all versions of MSIE.
3.    Create a separate stylesheet and javascripts for each of the MSIE versions you want to target.
4.    Include the stylesheets and javascripts from 2 and 3 by using conditional comments.

One good example can be found at http://www.gpuri.com

use UNIX sed command and inject the two scripts provided for your

website by google analytics. Below is the code. This code replaces

</body> tag with the scripts and </body> tag.

find ./ -type f -iname “*.htm” | xargs sed -i ’s/<\/body>/<script

type=\”text\/javascript\”> var gaJsHost = \(\(”https:” ==

document.location.protocol\) ? “https:\/\/ssl.” : “http:\/\/www.”\);

document.write\(unescape\(”%3Cscript src=’\”” + gaJsHost +

“google-analytics.com\/ga.js’\” type=’\”text\/javascript

‘\”%3E%3C\/script%3E”\)\);

 <\/script><script type=”text\/javascript”> try { var pageTracker

 = _gat._getTracker\(”UA-XXXXXXX-X”\); pageTracker._trackPageview\(\);

 } catch\(err\) {}<\/script> <\/body>/g’

JBoss team have designed their own Service Bus: JBoss Enterprise Service Bus  is a robust SOA solution designed since the release 4.2 with build-in fail-over, load balancing and delayed message redelivery. JBossESB allows you to distribute service instances across many nodes. Each node can be a virtual or physical machine running one or more instances of JBossESB.

Here’s also the details and a write-up of steps of steps, which I’ve used for the setup.