Dynamically selecting the stylesheet
June 21, 2007
On my web development computer I’ve got 5 (five!) browsers installed, for compability tests. I’ve got both IE7 and IE6, Opera, Firefox and Safari (only available in Beta for Windows so far). It’s amazing how most of the css-stuff can work on all browsers except for IE6, which is a bit annoying since it’s still the most popular web browser out there.
So what I usually do in ASP.NET is to dynamically select different stylesheets depending on which browser is requesting the page. It’s not as neat a solution as, say, putting it all in the same stylesheet and it’s magically working everywhere. But I have yet to see that…
How to do it? It’s easy, you can do it all inline in the <head>-tag if you like:
<% if(Request.Browser.Type.Equals("IE6")) { %>
<link rel="stylesheet" type="text/css" href="IE6.css" />
<% } else { %>
<link rel="stylesheet" type="text/css" href="AllOtherBrowsers.css" />
<% } %>
I usually only put the properties that differ between browsers in the above stylesheets. E.g. if you have a master stylesheet “Styles.css” it can contain:
.RoundedCornersBox
{
Margin-bottom: 10px;
Color: #FBFBFB;
/* Paddings are set in the browser specific stylesheets */
}
Then you can put, as the comment explains, the specific attributes in the other stylesheets:
[IE6.css]
.RoundedCornersBox
{
Padding-right: 16px;
}
[AllOtherBrowsers.css]
.RoundedCornersBox
{
Padding-right: 20px;
}
It’s the neatest solution I’ve seen so far, and the comment in the Styles.css points any future developers to where it is. Also if you’re using some debugging tool like FireBug, it’s usually not a problem at all finding out where a style property comes from in your page.
The future of web development
June 4, 2007
Okay, I won’t try to explore that topic on my own, but I have a recommendation for you if html and beyond is your cup of tea.
I regularly listen to different podcasts. However, the only two on software development that I’ve found worth my time are .NET Rocks! and Hanselminutes, the former being my absolute favorite. If you’ve got any other suggestions, please contact me.
However, the past weekend I listened twice to the Hanselminutes episode #65, “Scott talks to Martin Fowler and David Heinemeier Hansson”, which was very interesting. There’s talk about the future of the web, Ruby on Rails and if ASP.NET is a dying technology. They’re pretty much agreeing that HTML and CSS is good enough tools to make web pages, and that a lot of the new and hyped technologies, such as AJAX and Silverlight, are giving the developers too much of a “blank canvas”. The restrictions of HTML and CSS are, in their opinion, positive and give us enough to do most of the tasks at hand. To quote Hansson:
“When you give people the tools to make something purple and in Comic Sans, they will put it in purple and Comic Sans. I think MySpace is the perfect example of what happens when you give people all the flexibility in the world. [...] We’ve got to learn how to walk before we run and we are still crawling when it comes to HTML applications “
I must admit that I’m also caught up in the hype about the new and cool web technologies, and that’s why the show is really mindblowing.
Also, the interview was conducted at the RailsConf conference, a big Ruby on Rails (RoR) happening in the U.S. So Martin and David talk about how much they like how RoR enforces the MVC architectural pattern, and creates unit tests automatically and so on, only to further distance the developers from a blank canvas. Also, the company where Martin works, Thoughtworks, is seeing an sharp decrease in .NET interest. Java is still going strong, but 40 % of their new business this year is Ruby. Then again, Thoughtworks’ customers are probably a bit more cutting edge than the average.
Still, it was a very interesting podcast, and convinced me even more that learning Ruby on Rails is a good thing.
Making IE more standards compliant with javascript
May 29, 2007
Writing CSS that looks great across different browsers isn’t very easy. Internet Explorer has a lot of bugs and crazy interpretations of CSS, e.g. the width issue (where W3C defines width as something INSIDE of paddings and borders, and IE includes the paddings and borders in the acutal width).
However, there are some solutions to this. You can:
1) Use hacks and workarounds, or
2) Conditional comments, i.e. (pun not intended) writing conditional logic that works uses some styling for one browser, and other styling for another browser.
But a new and interesting solution is Dean Edward’s IE7 Scripts. You basically put the javascript library on your server and BOOM, a lot of the faults in different versions of IE are corrected. I quote from the web page:
IE7 is a JavaScript library to make IE behave like a standards-compliant browser. It fixes many CSS issues and makes transparent PNG work correctly under IE5 and IE6
It’s currently only a alpha version (0.9), but something good will come out of it.
Thanks to Molly Holzschlag for bringing this up in her MIX07 session Thinking in CSS: How to Build Great Looking Sites.
A div height being completely random
March 23, 2007
I struggled for like 8 hours with this issue. I had three columns defined as divs on a page. At every 10th or so refresh, the footer div of the page jumped up and cut off the content of the column divs. And this only happened in IE7. Really weird.
Then a friend of mine suggested I add a clear div after the three columns. I did just that, adding an empty div referring to as css class named “clear” which used clear: both, margin and padding 0 everywhere. And it worked!
Thanks Lars!
