Your SlideShare is downloading. ×
0
INTÉGRATEURS
Bousculez vos habitudes !
Photo : fotolia
#F34R
RAPHAËL GOETTER
alsacréations
alsacreations.comgoetter.frknacss.comPhotomontage (odieux) : @diou
Les navigateurs ont évolué
HTML et CSS ont mûri
Les besoins, les projets, les utilisateurs ont changé
Notre métier n'est p...
« S »
Agence web
Située en Alsace
8 personnes
Compétences diverses
Pas de commercial
Projets variés
TADAAAM !
1998 (qui dit mieux?)
TADAAAM !
1998 (qui dit mieux?)
doctype ?
Frontpage
CSS !
MAIS ÇA C'ÉTAIT AVANT !
balises propriétaires
spacer.gif
<table>
IE 5 / Netscape 4
applets Javafrontpage
framesets
WYSIWYG...
C'ÉTAIT L'BON TEMPS !
On a tous commencé un jour...
Photo : fotolia
nos
habitudes ?
nos
habitudes ?
dogmes
tableaux de mise en page
FrontPage, Dreamweaver
divite, classite
Flash
JavaScript
IE6 (IE tout court ?)
sélecteur joker *
...
HTML épuré
CSS épuré
modèle de boîte standard
id pour les éléments uniques
classes pour des éléments multiples
fermer les ...
les frameworks HTML / CSS
les préprocesseurs CSS
ON SAIT PAS TROP !
dans la
vraie vie...
dans la
vraie vie...
Ben... ça dépend
Des délais à respecter
il faut aller vite, être productif, s’adapter
Des intervenants multiples
des experts, des novices, ...
ALEXA.COM
Top 1000 rank
12% plus de 50 fois→ !important
13% plus de 100 fois→ float
25% plus de 100 fois→ font-size
Facebo...
ALEXA.COM
Top 1000 rank
12% plus de 50 fois→ !important
13% plus de 100 fois→ float
25% plus de 100 fois→ font-size
Facebo...
C'EST MAL ! C'EST BIEN !EUH ?
tableaux de mise en page
FrontPage, Dreamweaver
divite, classite
Flash
JavaScript
IE6 (IE to...
C'EST MAL ! C'EST BIEN !EUH ?
tableaux de mise en page
FrontPage, Dreamweaver
divite, classite
Flash
JavaScript
IE6 (IE to...
Bousculons nos dogmes !
#osons!
ou pas !ou pas !ou pas !
C'EST MAL ! C'EST BIEN !EUH ?
Box-sizing c'est super dangereux et ça pique
– moi
“ Les préprocesseurs CSS, ça sert à rien
– encore moi
“ Chrome est un s...
http://wiki.csswg.org/ideas/mistakes
Nos techniques Nos outils Nos méthodes
BOUSCULONS NOS HABITUDES !
❶ ❷ ❸
#positionnements
#box-sizing
#sélecteurs
#préfixes...
NOS TECHNIQUES
❶
❶POSITIONNEMENT CSS
frames, <table>
position : absolute
float
display : inline-block
display : table-cell
columns
flexbox
...
❶POSITIONNEMENT CSS
Display : inline-block
<p>
<blockquote>
p {
display: inline-block;
width: 10em;
}
blockquote ~ p {
ver...
❶POSITIONNEMENT CSS
ul {
display: table;
}
li {
display: table-cell;
width: 20%;
}
li:hover {
width: 40%;
}
kiwi.gg/tablen...
La meilleure
technique ?
Ça dépend !
hu hu
BOX-SIZING CSS3
Photo : flickr jing_dong
❶
❶BOX-SIZING CSS3
div {
width: 50%;
padding: 1em;
border-width: 1px;
}
50% + 2em + 2px 50% + 2em + 2px
❶BOX-SIZING CSS3
div {
width: 50%;
padding: 1em;
border-width: 1px;
}
box-sizing: border-box;
50% 50%
❶BOX-SIZING CSS3
88
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
❶
SÉLECTION D'ÉLÉMENTS
❶SÉLECTION D'ÉLÉMENTS
jQuery of course !
Made by Chuck Norris
<script>
$("input[name*='man']").css("background","red");
</...
❶SÉLECTION D'ÉLÉMENTS
jQuery of course !
Made by Chuck Norris
#really ?
<script>
$("input[name*='man']").css("background",...
❶SÉLECTION D'ÉLÉMENTS
:first-child premier enfant→
élt + élt frère suivant direct→
élt ~ élt tous les frères suivants→
[at...
:first-child
élt + élt
élt ~ élt
[attr^="valeur"]
[attr$="valeur"]
[attr*="valeur"]
élt:hover
❶SÉLECTION D'ÉLÉMENTS
Sélect...
❶SÉLECTION D'ÉLÉMENTS
jQuery of course (ou pas) !
[name*=man] {
background: red;
}
=
<script>
$("input[name*='man']").css(...
❶
li:first-child + li + li {
background-color: yellow;
}
SÉLECTION D'ÉLÉMENTS
Cibler le 3e <li> ? Facile !
:first-child
él...
❶
[class^="icon-"] {
ici des trucs cools
}
.icon-info,
.icon-mail,
.icon-skyblog,
.icon-post,
.icon-delete,
...
SÉLECTION ...
❶PRÉFIXES CONSTRUCTEURS
-webkit-
-moz-
-ms- -o-
-khtml-
mso-
-xv--apple-
-rim- -wap-
-hp-
❶PRÉFIXES CONSTRUCTEURS
div {
-webkit-border-radius : 50%;
-moz-border-radius : 50%;
-ms-border-radius : 50%;
-o-border-ra...
❶PRÉFIXES CONSTRUCTEURS
div {
-webkit-border-radius : 50%;
-moz-border-radius : 50%;
-ms-border-radius : 50%;
-o-border-ra...
❶PRÉFIXES CONSTRUCTEURS
div {
-webkit-border-radius : 50%;
-moz-border-radius : 50%;
-ms-border-radius : 50%;
-o-border-ra...
❶PRÉFIXES CONSTRUCTEURS
border-radius, text-shadow,
box-shadow, opacity non→
box-sizing uniquement -moz-→
transition, anim...
❶PRÉFIXES CONSTRUCTEURS
border-radius, text-shadow,
box-shadow, opacity non→
box-sizing uniquement -moz-→
transition, anim...
❶PRÉFIXES CONSTRUCTEURS
Prefixr.com
Autoprefixer
-prefix-free
Plugins (SublimeText, Notepad, etc.)
LESS, Sass / Compass, S...
❶
Explorons d'autres positionnements
Adoptons box-sizing
Employons des sélecteurs « avancés »
Laissons-tomber (certains) p...
BOUSCULONS
NOS OUTILS ❷
FRAMEWORKS HTML / CSS
Un « kit » pour faciliter la productivité ❷
FRAMEWORKS HTML / CSS
Ce que propose un framework ❷
Un Reset CSS
Une base réutilisable
Des grilles
Des boutons
Des tableau...
FRAMEWORKS HTML / CSS
Choisissez ou construisez le votre ! ❷
Ouch !
PRÉPROCESSEURS CSS
Du code qui produit du code ! ❷
styles.less LESS styles.css
PRÉPROCESSEURS CSS
Des variables en CSS ❷@basefont : 1em;
@largescreen : 1280px;
body {
font-size: @basefont + .2em;
}
@me...
PRÉPROCESSEURS CSS
Une notation imbriquée ❷
styles.less
styles.css
.sidebar a {
color: tomato;
&:hover, &:focus, &:active ...
PRÉPROCESSEURS CSS
Des calculs et des « fonctions » ❷
styles.less
styles.css
p { .em(20px); }
div { .em(18px); }
p {
font-...
@column-width: 60;
@gutter-width: 20;
@columns: 12;
header { .column(12); }
article { .column(9); }
aside { .column(3); }
...
PRÉPROCESSEURS CSS
Contribuent à la maintenance d'un projet ❷
Feuilles de styles allégées en
développement,
Maintenance et...
Photo : fotolia
utilisons des frameworks
passons par des préprocesseurs
BOUSCULONS NOS OUTILS
En résumé... ❷
un peu
Bien !
(si pré-requis
...
BOUSCULONS
NOS METHODES ❸
Photo : flickr - kalexanderson
AYEZ DES CONVENTIONS !
❸Convention HTML / CSS / JS
Conventions de langue (français / anglais)
Conventions de syntaxe (espace / indentation)
Conve...
❸Google HTML / CSS style guide
GitHub CSS styleguide
GitHub JavaScript styleguide
WordPress CSS coding standards
WordPress...
LE « CAS » INTERNET EXPLORER
❸
LE « CAS » INTERNET EXPLORER
❸Internet Explorer, c'est de la ***
– quelqu'un
“ « Optimisé pour Internet Explorer »
– un vi...
LE « CAS » INTERNET EXPLORER
❸IE... c'est plus ce que c'était ! ...
LE « CAS » INTERNET EXPLORER
❸IE... c'est plus ce que c'était ! ...
«compatible» IE ?
(#really?)
IE11 est un
super navigateur
Photo : flickr - Taylor Dawn Fortune
ID ou CLASS ?
❸
Photo : Igor Maynaud
ID ou CLASS ?
❸Les « id » c'est pour des éléments uniques dans la page
– quelqu'un qui n'a pas tort
“ Les « class » c'est ...
Photo : Pizza Hut
* > + ~
element / pseudo
class / pseudo / [attr]
ID
style="..."
!important
Spécificité
des sélecteurs
CSS
Photo : Pizza Hut
* > + ~
element / pseudo
class / pseudo / [attr]
ID
style="..."
!important
Spécificité
des sélecteurs
CSS
ID ou CLASS ?
❸
Les id peuvent être nécessaires
en HTML (ancres, formulaires,
nommage, JavaScript)
Un élément unique ne do...
ID ou CLASS ?
<ul id=″first″>
<li><a>...</a></li>
<li><a>...</a></li>
<li><a>...</a></li>
</ul>
#first a {
background: ora...
ID ou CLASS ?
<ul id=″first″>
<li><a>...</a></li>
<li><a>...</a></li>
<li><a>...</a></li>
</ul>
#first a {
background: ora...
ID ou CLASS ?
<ul id=″first″>
<li><a>...</a></li>
<li><a>...</a></li>
<li><a>...</a></li>
</ul>
#first a {
background: ora...
ID ou CLASS ?
<ul id=″first″>
<li><a>...</a></li>
<li><a>...</a></li>
<li><a>...</a></li>
</ul>
#first a {
background: ora...
ID ou CLASS ?
<ul class=″first″>
<li><a>...</a></li>
<li><a>...</a></li>
<li><a>...</a></li>
</ul>
.first a {
background: ...
ID ou CLASS ?
<ul id=″first″>
<li><a>...</a></li>
<li><a>...</a></li>
<li><a>...</a></li>
</ul>
[id=first] a {
background:...
#efficacité
#réutilisabilité
#maintenabilité
❸existe en plugin
pour votre éditeur
DES CSS « OBJETS » ?
❸
CSS
objet
CSS « OBJETS »
❸
Intégrez-moi ça !
(ASAP)
CSS « OBJETS »
❸
#header {
truc: machin;
}
#sidebar {
truc: machin;
}
#main {
truc: machin;
}
#footer {
truc: machin;
}
#main {
truc: machin;
}
#main .news {
truc: machin;
}
#main #alaune .news {
truc: machin;
}
CSS « OBJETS »
❸
#sidebar #edi...
#main {
truc: machin;
}
#main .news {
truc: machin;
}
#main #alaune .news {
truc: machin;
}
CSS « OBJETS »
❸
#sidebar #edi...
#main {
truc: machin;
}
#main .news {
truc: machin;
}
#main #alaune .news {
truc: machin;
}
CSS « OBJETS »
❸
#sidebar #edi...
CSS « OBJETS »
❸
✔
Largeur adaptable (fluide)
✔
Doit contenir les flottants
✔ Peut contenir une image
(à gauche, largeur i...
CSS « OBJETS »
❸
✔
Largeur adaptable (fluide)
✔
Doit contenir les flottants
✔ Peut contenir une image
(à gauche, largeur i...
CSS « OBJETS »
❸
✔
Largeur adaptable (fluide)
✔
Doit contenir les flottants
✔ Peut contenir une image
(à gauche, largeur i...
CSS « OBJETS »
❸
✔
Largeur adaptable (fluide)
✔
Doit contenir les flottants
✔ Peut contenir une image
(à gauche, largeur i...
CSS « OBJETS »
❸
✔
Largeur adaptable (fluide)
✔
Doit contenir les flottants
✔ Peut contenir une image
(à gauche, largeur i...
CSS « OBJETS »
❸
parentfloat parentfloat
Block Formatting Context
parent {overflow : hidden;}
CSS « OBJETS »
❸
frèrefloat frèrefloat
Block Formatting Context
frère {overflow : hidden;}
dont le
contenu
s'écoule autour...
CSS « OBJETS »
❸
.mod {
overflow: hidden;
}
.mod > img {
float: left;
}
.mod > .inner {
overflow: hidden;
}
CSS « OBJETS »
❸
<div id="wrapper" class="line w80"></div>
<section class="info mod pr0"></section>
<nav id="navigation" r...
CSS « OBJETS »
❸OOCSS
Nicole Sullivan
SMACSS
Jonathan Snooks
http://oocss.org http://smacss.com/
Ayons des conventions !
Reconsidérons (doucement) Internet Explorer
Évitons les sélecteurs id si possible
Appliquons des C...
SAINES LECTURES
Pour vos longues soirées d'hiver...
SAINES RESSOURCES
Pour votre veille technologique constante
MERCI, À LA
PROCHAINE !
Polices :
Delicious heavy
Annie Use Your Telescope
Pictos :
Design Bolts
Capital18
Artua
Raphaël G...
Intégrateurs, bousculez vos habitudes
Intégrateurs, bousculez vos habitudes
Upcoming SlideShare
Loading in...5
×

Intégrateurs, bousculez vos habitudes

19,266

Published on

Depuis que je fais de l'intégration (un paquet d'années), j'ai toujours été très concerné par les standards, l'accessibilité et la sémantique.
Il se trouve cependant qu'avec l'expérience, on se rend compte que les contraintes de production et de performances ont bien évolué en 15 ans : à force de respecter d'antiques préceptes on crée des fichiers CSS lourds, redondant, et non réutilisables. C'est pourquoi 12% des plus gros sites mondiaux comptent plus de 50 occurences de "!important".

Ces aberrations peuvent être évitées en utilisant judicieusement des CSS efficaces.
Nicole Sullivan (ex-Yahoo!) a ouvert la voie en créant "OOCSS" (CSS orientés “objet”), d’autres tels que Jonathan Snooks ou Kaelig Deloumeau-Prigent ont suivi le mouvement.

Voyons quelles réelles remises en question nous attendent pour parvenir à nos fins.

Published in: Technology
5 Comments
24 Likes
Statistics
Notes
No Downloads
Views
Total Views
19,266
On Slideshare
0
From Embeds
0
Number of Embeds
65
Actions
Shares
0
Downloads
139
Comments
5
Likes
24
Embeds 0
No embeds

No notes for slide

Transcript of "Intégrateurs, bousculez vos habitudes"

  1. 1. INTÉGRATEURS Bousculez vos habitudes ! Photo : fotolia #F34R
  2. 2. RAPHAËL GOETTER alsacréations alsacreations.comgoetter.frknacss.comPhotomontage (odieux) : @diou
  3. 3. Les navigateurs ont évolué HTML et CSS ont mûri Les besoins, les projets, les utilisateurs ont changé Notre métier n'est plus le même Il est indispensable de nous adapter ! #CONTEXTE
  4. 4. « S » Agence web Située en Alsace 8 personnes Compétences diverses Pas de commercial Projets variés
  5. 5. TADAAAM ! 1998 (qui dit mieux?)
  6. 6. TADAAAM ! 1998 (qui dit mieux?) doctype ? Frontpage CSS !
  7. 7. MAIS ÇA C'ÉTAIT AVANT ! balises propriétaires spacer.gif <table> IE 5 / Netscape 4 applets Javafrontpage framesets WYSIWYG <font> position : absolute <center> style= colspan
  8. 8. C'ÉTAIT L'BON TEMPS ! On a tous commencé un jour... Photo : fotolia
  9. 9. nos habitudes ?
  10. 10. nos habitudes ? dogmes
  11. 11. tableaux de mise en page FrontPage, Dreamweaver divite, classite Flash JavaScript IE6 (IE tout court ?) sélecteur joker * préfixes constructeurs C'EST MAL !
  12. 12. HTML épuré CSS épuré modèle de boîte standard id pour les éléments uniques classes pour des éléments multiples fermer les balises HTML être valide W3C jQuery (et ses copains) C'EST BIEN !
  13. 13. les frameworks HTML / CSS les préprocesseurs CSS ON SAIT PAS TROP !
  14. 14. dans la vraie vie...
  15. 15. dans la vraie vie... Ben... ça dépend
  16. 16. Des délais à respecter il faut aller vite, être productif, s’adapter Des intervenants multiples des experts, des novices, des développeurs, graphistes Au secours, un nouveau ! l’équipe évolue, des nouveaux arrivent pendant le projet Un projet et ses specs évoluent toujours produire un code cohérent, souple et réutilisable
  17. 17. ALEXA.COM Top 1000 rank 12% plus de 50 fois→ !important 13% plus de 100 fois→ float 25% plus de 100 fois→ font-size Facebook … 261 valeurs de la couleur bleue Photo : fotolia Les styles CSS des gros sites mondiaux :
  18. 18. ALEXA.COM Top 1000 rank 12% plus de 50 fois→ !important 13% plus de 100 fois→ float 25% plus de 100 fois→ font-size Facebook … 261 valeurs de la couleur bleue Photo : fotolia Les styles CSS des gros sites mondiaux : lourd pas maintenable MAL pas performantpas compréhensible
  19. 19. C'EST MAL ! C'EST BIEN !EUH ? tableaux de mise en page FrontPage, Dreamweaver divite, classite Flash JavaScript IE6 (IE tout court ?) sélecteur joker * préfixes constructeurs les frameworks les préprocesseurs HTML épuré CSS épuré modèle de boîte standard id = éléments uniques classes = éléments multiples être valide W3C jQuery (et ses copains) ou pas !ou pas !ou pas !
  20. 20. C'EST MAL ! C'EST BIEN !EUH ? tableaux de mise en page FrontPage, Dreamweaver divite, classite Flash JavaScript IE6 (IE tout court ?) sélecteur joker * préfixes constructeurs les frameworks les préprocesseurs HTML épuré CSS épuré modèle de boîte standard id = éléments uniques classes = éléments multiples être valide W3C jQuery (et ses copains) ou pas !ou pas !ou pas !
  21. 21. Bousculons nos dogmes ! #osons! ou pas !ou pas !ou pas ! C'EST MAL ! C'EST BIEN !EUH ?
  22. 22. Box-sizing c'est super dangereux et ça pique – moi “ Les préprocesseurs CSS, ça sert à rien – encore moi “ Chrome est un super navigateur ! – toujours moi (oui bon hein ça va) “  TOUT LE MONDE PEUT SE TROMPER ! Apprenons de nos erreurs, testons, avançons
  23. 23. http://wiki.csswg.org/ideas/mistakes
  24. 24. Nos techniques Nos outils Nos méthodes BOUSCULONS NOS HABITUDES ! ❶ ❷ ❸ #positionnements #box-sizing #sélecteurs #préfixes #frameworks #préprocesseurs #conventions #InternetExplorer #IDvsCLASS! #OOCSS
  25. 25. NOS TECHNIQUES ❶
  26. 26. ❶POSITIONNEMENT CSS frames, <table> position : absolute float display : inline-block display : table-cell columns flexbox grid layout, regions, ... #FearZone #HoaxZone #NoobZone La « zone de confiance »
  27. 27. ❶POSITIONNEMENT CSS Display : inline-block <p> <blockquote> p { display: inline-block; width: 10em; } blockquote ~ p { vertical-align: top; }
  28. 28. ❶POSITIONNEMENT CSS ul { display: table; } li { display: table-cell; width: 20%; } li:hover { width: 40%; } kiwi.gg/tablenav (+ bonus : apple.com) Display : table
  29. 29. La meilleure technique ? Ça dépend ! hu hu
  30. 30. BOX-SIZING CSS3 Photo : flickr jing_dong ❶
  31. 31. ❶BOX-SIZING CSS3 div { width: 50%; padding: 1em; border-width: 1px; } 50% + 2em + 2px 50% + 2em + 2px
  32. 32. ❶BOX-SIZING CSS3 div { width: 50%; padding: 1em; border-width: 1px; } box-sizing: border-box; 50% 50%
  33. 33. ❶BOX-SIZING CSS3 88 * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
  34. 34. ❶ SÉLECTION D'ÉLÉMENTS
  35. 35. ❶SÉLECTION D'ÉLÉMENTS jQuery of course ! Made by Chuck Norris <script> $("input[name*='man']").css("background","red"); </script>
  36. 36. ❶SÉLECTION D'ÉLÉMENTS jQuery of course ! Made by Chuck Norris #really ? <script> $("input[name*='man']").css("background","red"); </script>
  37. 37. ❶SÉLECTION D'ÉLÉMENTS :first-child premier enfant→ élt + élt frère suivant direct→ élt ~ élt tous les frères suivants→ [attr^="valeur"] attribut qui commence par «valeur»→ [attr$="valeur"] attribut qui termine par «valeur»→ [attr*="valeur"] attribut qui contient «valeur»→ élt:hover élément survolé→ Sélecteurs CSS « avancés »
  38. 38. :first-child élt + élt élt ~ élt [attr^="valeur"] [attr$="valeur"] [attr*="valeur"] élt:hover ❶SÉLECTION D'ÉLÉMENTS Sélecteurs CSS « avancés » qui marchent partout !
  39. 39. ❶SÉLECTION D'ÉLÉMENTS jQuery of course (ou pas) ! [name*=man] { background: red; } = <script> $("input[name*='man']").css("background","red"); </script>
  40. 40. ❶ li:first-child + li + li { background-color: yellow; } SÉLECTION D'ÉLÉMENTS Cibler le 3e <li> ? Facile ! :first-child élt + élt élt ~ élt [attr^="valeur"] [attr$="valeur"] [attr*="valeur"] élt:hover
  41. 41. ❶ [class^="icon-"] { ici des trucs cools } .icon-info, .icon-mail, .icon-skyblog, .icon-post, .icon-delete, ... SÉLECTION D'ÉLÉMENTS Cibler un groupe de classes ? Facile !
  42. 42. ❶PRÉFIXES CONSTRUCTEURS -webkit- -moz- -ms- -o- -khtml- mso- -xv--apple- -rim- -wap- -hp-
  43. 43. ❶PRÉFIXES CONSTRUCTEURS div { -webkit-border-radius : 50%; -moz-border-radius : 50%; -ms-border-radius : 50%; -o-border-radius : 50%; border-radius : 50%; }
  44. 44. ❶PRÉFIXES CONSTRUCTEURS div { -webkit-border-radius : 50%; -moz-border-radius : 50%; -ms-border-radius : 50%; -o-border-radius : 50%; border-radius : 50%; } #noob #noob
  45. 45. ❶PRÉFIXES CONSTRUCTEURS div { -webkit-border-radius : 50%; -moz-border-radius : 50%; -ms-border-radius : 50%; -o-border-radius : 50%; border-radius : 50%; } #noob #noob #old #old
  46. 46. ❶PRÉFIXES CONSTRUCTEURS border-radius, text-shadow, box-shadow, opacity non→ box-sizing uniquement -moz-→ transition, animation, gradients, calc() uniquement -webkit-→ transform -webkit- et -ms-→ shouldiprefix.com
  47. 47. ❶PRÉFIXES CONSTRUCTEURS border-radius, text-shadow, box-shadow, opacity non→ box-sizing uniquement -moz-→ transition, animation, gradients, calc() uniquement -webkit-→ transform -webkit- et -ms-→ flexbox → shouldiprefix.com Oui bon OK, là c'est vraiment le #¶§*¿!
  48. 48. ❶PRÉFIXES CONSTRUCTEURS Prefixr.com Autoprefixer -prefix-free Plugins (SublimeText, Notepad, etc.) LESS, Sass / Compass, Stylus, etc. C'est automatique !
  49. 49. ❶ Explorons d'autres positionnements Adoptons box-sizing Employons des sélecteurs « avancés » Laissons-tomber (certains) préfixes BOUSCULONS NOS TECHNIQUES En résumé...
  50. 50. BOUSCULONS NOS OUTILS ❷
  51. 51. FRAMEWORKS HTML / CSS Un « kit » pour faciliter la productivité ❷
  52. 52. FRAMEWORKS HTML / CSS Ce que propose un framework ❷ Un Reset CSS Une base réutilisable Des grilles Des boutons Des tableaux Du Responsive ...
  53. 53. FRAMEWORKS HTML / CSS Choisissez ou construisez le votre ! ❷ Ouch !
  54. 54. PRÉPROCESSEURS CSS Du code qui produit du code ! ❷ styles.less LESS styles.css
  55. 55. PRÉPROCESSEURS CSS Des variables en CSS ❷@basefont : 1em; @largescreen : 1280px; body { font-size: @basefont + .2em; } @media (min-width : @largescreen) { body {width: auto;} } body { font-size: 1.2em; } @media (min-width : 1280px) { body {width: auto;} } styles.less styles.css
  56. 56. PRÉPROCESSEURS CSS Une notation imbriquée ❷ styles.less styles.css .sidebar a { color: tomato; &:hover, &:focus, &:active {text-decoration: underline;} } .sidebar a { color: tomato; } .sidebar a:hover, .sidebar a:focus, .sidebar a:active { text-decoration: underline; }
  57. 57. PRÉPROCESSEURS CSS Des calculs et des « fonctions » ❷ styles.less styles.css p { .em(20px); } div { .em(18px); } p { font-size: 1.4286em; } div { font-size: 1.2857em; } @basefont: 14px; .em(@size, @bf: @basefont){ @em: round((@size / @bf),4); font-size: unit(@em, em); }
  58. 58. @column-width: 60; @gutter-width: 20; @columns: 12; header { .column(12); } article { .column(9); } aside { .column(3); } @media (max-device-width: 960px) { article { .column(12); } aside { .column(12); } } <header>...</header> <article>...</article> <aside>...</aside> PRÉPROCESSEURS CSS Des modèles de grilles et gouttières ❷HTML LESS http://semantic.gs
  59. 59. PRÉPROCESSEURS CSS Contribuent à la maintenance d'un projet ❷ Feuilles de styles allégées en développement, Maintenance et compréhension facilitées, Automatisation de tâches (préfixes, calculs, minification, etc.).
  60. 60. Photo : fotolia
  61. 61. utilisons des frameworks passons par des préprocesseurs BOUSCULONS NOS OUTILS En résumé... ❷ un peu Bien ! (si pré-requis préalables)
  62. 62. BOUSCULONS NOS METHODES ❸ Photo : flickr - kalexanderson
  63. 63. AYEZ DES CONVENTIONS !
  64. 64. ❸Convention HTML / CSS / JS Conventions de langue (français / anglais) Conventions de syntaxe (espace / indentation) Conventions de commentaires (@TODO) Conventions de séparateur (trait d'union, underscore) Conventions de casse (minuscule, majuscule, CamelCase) Etc. AYEZ DES CONVENTIONS ! Ne recommencez jamais à zéro !
  65. 65. ❸Google HTML / CSS style guide GitHub CSS styleguide GitHub JavaScript styleguide WordPress CSS coding standards WordPress HTML coding standards WordPress JavaScript coding standards Idiomatic CSS AYEZ DES CONVENTIONS ! Faites votre choix !
  66. 66. LE « CAS » INTERNET EXPLORER ❸
  67. 67. LE « CAS » INTERNET EXPLORER ❸Internet Explorer, c'est de la *** – quelqu'un “ « Optimisé pour Internet Explorer » – un vieux site web “ Faites-moi un site compatible Internet Explorer ! – un client “ 
  68. 68. LE « CAS » INTERNET EXPLORER ❸IE... c'est plus ce que c'était ! ...
  69. 69. LE « CAS » INTERNET EXPLORER ❸IE... c'est plus ce que c'était ! ... «compatible» IE ? (#really?)
  70. 70. IE11 est un super navigateur Photo : flickr - Taylor Dawn Fortune
  71. 71. ID ou CLASS ? ❸ Photo : Igor Maynaud
  72. 72. ID ou CLASS ? ❸Les « id » c'est pour des éléments uniques dans la page – quelqu'un qui n'a pas tort “ Les « class » c'est pour des éléments qui ne sont pas uniques – quelqu'un d'autre “ Don't use id selectors in CSS – CSSlint “ 
  73. 73. Photo : Pizza Hut * > + ~ element / pseudo class / pseudo / [attr] ID style="..." !important Spécificité des sélecteurs CSS
  74. 74. Photo : Pizza Hut * > + ~ element / pseudo class / pseudo / [attr] ID style="..." !important Spécificité des sélecteurs CSS
  75. 75. ID ou CLASS ? ❸ Les id peuvent être nécessaires en HTML (ancres, formulaires, nommage, JavaScript) Un élément unique ne doit pas forcément être nommé par un id Un id n'est pas réutilisable Un id a une forte spécificité Montage : @geoffrey_crofte
  76. 76. ID ou CLASS ? <ul id=″first″> <li><a>...</a></li> <li><a>...</a></li> <li><a>...</a></li> </ul> #first a { background: orange ; } #second a { background: white ; } ❸
  77. 77. ID ou CLASS ? <ul id=″first″> <li><a>...</a></li> <li><a>...</a></li> <li><a>...</a></li> </ul> #first a { background: orange ; } #second a { background: white ; } a:hover, a:active, a:focus { background: green; } ? ❸
  78. 78. ID ou CLASS ? <ul id=″first″> <li><a>...</a></li> <li><a>...</a></li> <li><a>...</a></li> </ul> #first a { background: orange ; } #second a { background: white ; } #first a:hover, #first a:active, #first a:focus, #second a:hover, #second a:active, #second a:focus { background: green ; } ❸
  79. 79. ID ou CLASS ? <ul id=″first″> <li><a>...</a></li> <li><a>...</a></li> <li><a>...</a></li> </ul> #first a { background: orange ; } #second a { background: white ; } ❸ a:hover, a:active, a:focus { background: green !important; }
  80. 80. ID ou CLASS ? <ul class=″first″> <li><a>...</a></li> <li><a>...</a></li> <li><a>...</a></li> </ul> .first a { background: orange ; } .second a { background: white ; } ❸ a:hover, a:active, a:focus { background: green; }
  81. 81. ID ou CLASS ? <ul id=″first″> <li><a>...</a></li> <li><a>...</a></li> <li><a>...</a></li> </ul> [id=first] a { background: orange ; } [id=second] a { background: white ; } ❸ a:hover, a:active, a:focus { background: green; }
  82. 82. #efficacité #réutilisabilité #maintenabilité ❸existe en plugin pour votre éditeur
  83. 83. DES CSS « OBJETS » ? ❸ CSS objet
  84. 84. CSS « OBJETS » ❸ Intégrez-moi ça ! (ASAP)
  85. 85. CSS « OBJETS » ❸ #header { truc: machin; } #sidebar { truc: machin; } #main { truc: machin; } #footer { truc: machin; }
  86. 86. #main { truc: machin; } #main .news { truc: machin; } #main #alaune .news { truc: machin; } CSS « OBJETS » ❸ #sidebar #edito { truc: machin; } #sidebar .afp { truc: machin; } #sidebar .ads { truc: machin; }
  87. 87. #main { truc: machin; } #main .news { truc: machin; } #main #alaune .news { truc: machin; } CSS « OBJETS » ❸ #sidebar #edito { truc: machin; } #sidebar .afp { truc: machin; } #sidebar .ads { truc: machin; }
  88. 88. #main { truc: machin; } #main .news { truc: machin; } #main #alaune .news { truc: machin; } CSS « OBJETS » ❸ #sidebar #edito { truc: machin; } #sidebar .afp { truc: machin; } #sidebar .ads { truc: machin; }
  89. 89. CSS « OBJETS » ❸ ✔ Largeur adaptable (fluide) ✔ Doit contenir les flottants ✔ Peut contenir une image (à gauche, largeur inconnue) Similarités :
  90. 90. CSS « OBJETS » ❸ ✔ Largeur adaptable (fluide) ✔ Doit contenir les flottants ✔ Peut contenir une image (à gauche, largeur inconnue) Similarités :.mod
  91. 91. CSS « OBJETS » ❸ ✔ Largeur adaptable (fluide) ✔ Doit contenir les flottants ✔ Peut contenir une image (à gauche, largeur inconnue) Similarités :.mod img .inner
  92. 92. CSS « OBJETS » ❸ ✔ Largeur adaptable (fluide) ✔ Doit contenir les flottants ✔ Peut contenir une image (à gauche, largeur inconnue) Similarités :.mod img .inner .mod > img { float: left; } .mod > .inner { float: left; width: ?!?!; }
  93. 93. CSS « OBJETS » ❸ ✔ Largeur adaptable (fluide) ✔ Doit contenir les flottants ✔ Peut contenir une image (à gauche, largeur inconnue) Similarités :.mod img .inner .mod > img { float: left; } .mod > .inner { margin-left: ?!?!; }
  94. 94. CSS « OBJETS » ❸ parentfloat parentfloat Block Formatting Context parent {overflow : hidden;}
  95. 95. CSS « OBJETS » ❸ frèrefloat frèrefloat Block Formatting Context frère {overflow : hidden;} dont le contenu s'écoule autour du flottant dont le contenu ne s'écoule plus autour du flottant
  96. 96. CSS « OBJETS » ❸ .mod { overflow: hidden; } .mod > img { float: left; } .mod > .inner { overflow: hidden; }
  97. 97. CSS « OBJETS » ❸ <div id="wrapper" class="line w80"></div> <section class="info mod pr0"></section> <nav id="navigation" role="navigation" class="large-no-float"> Des classes « sémantiques » ?! Privilégiez le sens et la fonction des éléments ! (les classes « visuelles » doivent être secondaires)
  98. 98. CSS « OBJETS » ❸OOCSS Nicole Sullivan SMACSS Jonathan Snooks http://oocss.org http://smacss.com/
  99. 99. Ayons des conventions ! Reconsidérons (doucement) Internet Explorer Évitons les sélecteurs id si possible Appliquons des CSS « objets » (OOCSS) BOUSCULONS NOS MÉTHODES En résumé... ❸
  100. 100. SAINES LECTURES Pour vos longues soirées d'hiver...
  101. 101. SAINES RESSOURCES Pour votre veille technologique constante
  102. 102. MERCI, À LA PROCHAINE ! Polices : Delicious heavy Annie Use Your Telescope Pictos : Design Bolts Capital18 Artua Raphaël Goetter www.alsacreations.fr @goetter
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×