Save 10% on our Pro WordPress plugins with discount code: 10PERCENT
Web Dev + WordPress + Security
58 posts related to: How to Micro-Optimize Your CSS

How to Deal with IE 6 after Dropping Support

As announced at IE Death March, I recently dropped support for Internet Explorer 6. As newer versions of Firefox, Opera, and Safari (and others) continue to improve consistency and provide better support for standards-based techniques, having to carry IE 6 along for the ride — for any reason — is painful. Thanks to the techniques described in this article, I am free to completely ignore (figuratively and literally) IE 6 when developing and designing websites. Continue reading »

Series Summary: Obsessive CSS Code Formatting

My favorite series of articles here at Perishable Press, the “Obsessive CSS Code Formatting” articles explore the esoteric minutia involved with producing clean, well-formatted CSS code. From indention and spacing to opening and closing brackets, the obsessive CSS code series explores techniques and tricks used to transform ordinary stylesheets into streamlined masterpieces of inspiring beauty. Creating poetic CSS integrates the high art of employing consistent coding patterns and formatting methods with the practical functionality of proper syntax, logical structure, and […] Continue reading »

Perishable Press CSS Hackz Series Summary

The “CSS Hackz Series” focuses on useful hacks, tricks, and workarounds for specific presentational and styling issues on various browsers. Although a majority of these articles provide solutions for Internet Explorer, other browsers are covered as well, either specifically or in general. The articles in the “Hackz” series are written to be as clear and concise as possible, focusing on application rather than theory. Thus, these posts cut right to the chase, presenting comprehensive methods and techniques aimed at those […] Continue reading »

Multiple Loops and Multiple Columns with WordPress, (X)HTML and CSS

Recently, I have been getting a lot of requests for multiple-loop configurations in WordPress. It seems that multiple-column, multiple-loop configurations are in high demand these days, especially ones that display posts like this: First column, first loop: display posts #1-5 Second column, second loop: display posts #6-10 Third column, third loop: display posts #11-15 Using WordPress and a little CSS, this configuration is relatively easy to accomplish. Let’s cut right to the chase.. Continue reading »

Horizontally Sequenced Display Order for WordPress Posts in Two Columns

[ Diagram: Default WordPress Post Display Order ]

Most WordPress-powered blogs display posts in sequential order within a single column. Like this, for example: Continue reading »

Obsessive CSS Code Formatting: Organization, Comments, and Signatures

One of my favorite aspects of producing clean, well-formatted CSS code is “meta-organizing” the document using comments. In CSS, comments are included in the stylesheet like so: /* i am the walrus */ When used constructively, CSS comments serve to break down documents into distinct regions, provide key information about specific declarations, and bring order to even the most complex stylesheets. In my experience, a well-commented stylesheet improves efficiency and optimizes comprehension. Working with CSS, you can add comments any […] Continue reading »

A Way to Preload Images without JavaScript that is SO Much Better

[ Preload Images with CSS ]

Responding to my first attempt at preloading images without JavaScript, CSS-Guru David Bowman graces his audience with a most enlightening set of comments. Apparently, the image-preloading technique explained in the article is “major overkill” and “totally ridiculous.” Of course, I will be the first to admit that I am no expert in CSS, but I do enjoy sharing my discoveries and watching as people improve upon them. My first attempt at preloading images without JavaScript may indeed be “pretty crappy,” […] Continue reading »

Sharpen Your Site by Removing Unwanted Link Border Outlines

[ Thumbnail: Link Outline Example 01 ]

Lately I have noticed several sites that display those unsightly dotted outlines on high-profile link elements. Typically, these link outlines plague various header elements such as banner images, navigational links, and other key features. This behavior frequently haunts highly graphical site designs and is often associated with various image replacement methods that position the original anchor text offscreen, generally far beyond the left edge of the browser window. When visible, such presentations display a ghastly, four-sided dotted border that wraps […] Continue reading »

Obsessive CSS Code Formatting: Indentation and Spacing

In the intriguing discussion following the first obsessive CSS formatting article, Jordan Gray brought up the age-old question regarding spacing: tabs or single spaces? I smugly responded that the issue has long-since been resolved, with tabbed spacing as the obvious winner. Let’s take a look at some serious CSS spacing examples.. 1) Strictly Single Spacing Here we have several code blocks showing consistent spacing via single blank space. Three key areas where single spacing is seen in this example: after […] Continue reading »

Obsessive CSS Code Formatting: Opening and Closing Brackets

Following my recent post on CSS code formatting, I was delightfully surprised to have received such insightful, enthusiastic feedback. Apparently, I am not the only person passionate about the subtle nuances involved with the formatting of CSS code. So, to continue the conversation, let’s explore several techniques for writing the opening and closing brackets of CSS declaration blocks. Continue reading »

Pure CSS: Better Image Preloading without JavaScript

[ Preload Images with CSS ]

After reading my previous article on preloading images without JavaScript1, Nanda pointed out that adding extra markup to preload images is not the best approach, especially where Web Standards are concerned. Mobile devices, for example, may experience problems when dealing with the following preloading technique: /* ADD THIS TO CSS */ div#preloaded-images { position: absolute; overflow: hidden; left: -9999px; top: -9999px; height: 1px; width: 1px; } <!– ADD THIS TO XHTML –> <div id="preloaded-images"> <img src="https://perishablepress.com/image-01.png" width="1" height="1" alt="Image 01" […] Continue reading »

Obsessive CSS Code Formatting: Patterns and Trends

Call me strange, but I format each of my CSS rules according to the following structure/pattern: div#example element { margin: 5px 15px 5px 0; border: 1px solid #444; line-height: 1.5em; text-align: center; background: #222; font-size: 10px; display: block; padding: 5px; color: #888; float: left; } div#another div.example element { border: 1px solid #444; margin: 7px 0 17px 0; letter-spacing: 1px; font-weight: bold; background: #222; font-size: 1.1em; cursor: pointer; display: block; padding: 3px; width: 308px; color: #888; clear: left; float: left; […] Continue reading »

XHMTL/CSS Remix: Creative Commons License

[ Screenshot: Creative Commons Deed - Remixed ]

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 […] Continue reading »

Lessons Learned Concerning the Clearfix CSS Hack

I use the CSS clearfix hack on nearly all of my sites. The clearfix hack — also known as the “Easy Clearing Hack” — is used to clear floated divisions (divs) without using structural markup. It is very effective in resolving layout issues and browser inconsistencies without the need to mix structure with presentation. Over the course of the past few years, I have taken note of several useful bits of information regarding the Easy Clear Method. In this article, […] Continue reading »

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

[ Screenshot: broken footer positioning in IE 7 ]

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 […] Continue reading »

Position Absolute Horizontal and Vertical Center 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 […] Continue reading »

Welcome
Perishable Press is operated by Jeff Starr, a professional web developer and book author with two decades of experience. Here you will find posts about web development, WordPress, security, and more »
Banhammer: Protect your WordPress site against threats.
Thoughts
Working on a new book :)
LinkedIn decided to replace my highly rated video course on WP security. For a limited time the course is still available to *logged-in* users via direct URL.
I enjoy listening to original Star Trek and NG episodes while working online. After a while it feels like I’m working on the ship as part of the crew, going on adventures.
New version (2.6) of my shapeSpace starter theme now available! Always free & open source for everyone :)
Finished updating all of my books! As always, book owners can download the latest versions for FREE :)
W3C.org has a very thorough list of accessibility tools.
The more you wake up, the more you realize you are still asleep.
Newsletter
Get news, updates, deals & tips via email.
Email kept private. Easy unsubscribe anytime.