Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

Copyright Dunod, 2012 9782100585670 Toutes les marques citées dans cet ouvrage

Copyright Dunod, 2012 9782100585670 Toutes les marques citées dans cet ouvrage sont des marques déposées par leurs propriétaires respectifs. Maquette de couverture : barbarycourte.com Visitez notre site Web : www.dunod.com Consultez le site Web de cet ouvrage Le code de la propriété intellectuelle n'autorisant, aux termes des paragraphes 2 et 3 de l'article L122-5, d'une part, que les « copies ou reproductions strictement réservées à l'usage privé du copiste et non destinées à une utilisation collective » et, d'autre part, sous réserve du nom de l'auteur et de la source, que « les analyses et les courtes citations justifiées par le caractère critique, polémique, pédagogique, scientifique ou d'information », toute représentation ou reproduction intégrale ou partielle, faite sans consentement de l'auteur ou de ses ayants droit, est illicite (art; L122-4). Toute représentation ou reproduction, par quelque procédé que ce soit, notamment par téléchargement ou sortie imprimante, constituera donc une contrefaçon sanctionnée par les articles L 335-2 et suivants du code de la propriété intellectuelle. Préface CSS, un acronyme qui a d'abord un double sens pour moi. Il signifie bien entendu « Cascading Style Sheets » que vous allez découvrir en détail dans ce livre. Mais il signifie aussi pour moi la première division dans laquelle j'ai travaillée chez Microsoft et qui veut dire « Customer Service & Support ». Mon rôle était alors d'aider nos clients développeurs à revoir et à fixer leur code. C'était en 2000 et l'utilisation de CSS en production n'en était qu'à ses balbutiements. Mais gardez en tête cette idée de revoir un code, nous en reparlerons à la fin de cette préface. Mais pourquoi est-ce que je commence par vous raconter ma vie ? Pour deux raisons. Tout d'abord, j'ai justement découvert pour la première fois CSS pendant mon activité au support et j'ai donc eu la chance d'en suivre l'évolution. Ses capacités étaient vraiment limitées par rapport à aujourd'hui et peu de gens s'y intéressaient vraiment. Ensuite, pour faire un parallèle à ma propre expérience, je rencontre souvent des personnes qui découvrent la magie des feuilles de styles à travers une expérience de débogage. Cela pose alors souvent problème car au lieu d'essayer de comprendre comment fonctionne la mise en pages contrôlée par des feuilles de styles, beaucoup essaient de bricoler leur CSS en ajoutant/modifiant/enlevant certaines propriétés au petit bonheur la chance. Heureusement, cela ne sera pas votre cas puisque vous avez eu la bonne idée d'acheter ce livre pour mieux comprendre CSS avant de l'utiliser ! Ce sera donc mon premier conseil : prenez le temps de digérer les subtilités de CSS, elles sont nombreuses mais passionnantes ! Certains sélecteurs peuvent ainsi parfois vous sembler de prime abord abscons et moins attrayants qu'un magnifique dégradé. Ils sont pourtant très puissants et peuvent rendre des services insoupçonnés en parfois une unique ligne. Ensuite, au cours de la première décennie, CSS a fini naturellement par exploser. C'est d'ailleurs probablement cette partie des spécifications du W3C qui est le plus à l'origine de notre « culture web » que nous partageons tous. Il nous a ainsi permis un meilleur découpage entre le contenu et la présentation. Les développeurs pouvaient alors commencer à se concentrer sur la production du HTML et du JavaScript pendant que les designers/intégrateurs s'occupaient du look du site via CSS. Cette collaboration était normalement vouée à un avenir radieux. Cependant, en parallèle de cela, il s'est développé un art à part à entière rendant célèbre certains intégrateurs : être compatible avec tous les navigateurs. Rivalisant alors de trésors d'ingéniosité, certains « hacks » sont devenus monnaie courante dans la production de CSS. Associé à cela s'est développé un autre problème que vous avez sûrement rencontré : cette volonté à tout prix de faire du web un media ressemblant aux autres. On voulait alors que le site s'affiche de la même manière (au pixel près ou « pixel perfect ») sur tous les navigateurs et toutes les machines de la planète ! Tout cela en partant d'une planche produite sous Photoshop. Nous savons aujourd'hui que le problème avait alors été pris à l'envers. Le web doit vraiment être vu comme un media à part entière. Ce sera donc mon deuxième conseil : ne faites pas un site comme on fait un magazine. Heureusement, depuis la fin des années 2000, les choses ont évolué pour beaucoup dans le bon sens. Il y a plusieurs raisons à cela. Tout d'abord, nous avons eu de nouvelles armes côté CSS3 permettant d'envisager de nouvelles approches. Le design adaptatif étant l'une des plus célèbres en ce moment. En effet, l'ergonomie et le design doivent être différents entre un téléphone, une tablette et un PC. Techniquement parlant, vous allez alors utiliser des « Media Queries » ou des contrôles flexibles notamment abordés dans ce livre. Ensuite, l'approche sur le support multi-navigateurs a changé, les mentalités ont bougé et les techniques se sont améliorées. Sont alors nées les approches dîtes de dégradation gracieuse ou d'amélioration progressive. Les sites ont alors cessé de se limiter aux capacités du plus vieux navigateur toujours en circulation et la culture du « pixel perfect » a éclaté au fur et à mesure. En fonction du navigateur ou du périphérique que l'on utilise, on peut désormais avoir une expérience différente sur le même site. CSS et la manière dont il fonctionne intrinsèquement y est pour beaucoup. Pour finir sur les raisons de cette bonne évolution, il y a bien évidemment le support de ces spécifications par l'ensemble des navigateurs et la concurrence effrénée entre eux. La qualité d'implémentation évoluant de versions en versions, les parts de marché des navigateurs modernes ne cessant d'augmenter, certains cauchemars de l'intégrateur ne seront plus bientôt que de l'histoire ancienne. D'ailleurs dans cette guerre perpétuelle des navigateurs, CSS a toujours joué un rôle primordial et fut toujours au centre des intérêts de ceux qui faisaient le web. Dans cette deuxième décennie, une nouvelle page de l'histoire du web est en train de se tourner. CSS3 est désormais plus prisé que jamais car c'est le compagnon indispensable à la superstar HTML5. C'est CSS3 qui fera que votre site ou votre application web sera attrayante ou non. Or les attentes des utilisateurs vis-à-vis des interfaces ont nettement évolué ces dernières années suite aux succès des smartphones et tablettes. Ils veulent des interfaces novatrices, attirantes et efficaces. CSS3 leur proposera pour cela toute une palette d'effets graphiques à base d'ombre, de dégradés, de bords non rectangulaires, de transformations 2D voire même en 3D ! L'avènement du touch bouscule aussi la manière de concevoir une interface. Il faut penser aux gros doigts de l'utilisateur mais il faut aussi donner l'impression de fluidité et de réactivité permanente. Si vous touchez l'écran et qu'il ne se passe pas immédiatement quelque chose en retour, vous avez la désagréable sensation d'une expérience dégradée. Pour éviter cela, CSS3 propose la possibilité de gérer des animations sur les éléments via des transitions ou des étapes contrôlées d'animations. La bonne nouvelle ? Ces nouvelles animations ne sont désormais plus à la charge du développeur qui les faisaient avant via du JavaScript et dont ce n'était pas vraiment le métier. L'autre bonne nouvelle : c'est pris en charge par le processeur graphique du périphérique (GPU) pour des performances souvent meilleures que leurs équivalences JavaScript. Une nouvelle génération d'applications web est donc sur le point de naître grâce à toutes ces nouvelles spécifications. CSS est donc plus que jamais au centre de toutes les attentions. De notre côté, nous lui offrons une place de choix dans la conception des applications HTML5 Metro pour Windows 8 mais également en améliorant drastiquement son support dans IE10. Par ailleurs, que ce soit chez Adobe ou chez Microsoft, l'outillage arrive également pour augmenter la productivité et par conséquence la rentabilité des investissements fait sur ces technologies. Mais CSS est également en mouvement permanent car une grande partie de ses spécifications ne sont pas encore finalisées. Comme son usage est désormais stratégique, l'ensemble des éditeurs de navigateurs ne cessent également d'innover en proposant régulièrement de nouvelles fonctionnalités. Pour éviter de freiner l'innovation, le W3C eut alors l'idée de laisser un éditeur implémenter une version expérimentale d'une nouvelle technologie via l'utilisation de préfixes (-webkit, -moz, -ms ou -o). C'est une bonne idée mais cela déporte la responsabilité vers vous lecteur et futur utilisateur de CSS. Mais de quelle responsabilité parle-t-il me direz-vous ? Pouvoir commencer à goûter au futur est plutôt une bonne nouvelle, non ? Oui ! Mais en utilisant une spécification non finie, charge alors à vous de bien faire attention à plusieurs choses. Tout d'abord, choisissez avec précaution la fonctionnalité en question que vous allez utiliser pour éviter de rendre l'usage de votre site exclusif à un navigateur unique. L'absence de support de cette fonctionnalité ne doit pas empêcher d'autres navigateurs d'afficher votre contenu (via par exemple une technique de dégradation gracieuse que vous verrez plus loin). C'est particulièrement important si vous ne souhaitez pas retomber dans le même genre de problème de culture unique que nous uploads/Litterature/ css3-le-design-web-moderne.pdf