jQuery Mobile
PCブラウザではFirefox以外のChromeやIEでは、散々なものにしか見えませんが、メモに残します。
クラスやスタイルだけで、リンクの役割を決めるのではなく、data-roleなどといったデータの役割は何々よ、というアトリビュートやdata-themeといったアトリビュートが、スタイルを決めます
ワードプレスなどでも、コメントの入力必須部分などに新しいアトリビュートが少しづつ使われ始めている
Mobileで使われているCSS3 +
CSSは、手書きのみ安い書き方に直すと、約2000行ほどのスタイルシートフレームワークになっています。
策定中のCSS3 + etcがどのように指定されているのか、抜き出してみました。
- google:ms-filter
- google:text-overflow
- google:moz-border-radius-topleft
- google:webkit-border-top-left-radius
- google:border-top-left-radius
- google:moz-border-radius-topright
- google:webkit-border-top-right-radius
- google:border-top-right-radius
- google:moz-border-radius-bottomleft
- google:webkit-border-bottom-left-radius
- google:border-bottom-left-radius
- google:moz-border-radius-bottomright
- google:webkit-border-bottom-right-radius
- google:border-bottom-right-radius
- google:webkit-border-radius
- google:border-radius
- google:webkit-background-clip
- google:moz-background-clip
- google:background-clip
- google:moz-box-shadow
- google:webkit-box-shadow
- google:box-shadow
- google:outline-width
- google:webkit-animation-name
- google:webkit-animation-duration
- google:webkit-animation-iteration-count
- google:webkit-transform
- google:webkit-animation-timing-function
- google:webkit-transform-origin
- google:webkit-transition
- google:moz-transition
- google:o-transition
- google:transition
- google:counter-reset
- google:counter-increment
- google:background-size
- google:moz-linear-gradient
PC ブラウザはfirefoxしか動作しない模様、注意- jQuery Mobile memo
- WordPressで、jQuery Mobile を使うチュートリアル
- How to create a mobile WordPress theme with jQuery Mobile | CatsWhoCode.com
グラデーション
ボタンの試作 hoverつき