Do you have to use -webkit- syntax anymore? - css

Question

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;
}

Answer 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.

Answer 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.

Answer 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.