CSS Optimization issue

I've found a css striped and tiled combination that I really like. The problem is, it makes everything really, really slow. I'm wondering, are there any techniques I should use to make this css more optimized? Or is the technique just too demanding in itself?

I use less.

.head {
    .stripes;
    .angled;
}

.stripes {          
        -webkit-background-size: 50px 50px;
        -moz-background-size: 50px 50px;
        background-size: 50px 50px; /* Controls the size of the stripes */

        -moz-box-shadow: 1px 1px 8px gray;
        -webkit-box-shadow: 1px 1px 8px gray;
        box-shadow: 1px 1px 8px gray;
    }

.angled {
        background-color: @light-blue;
        background-image: -webkit-gradient(linear, 0 100%, 100% 0,
                                color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent),
                                color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)),
                                color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent),
                                to(transparent));
        background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
                            transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
                            transparent 75%, transparent);
        background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
                            transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
                            transparent 75%, transparent);
        background-image: -ms-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
                            transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
                            transparent 75%, transparent);
        background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
                            transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
                            transparent 75%, transparent);
        background-image: linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
                            transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
                            transparent 75%, transparent);
    }

Answers


Few weeks ago I tested this technique on Firefox, Opera and Chrome with a simple two color gradient to get vertical stripes. It works quite well for large background-size but when you set it to just few pixels browser needs a lot more time to render it especially when you maximize the window. Opera and Chrome handle it quite well. Sometimes you can see a spike on the cpu usage graph but it's not that bad. Firefox on the other hand goes crazy on the cpu. It's most probably problem with the way gradients and background-size are implemented. I think it's better to use images at least for now. You may want to use base64 and put it into your css to avoid another request.


Need Your Help

Is Stack Overflow's content protected?

support copyright content-reuse

I mean, can I copy part of the content and put it in a website?

How does the UML support inVisual Studio 2010 compare to Visio?

visual-studio-2010 uml visio

Visio has been supporting UML diagrams for quite some time now. Microsoft has now added UML support in Visual Studio 2010.