When designing a website, it’s always a good idea to test on as many different platforms, devices, and browsers as possible. These days, pimping your websites for the iPhone and iPad is an important step in the design process. Especially on the iPad, sites tend to look about 20% cooler than on desktop browsers, so you definitely want to take the time to fine-tune the details. And when dealing with iDevices, it’s often necessary to deliver some custom CSS to make everything just right.

Want to apply CSS styles to the iPad and iPhone? Here is the plug-n-play, copy-&-paste code that actually works.

As you may have heard, I’ve been super-busy behind the scenes building an Angry-Birds fan site, of all things. The site is looking great so far, but needed some tweaking to appear slick on the iPad and iPhone. After testing a number of different solutions, here is what I found that actually works..

Continue Reading

There are many ways to optimize your web pages. In addition to reducing HTTP requests and delivering compressed files, we can also minify code content. The easiest way to minify your CSS is to run it through an online code minifier, which automatically eliminates extraneous characters to reduce file size. Minification shrinks file size significantly, by as much as 30% or more (depending on input code). This size-reduction is the net result of numerous micro-optimization techniques applied to your stylesheet. By learning these techniques and integrating them into your coding practice, you’ll create better-optimized CSS during the development process. Sharper skills, cleaner code, faster downloads – it’s a “win-win” for everyone.

In this Perishable Press article, you’ll learn how to write leaner, cleaner CSS using 10+ micro-optimization techniques..

The basic idea behind micro-optimizing your CSS involves writing clean code, eliminating extraneous characters, and reducing overall file size. And you don’t have to rely on an automated script to do everything for you. Instead of writing lazy, sloppy, bloated code and then just dumping your hideous CSS into an automated minifier, it’s better to understand and practice as many micro-optimization tips as possible, given your particular coding style and specific project requirements.

Continue Reading

An excellent way to simplify and streamline your Cascading Style Sheets (CSS) is to take advantage of the many different shorthand properties available to you. Working with a lot of CSS, you eventually memorize these different shortcuts, but every now and then, I find myself needing a quick, straightforward reference for some of the more elaborate property combinations. In this post, I’ll show you the shorthand rules for the following properties:

1. Font Properties
2. List Properties
3. Background Properties
4. Border and Outline Properties
5. Transition Properties (CSS3)

These are the top 5 on my list of most complicated and frequently used shorthand properties. There are others as well, even in CSS3, but I’ll save those for another post. Alright enough of my narcissistic ramblings – let’s do this thing!

Font Properties ↩

Styling fonts involves a number of individual properties. You can save quite a bit of space using shorthand notation, but be careful to include at least font-size and font-family (in that order). Here are all 6 of the font properties along with their default values:

/* font properties with default values */
font-variant: normal
line-height: normal
font-family: varies
font-weight: normal
font-style: normal
font-size: medium

These 6 declaration blocks can be combined into a single shorthand rule, ordered according to W3C specifications:

/* shorthand notation for font properties */
font: [font-style] [font-variant] [font-weight] [font-size]/[line-height] [font-family];

/* EXAMPLES */
font: 14px Georgia, serif;
font: 14px/1.4 Georgia, serif;
font: italic lighter 14px/1.4 Georgia, serif;
font: italic small-caps lighter 14px/1.4 Georgia, serif;

As you can see, a single line of code is used to replace an entire block. Far more elegant, if not slightly awkward looking. The more I use this syntax, the more I like it.

Continue Reading

In my previous post on Quick and Easy CSS @font-face Code, I provide a choice set of CSS rules for embedding custom fonts into your web pages. It’s a solid, cross-browser technique that works great, but as Marty Thornley pointed out, it would be useful to have a more thorough explanation of how the code actually works. So, rather than going back and adding a bunch of additional information to the original post, I’m following up with a visual walkthrough of the @font-face code.

In step-by-step visual format, this article will show you what the code is doing and how to use it with your own custom fonts.

Step 1: Declaring the @font-face rules

The first thing we want to do is copy & paste the quick and easy @font-face code into our stylesheet:

