HOWTOs for Ruby on Rails, RSpec, Cucumber and Javascript

CSS box-shadow not working in IE9 inside tables with collapsing borders

Though Internet Explorer 9 supports the box-shadow CSS property there is a nasty bug which sometimes prevents it from rendering the shadow properly.

Consider this HTML:

<table style="border-collapse: collapse">
  <tr>
    <td>
      <div style="box-shadow: 0 0 10px #f00">Hello universe</div>
    </td>
  </tr>
</table>

While it works in other browsers, IE9 is not showing any shadow. For some reason, it requires border-collapse: separate for the table to be set:

<table style="border-collapse: separate" c...

stackoverflow.com

Pull Quotes with HTML5 and CSS

A pull quote is a typographical technique in which an excerpt or quote from an article is duplicated within the article using a different formatting style so that it jumps out at the reader.

Blatantly copying the excerpt of the pull quote into it’s own element is not the way to go. A pull quote is a purely visual technique, and therefore should not change the structure of the body. Next to that, a structural representation of the excerpt would be seen twice by people using feed readers or services like Instapaper, as well as be re-read for ...

miekd.com

How to embed images in higher resolutions for printing

When you print out a HTML pages, all raster images (like PNGs) will appear aliased. This is because a printer's resolution is usually much higher than that of a computer screen.

If an image absolutely must look awesome when printed, a solution is to embed the image in much higher solution than needed (e.g. four times the horizontal resolution), then scale it down to the desired width using CSS.

Note that this will slightly alter the image's appearance on the screen because browsers will scale down the image [using an anti-aliasing method](...

Detect mobile or touch devices on both server and client

Although it's tempting flirt with detecting mobile/touch devices with CSS media queries or Javascript feature detection alone, this approach will be painful when heavily customizing a feature beyond just tweaking the looks. Eventually you will want want the same detection logic to be available on both server and client side.

This card shows how to get a Ruby method touch_device? for your Rails views and a method TouchDevice.isPresent() for your Javascripts.

Note that we are detecting touch devices by grepping the user agent, and the ke...

Vendor-prefixed CSS Property Overview

A list of CSS vendor-prefixes.

peter.sh

Change image scaling algorithms with CSS

List of non-standard CSS attributes that change how the browser resamples scaled images. Only use them if you know 100% which browser the client is going to use. Otherwise just stick with the default.

developer.mozilla.org

Useful script to collect downloads from several sites

For university I have to stay up-to-date with lecture documents. Since my university doesn't offer RSS feeds, I wrote a little script that collects files from web pages.

You want this, if you have several web pages that offer downloads that you don't want to check manually. Just register the URL and a CSS snippet to retrieve the files in the attached script and run it – it will fetch all your files. It will store all files in a single place or sort them into respective directories.

Edit the header of the file (providing your data), save it...

skript

Caching may break relative paths in your merged stylesheet

If you turn on stylesheet caching, it might happen that stylesheets from different locations with different relative pathes will be put together to one big stylesheet.

This stylesheet then resides in /stylesheets but still holds the old pathes, which aren't valid anymore. This leads to the effect that images are displayed on your local development machine (where caching is turned off automatically) but not on the server.

To fix this, either:
^

Move all stylesheets to the same folder
or have one cache per folder

Declare different CSS background-images for different locales

If you would like to use language specific layout (e.g. background-images) in your applications stylesheets you can achieve this easily by using the lang attribute in your views (ERB):

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<%= I18n.locale || 'en' %>" lang="<%= I18n.locale || 'en'%>">
...
</html>

or in HAML:

%html :xmlns => "http://www.w3.org/1999/xhtml", :"xml:lang" => I18n.locale || 'en', :lang => I18n.locale || 'en'

Then, in your stylesheet you can for example declare different background-images fo...

Large forms are slow on the iPad

Forms with many inputs (600+ in my case) become extremely unresponsive on an iPad, up to the point where it can take several seconds for a control to respond to touch commands.
This is true for both iPad 1 and iPad 2 models.
While certain CSS styles can lead to performance issues, removing those styles won't help if the form simply is very large.
A workaround is to only show a limited number of form inputs at the time, e. g. by toggling groups of form...

Web font embedding requires new CSS for IE9

If you embedded web fonts in the past years (e.g. by copying CSS from a Font Squirrel @font-face kit), that CSS won't work in Internet Explorer 9.

You can fix it by turning these styles...

@font-face
  font-family: 'MyFont'
  src: url('myfont.eot')
  src: local("☺"), ('myfont.ttf') format("truetype")
  font-weight: normal
  font-style: normal

... into these:

@font-face
  font-family: 'MyFont'
  src: url('myfont.eot')
  src: local("☺"), url('myfont.e...

Give table columns equal width using CSS

If you want to distribute a <table>'s width equally over its columns, you can use the following CSS property:

table-layout: fixed

It is supported by every browser ever.

Capybara can match elements outside of <body>

Capybara will match elements outside of a page's <body> tag.

For example, the step definitions below match <link> nodes in a page's <head>:

Then /^my browser should auto-discover the "([^"]*)" feed$/ do |slug|
  page.should have_css(
    'head link' +
    '[rel="alternate"]' +
    "[href='http://www.example.com/#{slug}/feed.rss']" +
    '[title="RSS feed (all cards)"]' +
    '[type="application/rss+xml"]',
    visible: false
  )
end

Then /^my browser should not auto-discover any RSS fe...

How to use CSS3 gradients in Opera

Since version 11.10 Opera provides support for linear gradients using -o-linear-gradient.

The syntax is pretty similar to Mozilla's -moz-linear-gradient. This will create a vertical gradient from yellow to red:

background-image: -o-linear-gradient(top, #ff0, #f00);

The first parameter defines where the gradient starts and which direction it will go. \
You can use top/left/bottom/right (and combinations of those) but also set any angle you like (0° being the left side, going counter-clock-wise):

background-image: -o-l...

opera-css-gradients.png dev.opera.com

Test that a form field has an error with Cucumber and Capybara

You can use the step definition below to say this:

Then the "Last name" field should have an error

Capybara

Then /^the "([^\"]*)" field should( not)? have an error$/ do |field, negate|
  expectation = negate ? :should_not : :should
  page.send(expectation, have_css('.field_with_errors', :text => field))
end

The Skinny on CSS Attribute Selectors

Good guide to different ways you can write CSS selectors that select elements by their attribute values.

css-tricks.com

How to make a single check box (or image, etc) align vertically

Consider this HTML:

<div style="line-height: 42px">
  <input type="checkbox" />
</div>

Even though the surrounding container defines a line-height, which vertically centers its inline elements, the check box will be top aligned if it is the only element inside the container.

It will be aligned correctly if the HTML looks like this:

<div style="line-height: 42px">
  <input type="checkbox" /> foo
</div>

Complex explanation here.

So the ac...

Firefox 3.6 truncates long tables when printing

Possible fixes:

Upgrade your Firefox. It's fixed in 5.0.
Hunt down funny float or overflow directives in your CSS.
Remove <h1> and <caption> tags in proximity of your table (seriously).

1 10 11 12 13 14 15 16 17 18