The notorius "Second Acid Test". Left-to-right: Mozilla Firefox 2.0, Microsoft Internet Explorer 7, any browser using "Monte Carlo CSS"

Abstract

CSS or Cascading Style Sheets are probably the most widely used means of styling web pages. However, CSS suffers from the well known problem of not rendering consistently across browsers. While various methods exist to overcome this problem (e.g. CSS-hacks or conditional comments), writing CSS can still be a very time-consuming process. In this paper, I introduce the Monte Carlo method for cross-browser CSS which adresses this issue using a well-known concept frequently used in computer-science.

Introduction

Styling is important to modern web-development as it provides the user with significant visual cues, aiding him or her to understand the semantics of a given web page. However, while CSS as a web standard is well established, browser manufacturers have yet to find a coherent interpretation of that standard. Browsers nowadays may differ in their interpretation of the CSS box-model and other integral parts of the standard which makes creating pixel-perfect layouts (i.e. layouts that look exactly the same on all browsers) virtually impossible. An experienced web-developer will be well aware of this fact and should therefore not strive for perfection on the pixel-level but for a look that the user will accept as "correct" even if it is incosistent between one browser and another.

Measuring visual correctness

Visual correctness is not an exact factor but a measure of human perception. An HTML page styled with CSS may appear to be visually correct when in reality its far from it. For us to be able to compare the visual correctness produced by the method presented in this paper to other approaches it is however crucial that we formalize this measure. For that matter, I will now explain how we can determine the "relative perceived shittiness" (rPS) of an HTML page in correlation with a given web-browser. The rPS is defined as follows:

rPS(α, β) = shit(α) + shit(β) - 42

Where α is the HTML page and β the web browser used to render it. It is now trivial to prove that the visual correctness of an HTML page must be defined as 1 / rPS(α, β).

The Monte Carlo method

So far, we have only determined how to measure the visual correctness of an HTML page rendering but we have yet to explain how to resolve the issues explained in the introduction. We can deal with CSS rendering "quirks" in a variety of ways. Most commonly, we try to resolve these "quirks" by writing CSS rules that are specific to a certain browser and then, using hacks or conditional comments, ensure that these CSS rules are only exposed to the browser in question. This approach however is problematic as it requires us to write different versions of the same CSS rule that need to be maintained independently. It would be much more desirable however, to find one solution that addresses the peculiarities of each individual browser without having to write any browser-specific CSS. Until now, no such solution existed. The Monte Carlo method for cross-browser CSS however can be seen as such a solution. It resolves rendering problems using an approach commonly known as the "Monte Carlo method" in computer-science. The Monte Carlo method can be applied whenever a deterministic solution would either be too computationally intensive or if such a solution does not exist whatsoever. It produces results using random sampling while thereby approximating the desired outcome.

Applying the Monte Carlo method to CSS

To illustrate how the Monte Carlo method may be applied to CSS, let us look at a concrete example. Let us assume that we want to render an HTML page in two different browsers, one of which implements the CSS box-model correctly and one of which does not. The CSS code in this example may look like this:

1  .box {
2      padding: 20px;
3      margin: 40px;
4      width: 130px;
5  }
Clearly, this is a problematic situation that would generally requires us to write two distinctly different pieces of CSS, one for each browser. The relative perceived shittiness in this case and according to the formula presented earlier would obviously be 12.98 - way beyond the acceptable limit of 9.34. Using the Monte Carlo method, we can easily reduce that value to 1.39. Keep in mind however, that the Monte Carlo method is non-determinstic. The rPS can therefore not be given as a single value but as a range of values where each value is associated with a certain probability.Unfortunately, the currently available CSS standards do not support the Monte Carlo method natively (suggestions have been made to the W3C to retrofit the standards to resolve this). This issue is however easily bypassed using just a few lines of server-sided code. In the following example, we will look at how the Monte Carlo method can be implemented in PHP by generating CSS files dynamically and on the fly:

1  <?php header("Content-type: text/css"); ?>
2  .box {
3      padding: <?php echo rand(10, 30); ?>px;
4      margin: <?php echo rand(20, 80); ?>px;
5      width: <?php echo rand(90, 200); ?>px;
6  }
The rPS is now within the range of 1.39 and 400.2. Note that the higher end of that range is actually worse than the original rPS of 12.98.



However, in many cases, the HTML page will render just fine across browsers. Please also note that the Monte Carlo method for cross-browser CSS has been implemented successfully in a wide array of server-sided languages and client-sided implementations have also been tested with some success.

Conclusion

The author believes that with the introduction of "Monte Carlo CSS", cross-browser CSS problems are now finally a thing of the past and if standards organisations like the W3C embrace this new development, we will soon see CSS implementations that support "Monte Carlo" natively.