html5、LINKのMEDIA属性の質問。


レスポンシブデザインで「only screen and ~」を使って振り分けていますが、
Another HTML-lint5 で文法チェックをすると以下の減点が出ます。

<LINK> の MEDIA の属性値 `only screen and (max-width:649px)` は正しくありません。

このエラーの対処法と理由をわかりやすく説明してくれる方いますか?

よろしくお願いします。m()m

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2014/01/24 15:22:27
  • 終了:2014/01/26 13:18:04

ベストアンサー

id:vow No.1

ghost回答回数21ベストアンサー獲得回数92014/01/24 17:27:09

ポイント100pt

単に、その Another HTML-lint5 の方が、only の存在をぺろっと忘れているだけの気がします。
自称検査機が正しい検査をしているとは限りません。

/html-lint/html5.rul

'MediaType'=> '^(?=^\s*(not\s+)?(all|aural|braille|handheld|projection|print|screen|tty|tv){1}(\s*,\s*(all|aural|braille|handheld|projection|print|screen|tty|tv)\s*)*((\s+and\s+|\s*,\s*)(\(\s*((min-|max-)?(width\s*:\s*\d+px|height\s*:\s*\d+px|device-width\s*:\s*\d+px|device-height\s*:\s*\d+px|aspect-ratio\s*:\s*\d+/\d+|device-aspect-ratio\s*:\s*\d+/\d+|color\s*:\s*\d+|color-index\s*:\s*\d+|monochrome\s*:\s*\d+|resolution\s*:\s*\d+dpi)|((orientation\s*:\s*(landscape|portrait))|(scan\s*:\s*(progressive|interlace))|(grid\s*:\s*(0|1))))\s*\)))*\s*$).*$',

・・・なんだこのやっつけ仕事。

そういうわけなので only を取り除けばこの検査機は文句を言わなくなるはずですが、実際にそんな事をしたら意味が変わってしまうので、この場合は警告をなまぬる~く無視しておくのが正しい対処かと思われます。

ちなみにオリジナルの Another HTML-lint では、単に 'MediaType'=>'CDATA+' になっているだけなので、たいてい何を書いても文句言いません。

id:tontonpokopoko

回答をありがとうございます。そうでしたか、文法チェックは便利な機能だと思うので精度をあげてくれるといいんですが。助かりました、only のエラーは無視していこうと思います!

2014/01/26 13:18:46
  • id:language_and_engineering

    > only screen and (max-width:649px)

    これ自体には問題はありません。エラーはその周辺のようです。

    LINKタグの全体を提示して頂ければ回答しやすくなるのですが,可能でしょうか。
  • id:tontonpokopoko
    申し訳ございません。ヘッダの中身は以下の感じです。

    <head>
    <meta charset="utf-8">
    <title></title>

    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

    <link rel="stylesheet" href="../style-l.css">

    <link rel="stylesheet" href="../style-m.css" media="only screen and (min-width:650px) and (max-width:979px)">

    <link rel="stylesheet" href="../style-s.css" media="only screen and (max-width:649px)">

    <link href='http://fonts.googleapis.com/css?family=Maven+Pro:900,400' rel='stylesheet' type='text/css'>
    </head>

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません