As someone viewing websites on the web, ad-blockers filter out adverts for “enhancements”, and a bunch of flashing, ugly advertisements. Not only this, but ad-blockers can help protect you from potentially sneaky and malicious code.

This is why one of the most popular downloads for Firefox is an ad-blocking extension.

However, have you thought about the reverse? What about the effect ad blockers have on your website or the sites you design for clients?

Is my coding style or design choices limiting what’s viewable to visitors because it’s being incorrectly identified as advertising content by ad-blockers?

Choose Your Class and ID Names Carefully

You may reason, “I don’t have to worry about ad-blockers because I don’t have any advertisements on my website”.

But do you really have to reason for concern?

While you may not have a single ad on your site, the names you give your classes and ID’s matter.

Classes and ID’s containing keywords like banner, ban, ad, advertisement, etc may get flagged incorrectly by a visitor’s ad-blocking plugin.

Important sections of information could never appear on the screen because of this.

Avoid:

<p class="panel banner" id="bannercontent1">Real content. Not an advertisement. But still blocked.</p>

Better:

<p class="panel section" id="section1">Real content. Not an advertisement.</p>

Remember, elements with classes and ID’s that contain any filtered keywords run a high risk of being blocked. In theory, an ID or class named ‘bandaid‘ may get filtered as an ad.

Safe Choices For Classes and ID’s

What are safe choices for classes and ID’s?

While there’s no way to know exactly what custom keywords people will add to their blocking list, a good rule of thumb would be to look at the keywords that are contained in the default filter list. This list can usually be found in the ad-blocking extension’s settings.

Avoid using classes or ID’s that contain any of the keywords on the filter list.

Choose Your Images Carefully

You should also pay attention to your choice of images.

Since ad-blockers cannot actually view the contents of an image, they identify advertisements by relying on both the image filename and image dimensions.

Image Filenames and Directories

Images that contain banners, ban, ads, advertisement, and so on in their filenames may very well get flagged as an advertisement and get removed.

You should also be aware of the directory names you choose. For example, using directories that contain words commonly used in banner advertisements are fair game for ad-blockers.

Image Dimensions

Your images’ dimensions matter. Images that have the same dimensions as common banner sizes run a high risk of getting wrongly blocked.

Common ad sizes (in pixels):

• 728 × 90
• 468 × 60
• 234 × 60
• 180 × 150
• 125 × 125
• 88 × 31
• 120 × 600
• 160 × 600
• 336 × 280
• 300 × 250

Source: http://www.iab.net/iab_products_and_industry_services/1421/1443/1452

If Unsure, Test

If you’re not sure, download an ad-blocking plugin for your browser and test your design before going live.

Fugue is a free icon set created by Yusuke Kamiyamane–free for personal and commercial projects.

Let’s look at Fugue and how you can quickly add icons from the set to your site via the Fugue CSS Sprite Framework.

Fugue – A Huge Icon Set

This icon set currently has over 2000 16×16 pixel icons (in PNG format and PSD) and more are constantly being added. With this many icons, there’s usually at least 1 or 2 suitable icons for whatever you’re wanting to represent. Each icon is available with or without a shadow.

This set would be great for any web app–it contains many interface and UI icons among others. For example, I used Fugue for my OpenX Admin Icon Set v2.0.

Customize Fugue Icons With the Devkit

Yusuke has also graciously included Photoshop files (PSD’s) for every icon in the set; letting you tweak and combine icons if what’s there is not exactly what you want.

License

Fugue is available under a Creative Commons Attribution 3.0 license.

If you prefer not to provide attribution (or can’t), you can also buy a royalty-free license for $49.

Fugue Sprite CSS Framework

If you’re planning on using several icons from Fugue on your website, you might consider using Fugue Sprite CSS from Alison at AlisoTheGeek.com.

The Fugue Sprite CSS framework works on the same principle as any other CSS sprite technique–only easier and faster. Way easier, because you don’t have to do anything by hand.

How To Use It

