Linked content

Font Awesome: List of Unicode glyphs and HTML entities

A list of FontAwesome icons in the form of copyable Unicode characters or HTML entities.

You might prefer to use FontAwesome by simply typing out these characters instead of using CSS classes. Of course you need to then give the containing element as style:

font-family: FontAwesome
Linked content

Simple Naming for Modular CSS Class Names ··· Nico Hagenburger

An opinion how to implement BEM. I don't agree with all of Nico's choices, but I applaud his approach to compile a simple and short list of rules.

Many box shadows will make your app unusable on smartphones and tablets

Box shadows are awesome. Unfortunately they are also very costly to render. You will rarely notice the rendering time on a laptop or desktop PC, box shadows can make your app completely unusable on smartphones and tables. By "unusable" I mean "device freezes for 10 seconds after an user action".

But isn't it the future?

Not yet. Eventually mobile devices will become powerful enough to make this a no...

News flash: Absolute CSS positioning on opposite sides is not a problem

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

How to horizontally center absolute positioned container with CSS

Note: We have 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:

$container_width: 100px
  width: $container_width
  margin: 0 auto

However, this w...

Center a float horizontally

Note: We have 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.

If you cannot use display: inline-block, centering a float can be useful if you want to center something and at the same time make its width automatically fit some content.

Use this SASS:


Capybara 0.3.9 Bug: Chaining .find to scope doesn't work

The following code doesn't work like expected:


The second .find will search the whole dom instead of a scope.

Rumor has it this is fixed in Capybara 0.4.1.

Linked content

Tips And Tricks For Print Style Sheets

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

Linked content

Interactive generator for gradients, borders, noise textures and box shadows

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
Linked content

Browser Hacks: CSS Rules to Target Specific Browsers And Versions

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.

Linked content

Using CSS counters - CSS | MDN

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.

Linked content

CSS 3D Clouds

This is awesome.

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

CSS: Set content from other attributes

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

Linked content

hint.css - A tooltip library in CSS

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.

Test that a form field is visible with Cucumber/Capybara

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](

Setting expiry dates for images, JavaScript and CSS

When deploying Rails applications you might have noticed that JS and CSS are not cached by all browsers.

In order to force Apache to add expiry dates to its response, add the attached .htaccess to the public directory. This will add a header such as Expires: Thu, 07 Oct 2010 07:21:45 GMT to the httpd response.

Configuring Apache

Check that you have mod_expires enabled. You need it for the attached .htaccess to work:
sudo a2enmod expires

Configuring Nginx

You can add this:

Detect effective horizontal pixel width on a mobile device with Javascript

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

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