iPad Orientation CSS (Revised)

Alternative to Cloud Four’s demonstration on how to serve up iPad stylesheets based on device orientation…

The practicalities of CSS Media Queries, lessons learned

CSS Media Queries are part of CSS3 and in brief: they allow you to tailor your websites appearance for different screen sizes. Most people I speak to know about media queries but have been a little shy in trying them out. You can read about media queries elsewhere – here, I’d like to speak about […]

Hardboiled CSS3 Media Queries

Since I started using Media Queries extensively over the last few months, I’ve revised the queries several times for each project, so it made sense to build a boilerplate to use as a starting point. These hardboiled CSS3 Media Queries are empty placeholders for targeting the devices and attributes I’m interesting in making responsive designs […]

CSS Webkit Appearance

I did my fair share of testing this site on an iPad during development. In most cases, the version of Mobile Safari found on the iPad renders pages like any other standards-based browser. Only when I got to native UI elements like search boxes & text fields did I notice an inconsistency. A pre-set styling […]

Detecting device size & orientation in CSS

Gone are the days when we could safely assume that most our site visitors would have at least a 1024px-wide screen resolution. With smartphones and tablet computers on the rise, you visitors could also be browsing the web with screen widths ranging from 320px upwards. Does your site look good on a 768px-wide canvas? That’s […]

CSS for the iPad

The iPad is coming and the developers already received the iPhone Simulator Extension. The new XCode beta also includes Safari Mobile. If you want to use a CSS modification for the iPad as I do, this is how you tell the iPad to use an additional CSS file…