Mais pourquoi le dev' saccage mon intégration? Atelier technique CSS Paris Web 2011 par Romy Duhem-Verdière

Transcription

1 Mais pourquoi le dev' saccage mon intégration? Atelier technique CSS Paris Web 2011 par Romy Duhem-Verdière

2 Intégrateur de STPo - Robot de Gordon Bennett 2

3 L'intégrateur XHML, CSS, jquery, media queries, microformats, RGAA, Accessiweb, WCAG, BluePrint, 960 Grid, oocss, LESS, Framework Z, sprites, PSD, Gimp Cf.: 3

4 Vous réalisez vos intégrations avec soin et amour : P valides P sémantiques P accessibles 4

5 Mais pourquoi faut-il que le dev' saccage tout ça? 5

6 Le développeur.toto p a p { } 6

7 PHP, ASP, Java, SQL, Perl, Ruby, Python, Klingon, Zend, Symphony, ez publish, Drupal, SPIP, TypoScript, cahier des charges 7

8 Faire simple!

9 Ce qu'à codé l'intégrateur h1 { font-size : 2em; } h2 { font-size : 1.33em; } h3 { font-size : 1.17em; } h4 { font-size : 1.1em; } p { font-size:.688em; } li { font-size:.688em; } blockquote { font-size:.688em; } small { font-size:.52em; } 9

10 Problèmes 10

11 Trop de font-size! Résultats de recherche desweb occurrences de «font-size» dans un projet Atelier technique CSS Romy Duhem-Verdière Paris 2011

12 Ressortir la calculette? Em Calculator : 12

13 Définir une taille relative html { font-size: 100%; } body { font-size:.75em; } h1 { font-size: 150%; } h2 { font-size: 130%; } h3 { font-size: 110%; } small { font-size: 90%; } 13

16 Définir une taille relative html { font-size: 100%; } body { font-size:.75em; } h1 { font-size: 150%; } h2 { font-size: 130%; } h3 { font-size: 110%; } small { font-size: 90%; } Cf. : 16

17 Définir une taille relative 1) Ne pas définir la taille de chaque élément! 2) Définir une font-size de base, sur le <body> (dont chaque élément hérite) 3) Puis définir quelques exceptions : titres plus gros mentions plus petites 17

18 Au fait, qui saccage l'intégration?

19 Au fait, qui saccage? 1) Le développement 19

20 Au fait, qui saccage? 1) Le développement 2) Le code généré (framework, CMS, plugins) 20

21 Au fait, qui saccage? 1) Le développement 2) Le code généré (framework, CMS, plugins) 3) Les rédacteurs 21

22 Comment améliorer? 1) Discuter avec les 1) Le développement développeurs 2) Apprendre à coder souple et modulaire 2) Le code généré (framework, CMS, plugins) 3) Les rédacteurs 22

23 Comment améliorer? 1) Discuter avec les 1) Le développement développeurs 2) Apprendre à coder souple et modulaire 2) Le code généré (framework, CMS, plugins) 3) Travailler sur un échantillon de code généré 3) Les rédacteurs 23

24 Comment améliorer? 1) Discuter avec les 1) Le développement développeurs 2) Apprendre à coder souple et modulaire 2) Le code généré (framework, CMS, plugins) 3) Travailler sur un échantillon de code généré 4) Anticiper les 3) Les rédacteurs expérimentations des rédacteurs 24

25 Anticiper

26 Quel CSS pour styler ces listes? 26

27 Ce qu'à codé l'intégrateur 27

28 Problème 28

29 Un bon exemple /* Lists */ li ul, li ol ul, ol { margin: 0; } { margin: 0 1.5em 1.5em 0; padding-left: 1.5em; } ul ol { list-style-type: disc; } { list-style-type: decimal; } dl dl dt dd { margin: em 0; } { font-weight: bold; } { margin-left: 1.5em;} Source : 29

30 Correction 30

31 Listes hétérogènes 31

32 Comment anticiper? 1) Styler tout le HTML y compris les balises rarement utilisées utiliser une page de démo exhaustive 2) Se constituer une page de test récolter des exemples vicieux des extraits générés via WYSIWYG 32

