3
Swap SKILLS

CSS
Progressive Enhancemnt
      Web



                Takashi Kikuchi
Salem,Mass




       Takashi Kikuchi
3




    Takashi Kikuchi
3




    Takashi Kikuchi
3




    Takashi Kikuchi
allweb




         Takashi Kikuchi
Takashi Kikuchi
Takashi Kikuchi
4




    Takashi Kikuchi
3
&
 Progressive
Enhancement


Css     Takashi Kikuchi
Css History


      Takashi Kikuchi
1996
 Css1


   Takashi Kikuchi
1997
 Css2


   Takashi Kikuchi
CR
Css2.1


    Takashi Kikuchi
Takashi Kikuchi
Css3


  Takashi Kikuchi
CSS3


       Takashi Kikuchi
Ie6 ?
IE7 ?

   Takashi Kikuchi
Ie6/7




        Takashi Kikuchi
18inch
Webkit
            User
   ZOOM
Mobile TV  Agent
iiXGA  Gecko
            DSi
    Trident
42inch                   ...
2003.1
MOSe

    Takashi Kikuchi
Mozilla
 Opera Safari
enhancement

       Takashi Kikuchi
Dave Shea

 Css Zen Garden




Takashi Kikuchi
Takashi Kikuchi
2003.10
 Progressive
Enhancement

      Takashi Kikuchi
,TX
 SXSW




Takashi Kikuchi
Progressive
Enhancement
     vs
  Graceful
Degradation

       Takashi Kikuchi
Content=”                    ”

                                                                           Presentation=”C...
Progressive
Enhancement
     ≒
 Graceful
Degradation


         Takashi Kikuchi
Graceful
Degradation
Progressive
Enhancement
Sample




Takashi Kikuchi
YUI




Takashi Kikuchi
CSS3


  Takashi Kikuchi
Third Time
  Lucky
     -Andy Clarke-
CSS3
Selectors

     Takashi Kikuchi
Attribute
Selectors

     Takashi Kikuchi
<ul>
<li>
<a class=”pdf” href=quot;xxxx.pdfquot;>XXX(PDF20KB)</a>
</li>
</ul>

<ul>
<li>
<a class=”mail” href=quot;mailto:...
a[href$=quot;.pdfquot;]{
  padding-right: 20px;
  background: transparent
  url(pdf.png) no-repeat 100% 50%;
}

a[href^=qu...
demo


  Takashi Kikuchi
E:Nth-Child()


       Takashi Kikuchi
E:Nth-Child()
‣n

‣ HTML    JavaScript

‣ (odd)         (even)




                         Takashi Kikuchi
<table>
<tr class=”odd”>    </tr>
<tr class=”even”>    </tr>
<tr class=”odd”>    </tr>
<tr class=”even”>    </tr>
</table>...
tr:nth-child(even){
background-color: #;
}

tr:nth-child(odd){
background-color: #;
}

<table>
<tr>       </tr>
<tr>      ...
demo


  Takashi Kikuchi
E:last-Child()


        Takashi Kikuchi
E:last-Child()
‣



‣ HTML   JavaScript




                      Takashi Kikuchi
CSS3
Properties

     Takashi Kikuchi
Box-shadow


     Takashi Kikuchi
Box-shadow
‣

‣ -webkit-box-shadow: 2px 2px 2px #aaa;

‣
demo


  Takashi Kikuchi
Border-Radius


       Takashi Kikuchi
Border-Radius

•       border

•
•   -moz-border-radius-topleft

•   (-webkit-)border-top-left-radius
demo


  Takashi Kikuchi
Web fonts


     Takashi Kikuchi
Web fonts
•@font-face
 • IE eot         IE4

  • Firefox3.1
     • Opera10a   SVG


                    Takashi Kikuchi
html{
 font-family: sans-serif;
 }




  Takashi Kikuchi
@font-face {
font-family: VL-PGothic-Regular;
src: url(VL-PGothic-Regular.ttf)
format(quot;truetypequot;);
}




  Takashi...
demo


  Takashi Kikuchi
::SCROLL
SCROLL
::-webkit-scrollbar {
    width: 13px;
    height: 13px;
}


             Takashi Kikuchi
demo


  Takashi Kikuchi
Math


  Takashi Kikuchi
Math

•
•   ,    2em,   30px
Math

#main{
width: calc(100% - 200px);
}
SVG
SVG
‣
    ‣

‣
    ‣ native

‣
    ‣ CSS

                Takashi Kikuchi
Gradient
Gradient
‣
    ‣ -webkit-box-reflect
‣
    ‣ webkit-mask
    ‣ Mozilla with SVG
‣
    ‣ -webkit-gradient
    ‣ Opera SVG
 ...
‣http://files.myopera.com/chaals/0604/Newmins.svg




                             Takashi Kikuchi
Transform


     Takashi Kikuchi
Transform
• rotate( ) deg, rad
• skew( )
• scale(         )

