If you want to play music or sounds from a browser, your choice is to use either Flash or the new <audio> tag in HTML5. Each method has issues, but depending on your requirements you might not care about all of them.

Flash

• Works in all desktop browsers, even Internet Explorer. Does not work on iPads or iPhones.
• Requires you to embed a Flash component into your page which will later play the audio for you.
• Can play MP3s or Wave files. Cannot play OGG Vorbis audio.
• Cannot reliably seek to a given position when playing VBR-enco...

You can use CSS attribute selectors in your step definitions like this:

Then /^the page should have a meta description "([^"]+)"$/ do |description|
  page.should have_css("meta[name=\"description\"][content=\"#{description}\"]")
end

Note that you need to always quote attribute values or you will get a Nokogiri parsing error like this:

unexpected 'foo' after 'equal' (Nokogiri::CSS::SyntaxError)

I prefer using Opera's "User mode" to toggle an outlining of HTML elements quickly. This helps greatly when you want to see the actual dimensions of elements, e.g. for floating elements inside containers, instead of opening up the Dragonfly inspector every time.

Navigate to View → Style → "Manage Modes..." and tick the checkboxes like in the attached image. Then, switch to the User Mode by pressing the shortcut (Shift+G for the 9.2-compatible layout or for the default layout with enabled "single-key shortcuts") and select "Outline" from...

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...

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 ...

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:

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

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(/PIE.htc);

  back...

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...

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

+tint_article(#f21)

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...

If you have content inside a page that is hidden by CSS, the following will work with Selenium, but not when using the Rack::Test driver. The Selenium driver correctly only considers text that is actually visible to a user.

Then I should not see "foobear"

This is because the Rack::Test driver does not know if an element is visible, and only looks at the DOM.

Spreewald offers steps to check that an element is hidden by CSS:

Then "foo" should be hidden

You can also check that an el...

The following Sass will do the trick:

button,
input[type="reset"],
input[type="button"],
input[type="submit"],
input[type="file"] > input[type="button"]
  &::-moz-focus-inner
    border: none

There's also a plain CSS version.

Note that you can no longer visually navigate through a form with the keyboard without these borders.

Styling button tags across all major browsers is not easy.

Many times you should be fine by using the native button style a browser-OS-combination offers you. But if you are trying to style buttons with images (e.g. by nesting a span tag inside them as assigning a background to both button and span) it will look different on each browser.

Use this Sass snippet as a base style:

button
  border: 0
  padding: 0
  cursor: pointer
  overflow: visible // removes padding in IE
  &::-moz-focu...

This collection of Sass mixins enables cross-browser styling (including IE with CSS3PIE) with less lines of code.

This enables PIE for IE up to version 8 only (the first part is not possible in Haml, so use ERB):

<!--[if !IE]><!-->
  <%= stylesheet_link_tag 'screen', :media => 'screen' %>
<!--<![endif]-->
<!--[if lte IE 8]>
  <%= stylesheet_link_tag 'screen_with_pie', :media => 'screen' %>
<![endif]-->

These would be your two screen Sasses:

# screen_with_pie.sass

...

When using an odd value for line-height in CSS the result will vary across all major browsers.\
Use an even line-height whenever possible.

When you are styling block elements you often apply both height and line-height to them. This Sass mixin helps you out with odd heights by always setting an even line height:

=height($height)
  height: $height
  line-height: floor($height / 2) * 2

So when you call +height(19px) in Sass this will be the resulting CSS:

height: 19px
line-...

This note describes a Cucumber step definition that lets you test whether or not a CSS selector is present on the site:

Then I should see an element "#sign_in"
But I should not see an element "#sign_out"

Here is the step definition for Capybara:

Then /^I should (not )?see an element "([^"]*)"$/ do |negate, selector|
  expectation = negate ? :should_not : :should
  page.send(expectation, have_css(selector))
end

Here is the step definition for Webrat:

Then /^I should (not )?see an element "([^"]*)"$/ do |negate...