33 Styler tout le HTML Source : framework CSS Blueprint 33

34 Exemple de charte typo 34 Source : charte typo SPIP

35 Laisser la main

36 Qui l'emporte? #content h2 { color: red; }.chapo h2 { color: purple; } De quelle couleur sera le titre du chapo? 36

37 Spécificité des sélecteurs En supposant que tous les sélecteurs suivants sont justes et désignent le même élément, lequel sera appliqué en priorité? a) #page ul li a { } b) #page.menu a { } c) div.menu ul li a { } d) div#page ul a { } Source : 37

38 Spécificité des sélecteurs En supposant que tous les sélecteurs suivants sont justes et désignent le même élément, lequel sera appliqué en priorité? a) #page ul li a { } b) #page.menu a { } 0103 : le sélecteur contient 1 identifiant, 0 classe et 3 éléments 0111 : le sélecteur contient 1 identifiant, 1 classe et 1 élément c) div.menu ul li a { } 0014 : le sélecteur contient 1 classe et 4 éléments d) div#page ul a { } 0103 : le sélecteur contient 1 identifiant et 3 éléments Cascade CSS et priorité des sélecteurs : 38

39 Soyez.class plutôt qu'#id Voir : 39

40 Soyez.class plutôt qu'#id Exemple : 40

41 Laissez les IDs au dev! 1) Les ID sont uniques : laissez la liberté de réemployer à ceux qui suivent 2) Réservez les IDs à : JavaScript formulaires N identifiants (BDD) etc. 41

42 Mettre des.class à disposition

43 Mettre des.class à disposition small,.small { font-size: 90%; } big,.big { font-size: 130%;} 43

