css: set PRE’s max-width so it doesn’t stretch the viewport

[mina86.com.git] / posts / css-sprites-as-background.en.html

<!-- subject: {CSS} sprites as background -->
<!-- date: 2013-05-06 02:46:10 -->
<!-- tags: html, css, sprites -->
<!-- categories: Articles, Techblog -->

<p>CSS sprites aren’t anything new.  They have been around for years, and are
    one of the methods to optimise website’s load time.  The idea is to
    incorporate multiple images into one and in this way decrease number of
    round trips between the server and the browser.

  <p>In its traditional use, CSS sprites work as a replacement for images and
    cannot be used as a background.  Alas that is exactly what I wanted to do
    with a quote and flag icons like the following:

    <figure><img src="/d/sprites-bg-example.webp"
                 style="max-width: 75%; box-shadow: 0.25em 0.25em 0.2em #042559; border-radius: 2em"
                 alt="Example block quote with a quote icon and two paragraphs with flags" /></figure>

    <blockquote>Update: This website has evolved slightly since 2013.  The flags
      are no longer used (replaced by content negotiation) and quote sprite icon
      has been replaced by an SVG.  While I no longer use this technique, it is
      of course still valid.</blockquote>

  <p>After some playing around I’ve finally figured out how to get this working.
    Even though there are some caveats, sprites can be used as a top-left
    no-repeat background image as well.

<!-- FULL -->

<h2>Basics</h2>

  <p>Let’s start with the basics.  Sprites incorporate many images into a bigger
    one and use CSS to display only what is needed.  Take the below image with
    a roll-over effect for example:

  <style>
    #html5 { width: 450px; }
    #html5, #html5 span { height: 100px; }
    #html5 span {
      display: inline-block;
      text-indent: 100%;
      overflow: hidden;
      background-image: url('/d/html5-sprite.jpg');
    }
    #spriteh {
      width: 74px;
    }
    #spritet {
      width: 52px;
      background-position: -74px 0;
    }
    #spritem {
      width: 90px;
      background-position: -126px 0;
    }
    #spritel {
      width: 96px;
      background-position: -216px 0;
    }
    #sprite5 {
      width: 138px;
      background-position: -312px 0;
    }
    #spriteh:hover {
      background-position: 0 -110px;
    }
    #spritet:hover {
      background-position: -74px -110px;
    }
    #spritem:hover {
      background-position: -126px -110px;
    }
    #spritel:hover {
      background-position: -216px -110px;
    }
    #sprite5:hover {
      background-position: -312px -110px;
    }
  </style>
  <div id=html5><span id=spriteh>H</span><span id=spritet>T</span><span id=spritem>M</span><span id=spritel>L</span><span id=sprite5>5</span></div>

  <p>A naïve approach would require ten separate images for this effect.
    Sprites in tandem with CSS allows this number to go dawn to one.  HTML code
    is simple and unimpressive:

  <pre>
&lt;div id=&quot;html5&quot;&gt;&lt;span
id=&quot;spriteh&quot;&gt;H&lt;/span&gt;&lt;span
id=&quot;spritet&quot;&gt;T&lt;/span&gt;&lt;span
id=&quot;spritem&quot;&gt;M&lt;/span&gt;&lt;span
id=&quot;spritel&quot;&gt;L&lt;/span&gt;&lt;span
id=&quot;sprite5&quot;&gt;5&lt;/span&gt;&lt;/div&gt;</pre>

  <p>In the absence of styles it simply spells ‘HTML5’ so if stylesheet fails to
    load, user can still sees the message.  To make a picture out of those spans
    their dimension must be set, text content hidden and background image added.
    The following is would be a good start:

<pre>
#html5 { width: 500px; }
#html5, #html5 span { height: 100px; }

#html5 span {
  display: inline-block;
  text-indent: 100%;
  overflow: hidden;
  background-image: url('html5-sprite.jpg');
}

#spriteh { width:  74px; }
#spritet { width:  52px; }
#spritem { width:  90px; }
#spritel { width:  96px; }
#sprite5 { width: 188px; }
</pre>

  <p>So far it’s nothing more than regular ‘replace text with a picture’ CSS
    trick.  Because of that, each span would display the image starting with its
    top-left corner, end result being a rather repetitive image of the letter
    ‘H’.  The missing ingredient is <code>background-position</code> CSS
    property which instructs the browser to start drawing the background from
    a different offset.  With a bit more styling, the code is almost complete:

<pre>
#spritet { background-position:  -74px 0; }
#spritem { background-position: -126px 0; }
#spritel { background-position: -216px 0; }
#sprite5 { background-position: -312px 0; }</pre>

  <p>By default, background image spans an infinite plane repeating indefinitely
    in all directions.  Picture’s top-left corner is aligned with element’s
    top-left corner producing the backdrop for its contents.

  <figure><img src=/d/html5-sprite-expl alt=""></figure>

  <p><code>background-position</code> property specifies the origin point of the
    background image in element’s coordinate system.  In other words, it
    instructs the browser to shift the image by given amounts and than cut
    whatever overlaps with the element for the background.  By setting position
    to <code>-126px</code>, the 127th pixel of the background image will be
    aligned with top-left corner of the element.

  <p>With that knowledge, getting roll-over effect is now trivial:

<pre>
#spriteh:hover { background-position:    0   -110px; }
#spritet:hover { background-position:  -74px -110px; }
#spritem:hover { background-position: -126px -110px; }
#spritel:hover { background-position: -216px -110px; }
#sprite5:hover { background-position: -312px -110px; }</pre>

  <p>Note that the big image has a ten-pixel gap between sprites.  It prevents
    pixels from adjacent sprites ‘bleeding’ over to the other images.

  <h2>A bit simpler method</h2>

  <p>The above is the normal method of using sprites.  In the presented example,
    there’s an easier way.  Instead of setting background image for each
    individual span element, it’s simpler to set background for the wrapping div
    element and cover it with span’s only when they are hovered.  CSS code for
    that looks as follows:

<pre>
#html5, #html5 span { height: 100px; }
#html5 {
  width: 500px;
  background-image: url('html5-sprite.jpg');
}
#html5 span {
  display: inline-block;
  text-indent: 100%;
  overflow: hidden;
}
#spriteh {
  width: 74px;
  background-position: 0 -110px;
}
#spritet {
  width: 52px;
  background-position: -74px -110px;
}
#spritem {
  width: 90px;
  background-position: -126px -110px;
}
#spritel {
  width: 96px;
  background-position: -216px -110px;
}
#sprite5 {
  width: 188px;
  background-position: -312px -110px;
}
#html5 span:hover {
  background-image: url('html5-sprite.jpg');
}</pre>

  <h2>Using sprites for background</h2>

  <p>Finally, we arrive at using sprites as background.  The trick here is
    the <code>no-repeat</code> value which causes the background image to be
    painted only once, for example:

<pre>
blockquote {
  background: url('…') no-repeat;
  padding: 0 26px;
  min-height: 20px;
}</pre>

  <p>In regular sprites, the interesting part of the image is cropped thanks to
    the limited size of the element.  Trying to use an image with multiple
    sprites as a background would result in whatever is on the right or bottom
    of the icon to be shown as well.

  <p>However, if there’s nothing on the right or below the icon, if it is the
    last thing in the sprites image, the above is no longer an issue.  And
    with <code>no-repeat</code> value, we instruct the browser not to wrap
    around the image thus sprites on the left or top of the image aren’t shown
    either.

  <p>It becomes apparent that using a staircase-like image with nothing but
    transparent background below the diagonal, sprites <em>on</em> the diagonal
    can be used as a top-left no-repeat background icon.

  <figure><img src=/d/icon-sprites.webp alt="" id=iconsprites></figure>
  <script src=/d/icon-sprites.js></script>

  <p>With that knowledge, the following styles can be constructed:

<pre>
blockquote, .plFlag, .enFlag {
  background: url('/d/s.png') no-repeat;
}
blockquote {
  background-position: -100px 0;
  min-height: 20px;
}
.plFlag {
  background-position: -50px -50px;
  text-indent: 22px;
}
.enFlag {
  background-position: -75px -25px;
  text-indent: 22px;
}</pre>

  <p>This technique can be extended in certain situations — either when
    the height or width of the element is specified.  In those
    situations, more icons can be present either on the right or below
    the sprite used as a background.

  <p>Certainly limited, but if there are only a few cases when this
    method needs to be used, it allows more images to be converted
    into sprites than previously expected.  And it’s what enabled me
    to convert all but one small images on this site to CSS
    sprites.