no-js no-touch

不支援 JavaScript 時的 CSS

http://blog.roachking.net/blog/2013/02/15/noscript-css/

Add the class .no-touch to all :hovers in style.css

modernizr 和 HTML5 Boilerplate 的解法

我們在 html 標籤裡加入一個 no-js 的 class, 接著讀入 modernizr, modernizr 會把瀏覽器支援的東西寫入 html 的 class, 於是就會出現兩種情況:

不支援 JavaScript 的瀏覽器, 不會執行 modernizr, html 會有當初設定的 class "no-js"。

支援 JavaScript 的瀏覽器,執行 modernizr, html 不會有 class "no-js"、會產生 class "js"。

<!doctype html>
<html class="no-js">
  <head>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
  </head>
  <body></body>
</html>

如果不想用 modernizr,也可以用一行輕鬆寫出來:

<!doctype html>
<html class="no-js">
  <head>
    <script>
      (function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement)
    </script>
  </head>
  <body></body>
</html>

A better way to implement CSS :hover states for the responsive web

http://leonardburton.co/2013/06/a-better-way-to-implement-hover-states-for-the-responsive-web/

CSS Implementation

/** This example assumes you've reset your <a> as line below **/
a { text-decoration: none; }

/** Hover states **/
html.oldie a:hover {
    text-decoration: underline;
}
/** html 沒有 .touch class 時候的 a:hover **/
html:not(.touch) a:hover {
    text-decoration: underline;
}
/** 只有螢幕模式和 最小寬 960px (width 960px 以上) 時 **/
@media only screen and (min-width: 960px) {
    html.no-js a:hover {
        text-decoration: underline;
    }
}

results for ""

    No results matching ""