13

How To Fix border-image in your CSS?

 3 years ago
source link: https://www.otsukare.info/2016/05/25/howto-fix-css-border-image
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

How To Fix border-image in your CSS?

Mer 25 mai 2016by Karl Dubost (Working at Mozilla since 2013)

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/?&clt=WW5retn8C31gDygq5DOAPvc732o8EWMcQAtlkTOLQNcOUlh72xokjWq9tkN7-TQX24EuyA~~">J-POP</a></li>
        <li><a href="http://music-world.oricon.co.jp/?&clt=WW5retn8C31gDygq5DOAPvc732o8EWMcQAtlkTOLQNcOUlh72xokjWq9tkN7-TQX24EuyA~~">洋楽</a></li>
        <li><a href="http://music-club.oricon.co.jp/?&clt=WW5retn8C31gDygq5DOAPvc732o8EWMcQAtlkTOLQNcOUlh72xokjWq9tkN7-TQX24EuyA~~">クラブ</a></li>
        <li><a href="http://music-indies.oricon.co.jp/?&clt=WW5retn8C31gDygq5DOAPvc732o8EWMcQAtlkTOLQNcOUlh72xokjWq9tkN7-TQX24EuyA~~"><span class="nowrap">イン</span><wbr><span class="nowrap">ディーズ</span></a></li>
        <li><a href="http://music-anime.oricon.co.jp/?&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!


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK