SlideShare a Scribd company logo
1 of 94
Download to read offline
CSS.2012
  ~Latest & Coming CSS Features~
Slides @ CSS Nite in Osaka vol.31 on 2012/06/29
           by Tomoya ASAI (dynamis)

                                     Last Update: 2012/07/05
about:
about:dynamis

                   Mozilla Japan
               http://dynamis.jp

                @dynamitter
            facebook.com/     dynamis
               レッサーパンダが好き。

       mailto: Tomoya ASAI <dynamis@mozilla-japan.org>
about:slides

           下線なしリンクも使います
           コードは要点だけの簡略版
               特に注意が必要なとき以外は
               -moz- 以外の接頭辞など割愛


   画像からも時々
                         右下には補足や
   リンクしてます
                         一次情報源 URL

          mailto: Tomoya ASAI <dynamis@mozilla-japan.org>
Web Standards
Multi
           Media      Mouse,
  HTML5               Key ev.
  Forms
            W3C
                            Offline
HTML5     HTML5            Support
Parser

                         WAI-
  XHTML5                 ARIA
           Semantic
           Elements
Canvas
                                 Web
         WHATWG                 Messag-
                                  ing
           Multi                           Web
           Media      Mouse,              Sockets
  HTML5               Key ev.
  Forms
            W3C                           Server-
                            Offline
HTML5     HTML5            Support
                                          Sent ev.

Parser
                                               Web
                         WAI-
  XHTML5                                     Storage
                         ARIA
           Semantic
           Elements                   Web
                                     Workers
                          Micro-
            HTML          Data
Canvas
                                 Web
         WHATWG                 Messag-
                                  ing
           Multi                           Web
           Media      Mouse,              Sockets
  HTML5               Key ev.
  Forms
            W3C                           Server-
                            Offline
HTML5     HTML5            Support
                                          Sent ev.

Parser
                                               Web
                         WAI-
  XHTML5                                     Storage
                         ARIA
           Semantic
           Elements                   Web                         Media
                                     Workers           Layout    Queries
                          Micro-
            HTML          Data
                                                     Trans
                                                           CSS3~            Flex
                                                                            Box
                                                     form
                                                         Anim
                                                                  Regions
                                                         ation
Khronos              SMIL              Vibra-
                                                   tion
                 WebGL                   Geo-
                            SVG
         other                         location
                                                    Orien-
                                                    tation
                       Canvas
         WHATWG                    Web                        IETF
                                  Messag-
                                    ing                Web
            Multi                                                      SPDY
                                             Web      Sockets                    DNT
            Media       Mouse,              Sockets
  HTML5                 Key ev.                                 XHR2
                                                                          FileAPI   CSP
  Forms
                W3C                         Server-
                              Offline                                       ECMA
HTML5     HTML5              Support
                                            Sent ev.             ECMA
                                                                 Script
Parser
                                                                          Indexed
                                                    Web
                           WAI-                                             DB
  XHTML5                                          Storage
                           ARIA
            Semantic
            Elements                     Web                          Media
                                        Workers             Layout   Queries
                            Micro-
             HTML           Data
                                                 Trans
                                                                CSS3~            Flex
                                                                                 Box
          OGP                          XPath      form
                 RSS                                  Anim
                         Math                                          Regions
                                                      ation
                          ML                 WOFF
                                  DOM4
Khronos              SMIL              Vibra-                  MP3
  WebCL                                                        Webm             Opus
                                                   tion
                 WebGL                   Geo-
                            SVG
                                                                       H.264
         other                         location
                                                    Orien-
                                                                                         Web
                                                                                        Audio      Notifi-
                                                    tation                     Web
                       Canvas                                                                      cation
         WHATWG                    Web                        IETF             RTC
                                  Messag-
                                    ing                Web                                  TCP         Tel
            Multi                                                      SPDY
                                             Web      Sockets                    DNT       Socket
            Media       Mouse,              Sockets
  HTML5                 Key ev.                                 XHR2                                    Radio
                                                                          FileAPI    CSP
  Forms                                                                                         Net
                W3C                         Server-                                             Info
                              Offline                                        ECMA
HTML5     HTML5              Support
                                            Sent ev.             ECMA
                                                                 Script                 ECMA
                                                                                                       NFC

Parser                                                                                   6th
                                                                          Indexed
                                                    Web                                         Device
                           WAI-                                             DB
                                                  Storage                                       Storage
  XHTML5                   ARIA
            Semantic                                                                    Web
            Elements                     Web                                            SQL
                                                                      Media
                                                                                                       USB
                                        Workers             Layout   Queries
                                                                                            File
                            Micro-                                                          Sys
             HTML           Data
                                                 Trans
                                                                CSS3~            Flex                   Battery
                                                                                                        Status
                                                                                 Box
          OGP                          XPath      form                                      Proxi-
                                                      Anim                                  mity
Schema           RSS     Math                                          Regions
  .org                                                ation
                          ML                 WOFF
            RDF                   DOM4
Khronos              SMIL              Vibra-                  MP3
  WebCL                                                        Webm             Opus
                                                   tion
                 WebGL                   Geo-
                            SVG
                                                                       H.264
         other                         location
                                                    Orien-
                                                                                         Web
                                                                                        Audio      Notifi-
                                                    tation                     Web
                       Canvas                                                                      cation
         WHATWG                    Web                        IETF             RTC
                                  Messag-
                                    ing                Web                                  TCP         Tel
            Multi                                                      SPDY
                                             Web      Sockets                    DNT       Socket
            Media       Mouse,              Sockets
  HTML5                 Key ev.                                 XHR2                                    Radio
                                                                          FileAPI    CSP
  Forms                                                                                         Net
                W3C                         Server-                                             Info
                              Offline                                        ECMA
HTML5     HTML5              Support
                                            Sent ev.             ECMA
                                                                 Script                 ECMA
                                                                                                       NFC

Parser                                                                                   6th
                                                                          Indexed
                                                    Web                                         Device
                           WAI-                                             DB
                                                  Storage                                       Storage
  XHTML5                   ARIA
            Semantic                                                                    Web
            Elements                     Web                                            SQL
                                                                      Media
                                                                                                       USB
                                        Workers             Layout   Queries
                                                                                            File
                            Micro-                                                          Sys
             HTML           Data
                                                 Trans
                                                                CSS3~            Flex                   Battery
                                                                                                        Status
                                                                                 Box
          OGP                          XPath      form                                      Proxi-
                                                      Anim                                  mity
Schema           RSS     Math                                          Regions
  .org                                                ation
                          ML                 WOFF
            RDF                   DOM4
今日はここの話です
                 Media
     Layout     Queries



    Trans
          CSS3~            Flex
                           Box
    form
        Anim
                 Regions
        ation
CSS.2012
マルチデバイス対応
      &
DTP レベルのデザイン
Responsive
Media Queries

           デバイスに応じたスタイル
             画面サイズ、解像度、縦横...




         https://developer.mozilla.org/en/CSS/Media_queries
画面サイズ別 CSS を書く
<style>
/*	 @media	 規則で画面サイズ別ルールを記述	 */
@media	 only	 screen	 and	 (min-width:	 481px)	 {
	 	 #header	 {	 backgournd:	 url(head.png);	 	 /*	 大きい画像	 */	 }
}
@media	 only	 screen	 and	 (max-width:	 480px)	 {
	 	 #header	 {	 backgournd:	 url(head-small.png);	 /*	 小さい画像	 
*/	 }
}
</style>
<!--	 外部ファイルで分けるときは	 media	 属性	 -->
<link	 rel="stylesheet"	 type="text/css"	 href="pc.css"
	 	 	 	 	 	 media="only	 screen	 and	 (min-width:481px)">
<link	 rel="stylesheet"	 type="text/css"	 href="mobile.css"
	 	 	 	 	 	 media="only	 screen	 and	 (max-width:480px)">


                cm など物理サイズは iPhone などで正しくないので注意
Responsive Web Design

             ピクセル単位で調整しない
               Web はピクセル指向ではない
             画面サイズに応じて適切に




     http://www.alistapart.com/articles/responsive-web-design/
http://www.alistapart.com/articles/responsive-web-design/
背景画像も
                                     左右切り取り




横幅に応じて
サイズを変更
  http://www.alistapart.com/articles/responsive-web-design/
http://colly.com/
link_to_the_document
横幅に応じて
要素数を増減




         http://colly.com/
   link_to_the_document
<meta> viewport

              拡大率制御には viewport
                ユーザのズーム禁止も可能
              表示領域の CSS ピクセル幅
                iPhone はデフォルト 980px
                Firefox for Mobile は 800px




     https://developer.mozilla.org/en/Mobile/Viewport_meta_tag
viewport を指定する
<!--	 デバイスの画面幅で等倍表示	 -->
<meta	 name="viewport"
	 	 	 	 	 	 content="device-width,	 initial-scale=1.0">

<!--	 幅	 500px	 の領域に描いて等倍表示	 -->
<meta	 name="viewport"
	 	 	 	 	 	 content="width=500,	 initial-scale=1.0"/>

<!--	 デバイスの画面幅で等倍固定表示	 -->
<meta	 name="viewport"
	 	 	 	 	 	 content="width=device-width,	 user-scalable=no">



             https://developer.mozilla.org/en/Mobile/Viewport_meta_tag
Retina?
高解像度ディスプレイ対応

    見なかったことに!(・・).
     それが一番楽ですよね。




             link_to_the_document
高解像度ディスプレイ対応

    高解像度版だけを使う
     ファイルサイズが…
    解像度別の画像を用意
     手間が掛かります…
    CSS, SVG, WebFont に
     可能ならこれがベスト?


                  link_to_the_document
解像度別の画像を用意

    Device Pixel Rate
     CSS または JS で条件分岐
    srcset 属性
    image-set() 関数
     Gecko で対応するか未定
    サーバサイドで自動変換
