layout: post title: “2017-07-03-study-html5-note” date: 2017-07-03 11:25:23 +0000
はじめに
- http://caniuse.com/ ブラウザー対応表
- https://www.w3.org/ WEB技術のあれこれ
Ricty Diminished0 と O が見やすく全角空白がわかりやすいフォント
input, button
maxlength文字数の最大値hidden決まっている値をフォーム非表示で送信disabled無効化
input
type="emailemail っぽくない文字列にはエラーが出るtype="numbernumber っぽくない文字列にはエラーが出るtype="datedate っぽくない文字列にはエラーが出るrequired必須項目 入力しないとエラーが出るnovalidateエラーが出ず次のページに進む
補足:
novalidate は <form novalidate> のように使用し、<input required> との併用でエラー分は出ず、次のページ(処理)を行うマークアップ。
補足2:
すべてのユーザーが新しいWEB技術に対応したブラウザを使用していないことを常に考慮し、”マークアップに頼り切らない機能の実装”を心がける必要がある。
文字参照(特殊記号)
特殊記号は 数値文字参照 と 文字実態参照 の2つ方法がある。
HTML5 にはカテゴリーとコンテンツモデルが定義されている
例えば W3C のサイトで h1 などのタグを検索すると、
- Categories – Flow content, Heading content, Palpable content
- Conten model – Phrasing content
と出る。
これは h1 タグは Flow content, Heading content, Palpable content に分類される箇所で使うこと、そして、 Phrasing content の要素通りにしか使用できないということ。あと時折、 transparent(トランスペアレント) というものがあるが、これは親要素のコンテンツモデルを使用して欲しい、ということで h1 タグにリンクを張りたい場合、先ほどのコンテンツモデルから <h1 a></h1> などは間違いで、<h1><a>文字列</a></h1> のようにする、という指定である。
Bootstrap
<span class="badge"></span>中に何もなければ消してくれるpopoverマウスクリックで表示tooltioマウスオーバーで表示- カルーセルはアクセシビリティ的に良くない
