Why you should use ems for media queries

by

I have bad eyes. Really bad eyes. So even though I wear glasses, often I find myself needing bigger fonts. On my Chromebook that means that I browse with the zoom set to 125% by default. And I’ve been noticing some bad things in your media queries. We need to talk about that.

But let’s talk about font sizes first. Or if you’re already up to date, jump to where I get to the point.
Read the rest of this entry »

How to print a multiple select box in IE9

by

Recently I had to solve a small print bug in IE9 that turned out a lot harder than I thought. In short, the problem is as follows: I have a <select multiple="multiple"> on a page, with enough <option>s in it to have a scrollbar. On the screen this is all fine, but when trying to print that box in IE9, the overflowing elements are always visible.

Because I wasn’t able to reproduce it in the browser, here’s an actual photo of a printed multiple select:

Read the rest of this entry »

12 Web People you should follow on App.net

by

While I’m still exploring App.net it I’m trying to find some more developers to follow there. The reason I really started to dig Twitter is the amount of discussions and shared links about the stuff that I work with all day, and I hope to continue that on ADN as well.

I thought it might be a good idea to share them, until some better tools are built to find like-minded people, so here they are:

Andy Clarke (@malarkey)
Designer, speaker, author of “Transcending CSS” and “Hardboiled Web Design”.

Anil Dash (@anildash)
Blogger, entrepreneur and technologist. Generally has a lot of useful things to share.

Ethan Marcotte (@beep)
Web designer and developer, writer of “Responsive Web Design” (which started the whole RWD hype we’re currently in the middle of).

Jason Santa Maria (@jasonsantamaria)
Designer, creative director of Typekit and A List Apart, co-founder of A Book Apart.

Jeffrey Zeldman (@zeldman)
The Godfather of web standards. Also web designer, entrepeneur, writer of “Designing with Web Standards”, founder of A List Apart and An Event Apart, co-host of The Big Web Show.

Jonathan Snook (@snookca)
Web designer and developer, writer of “Scalable and Modular CSS”.

Marco Arment (@marco)
Web- and iOS developer, founder of Instapaper, co-founder of Tumblr.

Mat Marquis (@wilto)
Web designer and developer, part of the jQuery Mobile team. Also quite funny.

Michael Heilemann (@heilemann)
Interface designer, created the Kubrick theme for WordPress (the default theme on versions 1.5 – 2.9).

Peter-Paul Koch (@ppk)
Mobile platform strategist, browser compatibility expert, founder of Quirksmode.org

Roy Tomeij (@roy)
Front-end architect, entrepeneur, writer of “Modular Front-End”.

 

Bonus: a list of people possibly worth following but inactive on App.net right now. They might start posting interesting stuff in the future. Or not.

Chris Coyier (@chriscoyier)
Designer, founder of CSS-tricks.com, author of “Digging into WordPress”.

Dan Cederholm (@simplebits)
Web designer, author of several books on CSS, co-founder of Dribbble.

Dylan Wilbanks (@dylanw)
Web developer and UX designer, plays the part of “Moose” in the “Squirrel and Moose” podcast with cssquirrel.

Erin Kissane (@kissane)
Writer, editor and content strategist, wrote “The Elements of Content Strategy”. Former editor of A List Apart.

Luke Wroblewski (@lukew)
Digital product designer, writer of “Web Form Design” and “Site-Seeing: A Visual Approach to Web Usability”.

Matt Mullenweg (@photomatt)
Co-founder of WordPress.

Did I miss some interesting people? As always, let me know in the comments, on Twitter or on App.net!

Rivr vs Rhino, a comparison of free app.net clients

by

A couple of days ago I decided to join app.net, the new ad-free social network you have to pay for to join (yeah, you read that right). I won’t go into detail why as there’s already plenty of blogs roughly voicing my reasons to do so. Instead, I want to compare two free iOS apps that are currently available to access the network: Rhino and Rivr.

A small disclaimer: app.net and its clients are all still very young, and a lot of changes are bound to happen in the near future. This is just an early comparison of apps that are still in their development stages. Updates on this post will follow.

Read the rest of this entry »

Styling table columns with nth-child()

by

Tables in HTML are dead. Well, mostly. Sometimes you actually have tabular data that you wish to show on a website, and in that case the <table> element is obviously still the best choice.
One problem that I often encounter is that while you can style table rows quite easily with a single class per row, styling columns is harder.

Here's a random example table from a site I've been working on.

Month Credits Earned Dollars Earned
June 2012 2,054 $133
July 2012 1,580 $89
June 2012 3240 $187

Classes

Now say you want to align the columns with numbers to the right and give the final column a different background color. One of the ways to do this is to use classes on each of the table cells.

This isn't a bad solution per se, especially if you use semantic classes and not just class="align-right", but on big tables you end up with lots and lots of classes horizontally (for every cell that you need to style) and vertically (for every row, repeat the cells and their classes). I don't like that.

