Category Archives: Uncategorized

Waqas asks the CSS Guy how to specify an alternate font size if the preferred font isn’t available on the user’s system

Waqas writes:

Is there any way to specify alternate font size?

e.g.

p { font: 11px Tahoma, Helvetica; }

If Tahoma font is not available in machine, Helvetica will be used (if available) with size 11px. Is there any workaround that if Tahoma is available it will use size 11px & if it is not available Helvetica will use for example 13px?

Yes – here’s a way. I had found this article from 2007: JavaScript/CSS Font Detector, so let’s use that as a starting point.

I’ll start with HTML for a simple paragraph:

<p>Row, row, row your boat<br />
Gently down the stream.<br />
Merrily, merrily, merrily, merrily<br />
Life is butter dreams.</p>

And style it:

<style type="text/css">
p { font: normal 28px/1.2 'Brush Script Std',Arial,sans-serif; }
</style>

And so I have two fonts: Brush Script Std as my preferred font, and Arial as my fallback. The challenge is that supposing Brush Script Std isn’t on the user’s system, I want Arial to display not at 28px, but at 18px.

I’d approach is like this. First set a style rule for the fallback state. If we know that ‘Brush Script Std’ is available, let’s use JavaScript to add a class to the body tag that indicates the font is good to use, like <body class="hasBrushScriptStd">. I could then write a separate style rule that makes use of that selector, like so:

<style type="text/css">
p { font: normal 18px/1.2 Arial,sans-serif; }
.hasBrushScriptStd p { font: normal 28px/1.2 'Brush Script Std'; } 
</style>

Now for the script that handles the font detection and adding of the class name to the body. I verified that Waqas isn’t using jQuery, so I’m writing a couple of extra functions to handle the onload event and the adding of class names. (credits at the end of the article).

<script type="text/javascript" src="fontdetect.js"></script>
<script type="text/javascript">
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      oldonload();
      func();
    }
  }
}
function addClass(element,value) {
  if (!element.className) {
    element.className = value;
  } else {
    newClassName = element.className;
    newClassName+= " ";
    newClassName+= value;
    element.className = newClassName;
  }
}
addLoadEvent(function() {
  var detective = new Detector();
  var hasBrushScriptStd = detective.test('Brush Script Std');
  if (hasBrushScriptStd == true) { 
    addClass(document.getElementsByTagName('body')[0],'hasBrushScriptStd');
  }
});
</script>

Here’s the final result where you can view source and copy if you wish. Know of other methods, better methods, or gotchas? Tell me about it.

Script credits:

Memphis AIGA Mini-conference

This saturday morning, October 16th, there is a local AIGA mini-conference on topics like designing for mobile, HTML5 and CSS3 (yours truly speaking), HTML frameworks, accessibility, and more. If you’re in the Memphis area, check it out.

Here are the details.

I only know two of the other speakers (JD and John Lloyd). I’m looking forward to meeting the others, but even more so, getting to meet some of the other web-savvy designers in Memphis who are interested in these topics. Maybe I’ll see you there.

Spinboxes Optimized for Touchscreen

So what’s a spinbox? A picture is worth a thousand words:

Here’s the thousand word version (via):

A spin box — sometimes called a spinner control — is a collective term for the combination of a text box with an up-down control. Users can click arrow buttons (the up-down control) or press the UP ARROW or DOWN ARROW key to change the value in the text box. The value ascends or descends incrementally.

I’ve been optimizing web forms for use in iPhones and Androids. Not too long ago I ready a post by Luke Wroblewski on the topic (which used hotel search forms as an example – bonus for me). In Luke’s post, he calls attention to the fact that Kayak’s mobile app uses spinboxes for room and guest count instead of select drop-downs:

Screenshot of Kayak's iPhone app
Screenshot of Kayak's iPhone app

The up/down controls are sized and positioned optimally for input from a fingertip instead of a mouse.

