HTML webkit tools

Question

I have been reading up on html5 when I encounter this thing called webkit. well I don't really know what is it or what is does so I came up with two examples.

Is there any difference between the css style that I wrote? from what I seen, both the css gave me the same output. which will be a more perferred way?

style.css

body    {
    text-align: center; 
}

#wrapper    {
    border: 4px solid black;    
    width:1000px;
    margin:20px auto;
    text-align: left;
}

#top_header {
background:yellow;
border: 2px solid blue;
padding:20px;

}

#nav_bar    {
border: 2px solid red;
background:grey;
color:white;
}

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

v.s

style.css

body    {
    width:100%;
    margin:20px auto;
    display:-webkit-box;
    -webkit-box-pack:center;
}

#wrapper    {

    width: 1000px;
    display:-webkit-box;
    -webkit-box-pack:center;
    -webkit-box-orient:vertical;
    -webkit-box-flex:1;
}

#top_header {
background:yellow;
border: 2px solid blue;
padding:20px;

}

#nav_bar    {
border: 2px solid red;
background:grey;
color:white;
}

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

index.html

<!DOCTYPE html>
<html-lang="en">
<head>
<meta charset=UTF-8" />
<title>Learning Web Design</title>
<link href="style.css" rel="stylesheet" type="text/css">

</head>

 <body>
<div id="wrapper">
    <header id="top_header">
        <h1>Learning Website </h1>
    </header>
        <ul>
            <li>navBarOne</li>
            <li>navBarTwo</li>
            <li>navBarThree</li>
        </ul>
    </nav>
</div>

`-webkit` vendor prefix serves for Google Chrome and Apple Safari web browsers. — Milan and Friends, Dec 09 '13 at 11:31

score 0 · Answer 1 · edited May 23 '17 at 10:32

Have you tried running in different browsers : Chrome, Firefox, IE etc. If not try running and see if you can spot any difference.

Overview: https://docs.google.com/presentation/d/1ZRIQbUKw9Tf077odCh66OrrwRIVNLvI_nhLm2Gi__F0/embed?start=false&loop=false&delayms=3000#slide=id.p

WebKit is a rendering engine. Not all browsers have the same engine.

This should clear most of your doubts: What is WebKit and how is it related to CSS?

score 0 · Accepted Answer · answered Dec 09 '13 at 11:39

0

WebKit is a browser engine that powers Safari and previously powered Chrome. -webkit- is vendor prefix used by Safari, Chrome and it's derivatives to implement the property that's not fully compatible with a spec.

If possible, always use an unprefixed version to get consistent result across the browsers. Try to launch your example in Firefox or IE: the version without prefixed properties will look the same (mostly), while the version with prefixed properties will be broken.

answered Dec 09 '13 at 11:39

Pavlo

43,301
14
77
113

you mentioned that '-webkit vendor prefix serves for Google Chrome and Apple Safari web browsers' and 'If possible, always use an unprefixed version to get consistent result across the browsers.' so it's best to avoid using webkits? – user2211678 Dec 09 '13 at 11:48
Yes, thats my point. Unfortunately, that's not always possible, I recommend to check http://caniuse.com/ – Pavlo Dec 09 '13 at 11:52

score 0 · Answer 3 · edited Dec 12 '13 at 23:15

Use this to get the proper resul!

<!DOCTYpE html>
<html lang = "en"> 
<head>
    <title>Combinator</title>
 <style> 
   .myimageclass ~ p::first-line{
     color:hsla(0,100%,50%,1);
     font-style:italic;

 }
 </style>
</head>

<body>
<img class="myimageclass" /> <p>This is some text </p><br />This is some textThis is some text
<img class="myimageclass" /> <p>This is some text</p><br />This is some textThis is some text
<img class="myimageclass" /> <p>This is some text</p><br />This is some textThis is some text
<img class="myimageclass" /> <p>This is some text</p><br />This is some textThis is some text
</body>
</html>

enter image description here

HTML webkit tools

3 Answers3