Successfully reported this slideshow.
La mode se démode,
   le <style> jamais...
                         ou


quot;Si vous n'avez pas d'ID, ayez de la classquo...
Rappels pour les absents en 2006
 Bert Bos et Håkon Lie 1993-1995
 CSS 1: 1996
 CSS 2: 1998
 CSS 3: en cours depuis euh ba...
Le CSS WG
quot;Recharteriséquot; pour deux ans
Peter Linss et ma pomme co-chair, Bert Bos staff contact
Priorité des prior...
CSS 2.1
remplacera CSS 2
corrige les erreurs et les ambiguités
vire ce qui est inimplémentable ou inimplémenté ou inutilis...
Selectors Level 3
:nth-child() et consorts
sélecteurs d'attributs
@namespace
:not()
::selection




                  / - ...
Selectors Level 3 (demo)
Tableaux complexes avec juste un ID...



                      Current    Upcoming
       Title ...
Le retour de marquee !!!
Solution basée sur les CSS
Absolument nécessaire pour les marchés asiatiques
Nouvelles propriétés...
CSS Media Queries
Sélection des media selon leurs caractéristiques intrinsèques

   @media screen and (max-width: 501px) {...
CSS Media Queries (demo)



 HOME     ASIA   EUROPE    U.S.   WORLD     WORLD BUSINESS      TECHNOLOGY      ENTERTAINMENT ...
Borders and backgrounds
background-repeat: space | round
background-attachment: local
background-clip: border-box | paddin...
Borders and backgrounds #2
background-image !!!


   Prenons l'image
   Appliquons border-image: url(quot;border.pngquot;)...
Borders and backgrounds #3
border-radius

border-break

box-shadow: 0.2em 0.2em #888 (ENFIN !)




                / - Par...
CSS Transformations
transform: scale rotate translate skew matrix
transform-origin




                 / - ParisWeb 2008 ...
CSS Transitions
   transition-property
   transition-duration
   transition-timing-function
   transition-delay

Démo avec...
Valeurs, Unités et autres
Attention les yeux !!!

 width: calc(100%/3 - 2*1em - 2*1px);



Typage de attr() et généralisat...
CSS Multi-Column Layout
column-count
column-width
column-gap
column-rule
column-break-{after|before}
column-fill
column-sp...
CSS Multi-Column Layout (demo)
  #multicol {
    column-count: 3;
    column-rule: thick groove red;
  }




Lorem ipsum d...
CSS 3 Colors
opacity
rgba(r, g, b, alpha)
hsl(hue, saturation, lightness)
hsla(hue, saturation, lightness, alpha)
noms de ...
CSS 3 Basic UI
:active, :default, :valid, :invalid, :required, :optional, :read-only,
...
::value, ::choices, ...
propriét...
CSS 3 Text
white-space-collapse: preserve | collapse | preserve-breaks |
discard
text-wrap: normal | unrestricted | none |...
Nespresso CSS, What Else?
CSS Gradients, une proposition d'Apple
CSS Grid Positioning et CSS Template Layout
@font-face EN...
Le Livre du Grand Tout
http://www.w3.org/Style/CSS/current-work
http://disruptive-innovations.com/zoo/slides/20081114-PW20...
Upcoming SlideShare
Loading in …5
×

La mode se démode, le style jamais - Daniel Glazman - Paris Web 2008

2,821 views

Published on

Après dix années de « Browser Peace », la nouvelle « Browser War » en cours entre Firefox 3, Internet Explorer 8, Opera 9 et Webkit offre enfin de grandes avancées sur les CSS et une harmonisation des implémentations. Nous allons faire le point sur les nouveautés des CSS 3 ainsi que sur les dernières propositions faites au CSS Working Group.

Published in: Technology
  • Be the first to comment

