Accessibly Use Image Headers

A while ago, I heard rumors that the next incarnation of HTML would include support for easily replacing HTML elements (such as headers) with images by simply adding a “src” attribute to the HTML tag. For instance, you might be able to do something like:

<h1 src="myimage.png">This is my alt text</h1>

However, it seems that the advent of this type of thing, if it ever happens, is still quite a ways off. Therefore, if you’re looking for an easy way to replace a plain text header with a nice image, for instance, a banner, you need to find another way of doing so.

This article will briefly explain how to do so using purely CSS.

Eight Links – April 22

Here are today’s Eight Links — links for web developers:

  1. JsPDF – create PDF files completely using JavaScript
  2. The Database Rant – begins with “It’s time for SQL to die.”
  3. iPhone app sales – a developer explains the income his app has generated and how changing pricing didn’t change sales
  4. Why writing software is like writing
  5. 18 Seriously Helpful Cheat Sheets for Easier Coding
  6. Google Analytics API Launched
  7. Finding and Fixing Memory Leaks in Python
  8. A Design for a Distributed Transaction Layer for Google App Engine

CSS3 Will Include Rounded Corners

With Web 2.0, rounded corners have become wildly popular. Unfortunately, as of right now, you need to use transparent images, some fancy CSS hacks and some extraneous HTML to make them work properly.

However, Mozilla (Firefox) and Webkit (Safari, Konqueror) browsers have implemented a property called border-radius, which will apparently be included in the CSS3 spec, allowing you to easily create rounded corners on any bordered HTML element.

At this time, you have to use browser-specific properties for Mozilla and Webkit browsers, as the border-radius property is not yet fully implemented. You can find more information about the -moz-border-radius and -webkit-border-radius implementations on The Art of Web. More info about the proposed CSS3 spec on border-radius can be found on the W3 site.

Cross-Browser Semi-Transparent Backgrounds

This is a simple tutorial to explain how to implement semi-transparent backgrounds for your HTML elements in all browsers. By now, most people are probably aware of the fact that you can use 24-bit PNG images to create semi-transparent backgrounds in newer browsers. However, because a large percentage of Internet users have still not adopted Internet Explorer 7; which means that they’re still using IE6, which doesn’t support 24-bit PNG images, we have to find a way to mimic that behavior. It should be noted that the fix described in this tutorial is only applicable to solid color backgrounds; it cannot be applied to backgrounds that include some sort of image.

Creating Print Style Sheets

As CSS becomes more and more popular and Web designers are using it more and more to develop the look of their Web sites, browsers are causing more and more problems when trying to print Web pages. CSS styles do not always translate nicely when printed. Some browsers actually freeze or crash when using specific CSS style definitions.

Identifying External Links – Like Wikipedia

Wikipedia - External Link Identification

I found myself wondering a while back how Wikipedia identifies external links the way they do. I’ve seen the same concept on many other sites, but I had never really looked into how it was done. I always just assumed that an image was dynamically added to any code that included external links.

It turns out that I was wrong, and I was kind of happy to find that out. The answer I found makes much more sense, and is much more simple to implement.

Pages: