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](https://makandracards.com/makandra/1049-check-that-an-elem...

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

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:

Linked content

CSS Explain - A tool which calculates CSS selector specificity

Example input:

li.active a:link

Example output (specificity):

| 0 | 2 | 2 |
Linked content

Font Awesome 3.0 has been released

40 new icons, spinner-style rotation with CSS animations, smaller file size, possibility to sub-set the font to only include the icons you need.

Linked content

The Shapes of CSS

Examples how to create dozens of shapes using pure CSS and a single HTML element.

Linked content

CSS that lets your alarm bells ring

Harry Roberts, a youngster from the UK, wrote a comprehensive article telling you how to smell CSS rot early.

Examples:

  • Undoing styles
  • Magic numbers
  • Qualified selectors
  • Dangerous selectors
  • Reactive !important

… and more.

Linked content

Hack: Detect DOM node insertions using plain CSS

David Walsh from Mozilla shows how to fire 'DOM changed' events from CSS. No need for JS to observe DOM mutation events or check the DOM manually – simply put: no deprecated API, no retarding loops.

With the CSS in place you add a listener for your custom 'DOM changed' event and that's it!

navy gem: Hide empty navigation bars

navy 0.5.1+ gives empty navigation containers a CSS class .navy-empty which you can hide via

.navy-navigation
  &.navy-empty
    display: none
Deprecated

CSS: Vertically center with display: table-cell

The classical scenario: There's a parent div element and you want to center some arbitrary child element vertically inside of it. Here's how you do it (also try this jsfiddle).

The children need to be block elements.

The HTML

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  ...
</div>

The CSS

.parent {
  display: table-cell;
  vertical-align: middle;
  width: 500px;
  height: 300px;
}
      
.child {}

When .child elements are inline elements, add `display: bl...

Linked content

Subtle Patterns Preview

Ever wanted to preview a pattern from Subtle Patterns on your site without the hassle of swapping out images and modifying CSS?

Subtle Patterns Preview provides a simpler way to do it.

Linked content

Internet Explorer will download CSS files twice, if referenced via scheme-less URLs

You can use scheme-less URLs (or protocol-relative URLs) to have browsers use the current protocol (HTTP or HTTPS) when loading content referenced with such an URL.

A protocol relative URL doesn’t contain a protocol. For example, http://stevesouders.com/images/book-84x110.jpg becomes //stevesouders.com/images/book-84x110.jpg

Browsers substitute the protocol of the page itself for the resource’s missing protocol. Problem solved!

But:

Internet Explorer 7 & 8 will download st...

Linked content

CSS3 Animated Loading Bar

Shows how to implement an animated progress bar in pure CSS, without animated GIFs, Javascript or Flash.

Fixed elements and large CSS box shadows can bring browsers to a crawl

Browser rendering engines are very slow at rendering large box shadows. I had a situation where a complex layout with fixed elements and large shadows slowed Firefox down to 2 frames/second for scrolling and DOM manipulation.

Some advice:

  • Be aware that by introducing fixed elements (e.g. sticky navigation bars) and large animations, you might force the browser to redraw large portions of the site when scrolling. When your fixed elements have shadows, this increases the screen area that needs to be redrawn, which might again require other...

CSS: Emulate linear gradients with inset box shadows

Why is this useful?

  • You can have a background image on the same element, overlaying it with a transparent gradient.
  • Since you are probably using gradients to give an element a glossy or three-dimensional feel, box shadows work much better for this. This is because linear gradients always stretch to the full size of the element (which can grow with user input), while a natural shine or shadow only highlights a fixed size on the top or bottom.
  • Browser support for linear gradients is a mess. I avoid using them. In part...

CSS: Emulate borders with inset box shadows

When is this useful?

  • When both parent and child elements have borders, with this technique you don't get two borders (which looks ugly). This is because child elements are rendered over inset box shadows, not inside inset box shadows.
  • You want more than one border on the same element. You can have as many inset box shadows on the same element as you like, e.g. allowing you to make a picture-frame-like border.

Examples

Remember the attribute list of box-shadow is x-offset, y-offset, blur radius, shadow r...

Linked content

rails/turbolinks

Turbolinks makes following links in your web application faster. Instead of letting the browser recompile the JavaScript and CSS between each page change, it keeps the current page instance alive and replaces only the body and the title in the head.

This is similar to pjax, but instead of worrying about what element on the page to replace, and tailoring the server-side response to fit, we replace the entire body. This means that you get the bulk of the speed benefits from pjax (no recompiling of the JavaScript or CSS) without having to tail...

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