HiveBrain v1.2.0
Get Started
← Back to all entries
patterncssMinor

Iconography - How would you improve this?

Submitted by: @import:stackexchange-codereview··
0
Viewed 0 times
codereviewcssstackoverflow
thisyouimprovewouldiconographyhow

Problem

I would like your opinion on the following subject.
I have to provide icons in different sizes and states. The sizes will be 1616, 2424 and 32*32.

The states bright, dark, disabled and link.

Because of browser support we decided for .png instead of .svg.
Do you feel this is the best CSS approach for this case?

Would you make some changes to improve this styles?


.fx-icon { /*standard icon size*/
    border: none;
    display: inline-block;
    height: 16px;
    line-height: 16px;
    margin-right: 3px;
    vertical-align: top;
    width: 16px;
}

.fx-icon.fx-icon-medium {
    height: 24px;
    line-height: 24px;
    width: 24px;
}

.fx-icon.fx-icon-large {
    height: 32px;
    line-height: 32px;
    width: 32px;
}

.fx-icon.fx-icon-larger {
    height: 48px;
    line-height: 48px;
    width: 48px;
}

/*Icon Home*/
.fx-icon-home-bright,
.fx-icon-home-dark,
.fx-icon-home-disabled,
.fx-icon-home-link {
    background: url(images/icon-home.png) no-repeat;
}

.fx-icon-home-dark {
    background-position: -16px 0;
}

.fx-icon-home-disabled {
    background-position: -32px 0;
}

.fx-icon-home-link {
    background-position: -48px 0;
}

Solution

My recommendation would be to use a tool to generate a sprite sheet + CSS, rather than writing it out manually yourself. I've not used it myself, but the sprite helpers found in Compass (see: http://compass-style.org/reference/compass/helpers/sprites/, but it only works with PNGs) are very popular. If your set of icons expands in the future, you'll be thankful that you don't have to go back and fix everything manually: just run your tool again with the new images and you're good to go.

Just because browser support isn't perfect, that doesn't mean you can't have both PNG and SVG. The only browsers that are widely used that do not support SVGs as a background image are IE8 and Android 2.3x.

By taking advantage of the fact that the browsers that do not support SVGs as a background image either do not support the background-size property (IE8) or require a prefix for it (Android 2.3x), you can serve the correct file to the correct browser:

.foo {
    background: url(foo.png) no-repeat; /* IE8 and Android 2.3x */
    background: url(foo.svg) 0 0 / auto auto no-repeat; /* everyone else */
}


In addition to being able to resize gracefully, SVGs have one other little-known advantage: you can use media queries inside them. This is an excellent way of reducing details as the SVG gets smaller or adding details as the SVG gets bigger. When used as a background image, support for media queries inside the SVG is somewhat limited (the demo below appears to only work as expected in IE9+ and Chrome)

http://codepen.io/cimmanon/pen/HldKw

Foo

Foo

Foo

p {
  display: inline-block;
}

p:before {
  background: url(http://people.opera.com/andreasb/demos/demos_svgopen2009/update/circle.svg) 0 0 / cover no-repeat;
  height: 200px;
  width: 200px;
  display: block;
  content: ' ';
}

.two:before {
  height: 100px;
  width: 100px;
}

.three:before {
  height: 50px;
  width: 50px;
}


The SVG:


 
  Simple SVG + mediaqueries
  
  
    #circle {
        fill: #fce57e;
        stroke: #fff;
        stroke-width: 100px;
        stroke-opacity: 0.5;
        fill-opacity: 1;
    }
    @media screen and (max-width: 350px) {
    #circle {
        fill:  #879758;
    }
    }
    @media screen and (max-width: 200px) {
    #circle {
        fill: #3b9557;
    }
    }
    @media screen and (max-width: 100px) {
    #circle {
        fill: #d8f935;
    }
    }
    @media screen and (max-width: 50px) {
    #circle {
        fill: #a8c45f;
    }
    }
    @media screen and (max-width: 25px) {
    #circle {
        fill: #2c3c0c;
    }
    }


Learn more: http://blog.cloudfour.com/media-queries-in-svg-images/

Code Snippets

.foo {
    background: url(foo.png) no-repeat; /* IE8 and Android 2.3x */
    background: url(foo.svg) 0 0 / auto auto no-repeat; /* everyone else */
}
<p class="one">Foo</p>

<p class="two">Foo</p>

<p class="three">Foo</p>

p {
  display: inline-block;
}

p:before {
  background: url(http://people.opera.com/andreasb/demos/demos_svgopen2009/update/circle.svg) 0 0 / cover no-repeat;
  height: 200px;
  width: 200px;
  display: block;
  content: ' ';
}

.two:before {
  height: 100px;
  width: 100px;
}

.three:before {
  height: 50px;
  width: 50px;
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400">
 <g>
  <title>Simple SVG + mediaqueries</title>
  <defs>
  <style type="text/css">
    #circle {
        fill: #fce57e;
        stroke: #fff;
        stroke-width: 100px;
        stroke-opacity: 0.5;
        fill-opacity: 1;
    }
    @media screen and (max-width: 350px) {
    #circle {
        fill:  #879758;
    }
    }
    @media screen and (max-width: 200px) {
    #circle {
        fill: #3b9557;
    }
    }
    @media screen and (max-width: 100px) {
    #circle {
        fill: #d8f935;
    }
    }
    @media screen and (max-width: 50px) {
    #circle {
        fill: #a8c45f;
    }
    }
    @media screen and (max-width: 25px) {
    #circle {
        fill: #2c3c0c;
    }
    }
  </style>
  </defs>
  <circle cx="200" cy="200" r="150" id="circle" />
 </g>
</svg>

Context

StackExchange Code Review Q#36507, answer score: 4

Revisions (0)

No revisions yet.