La mode se démode, le style jamais - Daniel Glazman - Paris Web 2008
22
La mode se démode, le <style> jamais... ou "Si vous n'avez pas d'ID, ayez de la class" 14-nov-2008 @ ParisWeb 2008 Daniel Glazman (Disruptive Innovations) / - ParisWeb 2008 - 14-nov-2008
-
Upload
association-paris-web -
Category
Technology
-
view
1.903 -
download
0
description
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.
Transcript of La mode se démode, le style jamais - Daniel Glazman - Paris Web 2008
La mode se démode,le <style> jamais...
ou
"Si vous n'avez pas d'ID, ayez de la class"
14-nov-2008 @ ParisWeb 2008
Daniel Glazman (Disruptive Innovations)
/ - ParisWeb 2008 - 14-nov-2008
Rappels pour les absents en 2006Bert Bos et Håkon Lie 1993-1995CSS 1: 1996CSS 2: 1998CSS 3: en cours depuis euh bah oui 1998...
/ - ParisWeb 2008 - 14-nov-2008
Le CSS WG"Recharterisé" pour deux ansPeter Linss et ma pomme co-chair, Bert Bos staff contactPriorité des priorités : CSS 2.1 en REC !!!!Autres priorités hautes :
CSS Backgrounds and Borders Level 3CSS Color Level 3CSS Mobile Profile 2.0CSS NamespacesCSS Object Model View ModuleCSS Paged Media Level 3CSS Snapshot 2007CSS VariablesMedia QueriesSelectors Level 3
/ - ParisWeb 2008 - 14-nov-2008
CSS 2.1remplacera CSS 2corrige les erreurs et les ambiguitésvire ce qui est inimplémentable ou inimplémenté ou inutiliséajouts minimes de standards de faitsuite de tests, critères de conformité W3C
/ - ParisWeb 2008 - 14-nov-2008
Selectors Level 3:nth-child() et consortssélecteurs d'attributs@namespace:not()::selection
/ - ParisWeb 2008 - 14-nov-2008
Selectors Level 3 (demo)Tableaux complexes avec juste un ID...
Title Currentstatus
Upcomingstatus Editors
CSS 2.1 CR PR Bert Bos, Tantek Çelik, Ian Hickson, HåkonWium Lie
Selectors Level 3 LC LC Tantek Çelik, Daniel Glazman, Ian HicksonCSS Mobile Profile
2.0 CR PR Svante Schubert
CSS Marquee Level3 LC CR Bert Bos
CSS Namespaces CR PR Elika Etemad, Anne van Kesteren
/ - ParisWeb 2008 - 14-nov-2008
Le retour de marquee !!!Solution basée sur les CSSAbsolument nécessaire pour les marchés asiatiquesNouvelles propriétés :
overflow-style: auto|marquee-block|marquee-linemarquee-style: scroll | slide | alternatemarquee-play-count: integer | infinitemarquee-direction and marquee-speed
/ - ParisWeb 2008 - 14-nov-2008
CSS Media QueriesSélection des media selon leurs caractéristiques intrinsèques
@media screen and (max-width: 501px) { ... }
/ - ParisWeb 2008 - 14-nov-2008
November 10, 2008 -- Updated 0936 GMT (1736 HKT) Make CNN Your Home Page
Tsvangirai rejectssharing Zimbabwe policeZimbabwe President Robert Mugabe's mainopponent has flatl rejected a proposal from
Top Stories
CNN Wor
HOME ASIA EUROPE U.S. WORLD WORLD BUSINESS TECHNOLOGY ENTERTAINMENT WORLD SPORT TRAVEL
Triple bombings in Baghdad kill at least 28 13min 13 min
Strong earthquake shakes western ChinaWorld markets surge on China stimulus 51min 51 min
Obama team reviewing 'virtually every agency'Afghan governor: U.S. forces killed guardsFrantic volunteers rush to Haiti school ruinsIconic 'Mama Africa' singer Makeba diesTicker: Schwarzenegger 'back into thebedroom'High speed train hits concrete slabs 54 min 54min
Georgia: Police killed by land mineStudy: Headphones may affect pacemakersItaly forms political refugee soccer team Hurricane aftermath: Is that my cow? CNN Wire: Latest updates on top stories
Vide
Zimbabwfails 2:37
Hot Topics » Congo • Haiti • CNN Politics • Barack Obama • CNN Heroes • more topics »
CSS Media Queries (demo)
/ - ParisWeb 2008 - 14-nov-2008
Borders and backgroundsbackground-repeat: space | roundbackground-attachment: localbackground-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
Borders and backgrounds #2background-image !!!
Prenons l'image Appliquons border-image: url("border.png") 27 roundstretch;et border: double orange 1em
/ - ParisWeb 2008 - 14-nov-2008
Borders and backgrounds #3border-radius
border-break
box-shadow: 0.2em 0.2em #888 (ENFIN !)
/ - ParisWeb 2008 - 14-nov-2008
CSS Transformationstransform: scale rotate translate skew matrixtransform-origin
/ - ParisWeb 2008 - 14-nov-2008
CSS Transitionstransition-propertytransition-durationtransition-timing-functiontransition-delay
Démo avec Safari...
/ - ParisWeb 2008 - 14-nov-2008
Valeurs, Unités et autresAttention 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 Textrem la taille de fonte de la racine du documentvw %age de la largeur du viewportvh %age de la hauteur du viewportvm %age du min de la largeur et la hauteur du viewportch la largeur du glyphe "0"
/ - ParisWeb 2008 - 14-nov-2008
CSS Multi-Column Layoutcolumn-countcolumn-widthcolumn-gapcolumn-rulecolumn-break-{after|before}column-fillcolumn-span
/ - ParisWeb 2008 - 14-nov-2008
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 temporincididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrudexercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis auteirure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nullapariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officiadeserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus errorsit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsaquae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
/ - ParisWeb 2008 - 14-nov-2008
CSS 3 Colorsopacityrgba(r, g, b, alpha)hsl(hue, saturation, lightness)hsla(hue, saturation, lightness, alpha)noms de couleurs de SVG 1.0curentColorDépréciation des couleurs "système" CSS2
/ - ParisWeb 2008 - 14-nov-2008
CSS 3 Basic UI:active, :default, :valid, :invalid, :required, :optional, :read-only,...::value, ::choices, ...propriété 'appearance'box-sizing (ahlalalala...)outlineresizenav-index, nav-up, nav-right, ...
/ - ParisWeb 2008 - 14-nov-2008
CSS 3 Textwhite-space-collapse: preserve | collapse | preserve-breaks |discardtext-wrap: normal | unrestricted | none | suppresswhite-space devient un shorthand des deux précédentesword-break: normal | keep-all | loose | break-strict | break-allword-wrap: normal | break-wordtext-align, text-align-last, text-justifyword-spacing, letter-spacing, punctation-trimtext-emphasis, text-shadow, text-outlinetext-indent, hanging-punctuation
/ - ParisWeb 2008 - 14-nov-2008
Nespresso CSS, What Else?CSS Gradients, une proposition d'AppleCSS Grid Positioning et CSS Template Layout@font-face ENFIN partout !CSS Flexible Box Model ?CSS Generated Content for Paged MediaCSS Variables ou CSS Constants?Une amélioration franche de CSS Positioning pourpositionner enfin un élément relativement à n'importe quelautre élément ?
/ - ParisWeb 2008 - 14-nov-2008
Le Livre du Grand Touthttp://www.w3.org/Style/CSS/current-workhttp://disruptive-innovations.com/zoo/slides/20081114-PW2008
Questions ?
/ - ParisWeb 2008 - 14-nov-2008
