How to use webkit?

[toplisek]

I have seen at the top of application CSS like:
body {
background: #CCCCCC;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}

Why is this used inside responsive striped backgrounds?

[justa]

I think you mean how to use Flexbox, not webkit. Browser prefixes, like -webkit- and -ms-, exist because the implementation is not standard across all browsers.

Flexbox is a new way that allows you to layout webpages in easier and more intuitive ways.

It allows you to do things stretch elements equally across the viewport, both vertically and horizontally. It allows you to center something in the middle of the page, something that is a struggle with floats.

Chris Coyier has a great write up [css-tricks.com...] and here are some templates that use flexbox for some common design patterns [philipwalton.github.io...]

[lucy24]

Any time a rule requires a vendor prefix (-ms-? really? that is very rare*) you need to make sure the factor is widely enough supported that it's worth coding for it-- or that it's an optional extra so it doesn't matter if some browsers can't do it. Also check whether the prefix is even recognized; you can't just stick a vendor prefix onto any old property and expect it to do something.

:: detour to caniuse dot com in other browser ::

Support for "flex" (generically): MSIE <10 not at all, 10 partial, 11 complete; FF partial below 28, complete after; Chrome 21, Safari 6.1, Opera 12 and 15.

Most partial support refers to supporting an older version of the specification or an older syntax.

A MSIE 10 cutoff is awfully high. How important is your flex?

[w3.org...]


* A vendor prefix is an admission on the vendor's part that the factor is not part of the CSS standard. If you see what I mean.