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

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