HTML webkit工具

我一直在阅读html5，当时我遇到这个叫做webkit的东西。我真的不知道它是什么或者做了什么，所以我想出了两个例子。HTML webkit工具

我写的css风格有什么区别吗？从我看到的，这两个CSS给了我相同的输出。这将是一种更为优惠的方式？

的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>

来源

2013-12-09 user2211678

'-webkit'供应商前缀用于谷歌浏览器和Apple Safari网络浏览器。 – mdesdev

WebKit是权力Safari和以前供电的Chrome浏览器引擎。 -webkit-是Safari，Chrome及其衍生产品用于实现与规范不完全兼容的属性的供应商前缀。

如果可能，请始终使用前缀不正确的版本以在浏览器中获得一致的结果。尝试在Firefox或IE中启动您的示例：没有前缀属性的版本看起来相同（主要是），而带有前缀属性的版本将被打破。

来源

2013-12-09 11:39:27 Pavlo

您提到'-webkit供应商前缀可用于Google Chrome浏览器和Apple Safari Web浏览器'，'如果可能，请始终使用前缀不变的版本以在浏览器中获得一致的结果。所以最好避免使用webkit？ – user2211678

是的，这是我的观点。不幸的是，这并不总是可行的，我建议查看http://caniuse.com/ – Pavlo

您是否尝试过在不同的浏览器中运行：Chrome，Firefox，IE等。如果不尝试运行，看看是否可以发现任何区别。

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

WebKit是一个渲染引擎。并非所有的浏览器都有相同的引擎。

这应该清除大部分的疑惑： What is WebKit and how is it related to CSS?

来源

2013-12-09 11:33:20

我明白了。所以它只适用于Chrome。谢谢 – user2211678

用这个来得到正确的结果！

<!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

来源

2013-12-09 15:35:09

回答

相关问题