Using CSS sprites for background images is a technique for optimizing page load time by combining smaller images into a larger image sprite.

There are ongoing arguments on how useful this still is, as modern browsers become more comfortable to load images in parallel. However, many major websites still use them, for example amazon, [facebook](...

The ipad onscreen keyboard changes position:fixed style to position:static that misplaces those elements and you'll have problems on each page with a form, e.g. search field.

There are several workarounds/hacks but no straight forward fix yet. Expect additional expense.

This card shows how to upgrade a Rails 2 application from Rails 2.3.8 through every single patch level up to 2.3.18, and then, hopefully, Rails LTS.

2.3.8 to 2.3.9

This release has many minor changes and fixes to prepare your application for Rails 3.

Step-by-step upgrade instructions:

0. Upgrade rails gem
1. Change your environment.rb so it says RAILS_GEM_VERSION = '2.3.9'
2. Change your ...

Back in the old days, we couldn't do something like that:

.foo {
  position: absolute;
  bottom: 0;
  /* This was bad: */
  left: 10px;
  right: 10px;
}

Why? Because IE5 and IE6 (which a majority of people used back then) failed horribly trying to render it.

I've now checked if this is still an issue with any browser that's not from the stone age. \
Turns out all is well -- except if you have to support IE6 and below, but then you're in some other kinds of trouble.

It works in all sane browsers, and Internet Explorer 7, 8...

Find out in this short guide, how to horizontally center a absolute positioned container with CSS.

Note: We have a card with all CSS centering options. You probably want to head over there and get an overview over what techniques are available for your use case and browser requirements.

Horizontally centering a static element in CSS is normally handled by setting the left and right margins to auto, for example:

// SA...

Smashing Magazine lists some handy tricks for print style sheets, all with CSS:

• Expand External Links For Print
• Print QR Codes For Easy URL References
• Use CSS filters to improve the result of printed graphics (i.e. images with transparent parts)
• Use your DevTools to preview the print styles in your browser

CSSmatic lets you play around with four rather complex CSS stylings and gives you CSS or SASS code to use your result right away.

• Gradients
• Borders
• Noise textures – offers a texture download
• Box shadows

The linked site lists a wealth of CSS hacks that let you apply styles to just that one browser. You should be using this mostly for fixing browser issues and not give up on creating solid styles.

calc() lets you mix CSS units. Ever wanted to give an element "the container's width minus 20px on each side"? Here you go:

.foo {
  width: calc(100% - (20px * 2));
}

When using Sass, you need to interpolate Sass expressions:

$margin: 20px * 2

.foo
  width: calc(100% - #{$margin})

Supported by all modern browsers and IE9+.

JavaScripts and CSS should be minified for production use.

In Rails 3.1+ the asset pipeline will take care of this. Thus you're best off using an uncompressed version of your Javascript in development. Also load the non-minified versions of libraries. This way debugging will be easier and you will still get all the minification love once deployed.

In Rails 2.3 and 3.0 you should at least embed external JavaScript libraries in minified form, using something like JavaScript compressor.

If you need to capture signatures on an IPad or similar device, you can use Thomas J Bradley's excellent Signature Pad plugin for jQuery.

To implement, just follow the steps on the Github page.

The form

If you have a model Signature with name: string, signature: text, you can use it with regular rails form like this:

- form_for @signature, :html => { :class => 'signature_form' } do |form|
  %dl
    %dt
      = form...

Counters are an awesome CSS feature you didn't know about. It is supported in all browsers and IE8+.

CSS counters are an implementation of Automatic counters and numbering in CSS 2.1. The value of a counter is manipulated through the use of counter-reset and counter-increment and is displayed on a page using the counter() or counters() function of the content property.

Stringex is a gem that offers some extensions to Ruby's String class. Ruby 1.9 compatible, and knows its way around unicode and fancy characters.

Examples for stringex's String#to_url method:

# A simple prelude
"simple English".to_url => "simple-english"
"it's nothing at all".to_url => "its-nothing-at-all"
"rock & roll".to_url => "rock-and-roll"

# Let's show off
"$12 worth of Ruby power".to_url => "12-dollars-worth-of-ruby-power"
"10% off if you act now".to_url => "10-percent-off-if-you-act-now"

# You do...

This is awesome.

Only ran smoothly in Chrome. Is a slideshow in Firefox.

You probably know that you can use CSS selectors to match against elements and their attributes, such as:

a[title] { /* any <a> that has a "title" */ }
a[data-fancy="true"] { /* any <a> that has their "data-fancy" attribute set to "true" */ }

But there is more: You do not need to match against "full" attribute values but can match against parts of them.

They work in all somewhat modern browsers, and IE9 or later.

Match variants

Exact match (CSS2)

[foo="bar"] (matches `<div foo="b...

You can use the content CSS attribute to set an element's content -- which is especially useful for the :before and :after pseudo elements:

a:before {
  content: 'Click me: ';
}

The above example would prepend "Click me:" to any link on the page.

Note that you can also refer the contents of other attributes of the element. So, if your links have a helpful title set, you could do this:

a:before {
  content: attr(title) ": ";
}

There also is a jsFiddle for the examp...

A tooltip library that does not use Javascript. Works in IE9+.

This library (or the technique used by it) could be a great choice for projects with a lot of tooltips, which are hard to do fast with Javascript.

Spreewald now comes with a step that tests if a form field is visible:

Then the "Due date" field should be visible
But the "Author" field should not be visible

The step works by looking up the field for the given label, then checks if that field is hidden via CSS (or Javascript).

It is not currently tested if the label is visible or hidden. For this see: [Check that an element is visible or hidden via CSS with Cucumber/Capybara](https://makandracards.com/makandra/1049-check-that-an-elem...

Behave.js is a lightweight library for adding IDE style behaviors to plain text areas, making it much more enjoyable to write code in. Features include:

• Custom Code/Behavior Fencing
• Hard and Soft Tabs
• Auto Open/Close Parenthesis, Brackets, Braces, Double and Single Quotes
• Auto delete a paired character
• Overwrite a paired character
• Multi-line Indentation/Unindentation
• Automatic Indentation

Awesome color schemes for RubyMine, Sublime Text 2 and other editors.

To install the themes into your Rubymine, copy intellij-themes/*.xml from the repository to your local ~/.RubyMine40/config/colors. Then restart RubyMine.

Enjoy!

So you want to find out how many horizontal pixels you have available on a mobile device. This is super difficult because:

• Modern mobile devices have high-density displays where 1px in your CSS e.g. corresponds to 2.25, 4, ... physical pixels on the screen hardware.
• Difficult APIs
• Inconsistent APIs
• Screen orientation can change when the user rotates h...