44 Mettre des.class à disposition h1, h2, h3, h4, h5, h6,.h1.h2.h3.h4.h5.h6 { { { { { { font-size: font-size: font-size: font-size: font-size: font-size: 3em; line-height: 1; marg 2em; margin-bottom: 0.75e 1.5em; line-height: 1; ma 1.2em; line-height: 1.25; 1em; font-weight: bold; m 1em; font-weight: bold; } D'après : Object Oriented CSS 44

45 Mettre des.class à disposition body,.font1 { font-family: h1,h2,.font2 { font-family: code,pre,.font3 { font-family:.font4 { font-family: Helvetica, Arial, san 'Arial Black', Gadget Courier, monospace; } Palatino, Georgia, se 45

46 Familles typo + classes réemployables Définition des titres + classes réemployables Exceptions définies. via sélecteur parent. via classes distinctives 46

47 Mettre des.class à disposition Voir : 47

48 Sélecteurs multiples <input class= button add edit cancel delete like next prev start save submit super big small pink red orange yellow green > blue black gray white 48

49 Séparer sémantique et déco Classes sémantiques <input class= button add edit cancel delete like next prev start save submit super big small déco pink red orange yellow green > blue black gray white 49

50 50

51 Bref, livrez un framework! Avec du code facilement ré-utilisable pour les suivants Source : framework interne de la Netscouade 51

52 Habiller le code généré

53 Quelle structure HTML? En plus de celles propres aux formulaires (form, fieldset, label, input) quelles balises HTML utiliser pour structurer ce formulaire de contact? 53

54 Ce qu'à codé l'intégrateur 54

55 Code généré Exemple de code généré par Joomla 55

56 Code généré Exemple de code généré par SPIP 56

57 Code généré Exemple de code généré par Zend Framework 57

58 Conclusion? 1) Ne pas présupposer de la structure HTML 2) Demander un échantillon de code généré (voire adopter le framework de l'outil, du dev, de l'équipe) 3) Appliquer le style à cet échantillon 58

59 Penser modulaire 59

60 Bloc modulaire Quel code pour ce bloc d'actus? 60

61 Bloc modulaire <div class="bloc" id="news"> <h2>l'info en continu</h2> <ul> <li><a href="#">...</a></li> <li><a href="#">...</a></li> <li><a href="#">...</a></li> <li><a href="#">...</a></li> <li><a href="#">...</a></li> </ul> <a href="#" class="more">toutes les infos</a> </div> { width: 300px; } h2 { padding-left: 20px; background: url(img/puce.png) no-repeat; ul { background: #e5e4d3; border: 1px solid #5b4c2a; border-width li { display: block; padding: 10px; }.more { display: block; color: red; background: url(img/more.png) 61

62 Bloc modulaire Quel code pour ce bloc d'actus ailleurs dans la page? 62

63 Bloc modulaire <div class="bloc" id="news"> <h2>l'info en continu</h2> <ul> <li><a href="#">...</a></li> <li><a href="#">...</a></li> <li><a href="#">...</a></li> <li><a href="#">...</a></li> <li><a href="#">...</a></li> </ul> <a href="#" class="more">toutes les infos</a> </div> { padding: 5px; background: #e5e4d3; } h2 { float: left; padding-left: 20px; background: url(img/puce.pn ul { } li { float: left; display: block; width: 660px; padding: 10px; ba.more { float: right; display: block; color: red; background: url 63

64 Comment disposer des deux? <div class="bloc" id="news"> <h2>l'info en continu</h2> <ul> <li><a href="#">...</a></li> <li><a href="#">...</a></li> <li><a href="#">...</a></li> <li><a href="#">...</a></li> <li><a href="#">...</a></li> </ul> <a href="#" class="more">toutes les infos</a> </div> { width: 300px; } h2 { padding-left: 20px; background: url(img/puce.png) no-repeat; ul { background: #e5e4d3; border: 1px solid #5b4c2a; border-width li { display: block; padding: 10px; }.more { display: block; color: red; background: url(img/more.png) { padding: 5px; background: #e5e4d3; } h2 { float: left; padding-left: 20px; background: url(img/puce.pn ul {} li { float: left; display: block; width: 660px; padding: 10px; ba.more { float: right; display: block; color: red; background: url 64

65 Comment disposer des deux? <div class="bloc" id="news"> <h2>l'info en continu</h2> <ul> <li><a href="#">...</a></li> <li><a href="#">...</a></li> <li><a href="#">...</a></li> <li><a href="#">...</a></li> <li><a href="#">...</a></li> </ul> <a href="#" class="more">toutes les infos</a> </div> Méthode 1 : surcharge { width: 300px; } h2 { padding-left: 20px; background: url(img/puce.png) no-repeat; ul { background: #e5e4d3; border: 1px solid #5b4c2a; border-width li { display: block; padding: 10px; }.more { display: block; color: red; background: url(img/more.png).toto.toto.toto.toto.toto { width: auto; padding: 5px; background: #e5e4d3; } h2 { float: left; } ul { background: none; border: 0; } li { float: left; width: 660px; background: #fff; }.more { float: right; border: 2px solid #fff; } 65

66 Comment disposer des deux? <div class="bloc" id="news"> <h2>l'info en continu</h2> <ul> Méthode 2 : <li><a href="#">...</a></li> <li><a href="#">...</a></li> bloc modulaire <li><a href="#">...</a></li> <li><a href="#">...</a></li> <li><a href="#">...</a></li> </ul> <a href="#" class="more">toutes les infos</a> </div> { } h2 { padding-left: 20px; background: url(img/puce.png) no-repeat; ul { } li { display: block; padding: 10px; }.more { display: block; color: red; background: url(img/more.png).aside { width: 300px; }.aside ul { background: #e5e4d3; border: 1px solid #5b4c2a; borde.toto { padding: 5px; background: #e5e4d3; }.toto ul {}.toto li { float: left; width: 660px; background: #fff; }.toto.more { float: right; border: Atelier technique CSS Romy Duhem-Verdière Paris Web 20112px solid #fff; } 66

67 Souple sur les pattes arrières!

68 Merci! Merci à Bertrand Keller de la Netscouade, à Martin Supiot de Clever Age, à Cyril Marion des Ateliers CYM, à Hugues Moreno, Frédéric Xavier et à tous vos retours d'expérience en intégration. Merci à vous et #sharethelove Retrouvez-moi ici :