La mode se démode, le style jamais - Daniel Glazman - Paris Web 2008

  1. 1. La mode se démode, le <style> jamais... ou quot;Si vous n'avez pas d'ID, ayez de la classquot; 14-nov-2008 @ ParisWeb 2008 Daniel Glazman (Disruptive Innovations) / - ParisWeb 2008 - 14-nov-2008
  2. 2. Rappels pour les absents en 2006 Bert Bos et Håkon Lie 1993-1995 CSS 1: 1996 CSS 2: 1998 CSS 3: en cours depuis euh bah oui 1998... / - ParisWeb 2008 - 14-nov-2008
  3. 3. Le CSS WG quot;Recharteriséquot; pour deux ans Peter Linss et ma pomme co-chair, Bert Bos staff contact Priorité des priorités : CSS 2.1 en REC !!!! Autres priorités hautes : CSS Backgrounds and Borders Level 3 CSS Color Level 3 CSS Mobile Profile 2.0 CSS Namespaces CSS Object Model View Module CSS Paged Media Level 3 CSS Snapshot 2007 CSS Variables Media Queries Selectors Level 3 / - ParisWeb 2008 - 14-nov-2008
  4. 4. CSS 2.1 remplacera CSS 2 corrige les erreurs et les ambiguités vire ce qui est inimplémentable ou inimplémenté ou inutilisé ajouts minimes de standards de fait suite de tests, critères de conformité W3C / - ParisWeb 2008 - 14-nov-2008
  5. 5. Selectors Level 3 :nth-child() et consorts sélecteurs d'attributs @namespace :not() ::selection / - ParisWeb 2008 - 14-nov-2008
  6. 6. Selectors Level 3 (demo) Tableaux complexes avec juste un ID... Current Upcoming Title Editors status status Bert Bos, Tantek Çelik, Ian Hickson, Håkon CSS 2.1 CR PR Wium Lie Selectors Level 3 LC LC Tantek Çelik, Daniel Glazman, Ian Hickson CSS Mobile Profile CR PR Svante Schubert 2.0 CSS Marquee Level LC CR Bert Bos 3 CSS Namespaces CR PR Elika Etemad, Anne van Kesteren / - ParisWeb 2008 - 14-nov-2008
  7. 7. Le retour de marquee !!! Solution basée sur les CSS Absolument nécessaire pour les marchés asiatiques Nouvelles propriétés : overflow-style: auto|marquee-block|marquee-line marquee-style: scroll | slide | alternate marquee-play-count: integer | infinite marquee-direction and marquee-speed / - ParisWeb 2008 - 14-nov-2008
  8. 8. CSS Media Queries Sélection des media selon leurs caractéristiques intrinsèques @media screen and (max-width: 501px) { ... } / - ParisWeb 2008 - 14-nov-2008
  9. 9. CSS Media Queries (demo) HOME ASIA EUROPE U.S. WORLD WORLD BUSINESS TECHNOLOGY ENTERTAINMENT WORLD SPORT TRAVEL Hot Topics » Congo • Haiti • CNN Politics • Barack Obama • CNN Heroes • more topics » November 10, 2008 -- Updated 0936 GMT (1736 HKT) Make CNN Your Home Page Vide Top Stories Triple bombings in Baghdad kill at least 28 13 min 13 min Strong earthquake shakes western China Zimbabw World markets surge on China stimulus 51 fails 2:37 min 51 min Obama team reviewing 'virtually every agency' Afghan governor: U.S. forces killed guards CNN Wor Frantic volunteers rush to Haiti school ruins Iconic 'Mama Africa' singer Makeba dies Ticker: Schwarzenegger 'back into the bedroom' High speed train hits concrete slabs 54 min 54 min Georgia: Police killed by land mine Tsvangirai rejects Study: Headphones may affect pacemakers sharing Zimbabwe police Italy forms political refugee soccer team Hurricane aftermath: Is that my cow? Zimbabwe President Robert Mugabe's main CNN Wire: Latest updates on top stories opponent has flatl rejected a proposal from / - ParisWeb 2008 - 14-nov-2008
  10. 10. Borders and backgrounds background-repeat: space | round background-attachment: local background-clip: border-box | padding-box | content-box | no-clip (*2) background-origin: border-box | padding-box | content-box (*2) background-size (ENFIN !) background-break / - ParisWeb 2008 - 14-nov-2008
  11. 11. Borders and backgrounds #2 background-image !!! Prenons l'image Appliquons border-image: url(quot;border.pngquot;) 27 round stretch; et border: double orange 1em / - ParisWeb 2008 - 14-nov-2008
  12. 12. Borders and backgrounds #3 border-radius border-break box-shadow: 0.2em 0.2em #888 (ENFIN !) / - ParisWeb 2008 - 14-nov-2008
  13. 13. CSS Transformations transform: scale rotate translate skew matrix transform-origin / - ParisWeb 2008 - 14-nov-2008
  14. 14. CSS Transitions transition-property transition-duration transition-timing-function transition-delay Démo avec Safari... / - ParisWeb 2008 - 14-nov-2008
  15. 15. Valeurs, Unités et autres Attention les yeux !!! width: calc(100%/3 - 2*1em - 2*1px); Typage de attr() et généralisation de la propriété content ! Nouvelles unités : Unité Relative à gd la grille définie par layout-grid dans le module CSS 3 Text rem la taille de fonte de la racine du document vw %age de la largeur du viewport vh %age de la hauteur du viewport vm %age du min de la largeur et la hauteur du viewport ch la largeur du glyphe quot;0quot; / - ParisWeb 2008 - 14-nov-2008
  16. 16. CSS Multi-Column Layout column-count column-width column-gap column-rule column-break-{after|before} column-fill column-span / - ParisWeb 2008 - 14-nov-2008
  17. 17. CSS Multi-Column Layout (demo) #multicol { column-count: 3; column-rule: thick groove red; } Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. / - ParisWeb 2008 - 14-nov-2008
  18. 18. CSS 3 Colors opacity rgba(r, g, b, alpha) hsl(hue, saturation, lightness) hsla(hue, saturation, lightness, alpha) noms de couleurs de SVG 1.0 curentColor Dépréciation des couleurs quot;systèmequot; CSS2 / - ParisWeb 2008 - 14-nov-2008
  19. 19. CSS 3 Basic UI :active, :default, :valid, :invalid, :required, :optional, :read-only, ... ::value, ::choices, ... propriété 'appearance' box-sizing (ahlalalala...) outline resize nav-index, nav-up, nav-right, ... / - ParisWeb 2008 - 14-nov-2008
  20. 20. CSS 3 Text white-space-collapse: preserve | collapse | preserve-breaks | discard text-wrap: normal | unrestricted | none | suppress white-space devient un shorthand des deux précédentes word-break: normal | keep-all | loose | break-strict | break-all word-wrap: normal | break-word text-align, text-align-last, text-justify word-spacing, letter-spacing, punctation-trim text-emphasis, text-shadow, text-outline text-indent, hanging-punctuation / - ParisWeb 2008 - 14-nov-2008
  21. 21. Nespresso CSS, What Else? CSS Gradients, une proposition d'Apple CSS Grid Positioning et CSS Template Layout @font-face ENFIN partout ! CSS Flexible Box Model ? CSS Generated Content for Paged Media CSS Variables ou CSS Constants? Une amélioration franche de CSS Positioning pour positionner enfin un élément relativement à n'importe quel autre élément ? / - ParisWeb 2008 - 14-nov-2008
  22. 22. Le Livre du Grand Tout http://www.w3.org/Style/CSS/current-work http://disruptive-innovations.com/zoo/slides/20081114-PW2008 Questions ? / - ParisWeb 2008 - 14-nov-2008

×