1

For example, to create flow indicator like:

Step 1 > Step 2 > Step 3

I can either:

1.Use html+css

.concave{
  border-left:1em solid transparent;
  border-top:1em solid orange;
  border-bottom:1em solid orange;
}

.middle{
  background-color:orange;
}

.convex{
  border-left:1em solid orange;
  border-top:1em solid transparent;
  border-bottom:1em solid transparent;
}

<table cellspacing="0" cellpadding="0" border="0" style="font-size:30px;">
  <tr>
    <td class="concave"/>
    <td class="middle" style="width:25%;">Step 1</td>
    <td style="max-width:0.5em;"><div class="convex"/></td>
  </tr>
</table>

2.Create a background image:

enter image description here

My question is, if either html+css or an image can achieve my desired decoration, which one should I prefer to use?

  • 1
    or, indeed, use svg – Ewan Jun 19 '18 at 12:57
2

Neither approach is correct, because you first need to use Semantic HTML. As such, if you have "step 1" followed by "step 2" you really have an ordered list. Start with that and style it however you want for the screen media. Use background images, since they add no semantic meaning.

If you need it formatted for the print media, add a print stylesheet.

|improve this answer|||||
1

Whichever one makes the most sense to your target audience. So, for example, if your users need to be able to print your page and have the image appear, use <img>. Also use <img> if you need to have alternate text displayed. Using the html+css may also increase load time, too. See this and this too for some more info.

|improve this answer|||||
1

The two approaches don't produce the same result.

For example:

Your css scales as a vector to a point, but then breaks. You can use css media types to change how it looks on different displays but it might not be supported on all browsers

Your image scales as a raster, uses more bandwidth to download but has better compatiblity

You need to have some requirements before you can choose which is the best solution to any given problem. But generally I think web site priorities go:

  1. Pixel perfect rendering on 'all' devices
  2. Superfast rendering and responsiveness
  3. Low cost. ie. low bandwidth

Images generally do 1 and 2 very well, but can fall over on 3 if you have too many of them.

I think for your small image, the bandwidth is insignificant, it could be possibly put in an image map to further increase performance

|improve this answer|||||

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.