![[ Electrical Surge ]](http://perishablepress.com/press/wp-content/images/2009/misc-chunks/html-css-power.jpg)
Web designers can do some pretty cool stuff with HTML 4 and CSS 2.1. We can structure our documents logically and create information-rich sites without relying on archaic, table-based layouts. We can style our web pages with beauty and detail without resorting to inline <font> and <br> tags. Indeed, our current design methods have taken us far beyond the hellish era of browser wars, proprietary protocols, and those hideous flashing, scrolling, and blinking web pages.
As far as we’ve come using HTML 4 and CSS 2.1, however, we can do better. We can refine the structure of our documents and increase their semantic precision. We can sharpen the presentation of our stylesheets and advance their stylistic flexibility. As we continue to push the boundaries of existing languages, HTML 5 and CSS 3 are quickly gaining popularity, revealing their collective power with some exciting new design possibilities.
Continue Reading
One of the oldest JavaScript tricks in the book involves providing a “print this!” link for visitors that enables them to summon their operating system’s default print dialogue box to facilitate quick and easy printing of whatever page they happen to be viewing. With the old way of pulling this little stunt, we write this in the markup comprising the target “print this!” link in question:
<a href="javascript:window.print()">Print This!</a>
Big yuck there, of course, due to the obtrusive nature of the JavaScript implementation. Adhering to the principles of proper Web Standards, it is better practice to separate behavior from structure by placing this amazing “print this!” function in its own location, either in the <head> of the document or even better in an external JavaScript file. So basically, we want markup that looks more like this:
<a href="http://domain.tld/target/" title="Print this page">Print This!</a>
Notice the new value for the href attribute. Rather than pointing illogically to the JavaScript function, it now points to an actual resource, which may be anything you desire. Previously, users without JavaScript would click the “print this!” link and blink while nothing happens. With the unobtrusive technique, you provide the location to which users without JavaScript shall go. Possibilities here include an explanation page or even just the page itself, depending on how lazy you wanna be.
Continue Reading
Consider the Google home page — arguably the most popular, highly visited web page in the entire world. Such a simple page, right? You would think that such a simple design would fully embrace Web Standards. I mean, think about it for a moment.. How would you or I throw down a few lists, a search field, and a logo image? Something like this, maybe:
Continue Reading
In the current version of my custom contact-form WordPress plugin, Contact Coldform, there is no built-in method of sending emails to multiple addresses. The thought of adding such functionality had not occurred to me until recently, when a Coldform user asked about enabling it. After a bit of investigation, it turns out that integrating multiple-recipient functionality into Contact Coldform is as easy as it is practical. I will definitely be adding this feature to the next release of the Coldform, however, here is the modification procedure for those who just can’t wait.
Continue Reading
![[ ~:{*}:~ ]](http://perishablepress.com/press/wp-content/images/2008/misc-chunks/negotiation-deco.gif)
In this article, I discuss the different MIME types available for XHTML and explain a method for serving your documents with the optimal MIME type, depending on the capacity of the user agent. Using either htaccess or PHP for content negotiation, we can serve complete, standards-compliant markup for our document’s header information. This is especially helpful when dealing with Internet Explorer while serving a DOCTYPE of XHTML 1.1 along with the recommended XML declaration.
According to the RFC standards 1 produced by IETF 2, web documents formatted as XHTML 3 may be served as any of the following three MIME types:
Continue Reading
![[ ~{*}~ ]](http://perishablepress.com/press/wp-content/images/2008/jump-menu/access-deco.gif)
Recently, a reader named Don asked about this theme’s accessibility (accesskey) jump menu located at the top of each page. Several people have commented that they like the way the jump menu “lights up” upon gaining focus. Whenever a user hovers their cursor over the region at the top of the page, all links in the jump menu change to a more visible color. Then, as the cursor moves over the various menu items, each jump link is further highlighted with an even brighter color and an underline. This progressive focusing is best seen in browsers that support the CSS :hover pseudo-class (e.g., Firefox, Opera, etc.), however the menu remains useful even in CSS-challenged browsers (e.g., Internet Explorer). In this article, I explain how the Perishable Press jump menu is built using Web standards via CSS and (X)HTML, and then provide the specific code required to emulate the jump menu as it appears here at Perishable Press.
Continue Reading
Not too long ago, I played with the idea of releasing article content under a Creative Commons (Attribution-NonCommercial-ShareAlike 2.0) License. At the time, I wanted to host my own copies of the two associated CC license pages. During the process of uploading the pages to my own server, several minor adjustments (regarding image paths, etc.) needed to be made to the source code. After tweaking a few things in the XHTML code, I began snooping around in the pages’ CSS files. Eventually, I found myself rewriting the entire CSS and XHTML files for both documents. Although this sort of activity is not unusual for me to do, I admit that it is borderline obsessive/compulsive and perhaps even a bit paranoid. Nonetheless, the reworked CSS and XHTML documents are cleaner, less redundant, and better optimized (in my humble opinion) than the originals. Further, the remixed pages are fine-tuned with a hyper-critical design aesthetic. To my eye, they present much tighter than the original versions. But hey, that’s what the spirit of Creative Commons is all about, right? Sharing, remixing, and improving content? In any case, redesigning these pages was good fun and good practice, even though I have since decided against licensing any of my content via Creative Commons 1. So, rather than simply deleting these brief redesign exercises, I have decided to post them online and share them with anyone who might be interested in such esoteric dabblings. You never know who might find them useful! ;)
Continue Reading
![[ Image: Coldform Icon ]](http://perishablepress.com/press/wp-content/images/2008/wp-coldform/coldform-icon.gif "Contact Coldform")
Welcome to the homepage for Contact Coldform, a free contact-form plugin for WordPress. Contact Coldform is designed with a sharp focus on clean code, solid performance, and ease of use. No frills, no gimmicks, only pure contact-form satisfaction. If you are looking for a solid, well-designed, user-friendly, fully customizable contact form, look no further: Coldform is perfect for any WordPress blogger. The comprehensive Options panel makes Coldform easy for beginners to take full control, while the consistent, logical PHP/(X)HTML code makes Coldform ideal for advanced users desiring customized functionality. The best of both worlds: a “clean-slate” contact form that provides everything you want and nothing you don’t! :)
Coldform Features:
- Compatible with WordPress versions 1.5 - 2.8 and beyond.
- Plug-n-play: add Coldform to any WordPress page or post.
- Simple installation — upload, activate, and customize.
- Complete WordPress Administrative Options panel for full control.
- Ultra-clean code output: standards-compliant, valid (X)HTML.
- Customizable anti-spam challenge question to protect against spam.
- Secure form processing and protection against malicious attacks.
- Same-page error messages to help users complete required fields.
- No obtrusive markup or code added to your
<head>.
- Includes option to enable users to send carbon copies to themselves.
- Coldform message includes IP, host, agent, and much more.
- Customizable form-field captions, error messages, and success message.
- Customizable drop-in CSS skins for easy styling.
- Customizable CSS attributes.
- Customizable everything!
Continue Reading
![[ Image: Tyrannosaurus Skull ]](http://perishablepress.com/press/wp-content/images/2007/misc-chunks/html-dinosaur.jpg)
HTML 5, also known as Web Applications 1.0, provides new markup elements that will change the way you design your web pages. The new elements replace commonly used divisions in web documents, facilitating an even greater degree of separation between structure (HTML) and presentation (CSS). Indeed, in many documents, the new elements will structure the document while providing enough hooks to render obsolete previously required divisions, classes, and identifiers. Let’s take a look..
New Structural and Semantic Elements in HTML 5
Structural Elements
The new structural elements in HTML 5 consist of the following:
headersectionarticlenavfooter
Continue Reading
Here are the validation services currently provided by the W3C 1:
References