otsukare Thoughts after a day of work

How To Fix border-image in your CSS?

I have already explained this in the context of Gmail, but I thought we should make it more explicit.

If you go on Music Oricon Japanese Web site with Firefox Android with about:config?filter=prefixes.webkit set to false, you will see massive breakages, including this navigation bar:

Oricon navigation bar in Firefox

There are a couple issues including flexbox, but let's ignore it for the moment and let's focus on background-image issues. The markup is simple.

<ul class="btn-navi">
        <li class="current"><a href="http://music.oricon.co.jp/?&amp;clt=WW5retn8C31gDygq5DOAPvc732o8EWMcQAtlkTOLQNcOUlh72xokjWq9tkN7-TQX24EuyA~~">J-POP</a></li>
        <li><a href="http://music-world.oricon.co.jp/?&amp;clt=WW5retn8C31gDygq5DOAPvc732o8EWMcQAtlkTOLQNcOUlh72xokjWq9tkN7-TQX24EuyA~~">洋楽</a></li>
        <li><a href="http://music-club.oricon.co.jp/?&amp;clt=WW5retn8C31gDygq5DOAPvc732o8EWMcQAtlkTOLQNcOUlh72xokjWq9tkN7-TQX24EuyA~~">クラブ</a></li>
        <li><a href="http://music-indies.oricon.co.jp/?&amp;clt=WW5retn8C31gDygq5DOAPvc732o8EWMcQAtlkTOLQNcOUlh72xokjWq9tkN7-TQX24EuyA~~"><span class="nowrap">イン</span><wbr><span class="nowrap">ディーズ</span></a></li>
        <li><a href="http://music-anime.oricon.co.jp/?&amp;clt=WW5retn8C31gDygq5DOAPvc732o8EWMcQAtlkTOLQNcOUlh72xokjWq9tkN7-TQX24EuyA~~">アニメ</a></li>
    </ul>

Let's see the CSS for each a href

.btn-navi > li.current > a {
    border-right: black solid 5px;
    border-left: black solid 5px;
    -webkit-border-image: url(image/background_btn_current.png) 0 10 0 10;
    -moz-border-image: url(image/background_btn_current.png) 0 10 0 10;
}

The author had good intents. -webkit- and -moz- are there. -ms- is not present but it's normal, IE never had a support for border-image with prefix.

Missing the Non-Prefixed Version

Always add the non-prefixed version in the last position. Two main reasons:

  • Managing the legacy. Your client might not give you a budget to maintain the CSS in the future. So better be ready and universal for other browsers coming along.
  • Helping browsers implementers to unship the support of the prefix. Less things to maintain. Moving forward.

Let's see what is happening if we add border-image.

.btn-navi > li.current > a {
    border-right: black solid 5px;
    border-left: black solid 5px;
    -webkit-border-image: url(image/background_btn_current.png) 0 10 0 10;
    border-image: url(image/background_btn_current.png) 0 10 0 10;
}

It's taken into account

Devtools CSS properties

Missing fill keyword

Always add the fill keyword to your border-image if it's the intended effect.

.btn-navi > li.current > a {
    border-right: black solid 5px;
    border-left: black solid 5px;
    -webkit-border-image: url(image/background_btn_current.png) 0 10 0 10;
    -moz-border-image: url(image/background_btn_current.png) 0 10 0 10;
    border-image: url(image/background_btn_current.png) 0 10 0 10 fill;
}

Now it looks already better.

navbar half fixed

But we just fixed the selected one. We do the same for the others.

.btn-navi > li > a {
    display: table-cell;
    vertical-align: middle;
    height: 36px;
    font-size: 12px;
    font-weight: bold;
    color: #333;
    line-height: 1em;
    text-decoration: none;
    text-shadow: 0px 2px 1px #FFF;
    border-right: black solid 5px;
    border-left: black solid 5px;
    -webkit-border-image: url(image/background_btn_normal.png) 0 10 0 10;
    -moz-border-image: url(image/background_btn_normal.png) 0 10 0 10;
    border-image: url(image/background_btn_normal.png) 0 10 0 10 fill;
}

And this time this is fixed!

navbar fixed

Simple no?

border-image

  • border-image is defined in CSS Backgrounds specification.
  • need the keyword fill at the end of the declaration. The ‘fill’ keyword, if present, causes the middle part of the border-image to be preserved. (By default it is discarded, i.e., treated as empty.)
  • border-style needs to be defined.

Ice On the Cake: flexbox

The issue is classical and simple.

.btn-navi {
    display: box;
    display: -webkit-box;
    display: -moz-box;
    width: 100%;
    list-style: none;
    margin: 8px 0;
    padding: 0;
}

And as you can notice, the devtools has chosen display: -moz-box:

devtools css

If I set about:config?filter=prefixes.webkit to true

navbar

To fix it properly, it just needs display: flex

devtools css

And we get a proper navbar.

navbar

Otsukare!