Sam Brown

Display a print friendly logo when CSS is disabled

This is a really clever technique that displays two different versions of your logo depending on how you are viewing it through the use of CSS. Via a browser the logo displays normally, if however you are printing the page or browsing without CSS enabled it can display an alternative version, a print friendly black on white version for instance.

Let me start of by saying that I can not take credit for this technique and while it is not anything revolutionary for a seasoned CSS veteran, I feel it is a method worthy of some exposure. Dan Cederholms SimpleBits was the source and inspiration for this quick tip article. I have yet to see this method used in many other places but it is definitely something I am going to look to incorporate into my future projects.

The 411

Firstly let’s have a look and see what is happening, if you take a look at simplebits.com you will see Dan’s SimpleBits logo, green and white on a slate blue background.

SimpleBits

Taking a look at the Print Preview or by disabling CSS in your browser you will now see a grayscale logo on a white background. This is achieved by some pretty simple HTML and CSS, let me explain it further.

SimpleBits

The HTML

  1. <div id="logo">
  2. <span><img src="/img/1206/logo-bw.gif" alt="SimpleBits" /></span>
  3. </div>
  4. Download this code: /code/sb-html.txt

The HTML could not be any easier, the black and white version of the logo is wrapped in a span tag which is encased in the logo div. Take note of that extra span tag, this is key.

The CSS

  1. #logo span {
  2. display: block;
  3. width: 191px;
  4. height: 55px;
  5. padding: 0;
  6. border-style: none;
  7. background: url(../img/1206/logo-whitney.gif) no-repeat;
  8. }
  9. #logo img {
  10. display: block;
  11. width: 0;
  12. }
  13. Download this code: /code/sb-css.txt

Now we can see that the black and white version of the image is hidden with the #logo img rule, and the proper full colour version of the logo is put in its place via the #logo span rule.

This is where that extra span tag comes in, it is given a width and height, is set to be a block level element and the colour version of the logo is specified as the background to the tag.

Essentially what is happening is that the image is being hidden inside the span tag through the use of width: 0;, the span is then given a background and size, and because it is now a block level element the original colour logo is displayed.

Note, I have truncated Dan’s CSS slightly to make it easier to explain. Dan does go on to wrap the logo in an a tag on sub-pages that then links the logo back to the homepage.

That is it, real simple, real elegant and really useful!

Not revolutionary but very useful

Don’t get me wrong, this is nothing new and I fully appreciate that. I do think though, that this is a very easy and useful way of displaying different logos for different needs. There are other ways to accomplish this great feat but this method is one of the cleanest and safest to use.

Dan writes great books!

Dan Cederholm is not only a cool guy, he also writes very useful books! I own both of his publications, you should too!

Post a link to this on Twitter ↩

Comments

Spencer 8 January 2008, 22:11 #1

This is great. I’ve been looking how to do this, and it seems like Dan has come up with a great way. Thanks for sharing, Sam!

Dale Cruse 10 January 2008, 11:21 #2

As I’ve said several times, Dan comes up with things I wish I had thought of.

Matt McInerney 13 January 2008, 16:58 #3

Great article Sam. Very clever on Cederholm’s part!

Xit 15 January 2008, 14:06 #4

What is the difference between that and a CSS’StyleSheet for print ?

Brett 18 January 2008, 12:40 #5

I was about to say that – I was expecting this to use @media screen, to replace tags that have normal content with a print version with a monochrome logo etc

Commenting has closed for this article. Feel free to me.

Hi, I'm the VP of Design at Foursquare in New York City.

DribbbleEndorseFacebookFoursquareInstagramTwitter