• translate( )
• matrix(      )



                       Tak...
Transform-
     origin
• tnransform-origin
•        50% 50%




                      Takashi Kikuchi
demo


  Takashi Kikuchi
Transition


     Takashi Kikuchi
Transition
•
•
•
• -webkit-transition:
 background-color, .5s liner;



                    Takashi Kikuchi
demo


  Takashi Kikuchi
Animation
Animation
‣
    ‣ -webkit-box-reflect
‣
    ‣ webkit-mask
    ‣ Mozilla with SVG
‣
    ‣ -webkit-gradient
    ‣ Opera SVG
...
demo


  Takashi Kikuchi
CSS3




  Takashi Kikuchi
CSS3
‣               :
    ‣-webkit-, -moz-, -ms-,-o-,

‣         web       :

                        CSS
    ‣




     ...
CSS3

‣ CSS3
 ‣
 ‣
 ‣
 ‣ invalid



               Takashi Kikuchi
CSS3

‣ CSS3
 ‣
 ‣
 ‣
 ‣



           Takashi Kikuchi
demo


  Takashi Kikuchi
MAX


  Takashi Kikuchi
demo


  Takashi Kikuchi
From now


    Takashi Kikuchi
CSS



  Takashi Kikuchi
-webkit-   -ms-   -moz-




                  Takashi Kikuchi
CSS3



       Takashi Kikuchi
Adobe Max09
Takashi Kikuchi
Takashi Kikuchi
Takashi Kikuchi
More Read

http://old.macedition.com/cb/cb_20030616.php
http://www.mezzoblue.com/archives/2003/06/25/mose/
http://develope...
Upcoming SlideShare
Loading in …5
×

SwapSkills css3

3,239 views

Published on

By Satoshi Kikuchi
Talk about CSS3 and PE.

All in Japanease sorry !!

Published in: Technology