To use it, just place the single sprite image in the same directory as the Sprite CSS file. To display an icon, use the icon key that’s provided, find the name of the icon, and use that name as the class for your styled element.

Example: You want to display the leaf icon. Find the leaf icon in the list of icons in the key and copy the name of it (fugue-leaf). Include it in your CSS by adding a ‘.‘ in front of the icon name (.fugue-leaf). Fugue Sprite CSS takes care of the rest.

Considerations

Since the sprite framework contains all the icons from the Fugue set, the framework’s a bit large (684 KB total). But if you’re planning on using quite a few icons from the Fugue set, it’d be worth it.

Give Fugue a Try

Give Fugue a try if you haven’t.

If you’ve downloaded it in the past, chances are there are tons more icons added since.

And if you like the set, consider buying the royalty-free license.

Lately, I’ve been using Thematic–a framework for building WordPress themes faster.

Thematic gives you a solid, bare-bones theme with reset CSS styles, a very basic layout, no color and limited typography. A clean slate.

Don’t Touch That Theme!

To create your theme, you don’t actually edit any of Thematic’s theme files. Instead, you make changes using a separate child theme.

It’s really powerful since you’re not actually touching any part of Thematic. You just get a nice starting place, without worries about future Thematic updates overwriting your code edits.

You don’t have to rewrite a bunch of code all over again–you’re just adding the bits that you want to be different. This works very much like the custom styles on WordPress.com hosted blogs.

I’ve collected together 40+ Thematic resources, tutorials and links to help you get up and running faster.

Thematic and WordPress Child Theme Basics

• Official Thematic Website
• WordPress Child Theme Basics
• Modular CSS
• Theme Template Directory Structure

Theme Hooks

• Thematic 0.9.6.1 Is Live (Updated 2/10/2010)
  Details about newest version. Contains new hooks and filters for even more control.
• Using Action Hooks in WordPress Child Themes
• Theme Hooks
• Adding Custom WordPress Hooks
• Using Filter Hooks in WordPress Child Themes
• Theme Filters
• Frameworks, Child Themes, Filters and Hooks?
• Overriding Parent Theme Functions in Child Themes

Thematic Tutorials

• 10 Design Tips For Your Custom WordPress Theme Built With Thematic
• Edit Your Theme With Functions.php
  Tons of fun by adding functions to edit your theme.
• How I Used a Custom Page Template to Redesign My Blog the Smart Way
  Step-by-step creating a new child theme.
• Replacing WordPress Content With an Excerpt in a Thematic Child Theme
  How to replace the_content() with the_excerpt()–without touching your theme files.
• Add “Featured Posts” to Your Thematic Child Theme
• Use WordPress as a CMS With Thematic: Part 1
• Add a Header Image to Thematic the Easy Way
• Add a Search Box to the Thematic Menu
• Adding Theme Options to WordPress Themes
  Creating theme option pages to your WordPress theme.
• ThemeShaper Forums
  If you get stuck, the Thematic Forums is the place to go for help.

Editing Parts of Your Theme With Thematic

There is a whole series of tutorials on the Thematic website for edit particular parts of your WordPress theme:

• Thematic 0.9.6.1 Is Live (Updated 2/10/2010)
  Details about newest Thematic version. Contains new hooks and filters for even more control.
• WordPress Themes Template Tutorial Series
• Working With the Index Template
• Editing Your Thematic CSS
• Editing the Header Template
• Editing the Sidebar Template
• Editing the Single Post, Post Attachment and 404 Templates

Thematic Cheat Sheets

• Thematic Structure Cheat Sheet
  A visual look at all of Thematic’s main elements–div’s, theme actions, hooks and widget areas. Very, very useful.
• Widget-Ready Areas
  Images of widget-ready areas for each major template and section of Thematic.

Thematic Child Themes

There are already some nicely-designed Thematic child themes.

Acamas

SimpleCart (js) – E-commerce theme

Audry

Gallery

Aether

Sugar Cane

Update: 3HoursTheme (by Matteo Stagi. Also includes tutorials to help you to use the theme)

Cosmos Labs

