CMMI and CSS Hacks vs Conditional Comments

1 11 2010

For today’s post I thought it might be instructive to enlighten web developers and others with regard to a subject that we rarely if ever think about, namely CMMI. And, I’m going to tie this in with CSS, particularly hacks vs. conditional comments.

If you’re a software engineer, that is the kind who actually went and attained the academic certification to warrant the title (as opposed to the routine business designation that is generously applied to coders), then you will have likely studied the subject of CMMI and know about its levels.  Most web developers would be doing themselves a favor to bone up on this subject, so they might have a better grasp of their work environment and contribute to its   improvement.

So, what is CMMI?  The acronym stands for “Capability Maturity Model Integration.”  I admit the nomenclature is enough to make one yawn, but trust me, the subject itself is interesting.  CMMI is a way of evaluating a business involved with software production as whether the business has reached one of five levels of maturity in terms of the way software is created.  So, we’re talking about process or even the lack thereof!  There is an institute that certifies the maturity levels of business software processes and it’s called SEI (Software Engineering Institute).  You can find out more about the various maturity levels here.

It’s possible that you may have in your career already come across a company that has  a CMMI 1 environment, regardless as to whether the company applied for certification.  Ordinarily being number 1 is great, but CMMI 1 is hardly a compliment since it refers to an environment distinguished by the software process being  ” …unpredictable, poorly controlled, and reactive ( from: http://www.tutorialspoint.com/cmmi/cmmi-maturity-levels.htm ).”  The day to day stress level in a  CMMI 1 environment may be more than one expects.  Of course, you might be the sort of person who feels invigorated by chaos — it gets your creative juices flowing.  But, what about the stress of seeing your masterpiece scrapped when management unexpectedly decides to go to another platform and as a matter of fact, they no longer need your services! Some people can roll with that as long as the remuneration is decent.  For a lot of people though, work is a whole lot more than just a paycheck — it’s who you are and whether you are being valued for what you do.

Recently, I had an in-person interview at some company for one of their divisions.  I was a little taken aback when I was asked about my knowledge of CSS hacks, namely the underscore and the star hacks.  After all, this is 2010 and in a just a few months we’ll be in a new year.  How come after all these years, the company would even entertain the notion of hacking?  Hadn’t its software processes matured to at least a respectable level of 2 after all these years, if not 5 by this time?

A couple of years ago, I entered a master’s program with the intention of becoming a software engineer, which is where I first learned about CMMI. (Later, I elected to become a Zend Certified Engineer since that seemed far more relevant with my PHP-related aspirations.)  Around this time, I remember having a phone screen with same company in which I casually inquired about its CMMI  level.  The voice at the other end told me that it may have a CMMI rating for its European branch but he was unaware of what it actually was.  He did know that the company lacked  CMMI certification in the US.  He explained that it was really unnecessary because the company is not primarily in the business of producing software. Or, perhaps they were concerned about the cost-benefit ratio.

After my recent interview I thought for fun to check and see if the company in the US had ever applied for  CMMI certification and looked at the SEI website that lists this information.  I saw companies foreign and domestic with varying CMMI ratings but the company was missing from the list.  In light of this information, I suppose it made sense that my interviewers  wanted to evaluate how well I could hack the CSS.

Microsoft  recommends that in order to code for its various implementations of  Internet Explorer, that one should refrain from hacks and instead use conditional comments.  That makes sense to me but then I am first and foremost a programmer so maybe I have a bit of bias.  I suspect that even if Microsoft itself had bought this  company, the code on the company’s  website would still be liberally sprinkled with coding hacks following the tried and true saying “Why fix what ain’t broken?”

Let’s look at the star and underscore hacks vs. the conditional comments so you can decide for yourself which way you may prefer.  If only the situation as presented at my in-person interview were in reality as simple as the three gentlemen depicted it!  The interviewers informed me that the asterisk before a CSS attribute like background (as in  *background: pink) would target only IE7 (or below) and that substituting the underscore (as in _background:red) would specifically target IE6.  The exclusion of  a non-alphanumeric prefix (as in background: purple), would catch the attention of  browsers such as FireFox or Safari.  Yeah, if only life were that simple.

The truth is that the more MSIE evolves, the more interesting twists result.  For example, one needs to consider the effects of whether, IE8 is running in quirks mode or standards compliance mode.  Also what will happen if the user attempts to click the Compatibility Mode button?  And, what about the special meta tag that allows you to dictate which kind of rendering the browser should do?  So, we’ve got some interesting possibilities and do we know the outcome of all of them?  How many possibilities?   Compatibity Mode on/off == 2 , quirks or standards compliance mode == 2, and  the meta tag which can be applied to IE 4-9 ==  5.  So, when you do the math, you end up with 2*2*5 or 20 different possibilities.  Do all 20 matter in today’s world? Unlikely, especially since some possibilities may cancel out others.  My point is that web development can get complicated.  If you choose to use the CSS hacks, you do so at your own risk of possibly causing a user to have less than an optimal view of your page.  And, you may make it more difficult for the code to be maintained.

The following are a couple of examples that I have run with MSIE 8 on Windows XP, Service Pack 3.


!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"     "http://www.w3.org/TR/html4/loose.dtd">
<html>

<meta http-equiv="X-UA-Compatible" content="IE=6" />

<head>	<title>Untitled</title>

<style>
#elem {

background: orange; /* normal browsers */

*background: purple; &nbsp;/* targets IE 7 and below */

_background: navy; /* targets IE6 &nbsp;*/

_color: white;

width: 200px;

padding: 20px;

border: 1px solid black;

}

</style>
</head>
<body>
<div id="<span class=">elem">Hacking is fun but is it cool?</div>
</body>
</html>

Run this code in IE8 and you should see a navy background with white text! That’s because  the META TAG’s content value  is targeting IE6.


<!-- browser in quirks mode in IE 5, 7, 8 -->

DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"&nbsp;&nbsp;&nbsp; &nbsp;"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled</title>

<style>

#elem {

background: #33cc33;

width: 200px;

padding: 20px;

}

</style>

<!--[if lt IE 9]>

<style>

#elem {

background: #ff33ff;

}

</style>

endif]-->

</head>

<body>

<div id="elem">The <strong>Conditional Comment</strong> works in MSIE 8 whether browser is in or not in <strong>Compatibility Mode</strong> or <strong>Quirks Mode</strong>.</div>

</body>

</html>

Guess what result this will produce?  Run the code and see how the conditional comment when properly written can provide exactly the result you seek.

Note: the two examples will show colored boxes of differing width, the result of whether quirks mode is in effect!

In conclusion, it is strictly your choice if you wish to hack the CSS or use conditional comments.  I feel that for the ease of maintainability and the assurance of getting a consistent result, doing what Microsoft recommends by using conditional comments for the different versions of its browser, makes sense even if it’s not always the easiest or fastest way to change things.  Nor am I alone in that opinion.  Four years ago, the reknowned Dutch web developer known as “PPK” also came to that conclusion and expounded on the same theme in another article.

Sometimes that quick, convenient change may cause a time-waster down the road.  You know that I  prefer conditional comments, especially since it is programming the browser, but I understand that not everyone wants to be a programmer and some are very content to remain hackers.  So, happy coding to all!

This work is licensed under a Creative Commons License
.

Advertisements

Actions

Information

One response

24 11 2010
Harendra Gusain

Dear writer

I read this article this is a very nice article .can you send some more article on this topic , I want to read more about it .
Thank you
Harendra Gusain

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s




%d bloggers like this: