In the beginning…

In the time of the dinosaurs, HTML authors controlled the way anchors opened by adding target="_blank" as an attribute on an anchor tag. Then the molten mass of Internet began to cool into the thin crust of Web 2.0, the continents began to separate and there came a great migration of pages from HTML to the shinier, new XHTML. Most authors didn’t know what that meant, but it had an “X” in it, so it must be cool, they thought.

Alas, there came a great despair as the beloved target="_blank" attribute was no longer looked kindly upon by The Great Validator. The new XHTML pages would not wear the Shiny Badge of Validation Love.

Continue Reading

There are many ways to style images with CSS. You can add borders:

img {
	border: thin solid black
	}

..padding and margins:

img {
	border: thin solid black
	padding: 3px;
	margins: 3px;
	}

..and even background graphics:

Continue Reading

Want to make sure that your feeds are not indexed by Google and other compliant search engines? Add the following code to the channel element of your XML-based (RSS, etc.) feeds:

<xhtml:meta xmlns:xhtml="http://www.w3.org/1999/xhtml" name="robots" content="noindex" />

Here is an example of how I use this tag for Perishable Press feeds (vertical spacing added for emphasis):

Continue Reading

Beginning with this article, I am serving up a short series of unobtrusive JavaScript functions that I use to enhance the functionality of Perishable Press. In this post, I present a comprehensive JavaScript method of opening external links in new windows (or tabs, depending on the browser).

One way of opening links in new windows is to insert the HTML target="_blank" attribute into all necessary anchor elements (<a href=""></a>). This method works well, but generates validation errors when used with XHTML-Strict doctypes.

A better solution is to employ some unobtrusive JavaScript to progressively enhance your documents with “blank-target” functionality. Using the following code, 99% of your visitors (those with JavaScript) will enjoy external links opening in new windows, while the remaining 1% of your audience (those without JavaScript) will enjoy your site without even realizing they are missing out on those wonderful blank-targeted links. It’s a “win-win” situation ;)

Continue Reading

Hello, my name is Jeff and I am nofollow addict.

When I first began Perishable Press two years ago, in August of 2005, WordPress quickly became my blogging platform of choice. Everything about WordPress was great, so I had no trouble overlooking a few seemingly insignificant quirks, such as the nofollow attributes that are automatically applied to all comment links. In fact, at first, I really had no idea what they were or how they affected my site.

Eventually, as I began delving deeper into the Blogosphere, I realized that those harmless-looking nofollow tags were considered by many to be detrimental to the livelihood of the blogging community and its way of life. The arguments against nofollow and the reasoning behind the “no nofollow” movement resonated well with my sense of social equity on the Internet.

The more I looked into the nofollow issue, the more opposed I became to the idea of default WordPress installations generating nofollow links by default. In fact, after arming myself with as much information as possible, I made haste to jump on the anti-nofollow bandwagon and publicly regurgitated the arguments against the implementation of nofollow links.

Continue Reading

The target attribute for anchor elements (<a>) specifies the location in which the referenced document should load. For example, to open a link in a new window, we would use a target value of _blank. Although this is a commonly employed technique, the target attribute has been deprecated by the W3C and is not valid (X)HTML. Regardless, the target element remains a useful tool for practicing designers and developers. Here, we present the attribute values for the target element:

Continue Reading

This post contains random notes for embedding QuickTime within web pages.

QuickTime Embed Attributes via CSS

<style>
<!--
embed, .embed {
   pluginspage: http://www.apple.com/quicktime/download/;
   controller: false;
   autoplay: true;
   bgcolor: #000;
   loop: true;
}
//-->
</style>

Continue Reading

Embed Windows Media Player via the object tag

Here is the general format for including .wmv files in web pages:

<object type="video/x-ms-wmv" data="http://www.domain.com/path/to/winmovie.wmv" width="340" height="280">
  <param name="src" value="http://www.domain.com/path/to/winmovie.wmv" />
  <param name="controller" value="true" />
  <param name="autostart" value="true" />
</object>

Continue Reading

Consider this post an evolving receptacle for Firefox-specific CSS tricks.

Change the color of highlighted text

*::-moz-selection {
   background: #FF3C00; /* the background color of the highlight */
   color: #FFF; /* the color of the text within the highlight */
}

Change the opacity of an element

div#division { /* choose either attribute */
   -moz-opacity: 0.99; /* possible values: 0-1 */
   -moz-opacity: 99%; /* possible values: 0%-99% */
}

Control item selection of an element

div#division { /* choose one of the following values */
   -moz-user-select: none; /* no content within the element may be selected */
   -moz-user-select: all; /* contents may be selected only as a whole */
   -moz-user-select: text; /* [default value] only text may be selected */
   -moz-user-select: toggle; /* all contents of the element are selected */
   -moz-user-select: inhereit; /* inherits user-select value from parent element */
   -moz-user-select: element; /* elements may be selected one at a time */
   -moz-user-select: elements; /* multiple elements may be selected at the same time */
}

Round the corners of elements

div#division { /* choose one of the following values */
   -moz-border-radius: inherit; /* inherits border-radius value from parent element */
   -moz-border-radius: 7px; /* length/unit values indicate corner/border radius */
   -moz-border-radius: 70%; /* percentage values indicate relative corner radius */
}

Note that the -moz-border-radius property may be expressed as to target specific corner(s):

-moz-border-radius-topleft
-moz-border-radius-topright
-moz-border-radius-bottomleft
-moz-border-radius-bottomright

Further, the following rule consolidates these four properties into one:

-moz-border-radius: 7px 3px 7px 3px;

Add an outline to an element

div#division, h1 { /* choose one of the following values */
   -moz-outline-width: inherit; /* inherits moz-outline value from parent element */
   -moz-outline-width: medium; /* possible values: thin, medium, thick */
   -moz-outline-width: 7px; /* specifies outline width via an explicit length/unit */
}

Reverse item order in elements

div#division { /* choose one of the following values */
   -moz-box-direction: normal; /* items displayed top to bottom and left to right */
   -moz-box-direction: reverse; /* items displayed bottom to top and right to left */
}

Add a multi-colored, multi-layered border to an element

This nifty CSS property adds a border to an element that is any number of pixels in width. Each pixel-width of the border may display with a unique, user-specified color.

div#divisions { /* spcifies a border along with a uniform color for non-Moz browsers */
   border: 3px solid #333; /* if only two moz-border colors are defined, the third will be this color */
}
div#divisions { /* choose on of the following values */
   -moz-border-colors: inherit; /* inherits border-colors value from parent element */
   -moz-border-colors: none; /* [default value] no color-striping is applied */
   -moz-border-colors: red white blue; /* indicates color values from outside to inside */
   -moz-border-colors: #333 #777 #999; /* indicates color values from outside to inside */
   -moz-border-colors: ThreeDDarkShadow ThreeDShadow transparent; /* named values also apply */
}

Further, -moz-border-color property may be segregated as follows:

div#divisions { /* use any/all of the following attributes */
   -moz-border-top-colors: #333 #777 #999 #FFF;
   -moz-border-right-colors: #333 #777 #999 #FFF;
   -moz-border-bottom-colors: #000 #999 #CCC #DDD;
   -moz-border-left-colors: #000 #999 #CCC #DDD;
}

Most Web authors are familiar with the <link> element included within the <head> element of many (X)HTML documents. The <link> element enables authors to associate external resources to the (X)HTML document. <link> element references include various types of metadata, navigation, and styling information. This brief post provides examples of these and other important uses of the (X)HTML <link> element.

<!-- indicate the starting location -->
<link rel="start" href="http://domain.com/directory/" />

<!-- indicate the previous item -->
<link rel="prev" href="http://domain.com/directory/prev/" />

<!-- indicate the next item -->
<link rel="next" href="http://domain.com/directory/next/" />

<!-- indicates the index location -->
<link rel="contents" href="http://domain.com/directory/index.html" />

<!-- indicates location of a help file -->
<link rel="help" href="http://domain.com/directory/help.html" />

<!-- indicates location of a site feed -->
<link rel="alternate" type="application/rss+xml" title="RSS" href="http://domain.com/directory/feed.rdf" />

