今天才知道css hack是什麼

先來個冷笑話:一晚下班回家,一民警迎面巡邏而來。忽然對我大喊:站住! 民警:int類型佔幾個字節? 我:4個。 民警:你能夠走了。 我感到很詫異。 我:爲何問這樣的問題? 民警:深夜還在街上走,寒酸苦逼的樣子,不是小偷就是程序員css

做爲一個後端程序員,以前知道的css都是皮毛,由於有專業的美工幫咱們作靜態頁面,咱們只須要作好頁面數據填充,專心寫邏輯代碼。如今有一種想去從事web前端開發了,儘管知道一些js的主要概念,原型,原型鏈,上下文,閉包之類的,但貌似都不是很深刻,想一想仍是先從css開始吧,有時候很簡單的某些樣式卻老是寫的很痛苦。因此今天就看了css手冊,點滴積累吧。html

什麼是css hack前端

  我本身的理解定義,就是針對不一樣的瀏覽器在對某些css屬性作解析的時候出現的差別,咱們去coding css這些差別的過程。看了css hack知道有程序員

  1.條件hackweb

1 <!--[if <keywords>? IE <version>?]>
2     HTML代碼塊
3 <![endif]-->
<keywords>取值有
  

  lt 小於
  gt  大於
  gte 大於或等於
  lte 小於或等於
  ! 非
<version>取值有
能夠是6/7/8/9...

例如 如下表示瀏覽器是小於ie7的:
1 <!--[if lt IE 7]>
2 <style>
3     .test2{width:100px;height:100px;background:blue}
4 </style>
5 <![endif]-->
如下例子是ie7的,這個是有效果的:
<!--[if IE 7]>
<style>
    .test{color:red;}
</style>
<![endif]-->
2.屬性級hack
代碼以下:
#test{
    color:#c30; /* For Firefox */
    color:red\0; /* For Opera */
    color:yellow\9; /* For IE8+ */
    *color:blue; /* For IE7 */
    _color:#ccc; /* For IE6 */
}
3.選擇符級hack
* html .test{color:#090;}       /* For IE6 and earlier */
* + html .test{color:#ff0;}     /* For IE7 */
.test:lang(zh-cn){color:#f00;}  /* For IE8+ and not IE */
.test:nth-child(1){color:#0ff;} /* For IE9+ and not IE */
還有一點小知識是讓一個內聯元素能夠設置寬高 目前知道有display:block/inline-block 或者設置position:absoulte或者設置float等
最後 -music

  白天老是很忙
  晚上總很慌
  都說前面有光
  誰能給誰方向
  看起來他和她彷佛都很風光
  低頭認可眇小不如堅強上場

  天天問問本身
  是否盡全力
  不學百般心機
  過程是獎勵
  你一直站在光能照到的地方
  只要相信本身其實每一個人都同樣

  多一我的和你分享
  少一點難本身肩扛
  咱們都是笨小孩但不忘挺起胸膛
  多一我的和你分享
  少一點難本身肩扛
  相信本身早晚會發光發亮

  天天問問本身
  是否盡全力
  不學百般心機
  過程是獎勵
  你一直站在光能照到的地方
  只要相信本身其實每一個人都同樣後端

相關文章
相關標籤/搜索