@font-face { /* declare fonts */
	font-family: "MuseoLight";
	src: url("fonts/Museo300-Regular.eot");
	src: local("Museo 300"), local("Museo-300"),
		url("fonts/Museo300-Regular.woff") format("woff"),
		url("fonts/Museo300-Regular.otf") format("opentype"),
		url("fonts/Museo300-Regular.svg#Museo-300") format("svg");
		}

Yes, it’s a hideous-looking chunk of CSS, but that’s not going to stop us from using it to embed our own custom fonts. Let’s break it down and see how the different parts fit together..

Continue Reading

I’ve been using custom fonts in my designs for quite a few sites now, and have refined what seems to be an ideal chunk of CSS code for implementing the @font-face rules. Some of the sites that include these rules include Perishable Press and Digging into WordPress, which look more stylish and refined with the custom fonts in effect. I’ve tested this code on quite a few browsers, including the following:

• Safari 3.1+
• Opera 10+
• Firefox 3.5+
• Chrome 4.0+
• Internet Explorer 6+

This technique delivers your custom fonts quite consistently to all of these browsers, and degrades gracefully for those that don’t support it. Of course, there are always weird exceptions contingent in particular scenarios, but overall it’s a solid chunk of code put together from much research, experimentation, and testing. I share it here hoping it will help others implement custom @font-face fonts quickly and easily. Let’s step to it..

Continue Reading

Even before CSS3 introduced a cornucopia of new border properties, CSS2.1 provided plenty of great functionality, enabling designers to style and enhance borders in many different ways. But now with the many new border properties available with CSS3, much more is possible, including everything from background border images, asymmetrical border radii, border transformations, custom fitting, and much more. While not every browser fully supports all of these new stylistic possibilities, we can practice progressive enhancement to create beautiful, well-styled borders for modern browsers while supporting the dinosaurs with suitable fallback styles.

Many of us know how easy it is to use CSS border properties to do cool stuff like image-free, cross-browser rounded corners, but there is so much more that is possible with all of the new CSS3 properties. In this article, we’ll explore the CSS3 and CSS2.1 border properties while keeping a keen eye out for obvious patterns and taking note of key points along the way. When it’s all said and done, hopefully we’ll have a better understanding of the “big picture” concerning the functional and syntactical mechanism behind the magical world of CSS border properties.

Continue Reading

Progressive enhancement is a good thing, and CSS3 is even better. Combined, they enable designers to create lighter, cleaner websites faster and easier than ever before..

CSS3 can do some pretty amazing stuff: text shadows, rgba transparency, multiple background images, embedded fonts, and tons more. It’s awesome, but not all browsers are up to snuff. As designers, it’s up to us to decide which browsers to support for our projects. While everyone has their own particular strategy, there seem to be three general approaches:

• Support all browsers with perfect fidelity – not realistic for most budgets, requires many elaborate workarounds, hacks, etc., also difficult to maintain, upgrade, and extend.
• Support all browsers to some degree – focus first on the latest and greatest browsers, and then go back and make sure that older browsers look and work reasonably well.
• Support newer browsers, forget about the older stuff – make your sites look pixel-perfect on the newest versions of modern browsers and don’t worry about anything else.

Among these generalized strategies, the second approach comes closest to the concept of progressive enhancement. In practice, progressive enhancement enables designers to design websites according to some predetermined support baseline and then gradually improve and optimize appearance and functionality to accommodate the most advanced browsers. Closely related to this idea is the principle of graceful degradation, which is what should happen when newer design methods aren’t understood or supported by certain browsers. Consider the following example..

Continue Reading

I recently added to my growing library of image-preloading methods with a few new-&-improved techniques. After posting that recent preloading article, an even better way of preloading images using pure CSS3 hit me:

.preload-images {
	background: url(image-01.png) no-repeat -9999px -9999px;
	background: url(image-01.png) no-repeat -9999px -9999px,
		    url(image-02.png) no-repeat -9999px -9999px,
		    url(image-03.png) no-repeat -9999px -9999px,
		    url(image-04.png) no-repeat -9999px -9999px,
		    url(image-05.png) no-repeat -9999px -9999px;
	}

Using CSS3’s new support for multiple background images, we can use a single, existing element to preload all of the required images. Compare this method with the old way of using CSS to preload images:

Continue Reading

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