I can’t include Thematic themes without mentioning Cosmos Labs. They have released several nice child themes. Here are a few.

Byty

Street

Early Morning

Commune

Crystalline

Element Templates

These are not full child themes, but themes for specific parts of a WordPress site that can be used along with another child theme.

• Login and User Registration Page Templates For Thematic
• Replacing the Thematic Menu With a DropDown List of Categories

Hopefully these links will give you a good place to start using Thematic.

What Do You Use?

Do you use Thematic? Do you use some other WordPress framework? Tell us in the comments.

Remember the mottoes you learned when you were a kid: “Winners don’t do drugs”, and “Cheaters never win”?

Well, a little cheating never hurt anyone… when it comes to using cheat sheets, that is.

TechPosters has a colossal collection of cheat sheets for just about every program, coding language or OS that uses code or keyboard shortcuts.

Since there’s such a huge list of cheat sheets, let’s look at some of the useful cheat sheets for web designers.

HTML

• HTML 5 Quick Reference Guide
• HTML 5 Cheat Sheet
• XHTML Cheat Sheet v 1.03
• XHTML 1.1 and HTML 4.01 Extensible Hypertext Markup Language
• HTML Help Sheet (HTML 4 and XHTML)
• Form Tags
• Character Entity References in XHTML 1.0 and HTML 4
• HTML – Special Entity Codes
• HTML Common Tags

Note: If you’re looking for more resources for UTF-8 special entities, check out my earlier post, Most Used XHTML Character Entities.

CSS

• CSS3 Quick Reference Guide
• Core CSS Part 1 (by Molly E Holzschlag and published by DZone), Part 2, and Part 3
• CSS Properties
• CSS2 Cascading Style Sheets
• CSS Shorthand Guide
• CSS Shorthand Cheat Sheet by Example
• CSS Property Index
• CSS Cheat Sheet v2
• CSS2 Quick Reference Guide
• RGB Colour Codes

jQuery

• jQuery Selectors (DZone)
• jTouch – jQuery Cheat Sheets For iPods and iPhones
• jQuery 1.2 Cheat Sheet 2
• jQuery 1.2

There are a ton of other cheat sheets for javascript in general, as well as other frameworks like EXT JS, Prototype and an entire category for Mootools.

These can be found in the general Javascript Cheat Sheet category.

PHP

• PHP Cheat Sheet (DZone)
• Symfony PHP5 Framework – Admin Generator Cheat Sheet

Plus Many, Many More

There are also tons of other web design cheat sheets for MySQL, ASP.NET, Flash, Silverlight, XML and more.

Another nice thing about the TechPosters site is that you can subscribe to RSS feeds for each category and know when new cheat sheets are added.

Share

Do you use any great cheat sheets for web design that are not included here? Where do you get your cheat sheets from?

Share your thoughts in the comments.

Due to the popularity of last week’s list of programs and services for freelancers, we’re bringing you 24 must-have online tools specifically for web designers.

Testing

Xenocode Browser Sandbox

Run and test your sites in IE6, IE7, IE8, Firefox 2 and 3, Safari, Google Chrome and Opera without having to actually install the browsers on your system.

This unfortunately seems to only work on Windows.

BrowserShots

View screenshots of your render webpages in multiple browsers and operating systems. You can even test different screen resolutions.

Favelets

Validate and test your sites using this collection of favelets. Validate microformats, HTML and CSS. Test your pages at different screen sizes (iPhone, Blackberry, etc) and lots more.

Are My Sites Up? (Website Monitoring)

Get alerts when you or your clients’ sites go down or experience hiccups. Alerts can even be sent to your mobile phone.

Page Code Generation

gridr buildrrr

Create CSS grid-based layouts easily with gridr buildrrr.

Project Deploy

Project Deploy makes it faster to get a site up and running by letting you select the type of information you want. Deploy then generates common folders, standard HTML and CSS files and even jQuery–all in a zip file for easy download.

Web Form Generators

Icebrrg

Icebrrg lets you easily create all kinds of forms and embed them on your site. There are paid plans, but the free version still allows 3 forms and up to 100 per month.

