So… the site I’m working on has one of those “increase text size” controls. On this project it’s turned out to be one of those features that shows up in comps and somehow falls through the cracks until later on in the project cycle. Situation normal, really, as it isn’t a big feature. It’s just one of those things that needs to be buttoned up before the site can go live.

Anyway, I was thinking about how to do implement it the other day. I haven’t done one of these in a long time and the only other time I did one it involved crafting separate, albeit small, style sheets for the larger text sizes. I didn’t want to go that way again. Basically, I just didn’t want to write new style sheets- even small ones.

What’s a fella to do?

zoom

So, thinking about it a little bit, I seized upon using the non-standard CSS zoom property. Supported in Internet Explorer (zoom:1 is often used for a hasLayout toggle) and Webkit browsers, it would represent a simple (1 line!) CSS solution to this problem. It’s also one that I like better aesthetically as the site looks the same, just bigger. I figure there’s a reason all browsers have moved to this behavior when hitting ctrl+.

The problem was figuring out an equivalent for FireFox and Opera which don’t support zoom

Enter CSS 2D Transform

A little searching and experimenting later I came up with the idea of using CSS Transforms and the scale value to approximate zoom in browsers that lack support.

Let’s see how I did it.

As you go through the following keep in mind this hasn’t actually gone through testing yet so something weird could yet shake out. I just wrote this code yesterday, so you guys can be my sanity check.

Also, is anyone else doing this?

Read the rest of this entry »

I’m a big fan of the Graded Browser Support table from the fine folks at Yahoo! It was the official foundation for our browser support policy at Cramer and I still look to it now for hints into what one of the most mass-market of all sites thinks about the browser landscape.
Read the rest of this entry »

Sorry, it’s been a while. I’ve been busy at work, I’ve been wringing every last bit out of summer on my bike, and I’ve spent a lot of my free time on my upcoming CSS presentation, so I haven’t been posting as much as I would like. Fall is here. Which means I should have more time for writing. That’s cool.

Anyway, to break the ice here are a few articles that have recently caught my attention.
Read the rest of this entry »

After a long break, I’m finally back with the long-awaited CSS portion of this little series.

In this article I’ll go over some core concepts. Next post I’ll outline one poorly understood, but vital part of CSS. More posts full (yes, full) of tips, tricks and best practices will follow.

Core concepts

CSS is a style sheet language used to determine the formatting of an HTML document (although it could be used to style other XML documents like SVG and XUL.) Before we had CSS (and before it was widely adopted) all of this presentation information was embedded in the document, either in the form of attributes like width or bgcolor or in the form of purely presentational tags like font. Combined with the abuse of the table tag to create complicated layouts, the landscape for layout and design on the web was an unmanageable mess.

CSS fixed all that. Using separate style sheets for an entire site and leveraging semantic markup, and identifiers like ids (for unique page elements) and classes (for multiple, like elements) a developer can apply styles to an entire site while updating a single, cacheable file.
Read the rest of this entry »

Here are the numbers for DrunkenFist.com in the year 2009. There were 614,333 visits to that domain last year and the top browsers broke down like this:

Read the rest of this entry »

Owing to the contrast on the A/V system, my last slide was illegible, so here are all the links that folks couldn’t see.

The presentation itself:
HTML5 + WordPress

And the resource links:

The working group
http://www.whatwg.org/
Mark Pilgrim’s HTML5 book
Dive into HTML5
The Modernizr library
Modernizr
The outliner
http://gsnedders.html5.org/outliner/
The post talking about Kubrick
I’m Messing Around With an HTML5 Version of the Default WordPress Theme

My other sites:
DrunkenFist.com (art portfolio)
@robreact

I’ll have video of the presentation up shortly (I hope!)

Yes, I’m still helping out with screening candidates. I haven’t yet interviewed someone to replace me, but there’s still a week to go.

Anyway, we’ve had a couple of technical questions that candidates universally failed to answer. Why share them here? For starters I just want to know if we’re crazy to expect people to know these. I also like the idea of a kind of “easter egg” for candidates. If someone does enough research to find my blog and read this post, they’ve shown me something, even if it’s not the answer to one of the questions posed below.

The two that have surprisingly turned into stumpers (at least for the last five or six folks I’ve interviewed)

1. What is hasLayout?
2. What’s the significance of setting the body text to .625em?

And the bonus question that I want to ask, but don’t, because it’s kind of goofy to say out loud

3. What’s “The Mark of the Web?”

Answers after the jump.
Read the rest of this entry »

Should You Use JavaScript Library CDNs?

Interesting reading. Here’s the salient bit:

Or, more simply: If we use Google’s JavaScript Library CDN, we are asking the majority of our website visitors (who don’t have jQuery already cached) to take a 1/3 of a second penalty (the time to connection to Google’s CDN) to potentially save a minority of our website visitors (those who do have a cached copy of jQuery) 1/3 of a second (the length of time to download jQuery 1.3.2 over a 768kps connection).

That does not make sense. It makes even less sense as the download speed of your visitors increases. Try to avoid serving 20 or 30 kilobytes of content at the cost of using a 3rd party just doesn’t make sense.

We’ve used the Google CDN to serve jQuery at Cramer with no obvious complaints and I heartily recommend using the configurator/CDN option that Yahoo offers (for the unitiated, it builds a “just what you need” package to grab from their CDN, so you don’t have to serve every YUI Module just to do x), but Billy Hoffman’s article definitely makes me rethink the former.

History of the user-agent string

If you didn’t live through it (and I didn’t live through the whole thing), now you can revisit the strange history of the user-agent string in just a few, well-written, minutes.

Comprehensive List of Browser-Specific CSS Hacks

I hate me some browser hacks. But that’s a mighty fine list.

Detecting browsers javascript hacks

We spent about 45 minutes running variations of the one-liners above in the console during a code-review last week. Fun times.

It sounded like this a couple of times:

“Wait, what?”

…

And finally… are you enjoying the jQuery advent calendar? I’m interested in running jQuery 1.4 against the demo code I build for my library presentation. I expect to be bowled over.

This is my old pattern:

<!DOCTYPE html>
  <html lang="en-US">
	<title>Internet Exploder</title>
        <link rel="stylesheet" href="/_assets/styles/styles.css" />
	<!--[if gte IE 5.5]>
		<![if lt IE 7]>
			<link rel="stylesheet" href="/_assets/styles/ie6.css" />
	  	<![endif]>
	  	<![if IE 7]>
	  		<link rel="stylesheet" href="/_assets/styles/ie7.css" />
	  	<![endif]>
      <![if gt IE 7]>
			<link rel="stylesheet" href="/_assets/styles/ie8.css" />
	  	<![endif]>
  	<![endif]-->
</head>
<body id="home">  

Simple. It serves a new style sheet to various versions of IE as needed. The bad thing is the extra HTTP request added onto the Microsoft browsers. I’m not even there yet, but during one of my interviews for the new gig an alternative was suggested- using conditional comments to append a different class to the html element and letting the cascade sort it out.

I liked that idea.
Read the rest of this entry »

The answer is no

While some of the functionality of MS’s CSS filters is actually pretty useful (sue me, I need to use them from time to time), the implementation is ugly as hell. Ryan, one of the smart guys here that helps me fool people into thinking I know what I’m doing, had to implement the Microsoft gradient filter as a (brilliant) hack for a performance issue on a small subset of IE browsers. We were discussing the solution and then he called up the code.
Read the rest of this entry »