Correcting the 20 pro tips (.NET magazine)

.NET magazine is a fairly big web development magazine. I’ve recently been referenced to its articles from many separate places, and often found the articles to be of good quality. The last one, called 20 pro tips, was not too good though, so I’m going to go through and correct it. I’m not trying to attack the magazine here (remember “friendly” in the URL), I just want people to know these things.

The article consists of 20 points that a pro should know. Here are the points I found errors in:

Stylesheets: importing vs linking (point 3)

The point is that importing is better than linking since many older browsers will not apply the CSS then. This is correct but they also go as far as suggesting developers to add a separate stylesheet for Netscape 4 (NS4). As someone that has experimented with NS4 I can say that its CSS support is bad. Really bad. Considering the near zero percent of NS4 users I would strongly advise against fixing your site for it. That is of course, unless your site logs suggests you have a lot of users with that (old) browser.

There’s also a code error here, simple.css is included twice, and the second @import reference should probably be advanced.css. Not a big error but might confuse someone.

Smarter gradient backgrounds (point 4)

Again a good point. CSS can be used to repeat background images on any element, not just body. This means you can save on file size by replacing big images with smaller ones. The article then suggests using 1 pixel wide images which is something old versions of IE has problems with. A lot of repetitions can easily get the browser very slow so my best bet would be to make them at least 5 pixels wide.

In the code you would be better off using shorthand notation (I know, this is not a big deal). To add an extra pedagogic twist something else than body could have been used:


form { background: white url(background.png) repeat-x; }

IE Box Model Hack (point 8)

A lot of confusion here. Internet Explorer 5 (IE5) uses another box model than the modern browsers. The padding and border are not added to the outside of a specified width, but instead included in it. This means that if you specify a 500 pixel wide box and add a 10 pixel border to it, it will still be 500 pixels wide. Some say that this is a better way of calculating widths but that’s missing the point. The point is that according to the W3C box model the padding should be added outside of the width.

This problem does not appear in Internet Explorer 6 (IE6) if you include a proper Doctype.

So IE5 is broken, should you care? Again, check your logs if people still use the ancient IE5. My guess is that they don’t which saves you a lot of work. There’s probably no need for this hack.

Also, the Box model hack is Tantek’s hack using the voice-family property to add a “}” to your CSS. It’s really ugly. The article uses the same name for another solution to the problem: wrapping the offending element in another element and moving the padding to that box. That’s a much cleaner way of fixing the problem.

Space saver (point 9)

Don’t use inline styles for styling. Try to keep all your styles in the external CSS file. Two more general ways of saving space across browsers are outlined in my cross-browser CSS article (the star-selector and using a premade CSS file that resets browser defaults.

Format fundamentals (point 11)

Good points about image formats. Use 8-bit PNGs instead of GIF, it makes you smaller files.

An addition: JPEGs are generally smaller than 32-bit PNGs but that’s because JPEG removes information in your image to improve compression. Remember that, if you use JPEG.

If you use PNG you need to know that IE has problems showing them in the exact correct color (technical explanation of the PNG color problem). If that matters a lot to you, use another format (remember that all PNGs change color in IE, so images still match each other). Friendly Bit uses PNGs only.

The ‘title’ and ‘alt’ attributes (point 12)

Don’t use the title attribute unless it’s needed to convey what you mean. In the example it does not make sense at all, why repeat the alt text? The main point is still true though, always use the alt attribute and make good use of the title attribute.

Wrapping text around images (point 17)

Come on! Using the align attribute is going against what was just recommended, use of semantic markup (point 14). Alignment is style and should be added through CSS, nothing else. Adding a strict Doctype and validating will generate an error on this kind of ugliness. Use img.typeOfImage { float: left } instead.

 

That’s it for now, hope you learned something. I just wanted to make sure my readers know more than the .NET readers :)

12 responses to “Correcting the 20 pro tips (.NET magazine)

  1. 8) The margin is not included in the width/height calculation in IE5’s box model, only the padding and border are.

    11) Photoshop’s PNGs aren’t compressed to the format’s full potential, and it labels them which causes the color problems in IE. However, you can run your PNGs (and GIFs) though PNGOUT which compresses the image losslessly, and fixes the color labeling problems in IE (although not the gamma correction problems in old Safari).

  2. I would agree with your revised list, and many of those were things I was thinking while reading through the previous article. It seemed too shallow – yours seems more solidified (practically – like NOT using inline styles and the align attribute – goes against using CSS in the first place).

    And, as you have said – NS4 and IE5 are dinosaurs, and so each site should check to see if they have any users from those browsers. The site I work for has NO users from NS4, at all, and a few IE5 (some are IE5 on Mac from me – which his no longer supported by Microsoft or Mac – so I have stopped supporting it as well).

    Nice revisions!

  3. @zcorpan: Thanks for pointing out that margin is not included in IE5’s width, I updated the text to reflect that.

    Also good points about Photoshops handling of PNGs. I use Fireworks myself (they use PNG as their default format) and have not experienced any problems with it’s PNGs. Worth a note though is that the internal PNGs should not be put on the web directly, use the export option.

    @Nate: Thanks!

  4. It seems like you’ve made some really good points here — I’ve just started browsing around the .NET site since coming across the article and I’m intrigued… it’s too bad you can only snag it in the UK. I’ll have to stick with what they publish to the Web.

  5. “Good points about image formats. Use 8-bit PNGs instead of GIF, it makes you smaller files. ”

    Not always, small gifs (eg 4K) can be smaller than saving it as png (eg 7K), when the images get larger in fliesize I never see a gif being smaller than a png in filesize. This could be a fault of Photoshop or even Fireworks to not compress enough the pngs (png-8) that is

  6. “why repeat the alt text?”

    could be intentional since not all browsers show the alt as a tooltip ??

  7. @Johan: You might be right about the small images there. I tend not to use GIF anyways though since mixing formats on one site feels strange.

    About alt text: if you add it on both places you might end up with a screen reader reading your description twice, something you want to avoid. Perhaps leaving the alt text empty would be better in that case.

  8. Johan, I find that The GIMP tends to compress PNG images a lot better than Photoshop.

    I now use both Photoshop and The Gimp, simply because Photoshop makes a mess of PNGs. So instead of splicing up my designs in Photoshop, I save them as a bitmap then open it in The GIMP :)

  9. Point 6 Use simple PHP to build sites the article is right. It states the file CALLING the includes should end .php which is correct. The example (html) is the file being included in .php file.

  10. Why call these corrections? Aren’t most of these opinions, or suggestions? I appreciate your suggestions, but that sounds a bit presumptuous.

    Re: the use of inline CSS. There is a very good reason why the W3C developed CSS with inline capability. In Dynamic web development, there are times when an inline CSS definition can be used to override an existing definition in the CSS file. This would (technically) also separate content from presentation, as the presentation data would be stored as a variable in PHP or stored in a database as opposed to being written statically in the HTML file.

  11. @Brian: The .NET article is aimed at beginners and got a lot of exposure on big CSS sites. Since I find it slightly annoying with errors when I’m learning myself I thought that it might help someone else too. The things pointed out are things that I consider are best practices and I’ve not seen much complaints in the comments (believe me, people notice those things here ;) so I think they agree.

    On inline CSS: I know what they where originally thought for, that doesn’t change anything :)

Comments are closed.