WuFoo

WuFoo makes creating forms a piece of cake. Adding forms to your site is simple as well with a great web-based user interface.

Web Form Factory

Another great web form tool. You can create forms linked to a database or to generate emails.

Typography

Typechart (CSS Typography)

Browse, compare and grab the CSS code.

PXtoEm.com

Convert pixels to ems quickly. The generator even creates the CSS all for you.

sIFR Generator

Even if you don’t have Adobe Flash installed on your system, you can convert font files (TTF) and create your own Flash files (SWF) for use with sIFR.

Web Code

XHTML Character Entity Reference

Find UTF-8 character entities for XHTML.

View other XHTML character entities resources.

ecoder (Web-Based Code Editor)

Ecoder makes it easier to write and edit code. All your coding can be done right in your browser.

Ecoder sports a beautiful UI, plus real-time code syntax highlighting and line numbering. You can also edit multiple documents at once.

As far as I’m concerned, this one beats out Mozilla Bespin (especially as far as ease of use goes).

BuiltWith

Check websites and see what technologies are being used. See what your favorite websites are running on–databases, CMS, hosting, etc.

Other Online Tools

Unix Permissions Calculator

No more trying to remember Unix permissions codes when updating file permissions.

SlimTimmer

Keep track of the time you spend on projects.

The interface is extremely simple and easy to use. You can also manually add time and filter by date, client and other options.

Media Convert

Convert just about any type of file into just about any format that exists. Just upload and Media Convert takes care of the rest.

Privacy Policy Generator

Easily create privacy policies for sites by just filling out and simple, quick form.

Hohli (Online Charts Builder)

We wrote about Hohli earlier. This is a great tool for generating embeddable charts and graphs. Choose the type of chart, size, data and colors–Hohli does the rest.

Validifier (Flash Embed Code Generator)

A lot of the code generated by sites for embedding Flash content is not valid markup. Validifier turns Flash embed code into valid XHTML (using the object tag).

Genfavicon

Generate favicons from GIF, JPG or PNG files in just 3 easy steps.

Favicon Generator

Create favicons (ICO) for Internet Explorer from images (GIF, JPG, PNG).

CSS Sprite Generator

Improve your site’s performance. Upload images and the CSS Sprite Generator will create the code for your CSS sprites.

What Online Tools Do You Use?

Be sure to check out our 15 Must-Have Programs and Services For Freelancers for other great tools.

There are tons of online tools for web designers out there. Which ones do you use? Tell us in the comments.

Font Squirrel just added a new @font-face filter to their site – letting you view just fonts that are available for embedding on a site via the CSS3 rule @font-face. Woo-Hoo!

So far, there seems to be 148 free fonts on Font Squirrel that allow @font-face embedding.

For a larger list of other sites featuring @font-face embedding, view my previous post:

Embedding Web Fonts: 5 Free @font-face Resources

Let the embedding begin!

Which fonts can be freely embedded using @font-face? Our list of 5 resources will take out the guesswork.

One of the most anticipated web developments recently is the @font-face rule for CSS3.

The @font-face rule allows for actual fonts to be embedded, so you don’t have to rely on the visitor having that specific font already installed on their system. No more font stacks.

Free @font-face Fonts

Finding fonts with licenses that allow for embedding via @font-face can be difficult.

Here are 5 7 links and resources to free fonts that can be embedded using @font-face:

1. The League of Moveable Type

A foundry that creates free, open source @font-face fonts.

2. Fonts Available For @font-face Embedding (Webfonts.info)

Includes a large list of 25+ free fonts that either specifically allow @font-face embedding, or are open source/public domain fonts.

3. Font Squirrel

A collection of free and open source fonts available for commercial-use. Many of the fonts’ licenses allow for embedding, but make sure to check 1st before embedding.

Update: Font Squirrel has added a @font-face filter to their site. Now you have the option to view only @font-face fonts. You can read more about it here: Filter @font-face Fonts on Font Squirrel

