Total results: 12

An IE8 background-size fallback with SCSS or SASS

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.

Fixing the Internet Explorer absolute link stretching bug

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.

Detect Internet Explorer 10 without conditional comments

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.

CSS hexagon, an easy LESS mixin

Based on my previous post where I explored methods to generate a pure-CSS hexagon shape, I have developed this into a LESS mixin that allows the hexagon to be included into your project with ease and efficiency.

Examples

HTML

<div class="hexagon">
  <div class="text">XYZ</div>
</div>

LESS

.hexagon {
  .build-hexagon(100px, #ff0000, #ffffff);
}

This will generate a 100px wide hexagon with a red background and white text.

Overrides

If you need multiple coloured hexagons these can be styled efficiently by simply updating the colour options for either the background or text.

LESS

.hexagon {
  .build-hexagon(100px, #ff0000, #ffffff);

  &.blue {
    .hexagon-color(#0000ff);
  }
}

Now adding a hexagon with the class blue will change the colour. This can also apply to text.

LESS

.hexagon {
  .build-hexagon(100px, #ff0000, #ffffff);

  &.blue {
    .hexagon-color(#0000ff);
  }

  &.black-text {
    .hexagon-text-color(#000000);
  }
}

Now adding the class black-text will obviously turn the text black.

You can view the full mixin code below.

Scalable CSS Hexagon in SCSS and LESS

In this post you can find two Code Pen examples of how to create a scalable CSS hexagon shape. I have included the examples in LESS.js and SCSS formats, but both are very similar.

This technique is a simple method of replicating the basic hexagon from csshexagon.com without having to use the generator.

The hexagon shape and size are controlled by 2 simple variables.

$hex-size: 180px;
$hex-height: $hex-size / sqrt(3);

This allows you to change the entire shape size by simply editing the value of the $hex-size variable.

Additionally a third variable is used to specify the hexagon colour.

$hex-color: #C6538C;

Try playing with the examples below. With a little modification a dynamic text label can even be added (see final example).

Changing the Twitter Bootstrap input outline color

When using Bootstrap it can be challenging to change the outline colour of an input field that has focus from the user.

By default Twitter uses a blue outline that may not fit all designs.

Default Twitter Bootstrap input outline

Even adding a CSS rule for the outline does nothing.

input:focus { outline: none; }

Twitter Bootstrap input outline still unmodified

This is because Twitter Bootstrap actually adds a border and a box-shadow property to all inputs on :focus that must be overridden.

Chrome DOM inspector

So to change the outline color, just update these properties.

input:focus {
    border-color: #cfdc00;
    box-shadow: 0 0 5px rgba(207, 220, 0, 0.4);
}

Now you will see the update!

Modified Twitter Bootstrap input outline

Easy CSS retina images (single image solution)

Here is a little trick that enables you to apply retina images to your web pages in pure CSS, no JavaScipt hacks or "-webkit" prefixes required!

The best part is that only a single retina image is required as opposed to requiring a "2x" and an unscaled version to be present in your project.

How to make a retina image

To begin with a "retina" image is required, which is just a buzz-word for an image that has double the normal resolution. You can create an image like this in Photoshop by making it twice the normal size (a 16x16 pixel icon would be 32x32 instead) and giving it a density of 144, rather than the default 72.

When saved, the file traditionally has "@2x" at the end of the filename and is in PNG format (e.g. "home-icon@2x.png").

CSS Integration

To apply the retina graphic to the web page, we use a solution that takes the double scaled retina image and resizes it to fit the unscaled version.

.home-icon {
  width: 16px;
  height: 16px;
  background-image: url("images/home-icon@2x.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 16px 16px;
}

This CSS snippet gives the icon a 16 pixel square size and we know the "home-icon@2x.png" image is 32 pixels square, so the background-size property fits them to match.

On a regular screen, everything will look normal, however on a "Retina" or other high resolution display, the icon will be displayed in it's true quality without any blur or defects.

The reasons I chose this solution are:

  • Pure CSS
  • Works across browsers
  • Works on mobile
  • Only requires a single image (efficient)

For an example, check out the differences of the image in this JS Fiddle on and off a high resolution display such as an iPhone: http://jsfiddle.net/UxK4N/

The most efficient CSS reset pattern

I've recently been investigating web page performance and focusing on CSS efficiency to see where performance gains can be made. After using the Chrome CSS profiler, I came to the conclusion that my "reset" CSS file was taking a long time to parse and match selectors, slowing down the browser paint process.

Reset CSS files are used to normalise default DOM element styles, so that your custom styles will work effortlessly across all browsers.

Naturally then, the reset CSS must target many elements in order to change their style. However, how can this be done in the most efficient manner?

This useful website, CSSReset.com provides 5 popular reset methods for you to use.

For my experiment I have used each of the provided codes and implemented them in turn into my web page. I then run though a "script" of accessing certain parts of the website while the Chrome CSS profiler is running and measure the results of each. I have performed the script multiple times with each code snippet to ensure a valid result.

In short, my findings are: normalize.css has the best efficiency, by quite a long way, with YUI coming in second place.

The reason normalize.css is highly more efficient is that unlike the other scripts, it does not select all DOM elements in a single comma separated declaration, but breaks up the declarations into smaller segments.

Due to my project not using many DOM elements, the browser can skip parsing for many of these declarations making overall performance better.

This is interesting as normalize.css is the least used code snippet on the website, at the current time of writing.

I'd be interested to follow up on this and here any arguments for or against using a reset CSS in this manner.

© Blake Simpson, 2012 – 2017