Blake Simpson

An IE8 background-size fallback with SCSS or SASS

Wednesday 22nd of April 2015

In this post I will show you how to get the background-size CSS property working in IE 6 - 8 without using JavaScript. Instead we will use the filter attribute recognised by older versions of Internet Explorer.

Background

As you can see on Can I Use, IE 6 - 8 are the only browsers not supporting background-size at all.

Microsoft does however offer a AlphaImageLoader filter with sizingMethod options that correlate to the CSS3 background-size options.

  • auto = image
  • cover = scale
  • contain = crop

(CSS3 on left, sizingMethod on right)

The Solution

We will write a mixin that applies the filter rule for us. In this example I will use SCSS syntax and implement a fix for background-size: cover, as this is the most common use case.

If you want to convert this to SASS, please check out SASS to SCSS.

The mixin looks as follows:

@mixin background-cover($image-path) {
  background-size: cover;
  background-image: url(#{$image-path});
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='#{$image-path}', sizingMethod='scale');
  -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='#{$image-path}', sizingMethod='scale')";
}

This mixin accepts an argument that is the path to the image. So it could be used for example like so:

.foo {
  @include background-cover('images/bar.jpg');
  background-color: #fff;
  background-position: right bottom;
}

A great advantage of this approach is that if you are using Ruby on Rails and need to include the asset pipeline paths in your CSS, you can use the standard asset-path helper wrapped around the argument.

.foo {
  @include background-cover(asset-path('bar.jpg'));
  ...
}

Conclusion

You may want to note that Internet Explorer filters are not valid CSS, so if you are an advocate of purely valid CSS, you may want to use a JavaScript polyfill or isolate this code in a separate stylesheet.

In general though, I think this is a great solution when older IE support is required. No JavaScript or CSS plugins are necessary and the method can easily be dropped into a SASS/SCSS project.

The solution could also easily be adapted for preprocessors such as LESS.js, or even pure CSS with little effort.

Please let me know if you find any other short solutions to this problem, I'd love to hear about other options.

Read More Comments

Fixing the Internet Explorer absolute link stretching bug

Monday 20th of April 2015

The bug I'm trying to describe here is when you have markup similar to this:

<div class="wrapper">
    <img src="logo.jpg" alt="Logo" />
    <h1>Headline</h1>
    <a href="/somewhere">&nbsp;</a>
</div>

The goal we are trying to reach is to have the entire "wrapper" element clickable but the <a> tag is not wrapping the actual contents. There are various scenarios where you would do this, as wrapping large areas in a link tag can be either problematic or semantically incorrect.

The solution to make the above wrapper element fully clickable would be to set the wrapper to position: relative and the link to position: absolute, filling the container, like so:

.wrapper {
    position: relative;
}

.wrapper a {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    display: block;
}

Now this solution works just fine in almost all browsers, but (almost understandably) Internet Explorer won't let you click on the <img> or <h1> tags since they are not actually nested within the <a> tag, only the surrounding content.

To fix this, the solution is simply (yet confusingly) to give the link a background image and then all versions of Internet Explorer will place nice.

The best way to do this is to create a 1x1 pixel sized transparent GIF and use it as a repeating background.

Adding the following code will solve this bug:

.wrapper a {
    ...
    background: url('blank.gif') top left repeat;
}

This appears to be another classic IE hack but at least it does not invalidate your CSS or require any complicated filters, JavaScripts or plugins.

Read More Comments

Sidekiq tasks for Capistrano 3

Thursday 5th of February 2015

If using the Sidekiq gem with Capistrano version 3, you may like a simple set of start, stop and restart tasks. There are a few gems out there already built to help you with this, which might be suitable for your project. If you however just want a simple script then you may use this sidekiq namespace I wrote and tweak it to your needs.

Place the following in your deploy.rb

namespace :sidekiq do
  def sidekiq_pid
    current_path + '../shared/pids/sidekiq.pid'
  end

  def pid_file_exists?
    test(*("[ -f #{sidekiq_pid} ]").split(' '))
  end

  def pid_process_exists?
    pid_file_exists? and test(*("kill -0 $( cat #{sidekiq_pid} )").split(' '))
  end

  task :start do
    on roles(:app) do
      if !pid_process_exists?
        execute "cd #{current_path} && RAILS_ENV=#{fetch(:rails_env)} #{fetch(:rbenv_prefix)} bundle exec sidekiq -C config/sidekiq.yml -e #{fetch(:rails_env)} -L log/sidekiq.log -P #{sidekiq_pid} -d"
      end
    end
  end

  task :stop do
    on roles(:app) do
      if pid_process_exists?
        execute "kill `cat #{sidekiq_pid}`"
        execute "rm #{sidekiq_pid}"
      end
    end
  end

  task :restart do
    on roles(:app) do
      invoke "sidekiq:stop"
      invoke "sidekiq:start"
    end
  end