4. 10 Great Free Fonts For @font-face Embedding

5. Internet Explorer Embeddable Fonts (EOT)

Embeddable fonts for IE.

6. Update: Open Font Library

HUGE list of freely usable fonts for embedding via @font-face as well as the option to link to hosted fonts on the openfontlibrary.fontly.org site.

7. exljbris :: Free Quality Font Foundry (Updated 05/12/2009)

All the exljbris free fonts (except including the free weights and styles of Museo and Museo Sans) are licensed for embedding. This includes popular fonts like: Anivers, Delicious, Fertigo Pro, Fontin, etc. See licensing and linking details.

@font-face Browser Support

Currently, the following browsers support @font-face (TrueType/OpenType TT and OpenType PS fonts unless otherwise stated):

• Safari 3.1+
• Opera 10
• IE4+ using proprietary EOT (Embedded OpenType) fonts
• Firefox 3.1

If you want to test if your browser supports font embedding, visit OpenType.info’s @Font-Face Demo page.

For more details on browsers that support @font-face, see WebFonts.info’s @Font-Face Browser Support.

Have you found any embeddable fonts or sites with lists of free @font-face fonts? Share with us in the comments.

Today, I’ll share 10 secrets basic steps I take when coding a site in CSS—steps that will hopefully get you thinking about your coding process.

The following assumes that you already know how to code valid XHTML and CSS.

This is in no way the only way—this is just how I generally go about it.

10 basic steps I follow when creating a CSS-based site:

1. Finalize your design
2. Finish your XHTML before touching your CSS
3. Validate your code
4. Start with typography
5. Structure the main page elements
6. Start big and work your way down
7. “Finish” work
8. Test in IE
9. Fix inevitable IE bugs
10. Optimize your code and do final testing

1. finalize your design

This is probably the most important step in order to be productive. If you’re working with a client, make sure you get them to sign off on the project before you start coding the site.

Even seemingly small changes (from your client’s point of view) to the  layout may impact your code in a big way.

I keep a copy of the approved PSD design open in Photoshop. This serves as my reference and lets me grab dimensions and colors.

I also draw out a rough sketch of the layout on paper so I can jot down element dimensions, hex colors, etc. It also helps me visualize the different div’s I’ll need for my layout when I’m writing my HTML.

2. Finish your HTML before touching your CSS

Don't put this before your horse.

Make sure you have all the sections and major (X)HTML code in place before even touching (or thinking about touching) your stylesheet.

Just like building a house, you have to have a solid foundation laid first. Make sure all your major page sections are accounted for, along with appropriate headings, paragraphs, etc.

It’s generally a good idea to keep the HTML structure as simple as possible—avoiding unnecessary div’s, for example.

3. Validate your code

If you’re building a house, you not only have to have a foundation first–it has to be level. Lots of problems later on can be avoided if you take the time to ensure your foundation is good.

Take the time to make sure your (X)HTML is valid and there are no mistakes. This can save you unnecessary aggro when you start styling.

I use the Web Developer add-on for Firefox to quickly validate local HTML files.

Only after I’ve completed this, do I start on my CSS layout and styling.

4. Start with typography

Now it’s time to dig into the CSS.

I find it useful to first focus on a site’s typography: fonts, colors, line height, link styles, list styles, etc when the page is nearly a blank slate. Instead of having a bunch of page layout and sections with background colors, I like to start with the typography before moving on to the page structure.

A CSS reset (Eric Meyer’s Reset CSS, YUI Reset CSS) can be very useful in these situations. They save lots of time writing code to undo default browser settings.

I prefer to use a slightly modified version of the one that comes with Deploy. Save a copy somewhere of your modified version so you can work from it on future projects.

5. Structure the main page elements

There are certain main elements most pages have:

• Header
• Main content
• Sidebar(s)
• Footer

I like to take care of these sections first; centering the whole page, giving main elements dimensions, floating sidebars, and the like.

Important: As you work on your CSS styles and especially layout, test in Firefox, Safari or Opera and adjust accordingly to make sure things look right in one of those browsers.