I’ve seen these used in iPhone apps, but not in web forms. I wanted to make a form that used these but wasn’t sure how to mark on up. According to the forms chapter of “Dive into HTML5”, Opera will render a spinbox for input type="number", and Opera even respects the min and max attributes. That’s great, but Safari doesn’t respect the min and max attributes (yet), so using cool new HTML5 attributes for input isn’t going to work for me.

I decided to use jQuery to dynamically create a spinbox that uses a select dropdown as it’s source. The jQuery would grab the select and all its options, create a spinbox control that dyanimically updates the hidden select as the up/down buttons are pressed, while keeping the original select hidden.

Here’s an example I made that I wrote specifically for webkit (iPhones, Androids, or if you want to see it in the desktop, Safari or Chrome). Or here’s a screenshot:

A touch-screen optimized spinbox example
A touch-screen optimized spinbox example

Download a zip if you want to play around with it. I’m no JavaScript/jQuery expert, so I’d love to hear about any improvements. Note that my script and styles use the term ‘tapbox’, which was my way of saying ‘touchscreen optimized spinbox’.

More about spinboxes

For select drop downs with few options (like in my case, 4), a spinbox is a great substitute for a select box. Select boxes that have many options, like say 31 days in a ‘day of the month’ drop down, should likely stay in a select, and not be converted to a spinbox, else you risk triggering your old nintendo thumb by furiously tapping to get to the higher options.

Other situations in which a spinbox might be appropriate, as summed up in this article:

Spin boxes are useful when users don’t need to see the whole range of values in order to make a selection. For example, if the range is so familiar to users that they’ll be able to infer all values from seeing just one (such as Monday indicating days of the week), consider using a spin box.

Review of CSS Mastery, Second Edition

I don’t read many technical books about web site development with CSS. I probably learned like many of you likely did: online articles, right click/view source, firebug, and a hell of a lot of trial and error. I never take for granted that I’ve been able to provide bacon and diapers for my family by learning from these freely available resources. I’m taking a moment now for that to sink in…. it’s awesome.

You can’t do that and become a surgeon, right? Like you can’t walk up to someone who you know has recently had their appendix removed, right-click, view source, and replay the procedure, saving the information to implement later. If you could, I’d imagine there’d be lots of link bait blogs with headlines like “32+ Ass-Kicking Drugs That Help Prevent Heart Disease You Should be Prescribing to Your Patients, but (Probably) Aren’t.”

Anyway, let’s bring this back home. As easy as it is to find great content all over the internet that would educate you on every possible thing you could imagine regarding what you can do with CSS, there’s nothing like having a book to articulate concepts from beginning to end and provide a coherent narrative of the thought and methodology behind a technique’s implementation. Andy Budd’s CSS Mastery: Advanced Web Standards Solutions, Second Edition, accomplishes this.

CSS Mastery

CSS Mastery isn’t for those just starting out (although anyone would learn something from this book if they are familiar with CSS and HTML). This isn’t something that starts out with how to specify font sizes for the p element. Athough it touches on some fundamentals, you’ll want to have been using CSS for a while in order to get the most out of this book.

Chapter 1 is called “Setting the Foundations”, and addresses the use of meaningful markup, using classes vs ids, different versions of HTML and CSS, DOCTYPE, among other things. It gets your head around some of the parts you don’t learn just by zapping an element on someone else’s site with Firebug. There is a part about microformats that is mentioned here, and though it’s great information, it feels out of place among the other topics in this chapter.

Chapter 2, “Getting Your Styles to Hit the Target”, talks about selectors, specificity, inheritance, style sheet planning and organizing, and style guides. It’s good to know these before you start authoring your CSS style. I appreciated his explanation as to why he prefers one CSS file rather than splitting it up into smaller ones. I’ve noticed other authors advocate splitting them up, so it’s nice to see someone of Budd‘s stature offering some yang to balance the yin. (Note that it all depends on the site in question in anyway.)

Chapter 3, “Visual Formatting Model Overview”, describes the box model, differences with IE, positioning (relative/absolute/etc.) and floating. I particularly found helpful Budd’s description of how inline boxes work, and why they ignore certain properties like height and vertical padding and margins.

