Different CSS for IE using Sass

At times, it might be unavoidable to have different CSS rules for Internet Explorer than for sane browsers. Using Sass, this can be achieved in a relatively non-hackish way without CSS hacks.

Step 1

Move your current Sass file into a partial. Let's assume it was called screen.sass. Rename it _screen.sass.

Step 2

Create two new Sass files:

Call this one screen.sass:
$ie = false
@import screen

Call this one screen_for_ie.sass:
$ie = true
@import screen

Step 3

Change y…

Linked content

Liquid Canvas

Liquid Canvas is a JavaScript library which allows you to draw inside an HTML canvas element with an easy yet powerful description language.

It can be used to add graphics to your web page without ever touching an image creation tool such as The Gimp, Inkscape or Photoshop.

Check out the Demo and the basic example and then download version 0.3.

Linked content

PhantomJS: Headless WebKit with JavaScript API

PhantomJS is a minimalistic headless WebKit.

It has fast and native support for various web standards:

DOM handling, CSS selector, JSON, Canvas, and SVG.

PhantomJS can be fully scripted using JavaScript. It is an optimal solution for headless testing of web-based applications, site scraping, pages capture, SVG renderer, PDF converter and many other usages.

Upgrading Cucumber and Capybara to the latest versions available for Rails 2

Specify these gem versions in your Gemfile:

gem 'cucumber', '~> 1.3.0'
gem 'cucumber-rails', '= 0.3.2' # max version for Rails 2
gem 'capybara', '< 2' # capybara 2+ requires Rails 3
gem 'mime-types', '< 2' # dependeny of capybara
gem 'nokogiri', '< 1.6' # dependency of capybara
gem 'rubyzip', '< 1' # dependency of selenium-webdriver, rubyzip 1+ requires Ruby 1.9
gem 'cucumber_factory'
gem 'database_cleaner', '< 1'
gem 'cucumber_spinner', '~> 0.2.5'
gem 'launchy', '~> 2.1.2'

