{"id":406,"date":"2021-01-27T00:57:36","date_gmt":"2021-01-26T23:57:36","guid":{"rendered":"https:\/\/cours.artecom.studio\/nepduweb\/?p=406"},"modified":"2021-01-27T00:57:36","modified_gmt":"2021-01-26T23:57:36","slug":"en-mode-projet-sequel-ecrire-sa-feuille-avec-style-episode-2","status":"publish","type":"post","link":"https:\/\/cours.artecom.studio\/nepduweb\/2021\/01\/27\/en-mode-projet-sequel-ecrire-sa-feuille-avec-style-episode-2\/","title":{"rendered":"En mode projet, sequel : \u00e9crire sa feuille avec style | \u00c9pisode 2"},"content":{"rendered":"\n<p><strong><em>En mode projet, sequel: Ecrire sa feuille <del>de<\/del><\/em> avec style<\/strong><br><em>La s\u00e9rie EN MODE PROJET inaugure de nouveaux types de billets, principalement des tutoriels, permettant de r\u00e9aliser une des op\u00e9rations dont vous pourrez avoir besoin pour votre projet. Le billet est publi\u00e9 en parall\u00e8le des fichiers HTML et CSS sur la dropbox.<\/em><br><em>Le<\/em> sequel <em>\u00ab \u00c9crire sa feuille avec style \u00bb se destine \u00e0 accompagner votre finalisation ; il correspond au dossier <code>Playground_feuille_de_style<\/code> que vous trouverez dans le dossier <code>PratiqueDuWeb<\/code> sur notre Dropbox.<\/em><\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">\u00c9pisode 2 | La Requ\u00eate (de m\u00e9dia)<\/h1>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">Dans l&rsquo;\u00e9pisode pr\u00e9c\u00e9dent\u2026<\/h3>\n\n\n\n<p>Premier \u00e9pisode oblige, nous avons pos\u00e9 le cadre:<br>toute l&rsquo;organisation de la page HTML<br>les \u00e9l\u00e9ments structurants de la feuille de style<\/p>\n\n\n\n<p>Comme nous sommes pr\u00e9voyant, nous avons fait un site <em>fluide<\/em>, en usant et abusant de <code>flexbox<\/code>, <strong>LA<\/strong> propri\u00e9t\u00e9 qui transforme le bricolage CSS en construction moderne. Un peu comme dans Les Trois Petits Cochons, mais \u00e0 l&rsquo;envers (c&rsquo;est le plus souple qui est le meilleur):<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>un site <em>statique<\/em> tient bien, mais casse au premier t\u00e9l\u00e9phone ou \u00e0 la premi\u00e8re tablette venue ; il n&rsquo;est juste pas fait pour, avec ses dimensions rigide;<\/li><li>un <em>site fluide<\/em> s&rsquo;adapte aux diff\u00e9rents supports, mais en gardant ses proportions de d\u00e9part, qui ne sont pas forc\u00e9ment adapt\u00e9es lorsqu&rsquo;on passe d&rsquo;un \u00e9cran 24 pouces en 1920&#215;1080 px \u00e0 un \u00e9cran de smartphone en 414&#215;896 px ;<\/li><\/ul>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Les <em>medias queries<\/em><\/h2>\n\n\n\n<p><strong>Un site <em>responsive<\/em> est non seulement fluide, mais peut \u00e9galement se reconfigurer en fonction du terminal avec lequel on le consulte, pour parfois changer diam\u00e9tralement d&rsquo;apparence<\/strong>. Par exemple, un <code>aside<\/code>, ou des images imposantes peuvent dispara\u00eetre sur le t\u00e9l\u00e9phone, ou encore un site sombre peut devenir clair pour \u00eatre imprimable).**<\/p>\n\n\n\n<p>Et comme <code>flexbox<\/code> nous a \u00e9t\u00e9 indispensable pour la fluidit\u00e9, les <em>media queries<\/em> nous seront indispensable pour le <em>responsive<\/em>.<\/p>\n\n\n\n<p>Ainsi, au plus simple, on cr\u00e9era une r\u00e8gle de m\u00e9dia (traduction litt\u00e9rale de <em>media queries<\/em>) pour les t\u00e9l\u00e9phones portables en mode portrait; mais on peut aussi en cr\u00e9er pour les tablettes, pour les tr\u00e8s grands \u00e9crans, etc. Commen\u00e7ons par le t\u00e9l\u00e9phone.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Smartphone<\/h3>\n\n\n\n<p>La <em>requ\u00eate de m\u00e9dia<\/em> pour le t\u00e9l\u00e9phone va consister \u00e0 d\u00e9finir une largeur maximale d&rsquo;\u00e9cran correspondant \u00e0 celle d&rsquo;un des plus grand \u00e9crans de smartphone; ainsi, tous les \u00e9crans \u00e0 la largeur inf\u00e9rieure seront concern\u00e9s.<\/p>\n\n\n\n<p>Si vous choisissez de vous limiter \u00e0 la large d&rsquo;un petit smartphone (par exemple, les 320px d&rsquo;un iPhoneSE), tous les smartphones de taille sup\u00e9rieure ne seront pas concern\u00e9s, et vous devrez \u00e9crire une nouvelle requ\u00eate de m\u00e9dia pour les mod\u00e8les les plus grands.<\/p>\n\n\n\n<p>De mani\u00e8re \u00e9conomique, et en fonction de la pertinence pour votre design, vous pouvez aussi ne cr\u00e9er qu&rsquo;une seule requ\u00eate pour <em>tous<\/em> les appareils en dessous d&rsquo;une tablette de r\u00e9f\u00e9rence en mode portrait.<br>C&rsquo;est ainsi qu&rsquo;on trouve souvent une requ\u00eate de m\u00e9dia pour les \u00e9crans de 767px (c&rsquo;est-\u00e0-dire un pixel de moins que la largeur d&rsquo;un iPad). Cela donne la <em>media query<\/em> suivante:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">@media screen and (max-width:767px)<\/pre>\n\n\n\n<p>On pourrait ajouter, pour cibler les m\u00e9dias verticaux:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">@media screen and (max-width:767px) and (orientation: portrait)<\/pre>\n\n\n\n<p>Mais cela veut dire que les t\u00e9l\u00e9phones se comporteront diff\u00e9remment s&rsquo;ils sont tenus \u00e0 l&rsquo;horizontale (les iPhones 6,6s, 7 et 8, par exemple, font 667px de hauteur d&rsquo;\u00e9cran: \u00e0 l&rsquo;horizontale, ils seraient g\u00e9r\u00e9s par la premi\u00e8re r\u00e8gle, mais pas par la seconde).<\/p>\n\n\n\n<p>Nous nous en tiendront \u00e0 la premi\u00e8re r\u00e8gle, pour rendre les choses le plus simple possible: mais si vous \u00eates aventuriers, vous pouvez int\u00e9grer des r\u00e8gles de m\u00e9dia inspir\u00e9es des services qui affichent l&rsquo;apparence des sites <em>responsive<\/em>: par exemple, le <a href=\"http:\/\/www.responsinator.com\/\">Responsinator<\/a>, ou encore, tout simplement, l&rsquo;affichage <em>Vue adaptative<\/em> de Firefox (disponible dans <code>Outis<\/code>&gt;<code>D\u00e9veloppement web<\/code>&gt;<code>Vue adaptative<\/code>).<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/zupimages.net\/up\/21\/04\/lvhy.jpg?w=740&#038;ssl=1\" alt=\"&quot;la vue adaptative de firefox&quot;\"\/><\/figure>\n\n\n\n<p>\u00c0 partir du moment o\u00f9 la largeur de l&rsquo;\u00e9cran de consultation est pos\u00e9e, vous pouvez modifier l&rsquo;affichage de vos pages web.<\/p>\n\n\n\n<p>Il y a deux modifications principales, en g\u00e9n\u00e9ral, pour la media query pour smartphone:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>l&rsquo;affichage des \u00e9l\u00e9ments de premier et deuxi\u00e8me niveau en colonne (en utilisant la propri\u00e9t\u00e9 <code>display<\/code>),<\/li><li>et la transformation du menu en menu <em>burger<\/em> (que nous verrons dans un autre article).<\/li><\/ul>\n\n\n\n<p>Parfois, certaines rubriques secondaires peuvent aussi dispara\u00eetre \u00e0 l&rsquo;affichage &#8211; souvent, c&rsquo;est un <code>aside<\/code> qui dispara\u00eet.<\/p>\n\n\n\n<p>Ainsi, notre CSS pourra ressembler \u00e0 ceci:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">@media screen and (max-width:767px)\n{\n    header,\n    main,\n    footer {\n        display:block;\n    }\n}<\/pre>\n\n\n\n<p>Nous reprenons un affichage standard des diff\u00e9rentes balises <em>bloc<\/em> de niveau 1 de notre design. Ainsi, elles s&rsquo;affiche les unes en dessous des autres, ce qui vaut mieux sur notre smartphone en mode portrait.<\/p>\n\n\n\n<p>On peut aussi supprimer les marges qu&rsquo;on avait cr\u00e9\u00e9es lorsque l&rsquo;\u00e9cran de lecture \u00e9tait large; sur le t\u00e9l\u00e9phone, c&rsquo;est mieux qu&rsquo;il n&rsquo;y en ait plus, ou, s&rsquo;il en reste qu&rsquo;elles soient minimalistes? par exemple,<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>on peut garder les 10px de <code>padding<\/code> qu&rsquo;on aura mis \u00e0 tous nos paragraphes, histoire de toujours \u00e9loigner les textes qu&rsquo;ils contiennent du bord);<\/li><li>ou on peut cr\u00e9er un <em>liser\u00e9<\/em> autour de nos balises de niveau 1, une bordure qui fasse cadre.<\/li><\/ul>\n\n\n\n<p>L\u00e0, c&rsquo;est \u00e0 vous de voir ce qui fonctionne avec votre design, ou ce que vous aviez pr\u00e9vu dans vos <em>wireframes<\/em>.<\/p>\n\n\n\n<p>Ci-dessous, une <em>media query<\/em> qui reprend toutes ces suggestions:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">@media only screen and (max-width:767px) {    \n    header,\n    main,\n    footer {\n        display: block;\n        width: 100%;\n        border: 3px solid white;\n    }\n\n    p {\n        padding:10px;\n    }\n}<\/pre>\n\n\n\n<p>Dans la CSS de notre dossier <em>Playground_feuille_de_style<\/em>, il y a plus de d\u00e9tails (les <code>div<\/code> avec la classe <code>.card<\/code>, les <code>section<\/code>sont trait\u00e9es). Mais vous avez un exemple suffisant explicite pour comprendre le principe.<\/p>\n\n\n\n<p>Faites attention toutefois:<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>Si un \u00e9l\u00e9ment a d\u00e9j\u00e0 re\u00e7u un style, il faut modifier exactement le m\u00eame \u00e9l\u00e9ment dans la <em>media query<\/em>, qui annulera alors le style pr\u00e9c\u00e9dent ; par exemple:<\/li><\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">    @ media screen and (max-width:767px) {\n        .card {margin:0;}\n}<\/pre>\n\n\n\n<p>prendra le dessus sur<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">    .card {margin: 2% 5%;}<\/pre>\n\n\n\n<p><br>\u00e9crit pr\u00e9c\u00e9demment, mais pas sur<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">div {\n    margin:auto;\n}<\/pre>\n\n\n\n<p>m\u00eame si les <code>.card<\/code> sont des <code>div<\/code>.<\/p>\n\n\n\n<ol class=\"wp-block-list\" start=\"2\"><li>Si vous donnez un style \u00e0 un \u00e9l\u00e9ment qui n&rsquo;en a jamais re\u00e7u, la <em>media query<\/em> sera \u00e9videmment prioritaire.<\/li><\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">Tablette<\/h3>\n\n\n\n<p>Vous avez compris le principe ?<br>On va pouvoir cibler le comportement de notre site quand il est visit\u00e9 depuis une tablette.<br>On peut cibler<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>une largeur minimale<\/li><li>une largeur maximale<\/li><li>une orientation<\/li><\/ul>\n\n\n\n<p>Le plus \u00ab\u00a0\u00e9conomique\u00a0\u00bb est de cibler les deux lergeurs dans une m\u00eame <em>media query<\/em> :<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">@media screen and (min-width:768px) and (max-width:1024px)<\/pre>\n\n\n\n<p>Dans notre design, les <code>.card<\/code> s&rsquo;alignent les unes \u00e0 c\u00f4t\u00e9 des autres dans une section, gr\u00e2ce \u00e0 <code>flexbox<\/code>. Sur une tablette, \u00e7a peut devenir int\u00e9ressant qu&rsquo;elles s&rsquo;alignent deux par deux. Pour cela, on va \u00e0 la fois<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>faire en sortie qu&rsquo;elles passent les unes en dessous des autres quand elles n&rsquo;ont pas la place (<code>section {flex-wrap:wwap;}<\/code>),<\/li><li>et leur donner une largeur suffisante pour qu&rsquo;elles puissent rentrer \u00e0 deux en largeur (<code>.card {width:45%;)<\/code>&#8211; pas 50%, pour se laisser une\u2026 marge, si justement il y a des marges internes ou externes qui viendraient occuper de l&rsquo;espace.<\/li><\/ul>\n\n\n\n<p>Notre <em>media query<\/em> peut alors prendre la forme suivante:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">@media screen and (min-width:768px) and (max-width:1024px) {\n        header,\n    main,\n    footer {\n        width: 98%;\n        \/* la marge ext\u00e9rieure n'est plus n\u00e9cessaire, je garde 1% de gris autour pour l'esth\u00e9tique *\/\n        margin: auto;\n    }\n\n    section {\n        display: flex;\n        flex-wrap: wrap;\n    }\n\n    .card {\n        width: 45%;\n        margin: 2%;\n        \/* margin: auto;*\/\n        \/* testez les deux marges pour voir les diff\u00e9rences de gestion des boites *\/\n}<\/pre>\n\n\n\n<p>Dans la feuille de style playground_style.css, j&rsquo;ai ajout\u00e9 des \u00e9l\u00e9ments relatifs \u00e0 la couleur.<\/p>\n\n\n\n<p>Et voil\u00e0: avec mes deux <em>media queries<\/em>, je g\u00e8re les changements d&rsquo;organisation de la page en fonction du m\u00e9dia de sortie : mon site est devenu <em>responsive<\/em>\u2026 Elle est pas belle la vie ?<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">To be continued\u2026<\/h2>\n","protected":false},"excerpt":{"rendered":"<p>En mode projet, sequel: Ecrire sa feuille de avec styleLa s\u00e9rie EN MODE PROJET inaugure de nouveaux types de billets, principalement des tutoriels, permettant de r\u00e9aliser une des op\u00e9rations dont&#46;&#46;&#46;<\/p>\n","protected":false},"author":2,"featured_media":409,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[11,14,13,46,4,48],"tags":[],"class_list":["post-406","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-a-lire","category-a-tester","category-en-ligne","category-en-mode-projet","category-pduweb","category-pratique-du-web"],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/cours.artecom.studio\/nepduweb\/wp-content\/uploads\/sites\/2\/2021\/01\/responsive.png?fit=1024%2C478&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/cours.artecom.studio\/nepduweb\/wp-json\/wp\/v2\/posts\/406","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cours.artecom.studio\/nepduweb\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cours.artecom.studio\/nepduweb\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cours.artecom.studio\/nepduweb\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/cours.artecom.studio\/nepduweb\/wp-json\/wp\/v2\/comments?post=406"}],"version-history":[{"count":2,"href":"https:\/\/cours.artecom.studio\/nepduweb\/wp-json\/wp\/v2\/posts\/406\/revisions"}],"predecessor-version":[{"id":408,"href":"https:\/\/cours.artecom.studio\/nepduweb\/wp-json\/wp\/v2\/posts\/406\/revisions\/408"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cours.artecom.studio\/nepduweb\/wp-json\/wp\/v2\/media\/409"}],"wp:attachment":[{"href":"https:\/\/cours.artecom.studio\/nepduweb\/wp-json\/wp\/v2\/media?parent=406"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cours.artecom.studio\/nepduweb\/wp-json\/wp\/v2\/categories?post=406"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cours.artecom.studio\/nepduweb\/wp-json\/wp\/v2\/tags?post=406"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}