Chapter 4 is “Using Backgrounds for Effect”, and talks about using images for list bullets, various rounded corner techniques (including border-radius), multiple background images, opacity (including RGBa), drop shadows, image replacement techniques, and then some. I sensed that this chapter got beefed up a bit with the CSS 3 properties from the previous version of the book.

Chapter 5 is “Styling Links”, and mentions all sorts of interesting ways to play up links, including creating CSS-only tooltips.

Chapter 6 is “Styling Lists and Creating Nav Bars”, which is definitely one of the most common things I get asked about. Not only does this chapter discuss all the various proven methods of creating CSS-styled navigation, but also has a terrific section on how to create Flickr-style image maps.

In Chapter 7, “Styling Forms and Data Tables”, Budd shows how to style a calendar, and what markup he’d use to make various layout methods for a simple form. This is one chapter I think is a little weak. I would’ve loved to have seen this chapter fleshed out much more. The concepts from the calendar can be applied to any table, but it would be nice to see a real data table taken on here, something like what happened here. And though the form concepts mentioned here are common in the wild (like a blog comment form), they feel far from leaving someone with a mastery of tackling forms. It only seems to tackle basic form layout, but nothing further. We’ve seen in Chapter 5 some pizazz he’d throw on links, but what about form fields? What about warning of the inherent dangers of applying styles to form fields?

Chapter 8, “Layout”. This is a meaty chapter, which discusses how to create fixed, elastic, and liquid layouts, and the bonuses of each. Someone could have a field day playing with layouts and techniques used here.

If you’ve forgotten why web developers cuss IE so much, then Chapter 9, “Bugs and Bug Fixing”, will help you remember. The chapter mentions how to find and isolate bugs, and reminds you to “fix the problem, not the symptoms.” It then goes into various IE-releated bugs, why they happen, and how to prevent them. Budd also mentions the concept of graded browser support (‘graded’ as opposed to ‘supported’/’not supported’). Great read.

The final two chapters are the all-new case studies for sample sites “Roma Italia” (by Cameron Moll) and “Climb the Mountains” (by Simon Collison). Moll and Collison walk through their approach to building their sites, and walk you through the implementation of various techniques. These case studies serve as professional models for readers to learn from and experiment with. These aren’t just wireframes or isolated elements – they are fully fleshed out pages, professionally designed and developed by leaders in the field on web development. You’ll hear them describe CSS3 properties in their own words. Although there is some overlap among all three authors in subject matter, this is a pro in two respects: 1) the case studies can be independently of the rest of the book, and 2) what concept may not have congealed under one author would hopefully click with the reader by another.

I have some some minor issues with the book. This book seemed to be written over a span of time while the latest crop of browsers were just coming out. I didn’t see any mention of Internet Explorer 8, which was released in March of last year. Also, whenever a tech book has chunks of code, and we want to illustrate what’s different from one chunk of code to the next, color highlighting is very helpful. And although this book is in color, only Chapter 8 and Chapter 10 appear to use different font colors to illustrate changes in within blocks of code and markup. As I mentioned before, there is some slight overlap in content that the three authors were responsible for. And while this can be helpful, for someone reading the book straight through, it seems a little weird to have concepts re-explained as if the last chapter didn’t just do that. Though I point out these issues, the pros of the book outweigh the cons by a landslide.

I’m sure a question might be from someone who already owns the first edition, as to whether they benefit from purchasing the second. In my opinion, no. I should restate that I didn’t read the first edition, so take this all with a grain of salt, and I also don’t pick up CSS books on a regular basis. But I would imagine anyone who has read the first edition and has also regularly kept up with web sites like the authors’ blogs, 23ways.org, alistapart.com, css-tricks.com, etc., that person may not get much more from this text. However, if you feel out of practice with CSS sites and were wondering if you should brush off your old copy to read again, then get this one instead.

Recommended. $26. Available from Amazon.

Monetizing your code

I’ve toyed with offering affiliate links to Theme Forest from this site in the past. But since the people who typically visit my site tend to design and markup their own, it didn’t seem worth it (and the click-through numbers supported that). If anything, readers of this site would be on the selling end rather than the purchasing end.