It’s also good to check your progress as you go in IE6, but always remember that IE6 will almost always be wrong. You can avoid huge issues in IE6 by fixing those bugs as you go.

6. Start big and work your way down

Once the major parts of the page are laid out and positioned properly, I work my way down; working on the layout and styling of sub-elements and sections.

For instance, your header may contain other elements such as a logo, navigation or search field. With the header already sorted, you can start styling the layout of these other elements.

7. “Finish” work

“Finish” work, in the construction trade, are the fine details and finishing touches that are done toward the end of the project; like trim and molding, paint and so on.

In web design, I consider finish work to be the finishing touches like: image-replacement (for headings, etc), hover effects for links or navigation, and fine-tuning margins, padding and the like.

It’s also a good time to re-validate your code; including your CSS.

8. Test in IE

Testing your site in Safari and/or Firefox will make sure your site looks good in 99% of the major browsers—except Internet Explorer. So you will need to test in IE 6/7.

Again, it can often save you some headaches by checking your page in IE6 every once in a while as you go along. However, in this step, I go back through and check all the IE-related bugs and issues.

Personally, I test in Firefox and IE6 all through the process; from layout on.

9. Fix inevitable IE bugs

The more you work with IE 6 and 7, the more you will start being able to foresee issues and know how to correct layout bugs more easily. However, let me tell you, there will always be something you will have to fix in IE 6 or 7. So fix the bugs and you can move on.

Now, I fix IE6 bugs (dropped floats, wonky margins, etc) with some special rules in a separate stylesheet.

10. Optimize your code and do final testing

There are many ways to optimize your CSS code in order the cut down on size–now’s a good time to do that.

Occasionally, when optimizing though, you may get carried away and accidentally remove an important bit or place a rule where another cancels it out. Make sure your pages still display correctly and then re-validate everything.

Use what works for you

Whether you use the above steps or not, take the time and think about how you code.

• Do I have a set routine that keeps me organized and focused?
• Is the way I code efficient, or could it do with some streamlining?
• Am I needlessly rewriting code that I could (re)use as a starting point on other projects?

If there’s something you can change, great. If what you’re doing works great as is, that’s great too.

• Can you setup or modify an existing CSS reset of your own and use it to cut down time?
• Can you use standard names for elements and consistently use them in every project?
• Can you create your own list of steps and follow it on your next project?

Bottom line: Use what works for you and the way you work. If what you currently do doesn’t work, think about what you can do to improve it.

Conclusion

Again, this is not the only way to code a CSS design—just the way I do it. There are lots of web designers who code differently and many who probably do a better job of it than me.

What do you think?:

• What steps do you take when coding a CSS-layout?
• How would you order the above steps so it works best for you?

I’ve decided to provide some quick and dirty tips and code snippets over the next few weeks that are useful for beginners and good reminders for us that have been building websites for a while.

This first set of quick and dirty tips involves 4 CSS shorthand tips for shortening the amount of code you have to use, thus reducing the file size of your stylesheets:

1. CSS colors
2. Remove units for zero values
3. Background colors and properties
4. Margins and padding

CSS Colors

The most accurate way to define colors in CSS is to use the hexadecimal values. For example:

• #FFFFFF = white
• #000000 = black
• #CCFFFF = light blue

We could just leave it at that, but if you use these values over and over again, it gets monotonous and adds extra bloat to your code that you don’t need.

Instead of using the 6 characters that make up a color in hex, we can shorten it to only 3 characters like so:

• #FFF = white
• #000 = black
• #CFF = light blue

As you see, the hex values change, but the colors stay the same. To shorten the hex values, think of the color values as 3 pairs of characters (which is what they really are).