With these versions set, `…

Hide Thunderbird's buttons in message headers area

I don't like those buttons inside the header area of a message that Thunderbird 3 put there. Though the CompactHeader addon is often claimed to be a solution it does way too much for me – I like the headers the way they are, just not the buttons.

This is a bit of a hack but works very well for me (keeps the date and "other actions" menu on the right, see the screenshot below):

  1. Open up your profile directory (~/.thunderbird/<profile_name>/)
  2. Create a chrome directory inside it.
  3. Put the attached userChrome.css file into the …

Onload callback for dynamically loaded images

Sometimes you need to dynamically load an image and do something as soon as its loaded (when for example its size is already available).

With jQuery, this seems to work across browsers:

  .attr('src', '')
  .load(function() {
    alert('fully loaded!');
  .attr('src', '/the/real/image/url');
Linked content

Customize your Bash prompt

The shell variable PS1 holds your bash prompt. You might want to change it to serve your needs best. Here is how to:


  • non-printing escape sequences in your prompt have to be inclosed in \[\e[ and \] so your shell can correctly count its prompt's length
  • we recommend to highlight your prompt on production machines
  • you can also [show different root prompts for each user](…
Linked content

Apache: SSL with Virtual Hosts Using SNI

With SNI, you can have many virtual hosts with HTTPS sharing the same IP address and port, and each one can have its own unique certificate. SNI is supported by all major browsers except Internet Explorer on XP, Safari on XP, wget, Android and Java.

CSS3 Pie: Element not properly redrawn

Pie sometimes does not properly redraw elements upon changes. This often happens when the change comes from somewhere further up the DOM.

Consider something like:

  <li class="active"><div class="content">Active element</div></li>
  <li class="inactive"><div class="content">Inactive element</div></li>

with CSS
li .content {
-webkit-box-shadow: #666 0px 2px 3px;
-moz-box-shadow: #666 0px 2px 3px;
box-shadow: #666 0px 2px 3px;
behavior: url(/;

Linked content

Directly search makandra notes from the Firefox address bar

The speed searching for makandra notes in Firefox can be improved by following these steps:

  1. Download the Firefox-Add-on "Add to Search Bar" and install it
  2. Go to the makandra notes search box and press the right mouse button to open the context menu
  3. Click "Add to Search Bar …" and give it a name like "makandra notes" and a keyword like "n" or "notes"

Now you can type notes my search keywords into the firefox address bar and it will automatically search for the…

Speed up response time in development after a Sass change

When working with large Sass files you will notice that the first request after a change to a Sass file takes quite some time. This is because the CSS files are being generated from the Sass files the moment the application answers your request (Sass looks at the files and recompiles if the timestamp changed); it takes even longer when you build sprites with the Lemonade gem.

To avoid this, have Sass watch the files for changes and compile them into CSS files immediately. Th…

Synchronize a Selenium-controlled browser with Capybara

When you click a link or a press a button on a Selenium-controlled browser, the call will return control to your test before the next page is loaded. This can lead to concurrency issues when a Cucumber step involves a Selenium action and a Ruby call which both change the same resources.

Take the following step which signs in a user through the browser UI and then sets a flag on the user that was just signed in:

Given /^the user "([^"]*)" signed in (\d) days ago$/ do |name, days|
  visit new_session_path
  fill_in 'Username', :w...
Linked contentDeprecated

Prevent floating sibling elements from wrapping in CSS

When you style multiple adjacent block elements with float: left, they will be rendered next to each other similar to inline elements. Also like inline elements, they will wrap at the horizontal end of the parent container.

If you want to keep floating elements from wrapping, nest them in a really wide container:

<div class="tabs">
  <div class="really_wide_container">
    <div class="tab">...</div>
    <div class="tab">...</div>
    <div class="tab">...</div>

This is the [Sass](http://sass-la…

Remove quotes from Sass mixin arguments

When calling a Sass mixins, you usually don't need to quote arguments:


However, when a CSS property consists of multiple parts (like background or box-shadow), the Sass parser will trip up:

+box_shadow(0 1px 2px #000) // this will blow up

The solution is to quote the argument like this:

+box_shadow('0 1px 2px #000')

As the author of the box-shadow mixin you now need to unquote this string, so the quotes don't appear in the resulting CSS. E.g. the following version of the box-shadow mixin will…

Linked content

Insert an ndash and other special characters using the Compose key on Linux

Although you can access many symbols using the AltGr key you may be missing some, like the en-dash (–) or em-dash (—). You can use a compose key for them instead.

First, make sure you have a compose key configured.

Configuring a compose key

I suggest using the "Menu" key which is located between the right Meta and Ctrl key.

Ubuntu / MATE
Control Center → Keyboard → Layout → Options → Position of Compose K…
Linked content

Configuring User Agents with Capybara + Selenium Webdriver

A while ago we were working on an application that had an entire version specially created for mobiles, such as the iPhone. This specific application was entirely tested with Capybara, Steak and Selenium Webdriver. Although the test suite wasn’t the fastest one in the world, the web application was very well tested, and to guarantee that we would also be testing the mobile version, we would have to simulate an iPhone user agent accessing the application.

But wait, you might be thinking that we are not able to change browser headers while …

Test that a select field contains an option with Cucumber

This note describes a Cucumber step definition that lets you say:

Then "Mow lawn" should be an option for "Activity"
But "Reply support mail" should not be an option for "Activity"

Note that this step checks whether an option is available, not that it is selected. There is a separate step to test that an option is selected.

Capybara (0.4.1 or higher)

Then /^"([^"]*)" should( not)? be an option for "([^"]*)"(?: within "([^\...
Linked content

Using Firebug Lite to inspect HTML in Internet Explorer and other browsers

You know Firebug as a Firefox extension but there is also a "Lite" version which runs purely off JavaScript.

Though all major browsers offer inspection tools you may like the Firebug style. Also, for me this is a lot better than the IE8 developer tools – and it works in older versions of IE, too.

Get the bookmarklet over at It usually loads the JavaScript code from a remote server but you can also download it to have it run locally. If adding the bookmarklet does not work in IE, add a new book…

This website uses cookies to improve usability and analyze traffic.
Accept or learn more