Now I see that the same family of sites is offering Code Canyon, a marketplace for code, which also seems to fit the readers of my site (once again, the selling end rather than the purchasing). And if you aren’t the kind of person who sells their designs and themes, perhaps you are the type of person who would be interested in monetizing your javascript image gallery, or your php contact form, or whatever. It appears you can do that at CodeCanyon.net. (Disclaimer: Yes, I’m using my affiliate link, although it doesn’t really help me that much if you are a seller, so maybe you want to buy something, too? Go ahead, look around :) ).

I wonder if the quality of some of the things sold here are much better than what you can find in the jQuery plug-in repositories and free php tutorials. Are you any of you out there buying these things? Are any of you selling? If so, how’s it going?

A way we could potentially get around the fact that many web forms prevent plus signs in email addresses

Many of you are likely already familiar with the immensely useful feature of including plus signs (+) in Gmail addresses, such as the following:

askthecssguy+mileycyrusfanclub@gmail.com

This would allow me to sign up for account at another web site, and be able to track spam or apply filters based on everything after the plus sign.

The problem is that many web sites that ask for email addresses will reject addresses that contain a plus sign. To get around this, we could do one of two things:

  1. Contact every web site owner whose site doesn’t allow plus signs, and convince them to change their form validation.
  2. Get Gmail to recognize a special string of characters as the same as ‘+’.

I’d love to see Gmail implement a feature where a specially string of characters would serve the same purpose as ‘+’. That string would be made up of commonly accepted characters, like [a-z] and [0-9], but their special combination would trigger the Gmail application to treat it like a plus sign.

For example, let’s say Gmail enabled this for the following string of characters: zzzplussignzzz. So I would sign up for the Miley Cyrus fan club using the following address:

askthecssguyzzzplussignzzzmileycyrusfanclub@gmail.com

I chose ‘zzzplussignzzz’ because it is unlikely to be used in a legitimate email address, and it would be easy to protect any new Gmail signups from using that string, perhaps by using the ‘Sorry, that’s already taken’ indicator in case someone attempts to do so.

Disabled labels and the Trilemma plugin

I’m working on a form that makes use of the disabled attribute, and the default browser settings for disabled inputs don’t have as much contrast as what I’d like. To better distinguish at a glance which inputs are disabled/enabled, I’ve chosen to style the labels of disabled inputs with a faint gray color.

Consider the differences in the screenshot below.

Regular labels vs labels with a disabled class
Regular labels vs labels with a disabled class

You may also view a live HTML example of the above form to see how disabled fields appear in your browser.

HTML

The difference in HTML is a small one. The first example might have a checkbox whose HTML looks like this:

<input type="checkbox" id="astronomy1" disabled="true" />
<label for="astronomy1">Astronomy</label>

While the second example, I’ve added class="disabled" to the label:

<input type="checkbox" id="astronomy2" disabled="true" />
<label for="astronomy2" class="disabled">Astronomy</label>

CSS

I’ve chosen to apply a light gray color to any label with a class of ‘disabled’.

