Your SlideShare is downloading. ×
La mode se démode, le style jamais - Daniel Glazman - Paris Web 2008
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

1,881
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 …

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

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,881
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
10
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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. 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. 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. 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. Selectors Level 3 :nth-child() et consorts sélecteurs d'attributs @namespace :not() ::selection / - ParisWeb 2008 - 14-nov-2008
  • 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. 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. 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. 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. 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. 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. Borders and backgrounds #3 border-radius border-break box-shadow: 0.2em 0.2em #888 (ENFIN !) / - ParisWeb 2008 - 14-nov-2008
  • 13. CSS Transformations transform: scale rotate translate skew matrix transform-origin / - ParisWeb 2008 - 14-nov-2008
  • 14. CSS Transitions transition-property transition-duration transition-timing-function transition-delay Démo avec Safari... / - ParisWeb 2008 - 14-nov-2008
  • 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. 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. 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. 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. 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. 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. 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. 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

×