Do you have to use -webkit- syntax anymore?

问题

I'm using the flex box technique to layout my webpage, but I have come across with some confusion about the syntax. What I'm confused about is do you have to use -webkit- anymore or has all browsers implemented HTML5 yet. I have been looking for answers on the various websites and one person says you need to use the -webkit- syntax and another person says you don't have to use it anymore. I understand what flex boxes do I'm just confused on whether you need to use -webkit- or not. If I don't can someone show me the correct syntax and if I do need to use the -webkit- syntax can someone show me how to implement my layout into Firefox, Opera, and IE. I know Chrome and Safari use the -webkit- syntax.

header, section, footer, article , aside, hgroup, nav {
    display: block;
}

* {
    margin: 0px;
    padding: 0px;
}

body {
    width: 100%;
    display: -webkit-box;
    -webkit-box-pack: center;
}

h1 {
    font: bold 20px tahoma;
}

h2 {
    font: bold 14px tahoma;
}

#page_wrap {
    max-width: 1000px;
    margin: 20px 0px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-box-flex: 1;
}

#top_header {
    background: red;
    border: 4px solid black;
    padding: 20px;
    border-radius: 5px;
}

#top_menu {
    border: 2px solid red;
    background: black;
    color: white;
    padding: 10px;
}

#top_menu li {
    display: inline-block;
    list-style: none;
    padding: 5px;
    font: bold 14px tahoma;
}

#section {
    display: -webkit-box;
    -webkit-box-orient: horizontal;
}

#main_section {
    border: 1px solid black;
    -webkit-box-flex: 1;
    margin: 20px;
    padding: 20px;
}

#side_news {
    border: 2px solid red;
    margin: 20px 0px;
    width: 220px;
    padding: 30px;
    background: #a4a4a4;
    border-radius: 10px;
    -webkit-box-shadow: rgb(110,110,110) 10px 10px 10px;
}

#the_footer {
    clear: both;
    text-align: center;
    padding: 20px;
    border-top: 2px solid black;
}

article {
    background: black;
    color: white;
    border: 3px solid red;
    padding: 20px;
    margin-bottom: 15px;
}

article footer {
    text-align: right;
}

回答1:

I have been developing a CSS framework, and fromt hat I learned: To make things work for real, you have to also type it all out. That means in short: You should use the -webkit- prefix, and the same settings without. Besides, there is also -o- (Opera), -moz- (Firefox), -ms- and sometimes -Ms (IE, and yes, case sensitive). Very rarely there might be also -khtml-...but the chance you run into that is equal to zero. I have not seen any modern browser that uses that one any longer.

It might be painful to duplicate your statements, but that is how you make your CSS cross-browser compatible. And that is why I started to use PHP to do it instead...

You can also look up the statements - i.e. box-pack - and see their browser compatibility and syntaxes.

For example: Google Chrome seems to preffer -webkit- over the "non-branded" (no -webkit-) version. Safari tends to ignore the branded version and uses the non-branded version.

回答2:

You can't ever drop the -webkit prefix from display: -webkit-box, because the standardized version is not called box.

Instead, it's called display:flex. The associated flexbox properties (including -webkit-box-pack) all have different names in the "new" standardized flexbox model, too.

Having said that -- you should prefer the new display:flex model to the old -webkit-box/-moz-box model, because the new version has better interoperability and cross-browser support, because it's actually standardized.

回答3:

The -webkit- prefix is needed for Safari and Chrome when using transitions, transforms, animation, gradients, calc, flexbox, and columns. For border-radius, box-shadow, border-image, and text-shadow it's not really necessary unless you want to cover older browsers like Safari 5.0.

来源：https://stackoverflow.com/questions/25706551/do-you-have-to-use-webkit-syntax-anymore

标签

html

css

html5

flexbox