label.disabled { color: #aaa; }

I found this technique to be particularly useful if you have a form that requires some fields to dynamically become disabled/enabled, in which case some JavaScript would also come in handy. Consider the trilemma:

The Trilemma jQuery plugin

According to Wikipedia, a trilemma is a difficult choice from three options. A trilemma can also be expressed as ‘a choice among three favorable options, only two of which are possible at the same time.’ That second part is where the name for this plugin came from.

(I found out about this term from the comments of the 2005 “Pick Two” post on kotte.org, a fun read and part inspiration for this plug-in.)

As my illustrative example, I’ve chosen the trilemma that web designers offer to their clients: Out of good, fast, and cheap, you can only pick two.

How is this represented on an online request for proposal? I would present it as a series of checkboxes:

The designers trilemma: it can be good and fast, but it wont be cheap.
The designers trilemma: it can be good and fast, but it wont be cheap.

The trilemma plugin will disable the other checkboxes after the user checks two of them. If the option is turned on, the plugin also applies class=”disabled” to the labels of disabled inputs.

The designers trilemma: it can be good and fast, but it wont be cheap.

Try it out.

This plugin isn’t limited to ‘2 out of 3’ – the trilemma is just a way to illustrate what this plugin does. The ‘2’ maximum is a default setting, but you can set it to be anything. For example, maybe you have 8 options and only wanted to allow a maximum of 5 to be checked. So the ‘trilemma’ plugin is simply a jQuery plugin that allows you to limit the number of checkboxes that can be checked within a set. (Yes, changing this number to anything other than ‘2 out of 3’ breaks the meaning of trilemma, but I’m ok with that.)

Trilemma plugin: examples, how-tos, downloads

Here are some examples.

To install, download and insert jQuery and jQuery.trilemma.js in the head of your document, then call trilemma on whatever element contains all the checkboxes. In the example below, it assumes all the checkboxes are wrapped in a fieldset with a class=”goodFastCheapFieldset”.

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.trilemma.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
  $('fieldset.goodFastCheapFieldset').trilemma();
});
</script>

By default, trilemma only allows 2 checkboxes in the set to be checked. To allow more, just pass a new maximum by setting ‘max’, like so:

$(function(){
  $('fieldset.sciences').trilemma({max:4});
});

Also by default, trilemma won’t try to set class=”disabled” on the labels. If you want to turn it on, just set it to true, like so:

$(function(){
  $('fieldset.sciences').trilemma({disablelabels:true});
});

To use disabled labels and set a maximum other than ‘2’, use a comma to separate those options:

$(function(){
  $('fieldset.sciences').trilemma({max:4,disablelabels:true});
});

Download a zip with the trilemma plugin and examples.

If you use the disabled labels option, make sure to add something to your stylesheet, otherwise you may not notice the difference!

If you find this article or plugin helpful, I’d like to hear about it. Also, consider kicking off your next amazon purchase using the link in my sidebar. I get referral credit, and it costs you nothing extra.

Update 2/23/2010: Fixed a minor bug that involved using more than one set of checkboxes on the same page.

59+ Amazing (and jaw-dropping) web design-related lists with titles that will rip your face off, blow your mama’s mind, and make you cry under the crushing pain of their inspiration

I couldn’t resist. The round-up post trend is growing at an unbelievable rate. If lists are that good, then surely a list of lists is even better, right? Let’s get started.

Titles with interesting adjectives and words

  1. 20+ Wicked Proof of Concepts for Better use of jQuery/CSS

    I appreciate concepts that keep the wicked from seeping through.

  2. 40 Sexy And Creative Typographic Logo Designs

    This is the Justin Timberlake of article titles.

  3. 50 Kick-Ass And Creative Dark Website Designs

    Of all terms to use, I like ‘kick-ass’ the most.

  4. 6 Easy Ways To Cure A Nasty Case Of Redesign-itis

    I’m glad there’s a 6-step program to treat this.

  5. 27 Best Photoshop Web Layout Design Tutorials to Design Decent Web Layouts

    With the other lists using words like ‘brilliant’ and ‘amazing’, this title doesn’t seem to be aiming high enough with ‘decent’.

  6. 16 bitchin’ commands and shortcuts for Twitter

    Twitter was made for bitchin’, so this works doubly well.

(Titles that use) parentheses

  1. 75 (Really) Useful JavaScript Techniques

    (Really)?

  2. 10 Intelligent Ways of using [FORM] Elements

    Not really parentheses, but I can’t imagine why brackets are being used here.

  3. 15 CSS Properties You Probably Never Use (but perhaps should)

    ..(.)

  4. Web Nerd Terminology (Explained)

    Am I alone or does the title work better when ‘explained’ is not encompassed in parentheses?

  5. 50 Best-Of Designer’s (NEW) Download Picks and Resources

    Odd placement.

