Linked content

Test your CSS rendering output with GreenOnion

No one wants to cry over regression issues in views; does testing HTML and CSS have to be such a back and forth between designers and devs? Why is it that the rest of the stack can have TDD and BDD but not the presentation layer? Well, GreenOnion is here to help you get the same results on testing front-end styling that you've enjoyed in your unit and integration tests up to now.
GreenOnion records 'skins', which are snapshots of the current state of a view (or any page that a browser can navigate to). The first time that it is run on a view...

Linked content

Twitter Bootstrap: Base CSS

Explanation of the "bootstrap 2" base CSS.

Contains information about:

  • Typography
  • Code
  • Tables
  • Forms
  • Buttons
  • Icons
Linked content

PhoneGap Build

Write your app using HTML, CSS or JavaScript, upload it to the PhoneGap Build service and get back app-store ready apps for Apple iOS, Google Android, Windows Phone 7, Palm, Symbian, BlackBerry and more.

By compiling in the cloud with PhoneGap Build, you get all the benefits of cross-platform development but can still build apps just the way you like.

Drag'n'drop in trees: I went to town

For my Gem Session project Holly I ran the Ironman of drag'n'drop implementations:

  • Dragging in nested lists
  • User-definable order of items
  • Complicated item elements with super-custom CSS and other Javascript functionality
  • Items that can be both leaves and containers of other items
  • has_ancestry on the server side

Things I learned:

  • Be ready to write a lot of CSS. You need to indicate what is being dragged, where it will be dropped, if it is dropped above, below o...
Linked content

jQuery.cssHooks – jQuery API

The $.cssHooks object provides a way to define functions for getting and setting particular CSS values. It can also be used to create new cssHooks for normalizing CSS3 features such as box shadows and gradients.

For example, some versions of Webkit-based browsers require -webkit-border-radius to set the border-radius on an element, while earlier Firefox versions require -moz-border-radius. A css hook can normalize these vendor-prefixed properties to let .css() accept a single, standard property name (border-radius, or with DOM property synt...

Linked content

Updated: Capybara: Check that a page element is hidden via CSS

  • The step we used in the past (Then "foo" should not be visibile) doesn't reliably work in Selenium features.
  • I overhauled the entire step so it uses Javascript to detect visibility in Selenium.
  • The step has support for jQuery and Prototype projects, so it should be a drop-in replacement for all your projects.
  • For Rack::Test the step no longer uses XPath so you should be able to understand it when you are not a cyborg :)
  • There were some other cards detailing alternative steps to detect visibility. I deleted all these other cards s...

Click on a piece of text in Cucumber / Capyabra

The step definition below lets you write:

When I click on "Foo"

This is useful in Selenium features where the element you click on is not necessarily a link or button, but could be any HTML element with a Javascript event binding.

The easiest way to get this step is to use Spreewald. If you would like to add it manually, here is the step definition:

When /^I click on "([^\"]+)"$/ do |text|
  matcher = ['*', { :text => text }]
  element = page.find(:css, *matcher)
  while be...

New cards feature: Explicit language declaration for syntax highlighting

Makandra cards will auto-detect the language used for syntax highlighting.

This auto-detection sometimes fails for short code snippets. In such cases you can explicitly declare the language for Github-style code blocks:

body {
  font-size: 12px

Will turn into this:

body {
  font-size: 12px

To disable syntax highlighting entirely use the text language:

I am nothing without pretend


How to: Limit or disable textarea resizing in Chrome and Firefox

Consider this Sass:

  width: 320px;
  height: 240px;

Any textarea with the comment class will be sized 320 by 240 pixels. In WebKit browsers (Chrome, Safari, ...) or Firefox, this is only the initial size -- users can resize textareas to become bigger.

This is helpful to the user, but may be breaking your application layout in some cases.

If you want to disable it, don't introduce any proprietary CSS properties. Instead, set maximum width and/or height to the values of width and height:


Use Nokogiri to convert CSS to XPath

CSS is a lot easier to write and read than clumsy XPath expressions. So when you need to use XPath, you can have Nokogiri help you out on creating it.

Simply use Nokogiri's xpath_for:

>> Nokogiri::CSS.xpath_for('#foo')
=> ["//*[@id = 'foo']"]
>> Nokogiri::CSS.xpath_for('#foo .bar:nth-of-type(2)')
=> ["//*[@id = 'foo']//*[contains(concat(' ', @class, ' '), ' bar ') and position() = 2]"]

Since XPath is more powerful you may still need to do some hardcore XPath hacking eventually. But at least you don't need to for simple c...

Linked content

Browser Standards progress: CSS filter property

Some progress was made by browsers on implementing CSS filters like blur, greyscale or some other effects. You might already know the legacy CSS filter attribute that old IE versions used to perform DirectX transformations. Luckily these legacy filters are removed in IE10. The good news is, newest WebKit-based browsers like Chrome (18.0+) Safari and Mozilla Firefox expe...

Linked content

IE-friendly mobile-first CSS with Sass 3.2

Building CSS mobile-first is the way forward, because blah blah blah progressive enhancement blah. Problem is, Internet Explorer prior to 9 ignores anything within media query blocks, leaving those browsers with mobile styles.

Not all of us can get away with that, but thankfully, as Chris Eppstein points out, Sass 3.2 (not yet released) can generate a separate stylesheet with everything it needs to create a "desktop" look.

This page was built mobile-first where smaller width devices get a single column layout, but IE8 and below still get a...

Mysterious "margin" below an image

Consider the following HTML & CSS:

<div><img src='' /></div>

img {
background-color: red;
div {
border: 1px solid black;

This will leave a margin of about 5px between the lower edge of the image and the containing div, although there are no paddings or margins set, and there's no whitespace. The reason is, the image will vertically align baseline, and the space below the image is just kept for descenders (the part of letters below the basel...

Use different CSS depending on whether elements render on the same line or multiple lines

You will find this useful when creating responsive designs that work well on small screens.

The attached Javascript gives a container different CSS classes (single_line or multiple_lines) depending on whether its children render on one line or multiple lines.

Initialize it with the selectors for container and children:

$(function() {

You can now use different CSS styles like this:

  &.single_line a
    // styles when all anchors are rendered on the same line...

Howto properly use vertical-align to align elements vertically

Say you want to vertically align a div box inside a div container. This is how you do it:


<div id="container">
  <div class="box">
    <span> Some text...<br />in two lines. </span>


Set the line-height to the container's (implicit) height. The container MUST have a height >= its line-height, because the line-height actually spans the area inside which .box will align vertically.

#container {
  line-height: 50px;

Because the container's line-height is inherited by .box,...


IE9: Linear gradients remove border-radius and inset box-shadows

When you add a linear gradient to an element, IE9 removes all border-radius and inset box-shadows. This is because you probably are doing linear gradients with this weirdo Microsoft filter:

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0A284B', endColorstr='#135887');

filter hijacks the rendering of the entire element box, so you're out of luck. IE9 doesn't support CSS gradients.

A forward-looking workaround is to not use gradients and [emulate your gradients with box-shadows](

Linked content

You cannot use :before or :after on img in CSS

Though the W3C even gives it as an example, no browser actually supports this CSS:

img:before {
  content: "something";

Browsers will simply not render anything when doing that on images (Fun fact: It worked in an older version of Opera but got dropped).\
The same applies to the :after pseudo-element.

This makes me sad.

You can try using jQuery instead.

When I give a button and a link the same styles, why is the link one pixel higher?

It's not logical, so don't be too hard on yourself. You need to give it a height and change the box-sizing and display:

input[type="file"] > input[type="button"]
  display: inline-block
  box-sizing: border-box
  height: 20px
  line-height: 20px

Also see Proper cross-browser CSS styling for buttons.

This website uses short-lived cookies to improve usability.
Accept or learn more