The <col /> element

Another solution is to use the <col /> element. By defining the columns in your table you can add CSS hooks to it in this way:

<table class="sales">
  <colgroup>
    <col class="month" />
    <col class="credits" />
    <col class="dollars" />
  </colgroup>
  <thead>
    <tr>
      <th>Month</th>
      <th>Credits Earned</th>
      <th>Dollars Earned</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>June 2012</td>
      <td>2,054</td>
      <td>$133</td>
    </tr>
    <tr>
      <td>July 2012</td>
      <td>1,580</td>
      <td>$89</td>
    </tr>
  </tbody>
</table>

(I left out a row for brevity)

Now you can use .month to style the first column, or if you only want to style the contents and not the header cells you can use .month td.

The problem? You can only style the border, background, width and visibility. Not even the text-alignment. Why? No idea, it shouldn't be too hard to implement other styles there as well, right? (Fun fact: IE6 does support all styles this way)

nth-child()

So that leaves us with one more solution: using CSS3's pseudo-classes. The nth-child() selector allows you to choose specific siblings of elements without the need for classes. For example, if you want to style the "month" column you only have to count to one:

.sales td:nth-child(1) {
  color: red;
}

Or if you want to align both the heading and content cells that contain numbers to the right:

.sales tr :nth-child(2),
.sales tr :nth-child(3) {
  text-align: right;
}

There's a lot more to the nth-child than just this. You can use counters to select every nth element: :nth-child(2n+1) selects every second element, starting with the first, :nth-child(-n+3) styles only the first three elements, and if that's getting too confusing don't visit nthmaster.com, because I've only barely scratched the surface.

The downsides

Of course there's some minor downsides to this method. First of all, it's not supported by IE8 and lower. I know, that's still a problem, but Microsoft has been getting better at pushing their browser updates so I expect it won't even be too long before IE8 won't have to be supported anymore. Or you can just use Selectivizr.

Another downside is that it gets a little harder to maintain. When you have to add a column to a table, you'll have to re-count instead of just adding a <td> with a class. If you know your tables are going to change a lot, maybe stick to classes for now.

All in all though, for projects where I know the HTML doesn't change much and I'm not too bound by supporting older browsers, I tend to use these pseudo-selectors more and more.

If you feel like playing around a bit more with these rules, see this awesome Pseudo-class selector tester and the aforementioned nthmaster.

On the way to Responsive

by

For a while now I’ve been working with responsive webdesign, and I’m starting to really dig it. I’ve even gone back to some previously built sites that I still maintain and added some quick
media queries to them to make them a little bit more mobile-friendly. However, as often happens with projects that you run as a hobby instead of as a job, this very blog was still not ready for the smaller screens. It is now though!

So far I’ve added just a few basic rules in media queries based on where my site broke down when resizing the window (not on standard phone screen sizes, see this blog post). Over the next few days I’ll still have to tweak and fix some things and test on more devices (and especialy Opera Mini/Mobile) but at least I’ve made the first step.

Future, here I come!

Get element by attribute value (plain Javascript)

by

Just a quick and simple function to grab any one element by a certain attribute value, without having to use libraries like jQuery or Prototype:

function getElementByAttributeValue(attribute, value)
{
  var allElements = document.getElementsByTagName('*');
  for (var i = 0; i < allElements.length; i++)
   {
    if (allElements[i].getAttribute(attribute) == value)
    {
      return allElements[i];
    }
  }
}

In case of multiple elements with the same attributes this will only return the first one.

Example

Sometimes I use elements like <header role="masthead"> in my site to be able to style the site's header (masthead) differently than other header elements, for example post headers. To select this element in JavaScript I'd now use:

var headerElement = getElementByAttributeValue('role', 'masthead');

Display: inline-block in IE7 (CSS hack)

by

Once in a while you’re forced to support Internet Explorer 7. Even though its share is only 1.29% for the site I’m currently working on, the amount of visitors is so vast that even that small percentage accounts for hundreds of thousands of pageviews per month. Which means we can’t just yet afford to drop support.

One problem I kept encountering was that of using display: inline-block. In all modern browsers this is supported, and often it’s a lot more useful than using floats. The problem once again though is IE7′s support for it. Read the rest of this entry »

SEO Slugs Dutch – Remove Dutch stopwords from your Blog URLs

by

For a while now I’ve been using the plugin SEO Slugs on several blogs, to make sure no unnecessary words end up in my URLs. However, this plugin still only exists in English, and I really needed one in Dutch.

So, I scoured the web for lists of Dutch stopwords, and combined those to make a Dutch version of the plugin. I’d like to make an internationalized version that contains multiple word lists, and I may do so in the future, but for now here’s just a Dutch version of the SEO Slugs plugin.

Download SEO Slugs Dutch for WordPress.

The current list counts 131 words, but suggestions and updates are always welcome of course (in the comments or to @Litso_). To see a working example of this plugin visit denkeensna.nl