Things your must or should do (but in some cases probably don’t !)

  1. 21 Amazing CSS Techniques You Should Know
  2. 30 Fonts That All Designers Must Know & Should Own
  3. 8 fonts you probably don’t use in css, but should
  4. 15 CSS Properties You Probably Never Use (but perhaps should)
  5. 60+ Must Have jQuery Toolbox
  6. 30 More Must See Comment Designs for Blog Designers
  7. Nine Websites You Should Know About, But Probably Don’t
  8. 45 Creative Business Card Designs You Should’ve Seen
  9. 29 Web Design Blogs You Must Follow
  10. 9 (More) Useful Websites You Should Know About, But Probably Don’t

Posts that lost count of how many items are in the list, so they give up counting and slap on a plus (+) sign

  1. 80+ AJAX-Solutions For Professional Coding
  2. 40+ Tooltips Scripts With AJAX, JavaScript & CSS
  3. 25+ Create Amazing Image Effects with Some of the Best jQuery Plugins Available
  4. 45+ New jQuery Techniques For Good User Experience
  5. 33+ Online Resources to Learn CSS
  6. The Power of WordPress and jQuery: 25+ Useful Plugins & Tutorials
  7. 21+ Fresh Ajax CSS Tables
  8. 47+ Excellent Ajax CSS Forms
  9. 50+ Amazing Jquery Examples- Part1
  10. 45+ Fresh Out of the oven jQuery Plugins
  11. 23+ Impressive Tools for Faster Javascript/Ajax Development
  12. 51+ Best of jQuery Tutorials and Examples
  13. Form Elements: 40+ CSS/JS Styling and Functionality Techniques
  14. 20+ Tutorials and Resources for Working with Custom Fields in WordPress
  15. 13+ Fantastic Tools For Knowing How They’re Doing It
  16. 50+ Fonts for Big, Bold Headlines
  17. 70+ Visually Impressing Header Graphics

More round-up of round-ups

  1. 53 CSS-Techniques You Couldn’t Live Without
  2. 60 More AJAX- and Javascript Solutions For Professional Coding
  3. 30 Scripts For Galleries, Slideshows and Lightboxes
  4. 20 Creative Web Forms For Design Inspiration
  5. 40 Most Creative Business Cards You Will Ever See
  6. 50 Extremely Useful And Powerful CSS Tools
  7. 35 CSS-Lifesavers For Efficient Web Design
  8. 50 New CSS Techniques For Your Next Web Design
  9. 16 Impressive Flash-Like Javascript Animation Inspirations, Tutorials and Plugins
  10. 10 Advance jQuery Scripts to take Your Website to the Next Level
  11. 50 Fresh JavaScript Tools That Will Improve Your Workflow
  12. 15 Effective Tips and Tricks from the Masters of CSS
  13. 101 CSS Techniques Of All Time- Part 1
  14. 101 CSS Techniques Of All Time- Part2
  15. 37 More Shocking jQuery Plugins
  16. 14 Brilliant Tools for Evaluating Your Design’s Colors
  17. 10 Impressive JavaScript Animation Frameworks
  18. 25 Tutorials for Using Illustrator and Photoshop Together for Outstanding Results
  19. Powerful CSS-Techniques For Effective Coding
  20. 11 Reasons Why a Web CMS Will Make Your Life Easier and Your Wallet Fatter
  21. 20 jQuery Tutorials And Plugins To Impress Your Friends
  22. 28 Sites Producing Podcasts And Screencasts To Help You Grow As A Designer And Developer
  23. 19 Reasons You Should Blog And Not Just Tweet

CSS image replacement for… images? It makes sense for print.

Sites with dark backgrounds lend themselves well to white or light-colored logos. The result can be nice on screen, but if the site is printed, there can be undesirable results: either the logo doesn’t show up, or if it was saved as a transparent gif, it shows with jagged pixelated edges where the edges are meant to blend in with a dark background color.

One way people get around this is by including two logos on their site, hiding the one for print in the screens css, and vice versa. It works, but it includes twice as many img tags as what is really necessary.

A method I’ve had success with is calling a print-optimized image in the html, and using CSS to swap out the image with a screen-friendly one.

