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.

Convert a TrueType (.ttf) font to web font formats

  • Note that you are not allowed to embed any font in a website. You need to check the license first. Fonts from Font Squirrel are all okay to embed and use for commercial purposes, but as with many free fonts, quality differs widely, especially at medium and small font sizes.
  • You will need to embed your font in several formats since browser support is a mess.
  • You can use the [Font Squirrel @font-face generator](http://www.fontsquirrel.c...
Linked content

Tabs in Textarea Plugin for jQuery

This is a demo of the "Tabby" Javascript jQuery plugin to use tabs in regular textareas to make them suitable for in-browser coding of languages like HTML, CSS, Javascript, or your favorite server-side language. The idea is to be able to use a press of the TAB button or SHIFT+TAB to indent or outdent your code.


Change how Capybara sees or ignores hidden elements

Short version

  • Capybara has a global option (Capybara.ignore_hidden_elements) that determines whether Capybara sees or ignores hidden elements.
  • Prefer not to change this global option, and use the :visible option when calling page.find(...). This way the behavior is only changed for this one find and your step doesn't have confusing side effects.
  • Every Capybara driver has its own notion of "visibility".

Long version

Capybara has an option (Capybara.ignore_hidden_elements) to configure the default...

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.

Flexible overflow handling with CSS and JavaScript

You can use text-overflow to truncate a text using CSS but it does not fit fancy requirements.

Here is a hack for the special case where you want to truncate one of two strings in one line that can both vary in length, while fully keeping one of them. See this example screenshot where we never want to show an ellipsis for the distance:

![Flexible overflow with optional ellipsis](

Use CSS "text-overflow" to truncate long texts

When using Rails to truncate strings, you may end up with strings that are still too long for their container or are not as long as they could be. You can get a prettier result using stylesheets.

The CSS property text-overflow: ellipsis has been around for quite a long time now but since Firefox did not support it for ages, you did not use it. Since Firefox 7 you can!

Note that this only works for single-line texts. If you want to truncate tests across multiple lines, use a JavaScript solution like...

Linked content

jQuery UI Bootstrap

Twitter's Bootstrap CSS blueprint as a jQuery UI theme. Even if you don't want to use Bootstrap as a CSS framework, this theme looks better than jQuery UI's default theme.

How to print Github wiki pages

I have no idea how it's supposed to work (or why the don't have a print CSS), but this works for pages written with Markdown:

  1. "Edit" the wiki page
  2. Copy all text
  3. Run a Markdown interpreter and pipe its result, e.g.: kramdown > /tmp/github.html
  4. Paste your markdown
  5. Press Ctrl-D to finalize your input
  6. Open the generated HTML file and print it.


Repeat an element on every printed page with CSS

Firefox, Opera and Internet Explorer will repeat elements with position: fixed on every printed page (see attached example).

The internet knows no way to do this in Webkit browsers (Chrome, Safari). These browsers will only render the element on the first printed page.

This website uses cookies to improve usability and analyze traffic.
Accept or learn more