Device Pixel Rate

                          CSS の論理ピクセルと端末
                          画面のピクセル比
                            iPhone 4 以降の高解像度端末
                            では 1:1.5 や 1:2 の端末が多い
                          高解像度画像や SVG などを
                          使わないとぼやけてしまう


https://developer.mozilla.org/en/CSS/Media_queries/#-moz-device-pixel-ratio
Device Pixel Rate
header	 {	 /*	 通常サイズの画像	 */
	 	 background:	 url(head.png);
}
/*	 "only"	 で媒体型のみ対応する古いブラウザ除外	 */
/*	 min/max	 と	 -moz-/-webkit-	 の順に注意	 */
@media
only	 screen	 and	 (min--moz-device-pixel-ratio:	 1.5),
only	 screen	 and	 (-webkit-min-device-pixel-ratio:	 1.5),
only	 screen	 and	 (min-device-pixel-ratio:	 1.5)	 {
	 	 header	 {	 /*	 2倍解像度画像	 */
	 	 	 	 background:	 url(head-2x.png);
	 	 }
}


               注: 古い WebKit は使わない画像も両方 DL するバグあり
JS では matchMedia()
var	 q	 =	 "(min--moz-device-pixel-ratio:	 1.5),
	 	 	 	 	 	 	 	 	 (-webkit-min-device-pixel-ratio:	 1.5),
	 	 	 	 	 	 	 	 	 (min-device-pixel-ratio:	 1.5)";
if (window.matchMedia(q).matches) {
	 	 //	 高解像度時の処理  
} else {  
	 	 //	 低解像度時の処理
}  




             https://developer.mozilla.org/ja/DOM/window.matchMedia
srcset 属性
<!--	 高解像度ディスプレイには別画像を使う	 -->
<img	 src="fire.png"	 srcset="fire-2x.png	 1.5x">

<!--	 更に細かく画像を分けるのも比較的容易	 -->
<img	 src="fox.png"
	 	 srcset="fox-1.5x.png	 1.5x,	 fox-2x.png	 2x">
CSS, SVG, WebFonts に

         グラデーション、影付き、
         角丸などは CSS で実現
          ボタン程度は CSS で十分
         SVG 画像に置き換える
         WebFonts を使う
         ... などサイズ非依存に
Text
Web Fonts

            ダウンロードフォント
            IE9 なども WOFF サポート
            iPhone は WOFF 未サポート
            WOFF: Web用圧縮フォント
            フォントサービスも充実
            やっと時代が変わりましたね…



            https://developer.mozilla.org/ja/CSS/@font-face
Web Fonts の使い方
@font-face	 {	 	 /*	 IE8	 以前用	 EOT	 フォント設定	 (最初に)	 */
	 	 font-family:	 Sawarabi;
	 	 src:	 url(Sawarabi.eot)	 /*	 IE8	 以前	 format()	 非対応	 */;
}
@font-face	 {	 	 /*	 WOFF	 非対応ブラウザ向けフォント設定	 */
	 	 font-family:	 Sawarabi;
	 	 src:	 url(Sawarabi.otf)	 format("opentype");
}
@font-face	 {	 	 /*	 WOFF	 対応ブラウザには	 WOFF	 を	 */
	 	 font-family:	 Sawarabi;
	 	 src:	 url(Sawarabi.woff)	 format("woff");
}
body	 {	 font-family:	 Sawarabi,	 sans-serif;	 }


          http://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/
Web Fonts の使い方
@font-face	 {
	 	 font-family:	 'Lisa';
	 	 src:	 url('Lisa.eot');
	 	 src:	 url('Lisa.eot?#iefix')	 /*	 IEバグ対応Hack	 */
	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 format('embedded-opentype'),
	 	 	 	 	 	 	 url('Lisa.woff')	 format('woff'),
	 	 	 	 	 	 	 url('Lisa.ttf')	 	 format('truetype'),
	 	 	 	 	 	 	 url('Lisa.svg')	 	 format('svg');
}
body	 {
	 	 font-family:	 Lisa,	 sans-serif;
}



      http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax
WOFF フォントに変換

     WOFF コンバータ
      Windows, Mac アプリ
     @font-face kit generator
      Web サービス (サイズ制限あり)




                   http://musashi.or.tv/woffconv.htm
      http://www.fontsquirrel.com/fontface/generator
サブセットフォントを作る

    必要文字だけで軽量化
    サブセットフォントメーカー
     Windows, Mac アプリ
    @font-face kit generator
     Expert モードの Subsetting で
     Custom Subsetting を指定する

             http://musashi.or.tv/subsetfontmk.htm
     http://www.fontsquirrel.com/fontface/generator
デコもじ

       日本初の WebFont サービス
       http://decomoji.jp/
        字游工房のフォントもある!
       JavaScript 埋め込み型
        個人 ¥315/月∼
        法人 ¥1575/月∼


                             http://decomoji.jp/
webfonts.fonts.com

          多言語 WebFont サービス
          http://webfonts.fonts.com/
           10,000 以上のフォント
           日本語フォントも 100 以上
          JavaScript 埋め込み型
           25,000 view/30days まで無料


                       http://webfonts.fonts.com/
Google Web Font API

         フォントは約 500 種類
          開始当初は 18 しかなかった
         日本語フォントなし
          メニューなど限られた用途で
         サブセットも指定可能
          ファイルサイズを最小限に


             https://developers.google.com/webfonts/
Web Font API の使い方
<html>
<head>
	 	 <link	 rel="stylesheet"	 type="text/css"
	 	 	 href="http://fonts.googleapis.com/css?
family=Tangerine">
	 	 <style>
	 	 	 	 body	 {	 font-family:	 'Tangerine',	 serif;	 }
	 	 </style>
</head>
<body>
	 	 <h1>Firefox	 Developer	 Conference	 2011	 in	 Osaka!</h1>
</body>
</html>


   http://code.google.com/intl/ja/apis/webfonts/docs/getting_started.html
ファイルサイズを小さく
サブセットフォントをカテゴリーで指定
 http://fonts.googleapis.com/css?
 family=Philosopher&
 subset=latin

使用する文字列を指定して最小限のフォントを取得
 http://fonts.googleapis.com/css?
 family=Inconsolata&
 text=Hello




  http://code.google.com/intl/ja/apis/webfonts/docs/getting_started.html
http://webfont.fontplus.jp/
Font+

        日本語フォント 500 以上!
        フォントワークス、モリサワ、
        イワタ、モトヤ ...
        サブセットの事前 DL 可能
        あるいは JS 埋め込み
        ¥1050/月∼



                   http://webfont.fontplus.jp/
Font Control Features

               CSS3 font-variant
               フォントの詳細機能を制御
                 分数、桁          え、合字、旧字体...
               仕様執筆者自身が実装




     詳細: http://people.mozilla.org/~jdaggett/webfontsfuture.pdf
http://hacks.mozilla.org/2009/10/font-control-for-designers/
http://hacks.mozilla.org/2009/10/font-control-for-designers/
text-decoration

           破線や波線などにも対応
              もはや Keynote より高機能…


           text-decoration 設定すると
           -moz-text-decoration-* は
           リセットされるので注意


         https://developer.mozilla.org/en/CSS/text-decoration
text-decoration
/*	 複数同時指定も可能	 */
.bothline	 {
	 	 text-decoration:	 underline	 overline;
}
/*	 Firefox	 は	 wavy	 などにも対応	 */
.wavyredline	 {	 
	 	 	 	 text-decoration-line:	 underline;
	 	 	 	 text-decoration-style:	 wavy;
	 	 	 	 text-decoration-color:	 red;
}



                https://developer.mozilla.org/en/CSS/text-decoration
hyphen

          英単語の音節で折り返し
          折り返し位置の明示指定
            U+2010 (HYPHEN) - ハード
            U+00AD (SHY, &shy;) - ソフト
         p.auto	 {
         	 	 -moz-hyphens:	 auto;
         }


             https://developer.mozilla.org/en/CSS/hyphens
text-overflow

         Fx7 で ellipsis (...) に対応



         Fx9 でサポートを強化
           左右両端指定の 2 値構文
           省略時の末端文字を指定


         https://developer.mozilla.org/en/CSS/text-overflow
https://developer.mozilla.org/en/CSS/text-overflow
font-stretch

             字間のつまり具合を調整
               normal, condensed, expanded,
               semi-condensed, semi-expanded ...
    h1	 {	 font-stretch:	 extra-expanded	 }
    p	 	 {	 font-stretch:	 condensed	 }




              https://developer.mozilla.org/en/CSS/font-stretch
c.f. PDF.js

              プラグインフリー PDF
              Web 技術の結晶状態
              DTP 品質の描画を...
              font-stretch も PDF で必要な機
              能だったから実装された




                      https://github.com/mozilla/pdf.js
http://firefoxhacks.org/sample.html
text-align-last

           最終行だけ行                     え変更
              Fx12 からサポート
              justify だと最後の行がスカスカ
              になるケースなどに便利




           https://developer.mozilla.org/en/CSS/text-align-last
text-size-adjust

           スマートフォン向けの文字
           サイズ変更を許可・不許可
              Fx11 からサポート
              意図せず拡大されてしまっている
              場合などに none 指定すると良い




         https://developer.mozilla.org/en/CSS/text-size-adjust
Box
border-image 仕様更新

       border-image = shorthand
        *-source, *-slice, *-repeat に加え
        *-width, *-image-outset にも対応
       デフォルトで中央省略に
        中央にも画像がいるなら fill
       border width 上書き不能に
        / 使ってたスタイルは無効に

         http://dbaron.org/log/20120612-border-image
border-image 仕様更新
//	 ボーダー画像の中央部分も使用する場合
-moz-border-image:	 url(my-border.png)	 
	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 30	 30	 30	 30	 stretch	 stretch;
