SafariのCSS3拡張
2009-08-09 (日) 20:19:00 (213d)

lifebuoy.png Safari/MobileSafariの拡張情報についてのまとめ
lifebuoy.png SafariによるCSS3拡張サポート、SafariによるCSS3独自拡張部分（Apple独自拡張）、iPhone用MobileSafariでのCSS3独自拡張（iPhone独自拡張及び制限）が存在する

SafariのCSS拡張 　

  • Safari CSS ReferenceのSupport Levelで述べられている”Apple extension”がそれに当たる。

-webkit-animation-* 　

-webkit-appearance 　

  • Safari（Cocoa）独特なルック&フィールの部品を作成可能。※取り消し線は未対応。
    • checkbox
    • radio
    • push-button
    • square-button
    • button
    • button-bevel
    • listbox
    • listitem
    • menulist
    • menulist-button
    • menulist-text
    • menulist-textfield
    • slider-horizontal
    • slider-vertical
    • sliderthumb-horizontal
    • sliderthumb-vertical
    • searchfield
    • searchfield-decoration
    • searchfield-results-decoration
    • searchfield-results-button
    • searchfield-cancel-button
    • textfield
    • textarea
    • caret
    • scrollbarbutton
    • scrollbartrack
    • scrollbargripper
    • searchfield

-webkit-appearance: appearance

-webkit-background-* 　

  • webkit-background-clip
  • webkit-background-origin
  • webkit-background-size
  • border・背景を参照のこと

-webkit-border-* 　

  • webkit-border-image
  • webkit-border-radius
  • webkit-border-horizontal-spacing
  • webkit-border-vertical-spacing
  • border・背景を参照のこと

-webkit-box-shadow 　

-webkit-box-sizing 　

-webkit-line-break 　

-webkit-margin-* 　

  • テーブルセルの上マージンの相殺方法の定義

    -webkit-margin-bottom-collapse: mode
    -webkit-margin-collapse: mode

    collapse:
discard:
separate:

-webkit-nbsp-mode 　

-webkit-padding-start 　

  • 開始パディングの幅を指定

-webkit-rtl-ordering 　

  • 左から右と右から左の方向が混在しているテキストのデフォルトの処理を決める。

    -webkit-rtl-ordering: ordering

    logical:
visual:

-webkit-text-security 　

  • パスワード入力フィールドで使用する代替図形の指定 
    circle:
disc:
none:
square:

-webkit-text-stroke-* 　

-webkit-text-fill-color 　

-webkit-transition-* 　

-webkit-transform 　

-webkit-user-drag 　

  • 自動のドラッグ動作を指定パラメータでオーバーライドする 
    auto:デフォルト動作
element:エレメント全体がドラッグされる
none:エレメントをドラッグできない

-webkit-user-modify 　

  • エレメントのコンテンツを編集できるかどうかの指定 
    read-only:
read-write:
read-write-plaintext-only:

-webkit-user-select 　

  • エレメントのコンテンツをユーザが選択できるかどうかの指定 
    auto:デフォルト動作
none:エレメントは選択できない
text:エレメント内のテキストのみ選択できる

Mulitple Background Images 　

Multi-column layout 　

  • マルチカラム表示の指定。width指定とcolumn指定がある。

    -webkit-column-width:
    -webkit-column-gap:
    -webkit-column-count:
    -webkit-column-gap:
    -webkit-column-rule:

    -webkit-column-count: 3;
-webkit-column-gap: 1em; 
-webkit-column-rule: 1px solid black;

overflow-x/overflow-y 　

  • ボックス範囲からはみ出した部分の制御指定。元々はIE独自実装したもの。

    overflow-x: visible

    auto:ブラウザ依存
hidden:非表示にする
overlay:iPhone非対応
scroll:スクロール
visible:無指定と同じではみ出す
-webkit-marquee:いわゆるマーキー動作（自動スクロール）

resize 　

  • textareaのリサイズ制御についての指定。

    resize: horizontal

    auto:自動判定
both:縦横共に可能
horizontal:水平のみ可能
none:リサイズ不可能
vertical:垂直のみ可能

Text-overflow 　

word-break 　

iPhone（MobileSafari）での独自拡張 　

  • iPhone（MobileSafari）では、上記に加えて何点か拡張（と一部サポート外）が存在する。
  • 制限事項についてはMobileSafariの制限を参照のこと

-webkit-tap-highlight-color 　

  • タップ時のハイライトカラー指定を行います。iPhoneではhoverが使えないため、リンクタップ時の受け付けアクションをユーザーに知らせるために使用します。

    -webkit-tap-highlight-color: color

    <a href = "whatever0.html">default highlight color</a><br><br>
<a href = "whatever0.html" style = "-webkit-tap-highlight-color:rgba(200,0,0,0.4);">custom highlight color</a>

-webkit-text-size-adjust 　

  • Safariは、テキストの文字サイズを自動的に調整してくれます。しかし、勝手に調整されると文字が読みづらくなる場合があります。ローテイトが発生した際などにサイズ変更を無効化したい場合に「-webkit-text-size-adjust:none;」を指定するといいでしょう。

    -webkit-text-size-adjust: percentage

    auto, none

    -webkit-text-size-adjust:200%



スポンサード　リンク