SwapSkills css3

  1. 1. 3 Swap SKILLS CSS Progressive Enhancemnt Web Takashi Kikuchi
  2. 2. Salem,Mass Takashi Kikuchi
  3. 3. 3 Takashi Kikuchi
  4. 4. 3 Takashi Kikuchi
  5. 5. 3 Takashi Kikuchi
  6. 6. allweb Takashi Kikuchi
  7. 7. Takashi Kikuchi
  8. 8. Takashi Kikuchi
  9. 9. 4 Takashi Kikuchi
  10. 10. 3 & Progressive Enhancement Css Takashi Kikuchi
  11. 11. Css History Takashi Kikuchi
  12. 12. 1996 Css1 Takashi Kikuchi
  13. 13. 1997 Css2 Takashi Kikuchi
  14. 14. CR Css2.1 Takashi Kikuchi
  15. 15. Takashi Kikuchi
  16. 16. Css3 Takashi Kikuchi
  17. 17. CSS3 Takashi Kikuchi
  18. 18. Ie6 ? IE7 ? Takashi Kikuchi
  19. 19. Ie6/7 Takashi Kikuchi
  20. 20. 18inch Webkit User ZOOM Mobile TV Agent iiXGA Gecko DSi Trident 42inch iPh Takashi Kikuchi
  21. 21. 2003.1 MOSe Takashi Kikuchi
  22. 22. Mozilla Opera Safari enhancement Takashi Kikuchi
  23. 23. Dave Shea Css Zen Garden Takashi Kikuchi
  24. 24. Takashi Kikuchi
  25. 25. 2003.10 Progressive Enhancement Takashi Kikuchi
  26. 26. ,TX SXSW Takashi Kikuchi
  27. 27. Progressive Enhancement vs Graceful Degradation Takashi Kikuchi
  28. 28. Content=” ” Presentation=”CSS” Client-side scripting=”JavaScript” A List Apart: http://www.alistapart.com/articles/understandingprogressiveenhancement/ Takashi Kikuchi
  29. 29. Progressive Enhancement ≒ Graceful Degradation Takashi Kikuchi
  30. 30. Graceful Degradation
  31. 31. Progressive Enhancement
  32. 32. Sample Takashi Kikuchi
  33. 33. YUI Takashi Kikuchi
  34. 34. CSS3 Takashi Kikuchi
  35. 35. Third Time Lucky -Andy Clarke-
  36. 36. CSS3 Selectors Takashi Kikuchi
  37. 37. Attribute Selectors Takashi Kikuchi
  38. 38. <ul> <li> <a class=”pdf” href=quot;xxxx.pdfquot;>XXX(PDF20KB)</a> </li> </ul> <ul> <li> <a class=”mail” href=quot;mailto:quot;>OO@OOO</a> </li> </ul> Takashi Kikuchi
  39. 39. a[href$=quot;.pdfquot;]{ padding-right: 20px; background: transparent url(pdf.png) no-repeat 100% 50%; } a[href^=quot;mailto:quot;]{ padding-right: 20px; background: transparent url(email.png) no-repeat 100% 50%; } Takashi Kikuchi
  40. 40. demo Takashi Kikuchi
  41. 41. E:Nth-Child() Takashi Kikuchi
  42. 42. E:Nth-Child() ‣n ‣ HTML JavaScript ‣ (odd) (even) Takashi Kikuchi
  43. 43. <table> <tr class=”odd”> </tr> <tr class=”even”> </tr> <tr class=”odd”> </tr> <tr class=”even”> </tr> </table> Takashi Kikuchi
  44. 44. tr:nth-child(even){ background-color: #; } tr:nth-child(odd){ background-color: #; } <table> <tr> </tr> <tr> </tr> </table> Takashi Kikuchi
  45. 45. demo Takashi Kikuchi
  46. 46. E:last-Child() Takashi Kikuchi
  47. 47. E:last-Child() ‣ ‣ HTML JavaScript Takashi Kikuchi
  48. 48. CSS3 Properties Takashi Kikuchi
  49. 49. Box-shadow Takashi Kikuchi
  50. 50. Box-shadow ‣ ‣ -webkit-box-shadow: 2px 2px 2px #aaa; ‣
  51. 51. demo Takashi Kikuchi
  52. 52. Border-Radius Takashi Kikuchi
  53. 53. Border-Radius • border • • -moz-border-radius-topleft • (-webkit-)border-top-left-radius
  54. 54. demo Takashi Kikuchi
  55. 55. Web fonts Takashi Kikuchi
  56. 56. Web fonts •@font-face • IE eot IE4 • Firefox3.1 • Opera10a SVG Takashi Kikuchi
  57. 57. html{ font-family: sans-serif; } Takashi Kikuchi
  58. 58. @font-face { font-family: VL-PGothic-Regular; src: url(VL-PGothic-Regular.ttf) format(quot;truetypequot;); } Takashi Kikuchi
  59. 59. demo Takashi Kikuchi
  60. 60. ::SCROLL
  61. 61. SCROLL ::-webkit-scrollbar { width: 13px; height: 13px; } Takashi Kikuchi
  62. 62. demo Takashi Kikuchi
  63. 63. Math Takashi Kikuchi
  64. 64. Math • • , 2em, 30px
  65. 65. Math #main{ width: calc(100% - 200px); }
  66. 66. SVG
  67. 67. SVG ‣ ‣ ‣ ‣ native ‣ ‣ CSS Takashi Kikuchi
  68. 68. Gradient
  69. 69. Gradient ‣ ‣ -webkit-box-reflect ‣ ‣ webkit-mask ‣ Mozilla with SVG ‣ ‣ -webkit-gradient ‣ Opera SVG Takashi Kikuchi
  70. 70. ‣http://files.myopera.com/chaals/0604/Newmins.svg Takashi Kikuchi
  71. 71. Transform Takashi Kikuchi
  72. 72. Transform • rotate( ) deg, rad • skew( ) • scale( ) • translate( ) • matrix( ) Takashi Kikuchi
  73. 73. Transform- origin • tnransform-origin • 50% 50% Takashi Kikuchi
  74. 74. demo Takashi Kikuchi
  75. 75. Transition Takashi Kikuchi
  76. 76. Transition • • • • -webkit-transition: background-color, .5s liner; Takashi Kikuchi
  77. 77. demo Takashi Kikuchi
  78. 78. Animation
  79. 79. Animation ‣ ‣ -webkit-box-reflect ‣ ‣ webkit-mask ‣ Mozilla with SVG ‣ ‣ -webkit-gradient ‣ Opera SVG Takashi Kikuchi
  80. 80. demo Takashi Kikuchi
  81. 81. CSS3 Takashi Kikuchi
  82. 82. CSS3 ‣ : ‣-webkit-, -moz-, -ms-,-o-, ‣ web : CSS ‣ Takashi Kikuchi
  83. 83. CSS3 ‣ CSS3 ‣ ‣ ‣ ‣ invalid Takashi Kikuchi
  84. 84. CSS3 ‣ CSS3 ‣ ‣ ‣ ‣ Takashi Kikuchi
  85. 85. demo Takashi Kikuchi
  86. 86. MAX Takashi Kikuchi
  87. 87. demo Takashi Kikuchi
  88. 88. From now Takashi Kikuchi
  89. 89. CSS Takashi Kikuchi
  90. 90. -webkit- -ms- -moz- Takashi Kikuchi
  91. 91. CSS3 Takashi Kikuchi
  92. 92. Adobe Max09 Takashi Kikuchi
  93. 93. Takashi Kikuchi
  94. 94. Takashi Kikuchi
  95. 95. More Read http://old.macedition.com/cb/cb_20030616.php http://www.mezzoblue.com/archives/2003/06/25/mose/ http://developer.yahoo.com/yui/articles/gbs/ Takashi Kikuchi

×