-webkit-border-image:	 url(my-border.png)
	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 30	 30	 30	 30	 stretch	 stretch;
-o-border-image:	 url(my-border.png)
	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 30	 30	 30	 30	 stretch	 stretch;
//	 最新仕様では	 fill	 指定しないと中央不使用
border-image:	 url(my-border.png)
	 	 	 	 	 	 	 	 	 	 	 	 	 	 30	 30	 30	 30	 fill	 stretch	 stretch;



                            http://dbaron.org/log/20120612-border-image
border-image 仕様更新
//	 これまでの記述
-moz-border-image:	 	 	 	 url(my-border.png)	 30	 30	 30	 30	 /	 2em	 
	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 stretch	 stretch;
-webkit-border-image:	 url(my-border.png)	 30	 30	 30	 30	 /	 2em
	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 stretch	 stretch;
border-image:	 	 	 	 	 	 	 	 	 url(my-border.png)	 30	 30	 30	 30	 /	 2em
	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 stretch	 stretch;
//	 仕様変更に合わせた記述
border:	 2em	 solid	 transparent;	 //	 Fallback	 は別途書くように
-moz-border-image:	 	 	 	 url(my-border.png)	 30	 30	 30	 30
	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 stretch	 stretch;
-webkit-border-image:	 url(my-border.png)	 30	 30	 30	 30
	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 stretch	 stretch;
border-image:	 	 	 	 	 	 	 	 	 url(my-border.png)	 30	 30	 30	 30
	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 stretch	 stretch;


                              http://dbaron.org/log/20120612-border-image
background-repeat - 2値構文

            X, Y 方向別に設定可能に
              Fx13 からサポート
              repeat = repeat repeat
              repeat-x = repeat no-repeat
              repeat-y = no-repeat repeat
              1値構文で定義されていない組み
              合わせ repeat round なども可能



      https://developer.mozilla.org/en/CSS/background-repeat
background-position - 4値構文

            左上以外の角から位置指定




     https://developer.mozilla.org/en/CSS/background-position
Transform
CSS Transform

           任意の要素を変形させる
             拡大縮小、回転、移動、歪み
             IE8 は Matrix Transform
           skew は Fx14 で廃止
             skewX と skewY を使うこと




        https://developer.mozilla.org/en/CSS/-moz-transform
CSS Transform 使用例
<iframe	 id="skewframe"	 width="800"	 height="600"
	 	 	 	 	 	 	 src="http://mozilla.jp/"></iframe>
<style>
#skewframe	 {
	 	 /*	 右に	 150px	 移動、左下原点で	 10°歪める*/
	 	 -moz-transform:	 skewx(10deg)
	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 	 translatex(150px);
	 	 -moz-transform-origin:	 bottom	 left;
}
</style>



           https://developer.mozilla.org/En/CSS/Using_CSS_transforms
turn (角度の単位)

       Transform などの値で使用
       当面は deg とかが無難
        turn は Fx13 からサポート




          https://developer.mozilla.org/en/CSS/angle
3D Transform

              3次元版
                Fx10 からサポート
                rotateZ や translateZ を使う
                視点は perspective などで指定




     https://developer.mozilla.org/en/CSS/Using_CSS_transforms
3D Transform の注意

        Firefox は最新仕様に厳格
         perspective など単位が必須
         iphone 3.0 は逆に単位なし
         WebKit だけ…って時は単位確認




        https://developer.mozilla.org/en/CSS/perspective
今回に合わせて Firefox にも対応! http://pr.fontplus.jp/sample/02/
Animation
CSS Transitions

            スタイル遷移をなめらかに
            簡単にアニメーション
            GPU を用いた高速処理

               今日は詳細割愛します



        http://24ways.org/2009/going-nuts-with-css-transitions
CSS Transitions 使用例
#somebox {
  color: black; background-color: yellow;
  /* すべてのスタイルを2秒かけて変化、開始はなめらかに */
  -moz-transition: all 2s ease-in;
  transition: all 2s ease-in;
}
#somebox:hover {
  /* マウスオーバーで配色、サイズ、角度を変化 */
  color: white; background-color: red;
  -moz-transform: rotate(-60deg) scale(1.5);
  transform: rotate(-60deg) scale(1.5);
}


                   http://hacks.mozilla.org/2010/07/firefox4-beta2/
CSS Transitions 発動条件

        「スタイル変更」時に発動
         変更前の状態が一度描画されて
         いる必要がある
         ページロード時に遷移するなら
         onload 後にスタイル指定が必要
         left など一部スタイルは変化前に
         も left: 0px; などの指定が必要
CSS Animations

           Transitions を連続する機能
             キーフレーム毎のスタイルを指定
           CSS だけでアニメーション
           GPU を用いた高速処理




        https://developer.mozilla.org/en/CSS/CSS_animations
CSS Animations 使用例
<div	 id="target"></div>
<style>
@-moz-keyframes	 changecolor	 {	 /*	 アニメーション定義	 */
	 	 from	 {	 	 }	 /*	 開始する瞬間は既存スタイルのまま	 */
	 	 50%	 	 {	 background:	 purple;	 }	 /*	 半分の時間で紫に	 */
	 	 to	 	 	 {	 background:	 orange;	 }	 /*	 最終的にオレンジに	 */
}
#target	 {
	 	 background:	 blue;	 width:	 100px;	 height:	 100px;
}
#target:hover	 {
	 	 -moz-animation:	 changecolor	 4s;	 /*	 アニメーション適用	 */
}
</style>


                 https://developer.mozilla.org/en/CSS/CSS_animations
CSS Animations の注意

        完了後は元のスタイルに戻る
         to スタイルは維持されない
        開始前と from, to と完了後の
        スタイルは一瞬で切り替わる
        滑らかに変化して維持:
         from は既存スタイルと同じに
         to は完了後スタイルと同じに
滑らかに変化して維持する
<div	 id="target"></div>
<style>
@-moz-keyframes	 changecolor	 {
	 	 from	 {	 background:	 blue;	 }	 	 	 /*	 既存スタイルと同じ	 */
	 	 50%	 	 {	 background:	 purple;	 }
	 	 to	 	 	 {	 background:	 orange;	 }	 /*	 完了後と同じ	 */
}
#target	 {
	 	 background:	 blue;	 width:	 100px;	 height:	 100px;
}
#target:hover	 {
	 	 -moz-animation:	 changecolor	 4s;
	 	 background:	 orange;	 /*	 to	 {}	 と同じ	 */
}
</style>
CSS Animations 発動条件

        -moz-animation を設定
         onload 前でも問題なし
        一定時間後に発動したい場
        合は animation-delay を使っ
        て遅延時間を指定する
Layout
多段レイアウト(column-fill)

       雑誌や新聞などの多段組
        column-fill: auto ¦ balance




        https://developer.mozilla.org/en/CSS/column-fill
https://bug695222.bugzilla.mozilla.org/attachment.cgi?id=578376
Flexbox Layout 仕様変更

        残りを X:Y で分割など
         XUL 由来のレイアウト機能
         古い仕様は Fx2 からサポート
         複数回仕様変更されててカオス


        互換対応複雑になるので
        今回割愛...
-vendor-prefix
ベンダー接頭辞サポート終了

      接頭辞なしを使いましょう:
        border-radius* @Fx13
        box-shadow @Fx13
      その他も今後のため接頭辞
      なしを併記する習慣を



    https://bugzilla.mozilla.org/show_bug.cgi?id=693510
other...
CSS3 calc()

          サイズを計算式で指定可能
              width: -moz-calc(20% + 1rem)
          -moz- prefix に注意
              IE9 はいきなり no prefix 実装




              https://developer.mozilla.org/en/CSS/-moz-calc
CSS3 calc()

/*	 margin	 分を考慮した左右の分割を行う例	 */
#main	 {
	 	 	 	 width:	 75%;
	 	 	 	 margin-right:	 1rem;
}
#side	 {
	 	 	 	 width:	 -moz-calc(25%	 -	 1rem);
	 	 	 	 width:	 calc(25%	 -	 1rem);	 /*	 prefix	 なし忘れずに	 */
}
/*	 rem	 はルート要素に対する	 font-size	 (Fx3.6~)	 */




                          http://hacks.mozilla.org/2010/06/css3-calc/
@document regexp()

                     CSS3 Conditional Rules の
                     @document 規則の対応強化
@-moz-document url(http://dynamis.jp/),
	 	 	 	 	 	 	 	 	 	 	     url-prefix(http://dynamis.jp/foo/),
    	 	 	 	 	 	 	 	 	 	 	 domain(dynamis.jp),
    	 	 	 	 	 	 	 	 	 	 	 regexp("^https:.*")
{
	 	 /*	 指定	 URL	 にマッチしたページ用のルール	 */
	 	 /*	 regexp()	 は	 Fx6~	 他は	 Fx1.5	 からサポート	 */
}

                https://developer.mozilla.org/en/CSS/@-moz-document
@規則の入れ子利用

      @media や @document 内で
      も @規則が利用可能に
        Fx11 から入れ子サポート




    https://bugzilla.mozilla.org/show_bug.cgi?id=511909
新機能や互換性情報は
Mozilla Developer Street:
      dev.mozilla.jp

More Related Content

Viewers also liked

E libros
E librosE libros
E librosSujay
 
Tarea sistemas
Tarea sistemasTarea sistemas
Tarea sistemasUVM
 
US Landmarks Webquest
US Landmarks WebquestUS Landmarks Webquest
US Landmarks Webquestmjlloyd
 
ျမတ္ဗုဒၶ ေဒသနာ (ေဒါက္တာ၀ါလ္ပိုလာ)
ျမတ္ဗုဒၶ ေဒသနာ (ေဒါက္တာ၀ါလ္ပိုလာ)ျမတ္ဗုဒၶ ေဒသနာ (ေဒါက္တာ၀ါလ္ပိုလာ)
ျမတ္ဗုဒၶ ေဒသနာ (ေဒါက္တာ၀ါလ္ပိုလာ)san aye
 
Australian expos directory 2012 (by sector)
Australian expos directory 2012 (by sector)Australian expos directory 2012 (by sector)
Australian expos directory 2012 (by sector)exagoges
 
Sistemas portables
Sistemas portablesSistemas portables
Sistemas portablesJoel Armado
 
Webquest carol
Webquest carolWebquest carol
Webquest carolCalonso011
 
Golars networks ccie security ppt
Golars networks ccie security pptGolars networks ccie security ppt
Golars networks ccie security pptgolarsnetworks007
 
TMX Equicom Corporate Presentation
TMX Equicom Corporate PresentationTMX Equicom Corporate Presentation
TMX Equicom Corporate PresentationTMX Equicom
 
Milennial Whitepaper 7.22
Milennial Whitepaper 7.22Milennial Whitepaper 7.22
Milennial Whitepaper 7.22Heather Engel
 
Open layers pt_br
Open layers pt_brOpen layers pt_br
Open layers pt_brMarcos Rosa
 
ENBE FINAL PROJECT REPORT
ENBE FINAL PROJECT REPORTENBE FINAL PROJECT REPORT
ENBE FINAL PROJECT REPORTForestedTiger
 
Cardno WRG - Global Services
Cardno WRG - Global ServicesCardno WRG - Global Services
Cardno WRG - Global ServicesTim Daugherty
 
Web accessibility: An overview
Web accessibility: An overviewWeb accessibility: An overview
Web accessibility: An overviewWebcredible
 
Tetratech sewer system report
Tetratech sewer system reportTetratech sewer system report
Tetratech sewer system reportJGNelson
 

Viewers also liked (20)

E libros
E librosE libros
E libros
 
OED Forecast
OED ForecastOED Forecast
OED Forecast
 
Tarea sistemas
Tarea sistemasTarea sistemas
Tarea sistemas
 
US Landmarks Webquest
US Landmarks WebquestUS Landmarks Webquest
US Landmarks Webquest
 
Perform 3
Perform 3Perform 3
Perform 3
 
ျမတ္ဗုဒၶ ေဒသနာ (ေဒါက္တာ၀ါလ္ပိုလာ)
ျမတ္ဗုဒၶ ေဒသနာ (ေဒါက္တာ၀ါလ္ပိုလာ)ျမတ္ဗုဒၶ ေဒသနာ (ေဒါက္တာ၀ါလ္ပိုလာ)
ျမတ္ဗုဒၶ ေဒသနာ (ေဒါက္တာ၀ါလ္ပိုလာ)
 
Australian expos directory 2012 (by sector)
Australian expos directory 2012 (by sector)Australian expos directory 2012 (by sector)
Australian expos directory 2012 (by sector)
 
Aranadano en eeuu
Aranadano en eeuuAranadano en eeuu
Aranadano en eeuu
 
Sistemas portables
Sistemas portablesSistemas portables
Sistemas portables
 
Webquest carol
Webquest carolWebquest carol
Webquest carol
 
Golars networks ccie security ppt
Golars networks ccie security pptGolars networks ccie security ppt
Golars networks ccie security ppt
 
TMX Equicom Corporate Presentation
TMX Equicom Corporate PresentationTMX Equicom Corporate Presentation
TMX Equicom Corporate Presentation
 
Milennial Whitepaper 7.22
Milennial Whitepaper 7.22Milennial Whitepaper 7.22
Milennial Whitepaper 7.22
 
Open layers pt_br
Open layers pt_brOpen layers pt_br
Open layers pt_br
 
ENBE FINAL PROJECT REPORT
ENBE FINAL PROJECT REPORTENBE FINAL PROJECT REPORT
ENBE FINAL PROJECT REPORT
 
Cardno WRG - Global Services
Cardno WRG - Global ServicesCardno WRG - Global Services
Cardno WRG - Global Services
 
2016 02 Power Engineering
2016 02 Power Engineering2016 02 Power Engineering
2016 02 Power Engineering
 
Web accessibility: An overview
Web accessibility: An overviewWeb accessibility: An overview
Web accessibility: An overview
 
Gerta
GertaGerta
Gerta
 
Tetratech sewer system report
Tetratech sewer system reportTetratech sewer system report
Tetratech sewer system report
 

Similar to CSS.2012

Firefox and Firebug with Foxkeh
Firefox and Firebug with FoxkehFirefox and Firebug with Foxkeh
Firefox and Firebug with Foxkehdynamis
 
HTML Web Platform
HTML Web PlatformHTML Web Platform
HTML Web Platformdynamis
 
Web is the Platform
Web is the PlatformWeb is the Platform
Web is the Platformdynamis
 
Toward Firefox OS
Toward Firefox OSToward Firefox OS
Toward Firefox OSdynamis
 
Firefox OS
Firefox OSFirefox OS
Firefox OSdynamis
 
Mvc conf session_3_takehara
Mvc conf session_3_takeharaMvc conf session_3_takehara
Mvc conf session_3_takeharaHiroshi Okunushi
 
Concentrated HTML5 & Attractive HTML5
Concentrated HTML5 & Attractive HTML5Concentrated HTML5 & Attractive HTML5
Concentrated HTML5 & Attractive HTML5Sho Ito
 
Gamefest Japan 2010
Gamefest Japan 2010Gamefest Japan 2010
Gamefest Japan 2010Microsoft
 
Adobe Creative SuiteではじまるHTML5の民主化
Adobe Creative SuiteではじまるHTML5の民主化Adobe Creative SuiteではじまるHTML5の民主化
Adobe Creative SuiteではじまるHTML5の民主化Teiichi Ota
 
Attractive HTML5
Attractive HTML5Attractive HTML5
Attractive HTML5Sho Ito
 
できる!グローバル×スケーラブル×マルチデバイス対応のソーシャルアプリ開発入門
できる!グローバル×スケーラブル×マルチデバイス対応のソーシャルアプリ開発入門できる!グローバル×スケーラブル×マルチデバイス対応のソーシャルアプリ開発入門
できる!グローバル×スケーラブル×マルチデバイス対応のソーシャルアプリ開発入門gipwest
 
Kilimanjaro Event
Kilimanjaro EventKilimanjaro Event
Kilimanjaro Eventdynamis
 
patterns & practices "Project Silk" に見る HTML5 とモダンブラウザのための Web 開発の今後
patterns & practices "Project Silk" に見る HTML5 とモダンブラウザのための Web 開発の今後patterns & practices "Project Silk" に見る HTML5 とモダンブラウザのための Web 開発の今後
patterns & practices "Project Silk" に見る HTML5 とモダンブラウザのための Web 開発の今後Akira Inoue
 
Browser and Mozilla
Browser and MozillaBrowser and Mozilla
Browser and Mozilladynamis
 
SilverlightとSharePoint2010の紹介
SilverlightとSharePoint2010の紹介SilverlightとSharePoint2010の紹介
SilverlightとSharePoint2010の紹介Tadahiro Higuchi
 
F-site発表資料「Flashユーザーが今覚えておきたいHTML5」
F-site発表資料「Flashユーザーが今覚えておきたいHTML5」F-site発表資料「Flashユーザーが今覚えておきたいHTML5」
F-site発表資料「Flashユーザーが今覚えておきたいHTML5」Yasunobu Ikeda
 
Google Compute EngineとPipe API
Google Compute EngineとPipe APIGoogle Compute EngineとPipe API
Google Compute EngineとPipe APImaruyama097
 
Google Compute EngineとGAE Pipeline API
Google Compute EngineとGAE Pipeline APIGoogle Compute EngineとGAE Pipeline API
Google Compute EngineとGAE Pipeline APImaruyama097
 
マイクロソフトにとってのWebって?
マイクロソフトにとってのWebって?マイクロソフトにとってのWebって?
マイクロソフトにとってのWebって?Microsoft
 

Similar to CSS.2012 (20)

Firefox and Firebug with Foxkeh
Firefox and Firebug with FoxkehFirefox and Firebug with Foxkeh
Firefox and Firebug with Foxkeh
 
HTML Web Platform
HTML Web PlatformHTML Web Platform
HTML Web Platform
 
Web is the Platform
Web is the PlatformWeb is the Platform
Web is the Platform
 
Toward Firefox OS
Toward Firefox OSToward Firefox OS
Toward Firefox OS
 
Firefox OS
Firefox OSFirefox OS
Firefox OS
 
Mvc conf session_3_takehara
Mvc conf session_3_takeharaMvc conf session_3_takehara
Mvc conf session_3_takehara
 
Concentrated HTML5 & Attractive HTML5
Concentrated HTML5 & Attractive HTML5Concentrated HTML5 & Attractive HTML5
Concentrated HTML5 & Attractive HTML5
 
Gamefest Japan 2010
Gamefest Japan 2010Gamefest Japan 2010
Gamefest Japan 2010
 
Adobe Creative SuiteではじまるHTML5の民主化
Adobe Creative SuiteではじまるHTML5の民主化Adobe Creative SuiteではじまるHTML5の民主化
Adobe Creative SuiteではじまるHTML5の民主化
 
Attractive HTML5
Attractive HTML5Attractive HTML5
Attractive HTML5
 
HTML5最前線
HTML5最前線HTML5最前線
HTML5最前線
 
できる!グローバル×スケーラブル×マルチデバイス対応のソーシャルアプリ開発入門
できる!グローバル×スケーラブル×マルチデバイス対応のソーシャルアプリ開発入門できる!グローバル×スケーラブル×マルチデバイス対応のソーシャルアプリ開発入門
できる!グローバル×スケーラブル×マルチデバイス対応のソーシャルアプリ開発入門
 
Kilimanjaro Event
Kilimanjaro EventKilimanjaro Event
Kilimanjaro Event
 
patterns & practices "Project Silk" に見る HTML5 とモダンブラウザのための Web 開発の今後
patterns & practices "Project Silk" に見る HTML5 とモダンブラウザのための Web 開発の今後patterns & practices "Project Silk" に見る HTML5 とモダンブラウザのための Web 開発の今後
patterns & practices "Project Silk" に見る HTML5 とモダンブラウザのための Web 開発の今後
 
Browser and Mozilla
Browser and MozillaBrowser and Mozilla
Browser and Mozilla
 
SilverlightとSharePoint2010の紹介
SilverlightとSharePoint2010の紹介SilverlightとSharePoint2010の紹介
SilverlightとSharePoint2010の紹介
 
F-site発表資料「Flashユーザーが今覚えておきたいHTML5」
F-site発表資料「Flashユーザーが今覚えておきたいHTML5」F-site発表資料「Flashユーザーが今覚えておきたいHTML5」
F-site発表資料「Flashユーザーが今覚えておきたいHTML5」
 
Google Compute EngineとPipe API
Google Compute EngineとPipe APIGoogle Compute EngineとPipe API
Google Compute EngineとPipe API
 
Google Compute EngineとGAE Pipeline API
Google Compute EngineとGAE Pipeline APIGoogle Compute EngineとGAE Pipeline API
Google Compute EngineとGAE Pipeline API
 
マイクロソフトにとってのWebって?
マイクロソフトにとってのWebって?マイクロソフトにとってのWebって?
マイクロソフトにとってのWebって?
 

More from dynamis

HTTP and 5G (fixed1)
HTTP and 5G (fixed1)HTTP and 5G (fixed1)
HTTP and 5G (fixed1)dynamis
 
HTTP and 5G
HTTP and 5GHTTP and 5G
HTTP and 5Gdynamis
 
HTTP and 5G partial draft
HTTP and 5G partial draftHTTP and 5G partial draft
HTTP and 5G partial draftdynamis
 
Web App Platform Strategy
Web App Platform StrategyWeb App Platform Strategy
Web App Platform Strategydynamis
 
HTML5 & Renesas RZ/G
HTML5 & Renesas RZ/GHTML5 & Renesas RZ/G
HTML5 & Renesas RZ/Gdynamis
 
Life of html5 (osaka)
Life of html5 (osaka)Life of html5 (osaka)
Life of html5 (osaka)dynamis
 
Web updates 2017
Web updates 2017Web updates 2017
Web updates 2017dynamis
 
Life of HTML5
Life of HTML5Life of HTML5
Life of HTML5dynamis
 
Browsers in IoT Era
Browsers in IoT EraBrowsers in IoT Era
Browsers in IoT Eradynamis
 
New Norm of HTML5
New Norm of HTML5New Norm of HTML5
New Norm of HTML5dynamis
 
Edge Web Technologies and Browser Vendors (Updated on 2016/09/06)
Edge Web Technologies and Browser Vendors (Updated on 2016/09/06)Edge Web Technologies and Browser Vendors (Updated on 2016/09/06)
Edge Web Technologies and Browser Vendors (Updated on 2016/09/06)dynamis
 
OSC2016.Enterprise Lightnig Talk
OSC2016.Enterprise Lightnig TalkOSC2016.Enterprise Lightnig Talk
OSC2016.Enterprise Lightnig Talkdynamis
 
Demo for Gecko Embedded
Demo for Gecko EmbeddedDemo for Gecko Embedded
Demo for Gecko Embeddeddynamis
 
Project Gecko Embedded
Project Gecko EmbeddedProject Gecko Embedded
Project Gecko Embeddeddynamis
 
The New Norm of The Web
The New Norm of The WebThe New Norm of The Web
The New Norm of The Webdynamis
 
Progressive Mobile Web Apps
Progressive Mobile Web AppsProgressive Mobile Web Apps
Progressive Mobile Web Appsdynamis
 
Modern Mobile Web Apps
Modern Mobile Web AppsModern Mobile Web Apps
Modern Mobile Web Appsdynamis
 
Web Tech & Architecture
Web Tech & ArchitectureWeb Tech & Architecture
Web Tech & Architecturedynamis
 
Java script.trend(spec)
Java script.trend(spec)Java script.trend(spec)
Java script.trend(spec)dynamis
 
Data Privacy meeting
Data Privacy meetingData Privacy meeting
Data Privacy meetingdynamis
 

More from dynamis (20)

HTTP and 5G (fixed1)
HTTP and 5G (fixed1)HTTP and 5G (fixed1)
HTTP and 5G (fixed1)
 
HTTP and 5G
HTTP and 5GHTTP and 5G
HTTP and 5G
 
HTTP and 5G partial draft
HTTP and 5G partial draftHTTP and 5G partial draft
HTTP and 5G partial draft
 
Web App Platform Strategy
Web App Platform StrategyWeb App Platform Strategy
Web App Platform Strategy
 
HTML5 & Renesas RZ/G
HTML5 & Renesas RZ/GHTML5 & Renesas RZ/G
HTML5 & Renesas RZ/G
 
Life of html5 (osaka)
Life of html5 (osaka)Life of html5 (osaka)
Life of html5 (osaka)
 
Web updates 2017
Web updates 2017Web updates 2017
Web updates 2017
 
Life of HTML5
Life of HTML5Life of HTML5
Life of HTML5
 
Browsers in IoT Era
Browsers in IoT EraBrowsers in IoT Era
Browsers in IoT Era
 
New Norm of HTML5
New Norm of HTML5New Norm of HTML5
New Norm of HTML5
 
Edge Web Technologies and Browser Vendors (Updated on 2016/09/06)
Edge Web Technologies and Browser Vendors (Updated on 2016/09/06)Edge Web Technologies and Browser Vendors (Updated on 2016/09/06)
Edge Web Technologies and Browser Vendors (Updated on 2016/09/06)
 
OSC2016.Enterprise Lightnig Talk
OSC2016.Enterprise Lightnig TalkOSC2016.Enterprise Lightnig Talk
OSC2016.Enterprise Lightnig Talk
 
Demo for Gecko Embedded
Demo for Gecko EmbeddedDemo for Gecko Embedded
Demo for Gecko Embedded
 
Project Gecko Embedded
Project Gecko EmbeddedProject Gecko Embedded
Project Gecko Embedded
 
The New Norm of The Web
The New Norm of The WebThe New Norm of The Web
The New Norm of The Web
 
Progressive Mobile Web Apps
Progressive Mobile Web AppsProgressive Mobile Web Apps
Progressive Mobile Web Apps
 
Modern Mobile Web Apps
Modern Mobile Web AppsModern Mobile Web Apps
Modern Mobile Web Apps
 
Web Tech & Architecture
Web Tech & ArchitectureWeb Tech & Architecture
Web Tech & Architecture
 
Java script.trend(spec)
Java script.trend(spec)Java script.trend(spec)
Java script.trend(spec)
 
Data Privacy meeting
Data Privacy meetingData Privacy meeting
Data Privacy meeting
 

Recently uploaded

LoRaWAN無位置ロープ式水漏れセンサーWL03A 日本語マニュアル
LoRaWAN無位置ロープ式水漏れセンサーWL03A 日本語マニュアルLoRaWAN無位置ロープ式水漏れセンサーWL03A 日本語マニュアル
LoRaWAN無位置ロープ式水漏れセンサーWL03A 日本語マニュアルCRI Japan, Inc.
 
LoRaWAN無位置ロープ型水漏れセンサー WL03A-LB/LSカタログ ファイル
LoRaWAN無位置ロープ型水漏れセンサー WL03A-LB/LSカタログ ファイルLoRaWAN無位置ロープ型水漏れセンサー WL03A-LB/LSカタログ ファイル
LoRaWAN無位置ロープ型水漏れセンサー WL03A-LB/LSカタログ ファイルCRI Japan, Inc.
 
クラウド時代におけるSREとUPWARDの取組ーUPWARD株式会社 CTO門畑
クラウド時代におけるSREとUPWARDの取組ーUPWARD株式会社 CTO門畑クラウド時代におけるSREとUPWARDの取組ーUPWARD株式会社 CTO門畑
クラウド時代におけるSREとUPWARDの取組ーUPWARD株式会社 CTO門畑Akihiro Kadohata
 
ロボットマニピュレーションの作業・動作計画 / rosjp_planning_for_robotic_manipulation_20240521
ロボットマニピュレーションの作業・動作計画 / rosjp_planning_for_robotic_manipulation_20240521ロボットマニピュレーションの作業・動作計画 / rosjp_planning_for_robotic_manipulation_20240521
ロボットマニピュレーションの作業・動作計画 / rosjp_planning_for_robotic_manipulation_20240521Satoshi Makita
 
部内勉強会(IT用語ざっくり学習) 実施日:2024年5月17日(金) 対象者:営業部社員
部内勉強会(IT用語ざっくり学習) 実施日:2024年5月17日(金) 対象者:営業部社員部内勉強会(IT用語ざっくり学習) 実施日:2024年5月17日(金) 対象者:営業部社員
部内勉強会(IT用語ざっくり学習) 実施日:2024年5月17日(金) 対象者:営業部社員Sadaomi Nishi
 
情報を表現するときのポイント
情報を表現するときのポイント情報を表現するときのポイント
情報を表現するときのポイントonozaty
 
Keywordmap overview material/CINC.co.ltd
Keywordmap overview material/CINC.co.ltdKeywordmap overview material/CINC.co.ltd
Keywordmap overview material/CINC.co.ltdkokinagano2
 
ネットワーク可視化 振る舞い検知(NDR)ご紹介_キンドリル202405.pdf
ネットワーク可視化 振る舞い検知(NDR)ご紹介_キンドリル202405.pdfネットワーク可視化 振る舞い検知(NDR)ご紹介_キンドリル202405.pdf
ネットワーク可視化 振る舞い検知(NDR)ご紹介_キンドリル202405.pdfTakayuki Nakayama
 
Hyperledger Fabricコミュニティ活動体験& Hyperledger Fabric最新状況ご紹介
Hyperledger Fabricコミュニティ活動体験& Hyperledger Fabric最新状況ご紹介Hyperledger Fabricコミュニティ活動体験& Hyperledger Fabric最新状況ご紹介
Hyperledger Fabricコミュニティ活動体験& Hyperledger Fabric最新状況ご紹介Hyperleger Tokyo Meetup
 
研究紹介スライド: オフライン強化学習に基づくロボティックスワームの制御器の設計
研究紹介スライド: オフライン強化学習に基づくロボティックスワームの制御器の設計研究紹介スライド: オフライン強化学習に基づくロボティックスワームの制御器の設計
研究紹介スライド: オフライン強化学習に基づくロボティックスワームの制御器の設計atsushi061452
 
Intranet Development v1.0 (TSG LIVE! 12 LT )
Intranet Development v1.0 (TSG LIVE! 12 LT )Intranet Development v1.0 (TSG LIVE! 12 LT )
Intranet Development v1.0 (TSG LIVE! 12 LT )iwashiira2ctf
 
5/22 第23回 Customer系エンジニア座談会のスライド 公開用 西口瑛一
5/22 第23回 Customer系エンジニア座談会のスライド 公開用 西口瑛一5/22 第23回 Customer系エンジニア座談会のスライド 公開用 西口瑛一
5/22 第23回 Customer系エンジニア座談会のスライド 公開用 西口瑛一瑛一 西口
 
2024年5月17日 先駆的科学計算フォーラム2024 機械学習を用いた新たなゲーム体験の創出の応用
2024年5月17日 先駆的科学計算フォーラム2024 機械学習を用いた新たなゲーム体験の創出の応用2024年5月17日 先駆的科学計算フォーラム2024 機械学習を用いた新たなゲーム体験の創出の応用
2024年5月17日 先駆的科学計算フォーラム2024 機械学習を用いた新たなゲーム体験の創出の応用KLab Inc. / Tech
 
MPAなWebフレームワーク、Astroの紹介 (その1) 2024/05/17の勉強会で発表されたものです。
MPAなWebフレームワーク、Astroの紹介 (その1) 2024/05/17の勉強会で発表されたものです。MPAなWebフレームワーク、Astroの紹介 (その1) 2024/05/17の勉強会で発表されたものです。
MPAなWebフレームワーク、Astroの紹介 (その1) 2024/05/17の勉強会で発表されたものです。iPride Co., Ltd.
 

Recently uploaded (14)

LoRaWAN無位置ロープ式水漏れセンサーWL03A 日本語マニュアル
LoRaWAN無位置ロープ式水漏れセンサーWL03A 日本語マニュアルLoRaWAN無位置ロープ式水漏れセンサーWL03A 日本語マニュアル
LoRaWAN無位置ロープ式水漏れセンサーWL03A 日本語マニュアル
 
LoRaWAN無位置ロープ型水漏れセンサー WL03A-LB/LSカタログ ファイル
LoRaWAN無位置ロープ型水漏れセンサー WL03A-LB/LSカタログ ファイルLoRaWAN無位置ロープ型水漏れセンサー WL03A-LB/LSカタログ ファイル
LoRaWAN無位置ロープ型水漏れセンサー WL03A-LB/LSカタログ ファイル
 
クラウド時代におけるSREとUPWARDの取組ーUPWARD株式会社 CTO門畑
クラウド時代におけるSREとUPWARDの取組ーUPWARD株式会社 CTO門畑クラウド時代におけるSREとUPWARDの取組ーUPWARD株式会社 CTO門畑
クラウド時代におけるSREとUPWARDの取組ーUPWARD株式会社 CTO門畑
 
ロボットマニピュレーションの作業・動作計画 / rosjp_planning_for_robotic_manipulation_20240521
ロボットマニピュレーションの作業・動作計画 / rosjp_planning_for_robotic_manipulation_20240521ロボットマニピュレーションの作業・動作計画 / rosjp_planning_for_robotic_manipulation_20240521
ロボットマニピュレーションの作業・動作計画 / rosjp_planning_for_robotic_manipulation_20240521
 
部内勉強会(IT用語ざっくり学習) 実施日:2024年5月17日(金) 対象者:営業部社員
部内勉強会(IT用語ざっくり学習) 実施日:2024年5月17日(金) 対象者:営業部社員部内勉強会(IT用語ざっくり学習) 実施日:2024年5月17日(金) 対象者:営業部社員
部内勉強会(IT用語ざっくり学習) 実施日:2024年5月17日(金) 対象者:営業部社員
 
情報を表現するときのポイント
情報を表現するときのポイント情報を表現するときのポイント
情報を表現するときのポイント
 
Keywordmap overview material/CINC.co.ltd
Keywordmap overview material/CINC.co.ltdKeywordmap overview material/CINC.co.ltd
Keywordmap overview material/CINC.co.ltd
 
ネットワーク可視化 振る舞い検知(NDR)ご紹介_キンドリル202405.pdf
ネットワーク可視化 振る舞い検知(NDR)ご紹介_キンドリル202405.pdfネットワーク可視化 振る舞い検知(NDR)ご紹介_キンドリル202405.pdf
ネットワーク可視化 振る舞い検知(NDR)ご紹介_キンドリル202405.pdf
 
Hyperledger Fabricコミュニティ活動体験& Hyperledger Fabric最新状況ご紹介
Hyperledger Fabricコミュニティ活動体験& Hyperledger Fabric最新状況ご紹介Hyperledger Fabricコミュニティ活動体験& Hyperledger Fabric最新状況ご紹介
Hyperledger Fabricコミュニティ活動体験& Hyperledger Fabric最新状況ご紹介
 
研究紹介スライド: オフライン強化学習に基づくロボティックスワームの制御器の設計
研究紹介スライド: オフライン強化学習に基づくロボティックスワームの制御器の設計研究紹介スライド: オフライン強化学習に基づくロボティックスワームの制御器の設計
研究紹介スライド: オフライン強化学習に基づくロボティックスワームの制御器の設計
 
Intranet Development v1.0 (TSG LIVE! 12 LT )
Intranet Development v1.0 (TSG LIVE! 12 LT )Intranet Development v1.0 (TSG LIVE! 12 LT )
Intranet Development v1.0 (TSG LIVE! 12 LT )
 
5/22 第23回 Customer系エンジニア座談会のスライド 公開用 西口瑛一
5/22 第23回 Customer系エンジニア座談会のスライド 公開用 西口瑛一5/22 第23回 Customer系エンジニア座談会のスライド 公開用 西口瑛一
5/22 第23回 Customer系エンジニア座談会のスライド 公開用 西口瑛一
 
2024年5月17日 先駆的科学計算フォーラム2024 機械学習を用いた新たなゲーム体験の創出の応用
2024年5月17日 先駆的科学計算フォーラム2024 機械学習を用いた新たなゲーム体験の創出の応用2024年5月17日 先駆的科学計算フォーラム2024 機械学習を用いた新たなゲーム体験の創出の応用
2024年5月17日 先駆的科学計算フォーラム2024 機械学習を用いた新たなゲーム体験の創出の応用
 
MPAなWebフレームワーク、Astroの紹介 (その1) 2024/05/17の勉強会で発表されたものです。
MPAなWebフレームワーク、Astroの紹介 (その1) 2024/05/17の勉強会で発表されたものです。MPAなWebフレームワーク、Astroの紹介 (その1) 2024/05/17の勉強会で発表されたものです。
MPAなWebフレームワーク、Astroの紹介 (その1) 2024/05/17の勉強会で発表されたものです。
 

CSS.2012

  • 1. CSS.2012 ~Latest & Coming CSS Features~ Slides @ CSS Nite in Osaka vol.31 on 2012/06/29 by Tomoya ASAI (dynamis) Last Update: 2012/07/05
  • 3. about:dynamis Mozilla Japan http://dynamis.jp @dynamitter facebook.com/ dynamis レッサーパンダが好き。 mailto: Tomoya ASAI <dynamis@mozilla-japan.org>
  • 4. about:slides 下線なしリンクも使います コードは要点だけの簡略版 特に注意が必要なとき以外は -moz- 以外の接頭辞など割愛 画像からも時々 右下には補足や リンクしてます 一次情報源 URL mailto: Tomoya ASAI <dynamis@mozilla-japan.org>
  • 6.
  • 7. Multi Media Mouse, HTML5 Key ev. Forms W3C Offline HTML5 HTML5 Support Parser WAI- XHTML5 ARIA Semantic Elements
  • 8. Canvas Web WHATWG Messag- ing Multi Web Media Mouse, Sockets HTML5 Key ev. Forms W3C Server- Offline HTML5 HTML5 Support Sent ev. Parser Web WAI- XHTML5 Storage ARIA Semantic Elements Web Workers Micro- HTML Data
  • 9. Canvas Web WHATWG Messag- ing Multi Web Media Mouse, Sockets HTML5 Key ev. Forms W3C Server- Offline HTML5 HTML5 Support Sent ev. Parser Web WAI- XHTML5 Storage ARIA Semantic Elements Web Media Workers Layout Queries Micro- HTML Data Trans CSS3~ Flex Box form Anim Regions ation
  • 10. Khronos SMIL Vibra- tion WebGL Geo- SVG other location Orien- tation Canvas WHATWG Web IETF Messag- ing Web Multi SPDY Web Sockets DNT Media Mouse, Sockets HTML5 Key ev. XHR2 FileAPI CSP Forms W3C Server- Offline ECMA HTML5 HTML5 Support Sent ev. ECMA Script Parser Indexed Web WAI- DB XHTML5 Storage ARIA Semantic Elements Web Media Workers Layout Queries Micro- HTML Data Trans CSS3~ Flex Box OGP XPath form RSS Anim Math Regions ation ML WOFF DOM4
  • 11. Khronos SMIL Vibra- MP3 WebCL Webm Opus tion WebGL Geo- SVG H.264 other location Orien- Web Audio Notifi- tation Web Canvas cation WHATWG Web IETF RTC Messag- ing Web TCP Tel Multi SPDY Web Sockets DNT Socket Media Mouse, Sockets HTML5 Key ev. XHR2 Radio FileAPI CSP Forms Net W3C Server- Info Offline ECMA HTML5 HTML5 Support Sent ev. ECMA Script ECMA NFC Parser 6th Indexed Web Device WAI- DB Storage Storage XHTML5 ARIA Semantic Web Elements Web SQL Media USB Workers Layout Queries File Micro- Sys HTML Data Trans CSS3~ Flex Battery Status Box OGP XPath form Proxi- Anim mity Schema RSS Math Regions .org ation ML WOFF RDF DOM4
  • 12. Khronos SMIL Vibra- MP3 WebCL Webm Opus tion WebGL Geo- SVG H.264 other location Orien- Web Audio Notifi- tation Web Canvas cation WHATWG Web IETF RTC Messag- ing Web TCP Tel Multi SPDY Web Sockets DNT Socket Media Mouse, Sockets HTML5 Key ev. XHR2 Radio FileAPI CSP Forms Net W3C Server- Info Offline ECMA HTML5 HTML5 Support Sent ev. ECMA Script ECMA NFC Parser 6th Indexed Web Device WAI- DB Storage Storage XHTML5 ARIA Semantic Web Elements Web SQL Media USB Workers Layout Queries File Micro- Sys HTML Data Trans CSS3~ Flex Battery Status Box OGP XPath form Proxi- Anim mity Schema RSS Math Regions .org ation ML WOFF RDF DOM4
  • 13. 今日はここの話です Media Layout Queries Trans CSS3~ Flex Box form Anim Regions ation
  • 15. マルチデバイス対応 & DTP レベルのデザイン
  • 17. Media Queries デバイスに応じたスタイル 画面サイズ、解像度、縦横... https://developer.mozilla.org/en/CSS/Media_queries
  • 18. 画面サイズ別 CSS を書く <style> /* @media 規則で画面サイズ別ルールを記述 */ @media only screen and (min-width: 481px) { #header { backgournd: url(head.png); /* 大きい画像 */ } } @media only screen and (max-width: 480px) { #header { backgournd: url(head-small.png); /* 小さい画像 */ } } </style> <!-- 外部ファイルで分けるときは media 属性 --> <link rel="stylesheet" type="text/css" href="pc.css" media="only screen and (min-width:481px)"> <link rel="stylesheet" type="text/css" href="mobile.css" media="only screen and (max-width:480px)"> cm など物理サイズは iPhone などで正しくないので注意
  • 19. Responsive Web Design ピクセル単位で調整しない Web はピクセル指向ではない 画面サイズに応じて適切に http://www.alistapart.com/articles/responsive-web-design/
  • 21. 背景画像も 左右切り取り 横幅に応じて サイズを変更 http://www.alistapart.com/articles/responsive-web-design/
  • 23. 横幅に応じて 要素数を増減 http://colly.com/ link_to_the_document
  • 24. <meta> viewport 拡大率制御には viewport ユーザのズーム禁止も可能 表示領域の CSS ピクセル幅 iPhone はデフォルト 980px Firefox for Mobile は 800px https://developer.mozilla.org/en/Mobile/Viewport_meta_tag
  • 25. viewport を指定する <!-- デバイスの画面幅で等倍表示 --> <meta name="viewport" content="device-width, initial-scale=1.0"> <!-- 幅 500px の領域に描いて等倍表示 --> <meta name="viewport" content="width=500, initial-scale=1.0"/> <!-- デバイスの画面幅で等倍固定表示 --> <meta name="viewport" content="width=device-width, user-scalable=no"> https://developer.mozilla.org/en/Mobile/Viewport_meta_tag
  • 27. 高解像度ディスプレイ対応 見なかったことに!(・・). それが一番楽ですよね。 link_to_the_document
  • 28. 高解像度ディスプレイ対応 高解像度版だけを使う ファイルサイズが… 解像度別の画像を用意 手間が掛かります… CSS, SVG, WebFont に 可能ならこれがベスト? link_to_the_document
  • 29. 解像度別の画像を用意 Device Pixel Rate CSS または JS で条件分岐 srcset 属性 image-set() 関数 Gecko で対応するか未定 サーバサイドで自動変換
  • 30. Device Pixel Rate CSS の論理ピクセルと端末 画面のピクセル比 iPhone 4 以降の高解像度端末 では 1:1.5 や 1:2 の端末が多い 高解像度画像や SVG などを 使わないとぼやけてしまう https://developer.mozilla.org/en/CSS/Media_queries/#-moz-device-pixel-ratio
  • 31. Device Pixel Rate header { /* 通常サイズの画像 */ background: url(head.png); } /* "only" で媒体型のみ対応する古いブラウザ除外 */ /* min/max と -moz-/-webkit- の順に注意 */ @media only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { header { /* 2倍解像度画像 */ background: url(head-2x.png); } } 注: 古い WebKit は使わない画像も両方 DL するバグあり
  • 32. JS では matchMedia() var q = "(min--moz-device-pixel-ratio: 1.5), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5)"; if (window.matchMedia(q).matches) { // 高解像度時の処理   } else {   // 低解像度時の処理 }   https://developer.mozilla.org/ja/DOM/window.matchMedia
  • 33. srcset 属性 <!-- 高解像度ディスプレイには別画像を使う --> <img src="fire.png" srcset="fire-2x.png 1.5x"> <!-- 更に細かく画像を分けるのも比較的容易 --> <img src="fox.png" srcset="fox-1.5x.png 1.5x, fox-2x.png 2x">
  • 34. CSS, SVG, WebFonts に グラデーション、影付き、 角丸などは CSS で実現 ボタン程度は CSS で十分 SVG 画像に置き換える WebFonts を使う ... などサイズ非依存に
  • 35. Text
  • 36. Web Fonts ダウンロードフォント IE9 なども WOFF サポート iPhone は WOFF 未サポート WOFF: Web用圧縮フォント フォントサービスも充実 やっと時代が変わりましたね… https://developer.mozilla.org/ja/CSS/@font-face
  • 37. Web Fonts の使い方 @font-face { /* IE8 以前用 EOT フォント設定 (最初に) */ font-family: Sawarabi; src: url(Sawarabi.eot) /* IE8 以前 format() 非対応 */; } @font-face { /* WOFF 非対応ブラウザ向けフォント設定 */ font-family: Sawarabi; src: url(Sawarabi.otf) format("opentype"); } @font-face { /* WOFF 対応ブラウザには WOFF を */ font-family: Sawarabi; src: url(Sawarabi.woff) format("woff"); } body { font-family: Sawarabi, sans-serif; } http://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/
  • 38. Web Fonts の使い方 @font-face { font-family: 'Lisa'; src: url('Lisa.eot'); src: url('Lisa.eot?#iefix') /* IEバグ対応Hack */ format('embedded-opentype'), url('Lisa.woff') format('woff'), url('Lisa.ttf') format('truetype'), url('Lisa.svg') format('svg'); } body { font-family: Lisa, sans-serif; } http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax
  • 39. WOFF フォントに変換 WOFF コンバータ Windows, Mac アプリ @font-face kit generator Web サービス (サイズ制限あり) http://musashi.or.tv/woffconv.htm http://www.fontsquirrel.com/fontface/generator
  • 40. サブセットフォントを作る 必要文字だけで軽量化 サブセットフォントメーカー Windows, Mac アプリ @font-face kit generator Expert モードの Subsetting で Custom Subsetting を指定する http://musashi.or.tv/subsetfontmk.htm http://www.fontsquirrel.com/fontface/generator
  • 41. デコもじ 日本初の WebFont サービス http://decomoji.jp/ 字游工房のフォントもある! JavaScript 埋め込み型 個人 ¥315/月∼ 法人 ¥1575/月∼ http://decomoji.jp/
  • 42. webfonts.fonts.com 多言語 WebFont サービス http://webfonts.fonts.com/ 10,000 以上のフォント 日本語フォントも 100 以上 JavaScript 埋め込み型 25,000 view/30days まで無料 http://webfonts.fonts.com/
  • 43. Google Web Font API フォントは約 500 種類 開始当初は 18 しかなかった 日本語フォントなし メニューなど限られた用途で サブセットも指定可能 ファイルサイズを最小限に https://developers.google.com/webfonts/
  • 44. Web Font API の使い方 <html> <head> <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css? family=Tangerine"> <style> body { font-family: 'Tangerine', serif; } </style> </head> <body> <h1>Firefox Developer Conference 2011 in Osaka!</h1> </body> </html> http://code.google.com/intl/ja/apis/webfonts/docs/getting_started.html
  • 45. ファイルサイズを小さく サブセットフォントをカテゴリーで指定 http://fonts.googleapis.com/css? family=Philosopher& subset=latin 使用する文字列を指定して最小限のフォントを取得 http://fonts.googleapis.com/css? family=Inconsolata& text=Hello http://code.google.com/intl/ja/apis/webfonts/docs/getting_started.html
  • 47. Font+ 日本語フォント 500 以上! フォントワークス、モリサワ、 イワタ、モトヤ ... サブセットの事前 DL 可能 あるいは JS 埋め込み ¥1050/月∼ http://webfont.fontplus.jp/
  • 48. Font Control Features CSS3 font-variant フォントの詳細機能を制御 分数、桁 え、合字、旧字体... 仕様執筆者自身が実装 詳細: http://people.mozilla.org/~jdaggett/webfontsfuture.pdf
  • 51. text-decoration 破線や波線などにも対応 もはや Keynote より高機能… text-decoration 設定すると -moz-text-decoration-* は リセットされるので注意 https://developer.mozilla.org/en/CSS/text-decoration
  • 52. text-decoration /* 複数同時指定も可能 */ .bothline { text-decoration: underline overline; } /* Firefox は wavy などにも対応 */ .wavyredline { text-decoration-line: underline; text-decoration-style: wavy; text-decoration-color: red; } https://developer.mozilla.org/en/CSS/text-decoration
  • 53. hyphen 英単語の音節で折り返し 折り返し位置の明示指定 U+2010 (HYPHEN) - ハード U+00AD (SHY, &shy;) - ソフト p.auto { -moz-hyphens: auto; } https://developer.mozilla.org/en/CSS/hyphens
  • 54. text-overflow Fx7 で ellipsis (...) に対応 Fx9 でサポートを強化 左右両端指定の 2 値構文 省略時の末端文字を指定 https://developer.mozilla.org/en/CSS/text-overflow
  • 56. font-stretch 字間のつまり具合を調整 normal, condensed, expanded, semi-condensed, semi-expanded ... h1 { font-stretch: extra-expanded } p { font-stretch: condensed } https://developer.mozilla.org/en/CSS/font-stretch
  • 57. c.f. PDF.js プラグインフリー PDF Web 技術の結晶状態 DTP 品質の描画を... font-stretch も PDF で必要な機 能だったから実装された https://github.com/mozilla/pdf.js
  • 59. text-align-last 最終行だけ行 え変更 Fx12 からサポート justify だと最後の行がスカスカ になるケースなどに便利 https://developer.mozilla.org/en/CSS/text-align-last
  • 60. text-size-adjust スマートフォン向けの文字 サイズ変更を許可・不許可 Fx11 からサポート 意図せず拡大されてしまっている 場合などに none 指定すると良い https://developer.mozilla.org/en/CSS/text-size-adjust
  • 61. Box
  • 62. border-image 仕様更新 border-image = shorthand *-source, *-slice, *-repeat に加え *-width, *-image-outset にも対応 デフォルトで中央省略に 中央にも画像がいるなら fill border width 上書き不能に / 使ってたスタイルは無効に http://dbaron.org/log/20120612-border-image
  • 63. border-image 仕様更新 // ボーダー画像の中央部分も使用する場合 -moz-border-image: url(my-border.png) 30 30 30 30 stretch stretch; -webkit-border-image: url(my-border.png) 30 30 30 30 stretch stretch; -o-border-image: url(my-border.png) 30 30 30 30 stretch stretch; // 最新仕様では fill 指定しないと中央不使用 border-image: url(my-border.png) 30 30 30 30 fill stretch stretch; http://dbaron.org/log/20120612-border-image
  • 64. border-image 仕様更新 // これまでの記述 -moz-border-image: url(my-border.png) 30 30 30 30 / 2em stretch stretch; -webkit-border-image: url(my-border.png) 30 30 30 30 / 2em stretch stretch; border-image: url(my-border.png) 30 30 30 30 / 2em stretch stretch; // 仕様変更に合わせた記述 border: 2em solid transparent; // Fallback は別途書くように -moz-border-image: url(my-border.png) 30 30 30 30 stretch stretch; -webkit-border-image: url(my-border.png) 30 30 30 30 stretch stretch; border-image: url(my-border.png) 30 30 30 30 stretch stretch; http://dbaron.org/log/20120612-border-image
  • 65. background-repeat - 2値構文 X, Y 方向別に設定可能に Fx13 からサポート repeat = repeat repeat repeat-x = repeat no-repeat repeat-y = no-repeat repeat 1値構文で定義されていない組み 合わせ repeat round なども可能 https://developer.mozilla.org/en/CSS/background-repeat
  • 66. background-position - 4値構文 左上以外の角から位置指定 https://developer.mozilla.org/en/CSS/background-position
  • 68. CSS Transform 任意の要素を変形させる 拡大縮小、回転、移動、歪み IE8 は Matrix Transform skew は Fx14 で廃止 skewX と skewY を使うこと https://developer.mozilla.org/en/CSS/-moz-transform
  • 69. CSS Transform 使用例 <iframe id="skewframe" width="800" height="600" src="http://mozilla.jp/"></iframe> <style> #skewframe { /* 右に 150px 移動、左下原点で 10°歪める*/ -moz-transform: skewx(10deg) translatex(150px); -moz-transform-origin: bottom left; } </style> https://developer.mozilla.org/En/CSS/Using_CSS_transforms
  • 70. turn (角度の単位) Transform などの値で使用 当面は deg とかが無難 turn は Fx13 からサポート https://developer.mozilla.org/en/CSS/angle
  • 71. 3D Transform 3次元版 Fx10 からサポート rotateZ や translateZ を使う 視点は perspective などで指定 https://developer.mozilla.org/en/CSS/Using_CSS_transforms
  • 72. 3D Transform の注意 Firefox は最新仕様に厳格 perspective など単位が必須 iphone 3.0 は逆に単位なし WebKit だけ…って時は単位確認 https://developer.mozilla.org/en/CSS/perspective
  • 73. 今回に合わせて Firefox にも対応! http://pr.fontplus.jp/sample/02/
  • 75. CSS Transitions スタイル遷移をなめらかに 簡単にアニメーション GPU を用いた高速処理 今日は詳細割愛します http://24ways.org/2009/going-nuts-with-css-transitions
  • 76. CSS Transitions 使用例 #somebox { color: black; background-color: yellow; /* すべてのスタイルを2秒かけて変化、開始はなめらかに */ -moz-transition: all 2s ease-in; transition: all 2s ease-in; } #somebox:hover { /* マウスオーバーで配色、サイズ、角度を変化 */ color: white; background-color: red; -moz-transform: rotate(-60deg) scale(1.5); transform: rotate(-60deg) scale(1.5); } http://hacks.mozilla.org/2010/07/firefox4-beta2/
  • 77. CSS Transitions 発動条件 「スタイル変更」時に発動 変更前の状態が一度描画されて いる必要がある ページロード時に遷移するなら onload 後にスタイル指定が必要 left など一部スタイルは変化前に も left: 0px; などの指定が必要
  • 78. CSS Animations Transitions を連続する機能 キーフレーム毎のスタイルを指定 CSS だけでアニメーション GPU を用いた高速処理 https://developer.mozilla.org/en/CSS/CSS_animations
  • 79. CSS Animations 使用例 <div id="target"></div> <style> @-moz-keyframes changecolor { /* アニメーション定義 */ from { } /* 開始する瞬間は既存スタイルのまま */ 50% { background: purple; } /* 半分の時間で紫に */ to { background: orange; } /* 最終的にオレンジに */ } #target { background: blue; width: 100px; height: 100px; } #target:hover { -moz-animation: changecolor 4s; /* アニメーション適用 */ } </style> https://developer.mozilla.org/en/CSS/CSS_animations
  • 80. CSS Animations の注意 完了後は元のスタイルに戻る to スタイルは維持されない 開始前と from, to と完了後の スタイルは一瞬で切り替わる 滑らかに変化して維持: from は既存スタイルと同じに to は完了後スタイルと同じに
  • 81. 滑らかに変化して維持する <div id="target"></div> <style> @-moz-keyframes changecolor { from { background: blue; } /* 既存スタイルと同じ */ 50% { background: purple; } to { background: orange; } /* 完了後と同じ */ } #target { background: blue; width: 100px; height: 100px; } #target:hover { -moz-animation: changecolor 4s; background: orange; /* to {} と同じ */ } </style>
  • 82. CSS Animations 発動条件 -moz-animation を設定 onload 前でも問題なし 一定時間後に発動したい場 合は animation-delay を使っ て遅延時間を指定する
  • 84. 多段レイアウト(column-fill) 雑誌や新聞などの多段組 column-fill: auto ¦ balance https://developer.mozilla.org/en/CSS/column-fill
  • 86. Flexbox Layout 仕様変更 残りを X:Y で分割など XUL 由来のレイアウト機能 古い仕様は Fx2 からサポート 複数回仕様変更されててカオス 互換対応複雑になるので 今回割愛...
  • 88. ベンダー接頭辞サポート終了 接頭辞なしを使いましょう: border-radius* @Fx13 box-shadow @Fx13 その他も今後のため接頭辞 なしを併記する習慣を https://bugzilla.mozilla.org/show_bug.cgi?id=693510
  • 90. CSS3 calc() サイズを計算式で指定可能 width: -moz-calc(20% + 1rem) -moz- prefix に注意 IE9 はいきなり no prefix 実装 https://developer.mozilla.org/en/CSS/-moz-calc
  • 91. CSS3 calc() /* margin 分を考慮した左右の分割を行う例 */ #main { width: 75%; margin-right: 1rem; } #side { width: -moz-calc(25% - 1rem); width: calc(25% - 1rem); /* prefix なし忘れずに */ } /* rem はルート要素に対する font-size (Fx3.6~) */ http://hacks.mozilla.org/2010/06/css3-calc/
  • 92. @document regexp() CSS3 Conditional Rules の @document 規則の対応強化 @-moz-document url(http://dynamis.jp/),     url-prefix(http://dynamis.jp/foo/),      domain(dynamis.jp),      regexp("^https:.*") { /* 指定 URL にマッチしたページ用のルール */ /* regexp() は Fx6~ 他は Fx1.5 からサポート */ } https://developer.mozilla.org/en/CSS/@-moz-document
  • 93. @規則の入れ子利用 @media や @document 内で も @規則が利用可能に Fx11 から入れ子サポート https://bugzilla.mozilla.org/show_bug.cgi?id=511909