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

回答

相關問題