If both letters/numbers in each pair are the same, you only need to use 1 of them. Do this for each pair and you will get a hex color that’s only 3 characters long (plus the #).

Note: This only works when both values in every hex pair are the same. The following examples can not be shortened:

• #3C3C3C
• #3F3A2C
• #CCFFF1

Zero = Zero

This is one that’s overlooked by a lot of beginners. Zero is zero—no matter if you’re talking pixels, ems or percentages (0px, 0em, 0% = 0). There’s no need to include anything after a 0 (zero) value.

It’s all the same, so there’s no need to add the type of measure you’re using to zero values. This is a tiny thing maybe, but over a stylesheet, it can really reduce the file size.

Defining Background Colors and Properties

In CSS, you can define a rule for the background color of an element or class like this:

#some-element { background-color: #FFF; }

This works, but you can shorten this to simply:

#some-element { background: #FFF; }

You can also define other background properties such as a background image (and associated properties) all at once like so:

#some-element { background: #FFF url(../images/go.png) 100% 100% no-repeat; }

This sets the background color to white (#FFF), assigns a background image (go.png), anchors it to the bottom right of the element (100% and 100%) and makes sure the background image doesn’t repeat.

Margins and Padding

The code to set margins and padding can be shortened in CSS as well.

Imagine we have an element that needs a margin on the right and bottom of 10px, while the top and left sides have no margin applied to them. We could setup a rule like this:

#callout {
	margin-top: 0;
	margin-right: 10px;
	margin-bottom: 10px;
	margin-left: 0;
	}

This gets the job done, but it’s terribly long-winded. We can shorten this dramatically by entering the values of each side as 1 set of 4 numbers:

#callout { margin: 0 10px 10px 0; }

Much shorter, eh? We removed all the separate definitions for each side and combined them into one string.

This works by thinking of each side like a clock. The order of numbers is clockwise: top, right, bottom, left. Each side’s value is separated by a space.

We can also shorten margins and padding in other ways in some situations. If all the sides have the same amount of margin, you can use just one value:

#callout { margin: 10px; }

In this example, all sides will get a 10px margin applied.

If the top and bottom margins are the same and the right and left sides are the same, you only need 2 values:

#callout { margin: 10px 5px; }

Here, the top and bottom get 10px margins and the right and left sides get 5px.

Finally:

#callout { margin: 10px 5px 20px; }

Here, the top gets 10px, the right and left get 5px and the bottom gets 20px. In this example, the final (4th) value doesn’t need to be defined as long as it’s the same as the right side – in this case 5px.

These shorthand tips apply to defining padding as well.

I hope you enjoyed these quick CSS shorthand tips. There are more ways to shorten your code, but this will get you started.

Look next week for more quick and dirty tips. Subscribe to our RSS feed to keep updated.

Other Quick and Dirty Tips

• CSS Shorthand Tips
• Lightning Fast Page Setup

7. Use Outline:0

Another small one but useful for FireFox. The CSS element ‘outline’ is what drives the dotted border around links in FireFox. While nice for text links, it can make things look bad when you use image links. Use outline:0 to remove the dotted border around images used as links.

Firefox, IE and Google Chrome all provide visual cues to let users know when text and image links have focus—Firefox and IE use a dotted border outline, while Chrome uses an solid orange border. This is particularly important when navigating with a keyboard. Now I agree, they can look kind of ugly, but they serve a purpose.

What About Accessibility?

I don’t want to just use a blanket term like accessibility without getting into specifics. In this instance, I’m talking about accessibility from the standpoint of a person with vision who uses a keyboard to navigate links. This would include people who are unable to operate a mouse and who Tab their way from link to link.

Ordinary, when you Tab onto a link in Firefox, IE or Google Chrome and that link receives focus, the outline gives a visual indication of what link will be activated when you hit Enter.

And that’s the whole point: If you remove the outline around links (by using CSS or any other means), this seems to me a big accessibility issue; especially if you’re removing the outline from image links. Even if you provide a text link that does the same thing as the image link, will that be clear to your users?

Using outline:0 probably isn’t going to affect people with vision-related impairments, but we can’t forget about those who rely on the use of a keyboard for navigation. The bottom line is: Don’t remove visual cues from image and text links unless you plan on providing an alternate way of showing that they have focus when navigating with a keyboard.

Note: There is no default visual cue in Safari or Opera browsers when a link (text or image) has focus.