Topics: CSS

Updated: Remove quotes from Sass mixin arguments

When we looked at this card together a year ago, we were no longer sure if unquote is actually useful. I now found a good example for when you need unquote, and rewrote the card accordingly.

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…

External 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…

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.

Navigating through the browser history in a cucumber feature using selenium

In order to navigate through the browser history. you can manipulate the window.history object via javascript like follows:

When /^I go back in the browser history$/ do

For further functions of the window and history objects check out this link.

An improved version of this step is now part of our gem spreewald on Github.

External content

Sass: Use black or white foreground color depending on the lightness of the background

This article shows how to create a Sass mixin for a colored button. The button's foreground color is dynamically chosen between either black or white, depending on the given background color.

It's a nice intro into @if and @else conditionals in Sass.

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…

CSS3 Media Queries have reached recommendation status

Media Queries have reached W3C Recommendation on June 19th 2012.

If you were interested in other (future) web standards you can have a look at recent W3C publications.

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…

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.

Browser support for box-shadow

Basic box shadow support is available in all browsers today, but you need to check to which extend they are supported. Implementations differ:

  • Are multiple box shadows (separated by comma) possible?
  • Are inset shadows possible?
  • Can the spread radius be defined?
  • Can you use it without vendor prefix?

A good compatibility chart can be found here. The gist is that, except for IE and some Safaris, you can use all features …

CSS: Change text selection color

You can change the color for text selection via CSS, using the ::selection and ::-moz-selection pseudo-elements.

Adding this to your Sass will make all text selections use a red background:

  background-color: #f00

  background-color: #f00

Unfortunately, those can't be combined into "::selection, ::-moz-selection". Doing so will have no effect.

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

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…

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

Manipulating the browser history - MDN

The DOM window object provides access to the browser's history through the history object. It exposes useful methods and properties that let you move back and forth through the user's history, as well as – starting with HTML5 – manipulate the contents of the history stack.

MySQL shell: Vertical vs horizontal layout

When talking to your MySQL server via a mysql shell, you can terminate queries by ; or \G – the latter gives you a vertical output.

You know this:

mysql> SELECT * FROM users;
| id | name    | email               | greeting        |
|  1 | Alice   |   | Hello world!    |
|  2 | Bob     |     | Hello universe! |
|  3 | Charlie | | Hi mom!    ...

New cards feature: Github-style code blocks

You can now add code blocks without indentation, by using triple-backticks:

Code block goes here.
209 cards