end

after 'deploy:restart', 'sidekiq:start'

Read More Comments

Detect Internet Explorer 10 without conditional comments

Wednesday 28th of January 2015

Commonly to target specific versions of Internet Explorer we will use conditional HTML comments to apply a specific class name to the <html> tag. With this approach it is then trivial to target a specific browser via CSS for special styling. For example:

<!--[if IE 8]> <html class="ie8"> <![endif]-->

Since Internet Explorer conditional comments have been disabled since IE10, we can no longer use the following syntax.

<!--[if IE 10]> <html class="ie10"> <![endif]-->

JavaScript to the rescue

In order not to break from the pattern of HTML specific class names for IE versioning, a JavaScript can be used to manually add a class targeting IE10.

if (navigator.userAgent.match('MSIE 10.0;')) {
  $('html').addClass('ie10');
}

Or in pure JavaScript, if you do not have jQuery available.

if (navigator.userAgent.match('MSIE 10.0;')) {
  document.querySelector('html').className += " ie10"
}

This is not the ideal approach. In general feature detection is a better method to tell if a feature is available but when looking to target Internet Explorer purely for CSS styling purposes this may be the most pragmatic approach.

Read More Comments

Sort string array items as integer with PHP

Thursday 22nd of January 2015

When sorting array items in PHP, normally you can use one of the PHP sort functions such as sort() or usort(). This will sort your array into ascending order for either integer, starting with zero or string, from A – Z.

However, consider the following example:

$scores = array(
    '32-Andy',
    '43-Steve',
    '28-Joe'
);

If you try to sort these by the prefixed ID (28, 32, 48) the sort function will not take just the numbers into account as the criteria. It will also then sort on the string, from A to Z.

There’s a simple way to fix this. We need to augment the usort() function by adding an extra argument. We’ll add the SORT_NUMERIC predefined constant as the second argument and this will instruct PHP to ignore sorting on the string segment of the array values and instead successfully sort the array by the ID only.

Using the following code will output the array in the order: 2, 0, 1 as expected.

usort($scores, SORT_NUMERIC);
print_r($scores);

//0 = 28-Joe
//1 = 32-Andy
//2 = 43-Steve

Read More Comments

A simple jQuery add/remove class name pattern

Friday 16th of January 2015

Often when using jQuery and you aim to add or remove a class based on a state variable, you will see a function such as.

function updateInterface () {
    var shouldShowLogout = user.isLoggedIn;

    if (shouldShowLogout)
        $('.logout-button').addClass('active');
    } else {
        $('.logout-button').removeClass('active');
    }
 } 

This function is hard to read and basically repeats itself in the if and else clauses. The function implementation can be refactored down to 2 lines using a ternary if operator.

function updateInterface () {
    var shouldShowLogout = user.isLoggedIn;
    $('.logout-button')[ shouldShowLogout ? 'addClass' : 'removeClass' ]('active');
}

Since you can access functions of a an object in JavaScript like values, you can use the [] accessor to return the correct function based on the ternary if statement and them immediately call it using (), or in this case passing our class name value ('active').

You could even take this down to a single line.

function updateInterface () {
    $('.logout-button')[ user.isLoggedIn ? 'addClass' : 'removeClass' ]('active');
}

Although this final single line approach may be confusing to the next developer who is not already familiar with the pattern.

Read More Comments

Day one on the Opera Mobile Store...

Wednesday 14th of January 2015

At the beginning of 2015 I decided to host my mobile applications Elite Ice Hockey Action and DEL Action on the Opera Mobile Store.

This is the new App Store for Nokia X devices along with other Android platforms such as Yandex.

After uploading my application and releasing it for free download, these were the download statistics I received after day 1.

Opera Mobile Store download statistics

It looks like the Opera Mobile Store is being heavily crawled by bots to find new Apps and marketing information.

Read More Comments

Inspirational words...

Tuesday 6th of January 2015

“To set high goals, to have almost unattainable aspirations, to imbue people with the belief that they can be achieved — these are as important as the balance sheet, perhaps more so”

Joseph C. Wilson (Founder of the Xerox Corporation)

Read More Comments