New book on WordPress Theme Development: WordPress Themes In Depth
markup
Tag Archive

CSS/(X)HTML Tutorial: Hovering Accessibility Jump Menu

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 […] Read more »

XHMTL/CSS Remix: Creative Commons License

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 […] Read more »

Pimping the Details, Part 1: Post Content

In today’s highly competitive blogosphere, every edge counts. There are many aspects of a site or blog that can be easily acquired. Fancy themes may be purchased, nifty plugins are freely downloaded, and even snazzy content is immediately available. Indeed, setting up a decent-looking blog is so easy that virtually anyone can do it. Even so, just spend a little time at most sites and check out a few of the details. How is the writing — grammar, syntax, and punctuation? What about links and images — are they equipped with intelligent titles and alt attributes? As you read through […] Read more »

Error-Free Feed-Validation Links for Feedburner-Redirected Feeds

Just a quick tip on how to create error-free links to feed validation services for feeds that are redirected through Feedburner. For example, let’s say our site’s main feed is originally located at: http://domain.tld/feed/ If we wanted to provide our visitors with a link that would enable them to automatically validate our feed using a free service such as feedvalidator.org 1, we would create the link as follows: Read more »

What is the Difference Between XHTML 1.0 Strict and XHTML 1.1?

As some of you (e.g., Louis) may have noticed during the recent site redesign, I decided to switch the default doctype from XHTML 1.0 Strict to XHTML 1.1. Just in case you were wondering, XHTML 1.1 is different than XHTML 1.0 in three important ways 1: On every element, the lang attribute has been removed in favor of the xml:lang attribute On the a and map elements, the name attribute has been removed in favor of the id attribute The “ruby” collection of elements has been added Beyond these three differences, XHTML 1.1 is identical to XHTML 1.0. Personally, I chose […] Read more »

Prevent JavaScript Elements from Breaking Page Layout when Following Yahoo Performance Tip #6: Place Scripts at the Bottom

By now, everyone is familiar with the Yahoo Developer Network’s 14 “best-practices” for speeding up your website. Certainly, many (if not all) of these performance optimization tips are ideal for high-traffic sites such as Yahoo or Google, but not all of them are recommended for smaller sites such as Perishable Press. Nonetheless, throughout the current site renovation project, I have attempted to implement as many of these practices as possible. At the time of this writing, I somehow have managed to score an average 77% (whoopee!) via the YSlow extension for Firebug. Of the handful of these tips that I […] Read more »

Absolute Horizontal and Vertical Centering via CSS

Recently, a reader named Max encountered some scrolling issues while implementing our absolutely centered layout technique. Of course, by “absolutely centered” we are referring to content that remains positioned dead-center regardless of how the browser is resized. After noticing the scrollbar deficiency, Max kindly dropped a comment to explain the issue: …the div solution works well, only one problem maybe somebody can help: if you make the browser window smaller then the div is -> the scrollbar doenst fit right und you cant scroll over the whole area… Apparently, because the horizontal/vertical centering method outlined in our original article employs […] Read more »

Bare-Bones HTML/XHTML Document Templates

In this post I have assembled a concise collection of conforming, bare-bones document templates for the following doctypes: Document Templates XHTML 1.0 XHTML 1.0 Strict XHTML 1.0 Transitional XHTML 1.0 Frameset XHTML Basic 1.0 XHTML 1.1 XHTML 1.1 XHTML Basic 1.1 HTML 4.01 HTML 4.01 Strict HTML 4.01 Transitional HTML 4.01 Frameset Read more »

Rethinking Structural Design with New Elements in HTML 5

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: header section article nav footer Read more »

The Friendliest Link Targets in the Neighborhood

The target attribute for anchor elements (<a></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: Read more »

Embed Flash or Die Trying

Embed Flash or Die Tryin’ Web designers and developers looking to embed Flash content into a web page currently enjoy a wide variety of methods from which to choose. The most common methods vary along several key dimensions, including standards-compliance, user-friendliness, and universal support. Some methods make it easy to provide alternative content, others enable auto-activation of Flash content, while others feature plugin-detection functionality. In an attempt to round-up the myriad techniques, this article presents nine of the most useful, practical, and popular methods for embedding Flash content. Read more »

URL Character Codes

URL’s frequently employ potentially conflicting characters such as question marks, ampersands, and pound signs. Fortunately, it is possible to encode such characters via their escaped hexadecimal ASCII representations. For example, we would write "?" as "%3F". Here are a few more URL character codes (case-insensitive): Read more »

Embed QuickTime Notes Plus

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> Read more »

Feed your Image via Atom or RSS

This quick tutorial explains how to add images to both Atom and RSS feeds. Although both formats allow for image-inclusion, feed-reader support for image-display is currently quite limited. Hopefully, that will change in the near future.. Images for Atom Feeds Images included within Atom feeds must have a ratio of either 1:1 or 2:1. There are no other restrictions as to file type or size. Use the < icon> XML element for URL’s targeting 1:1 images. Otherwise, use the < logo> XML element for URL’s targeting 2:1 images. Either element should be placed in the < feed> element: <feed> <icon>http://domain.tld/path/icon.ico</icon> […] Read more »

Embed Flash and Video via the object Tag

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> Read more »

Embed External Content via iframe and div

By using an <iframe></iframe> within a <div></div>, it is possible to include external web content in most any web document. This method serves as an excellent alternative to actual frames, which are not as flexible and definitely not as popular. Indeed, with CSS, the placement, sizing, and styling of div’s provides endless possibilities for embedding external or even internal web content into pages that would otherwise require the use of frames, Flash, or JavaScript. This method works on any modern browser, as well as any old browser that understands both <div></div> and <iframe></iframe> tags. Simply add the following code to […] Read more »

Latest Tweets Taking some time at the end of the year to recharge, refresh, and renew. Gonna triple my efforts in 2015 :)