Compare what happens when you don’t do this to when you do.

HTML

<img id="logo" src="logo_print.gif" alt="my bloggy-blog" />

CSS

#logo {
   background:transparent url(logo_screen.gif) no-repeat top left;
   height:0;
   overflow:hidden;
   padding-top: 100px; /* height of logo for screen */
   width: 100px; /* width of logo for screen */
}

The height:0; and overflow: hidden; combo makes sure that I don’t see the logo intended for print on the screen. By adding a width and padding-top to that image, I can set my screen-optimized logo as the background-image. The width and padding-top should match the width and height of the image you want to show up.

This came about by reading David Shea’s image replacement tests. I like the Leahy/Langridge method of image replacement because it requires no extra markup, but this image replacement technique has some cons (as they all do) when it is used to replace text.

If it has cons, why do you think it’s an ok idea?

One usually reads about image replacement to replace text, and issues that typically come up are what to do when images are disabled, when CSS is disabled, or what extra markup has to be included to make the effect work. Since I’m using image replacement technique to replace an image, these become non-issues. If images are off, it’s the same effect as not using the technique at all – alt attribute values are shown instead. If CSS is off, the print-friendly logo is likely the favored image to show anyway. Also, no extra markup is needed – we manipulate the existing img tag and nothing else.

Presenting a src for the print-optimized logo in the HTML, even though it doesn’t get shown, feels a little weird, though, doesn’t it? You might feel better if you set the src for the screen-optimized logo, and then use a rule in the print style sheet to swap out for the print-optimized one. But that doesn’t work – remember that printing of background images is not enabled in browsers (by default, anyway).

So I’m sure you’ve seen plenty of sites that have a dark background with a white logo on them. You may even have one yourself. Go give them print preview and see how it’s handled. Sometimes (as in the case of this site), text is an acceptable fallback, but if the logo is set as an image, hopefully it is represented well in print.


This post was ported from an old host and CMS, so many comments were lost. Below are the comments that I found were most helpful regarding this post that I salvaged. Some links or attributions may not be working correctly.


Christopher Werby said:
I like this and think it’s clever. I’ve had this issue in the past and dealt with it by putting both the normal and the print versions of the logo in the HTML and then switched them on and off with either the screen or print versions of the stylesheet. But with the CSS turned off, both logos appear. So I make the print version of the logo 1px wide by 1 px high in the img tag markup.
One point is that I make the print version of the logo a 300dpi file. I still use the same pixel dimensions as the screen version of the logo, but when the logo prints, it doesn’t have that soft smeary look you get when you print 72 dpi images. For an example, see http://www.garnetthelfrich.com/
I like your idea of using the background image to flip in the screen version. But there’s a downside for logos. I’ve had clients who wanted to allow people to quickly grab their logo from the Web site. When it’s a background image, it’s harder to grab. Just a trade-off to be aware of.

Troubleshooting with <base>

As powerful as Firebug is for inserting HTML and CSS on the fly, sometimes you just want to save a local version of the page so that HTML manipulation can be saved and tested across browsers.

I just wanted to share a tip on how easy this is to do. Right click, view source, and save it as an html file. If you’re lucky, the page will load right up, bringing in the CSS/JavaScript files that’s being used on its original domain.

For some sites, you have to give a little guidance. Like today, I went to wired.com, viewed and saved the html source. You can view the result here.

Yuck, it’s missing styles. That’s not what we wanted.

But by inserting a little code in head, we can grab everything the page uses from the site. After the opening head tag, insert the following:

<base href="http://www.wired.com/" />

and then resave the file. View the result, and you should see the page just as it is meant to be seen at its original address.

I can modify my local copy to my heart’s content, putting new or modified CSS in style tags until I have it just right, then commit the changes to something more permanent. I use this all the time when troubleshooting defects, especially when needing to see how inserting some new element in the HTML will affect IE. Hopefully, it will help some of you, too.

And note that the wired.com example might work for today, but if they ever redesign, this article’s example won’t mean jack. I apologize in advance.