<!-- indicates location of FOAF metadata -->
<link rel="meta" type="application/rdf+xml" title="FOAF" href="http://domain.com/directory/foaf.xrdf" />

<!-- provides contact information -->
<link rev="made" href="mailto:name@domain.com" title="contact name" />

<!-- indicates location of translated document -->
<link rel="alternate" href="http://domain.com/directory/translated.html" hreflang="fr" title="french translation" />

<!-- provides a link to the stylesheet -->
<link rel="stylesheet" href="http://domain.com/directory/style.css" type="text/css" media="screen" />

To help maintain consistency when developing new CSS-styled websites, we have created a complete CSS template file. The file contains every HTML/XHTML tag known to man. This includes tags such as BASEFONT and CENTER, which have been deprecated; tags such as COMMENT and MARQUEE, which are exclusive to Internet Explorer; tags such as SPACER and SERVER, which are exclusive to Netscape Navigator; and even tags such as !DOCTYPE and BASE, which are included merely for the sake of completeness. As CSS selectors, the tags are (almost all) empty, just waiting to be filled with declarations, properties, and values.

Tags that have been deprecated, or that are exclusive to a specific browser, are indicated as such using the following syntax:

|x = deprecated
|e = explorer only
|n = navigator only

These symbols are written next to their associated tag/selector such as shown in the following examples:

basefont|x {}
marquee|e {}
spacer|n {}

Besides individual selectors, the template file also includes several common selector combinations such as various list selector combinations, image-link sets, and series sets like h1,...h6. Additionally, the skeleton.css file provides several common classes, such as .show, .hide, and .clear, and even includes the very popular and versatile .clearfix hack, which is actually like three or four hacks rolled into one. The file is a paltry 4KB in size and free for download via the link below. Leave the credit at the bottom of the file intact and you are free to use the contents in any way you see fit!

Note: This free CSS template file, skeleton.css, is a continually evolving resource. Please share any valuable insights or potential improvements with everyone with a comment or email.

Download the Complete CSS Template File [ .css file | ~4KB | 3459 downloads ]

Improve accessibility by adding title attributes to your WordPress userspace.

Note: This article applies specifically to WordPress 2.0.2, but may be generalized to any WP 2.0+ version.

By default, WordPress navigation links omit the title attributes for both page and post views. Title attributes for links provide additional information that can improve the accessibility of your website. This is especially true when images or text symbols exclusively are used for navigation.

To add title attributes to WordPress page-view links (e.g., links for index, archive, and category views), open the file wp-includes/template-functions-links.php and find the functions previous_posts_link (line #494) and next_posts_link (line #459).

Within each function, replace the following line:

echo '">'. preg_replace('/&([^#])(?![a-z]{1,8};)/', '&#038;$1', $label) .'</a>';

..with this:

echo '" title="EDIT THIS">'. preg_replace('/&([^#])(?![a-z]{1,8};)/', '&#038;$1', $label) .'</a>';

Next, replace the EDIT THIS text in each function with “Previous Posts” and “Next Posts”. Keep in mind the reverse chronological order by which these links navigate. Remember to check a few page views and then you are done.

Now, to add the title attribute to navigation links within individual post views. Open the same file as above, wp-includes/template-functions-links.php and find the functions previous_post (line #336) and next_post (line #357).

Within each function, replace the following line:

$string = '<a href="'.get_permalink($post->ID).'">'.$next;

..with this:

$string = '<a href="'.get_permalink($post->ID).'" title="EDIT THIS">'.$next;

Next, replace the EDIT THIS text in each function with “Previous Post” and “Next Post” respectively. Remember to check a few post views and then you are done.

Perishable Press vehemently opposes The great corporate/commercial campaign to implement the rel="nofollow" anchor. The proposal suggests that use of nofollow will reduce spam and improve search engine results.

This couldn’t be further from the truth, regardless of what the commercial giant$ may tell you.

Examine these helpful references and see for yourself:

• 11 Reasons Against nofollow
• The NoNoFollow Group
• Prepare for more comment spam, not less
• Repenting of my nofollow sins
• Comprehensive Reference for WordPress NoNofollow/Dofollow Plugins