davidbgk
/
larlet-fr-david
Watch 1
Star 0
Fork 0
Code Releases 0 Activity
Repository with sources and generator of https://larlet.fr/david/ https://larlet.fr/david/
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
336 Commits
1 Branch
Tree: 5edc21ef71
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from '5edc21ef71'
${ noResults }
larlet-fr-david/david/blog/2014/cours-iut-flexbox-styleguide/index.html

index.html 29KB
Raw Blame History

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848 
  1. <!doctype html><!-- This is a valid HTML5 document. -->

  2. <!-- Screen readers, SEO, extensions and so on. -->

  3. <html lang=fr>

  4. <!-- Has to be within the first 1024 bytes, hence before the <title>

  5.   See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->

  6. <meta charset=utf-8>

  7. <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->

  8. <!-- The viewport meta is quite crowded and we are responsible for that.

  9.   See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->

  10. <meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no">

  11. <!-- Required to make a valid HTML5 document. -->

  12. <title>Cours IUT : Flexbox et Styleguide — David Larlet</title>

  13. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->

  14. <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png">

  15. <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png">

  16. <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png">

  17. <link rel="manifest" href="/manifest.json">

  18. <link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5">

  19. <link rel="shortcut icon" href="/static/david/icons/favicon.ico">

  20. <meta name="apple-mobile-web-app-title" content="David Larlet">

  21. <meta name="application-name" content="David Larlet">

  22. <meta name="msapplication-TileColor" content="#da532c">

  23. <meta name="msapplication-config" content="/static/david/icons/browserconfig.xml">

  24. <meta name="theme-color" content="#f0f0ea">

  25. <!-- That good ol' feed, subscribe :p. -->

  26. <link rel=alternate type="application/atom+xml" title=Feed href="/david/log/">

  27. 

  28.   <!-- Canonical URL for SEO purposes -->

  29.   <link rel="canonical" href="https://larlet.fr/david/blog/2014/cours-iut-flexbox-styleguide/">

  30.   <!-- SEO/Semantic metadata -->

  31.   <meta name="description" content="Participer à une formation reste la meilleure façon d’apprendre." />

  32.   <meta name="twitter:description" property="og:description" itemprop="description" content="Participer à une formation reste la meilleure façon d’apprendre." />

  33.   <meta name="twitter:title" property="og:title" itemprop="name" content="Cours IUT : Flexbox et Styleguide" />

  34.   <meta name="twitter:card" content="summary" />

  35.   <meta name="twitter:creator" content="@davidbgk" />

  36.   <meta name="twitter:url" property="og:url" content="https://larlet.fr/david/blog/2014/cours-iut-flexbox-styleguide/" />

  37.   <meta property="og:type" content="article" />

  38.   <meta property="og:site_name" content="David Larlet (@davidbgk)" />

  39. 

  40.   <meta name="twitter:image" property="og:image" itemprop="image" content="https://larlet.fr/static/david/blog/2014/cours-iut-flexbox-styleguide.jpg" />

  41. 

  42. 

  43. <style>

  44. /* http://meyerweb.com/eric/tools/css/reset/ */

  45. html, body, div, span,

  46. h1, h2, h3, h4, h5, h6, p, blockquote, pre,

  47. a, abbr, address, big, cite, code,

  48. del, dfn, em, img, ins,

  49. small, strike, strong, tt, var,

  50. dl, dt, dd, ol, ul, li,

  51. fieldset, form, label, legend,

  52. table, caption, tbody, tfoot, thead, tr, th, td,

  53. article, aside, canvas, details, embed,

  54. figure, figcaption, footer, header, hgroup,

  55. menu, nav, output, ruby, section, summary,

  56. time, mark, audio, video {

  57.   margin: 0;

  58.   padding: 0;

  59.   border: 0;

  60.   font-size: 100%;

  61.   font: inherit;

  62.   vertical-align: baseline;

  63. }

  64. /* HTML5 display-role reset for older browsers */

  65. article, aside, details, figcaption, figure,

  66. footer, header, hgroup, menu, nav, section { display: block; }

  67. body { line-height: 1; }

  68. blockquote, q { quotes: none; }

  69. blockquote:before, blockquote:after,

  70. q:before, q:after {

  71.   content: '';

  72.   content: none;

  73. }

  74. table {

  75.   border-collapse: collapse;

  76.   border-spacing: 0;

  77. }

  78. 

  79. /* http://practicaltypography.com/equity.html */

  80. /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */

  81. /* https://www.filamentgroup.com/lab/js-web-fonts.html */

  82. @font-face {

  83.   font-family: 'EquityTextB';

  84.   src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'),

  85.        url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff');

  86.   font-weight: 300;

  87.   font-style: normal;

  88.   font-display: swap;

  89. }

  90. @font-face {

  91.   font-family: 'EquityTextB';

  92.   src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'),

  93.        url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff');

  94.   font-weight: 300;

  95.   font-style: italic;

  96.   font-display: swap;

  97. }

  98. @font-face {

  99.   font-family: 'EquityTextB';

  100.   src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'),

  101.        url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff');

  102.   font-weight: 700;

  103.   font-style: normal;

  104.   font-display: swap;

  105. }

  106. 

  107. @font-face {

  108.   font-family: 'ConcourseT3';

  109.   src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'),

  110.        url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff');

  111.   font-weight: 300;

  112.   font-style: normal;

  113.   font-display: swap;

  114. }

  115. 

  116. 

  117. /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */

  118. body {

  119.   /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */

  120.   font-family: "EquityTextB", Palatino, serif;

  121.   background-color: #f0f0ea;

  122.   color: #07486c;

  123.   font-kerning: normal;

  124.   -moz-osx-font-smoothing: grayscale;

  125.   -webkit-font-smoothing: subpixel-antialiased;

  126.   text-rendering: optimizeLegibility;

  127.   font-variant-ligatures: common-ligatures contextual;

  128.   font-feature-settings: "kern", "liga", "clig", "calt";

  129. }

  130. pre, code, kbd, samp, var, tt {

  131.   font-family: 'TriplicateT4c', monospace;

  132. }

  133. em {

  134.   font-style: italic;

  135.   color: #323a45;

  136. }

  137. strong {

  138.   font-weight: bold;

  139.   color: black;

  140. }

  141. nav {

  142.   background-color: #323a45;

  143.   color: #f0f0ea;

  144.   display: flex;

  145.   justify-content: space-around;

  146.   padding: 1rem .5rem;

  147. }

  148.   nav:last-child {

  149.     border-bottom: 1vh solid #2d7474;

  150.   }

  151.   nav a {

  152.     color: #f0f0ea;

  153.   }

  154.   nav abbr {

  155.     border-bottom: 1px dotted white;

  156.   }

  157. 

  158. h1 {

  159.   border-top: 1vh solid #2d7474;

  160.   border-bottom: .2vh dotted #2d7474;

  161.   background-color: #e3e1e1;

  162.   color: #323a45;

  163.   text-align: center;

  164.   padding: 5rem 0 4rem 0;

  165.   width: 100%;

  166.   font-family: 'ConcourseT3';

  167.   display: flex;

  168.   flex-direction: column;

  169. }

  170.   h1.single {

  171.     padding-bottom: 10rem;

  172.   }

  173.   h1 span {

  174.     position: absolute;

  175.     top: 1vh;

  176.     left: 20%;

  177.     line-height: 0;

  178.   }

  179.     h1 span a {

  180.       line-height: 1.7;

  181.       padding: 1rem 1.2rem .6rem 1.2rem;

  182.       border-radius: 0 0 6% 6%;

  183.       background: #2d7474;

  184.       font-size: 1.3rem;

  185.       color: white;

  186.       text-decoration: none;

  187.     }

  188. h2 {

  189.   margin: 4rem 0 1rem;

  190.   border-top: .2vh solid #2d7474;

  191.   padding-top: 1vh;

  192. }

  193. h3 {

  194.   text-align: center;

  195.   margin: 3rem 0 .75em;

  196. }

  197. hr {

  198.   height: .4rem;

  199.   width: .4rem;

  200.   border-radius: .4rem;

  201.   background: #07486c;

  202.   margin: 2.5rem auto;

  203. }

  204. time {

  205.   display: bloc;

  206.   margin-left: 0 !important;

  207. }

  208. ul, ol {

  209.   margin: 2rem;

  210. }

  211. ul {

  212.   list-style-type: square;

  213. }

  214. a {

  215.   text-decoration-skip-ink: auto;

  216.   text-decoration-thickness: 0.05em;

  217.   text-underline-offset: 0.09em;

  218. }

  219. article {

  220.   max-width: 50rem;

  221.   display: flex;

  222.   flex-direction: column;

  223.   margin: 2rem auto;

  224. }

  225.   article.single {

  226.     border-top: .2vh dotted #2d7474;

  227.     margin: -6rem auto 1rem auto;

  228.     background: #f0f0ea;

  229.     padding: 2rem;

  230.   }

  231.   article p:last-child {

  232.     margin-bottom: 1rem;

  233.   }

  234. p {

  235.   padding: 0 .5rem;

  236.   margin-left: 3rem;

  237. }

  238.   p + p,

  239.   figure + p {

  240.     margin-top: 2rem;

  241.   }

  242. 

  243. blockquote {

  244.   background-color: #e3e1e1;

  245.   border-left: .5vw solid #2d7474;

  246.   display: flex;

  247.   flex-direction: column;

  248.   align-items: center;

  249.   padding: 1rem;

  250.   margin: 1.5rem;

  251. }

  252.   blockquote cite {

  253.     font-style: italic;

  254.   }

  255.   blockquote p {

  256.     margin-left: 0;

  257.   }

  258. 

  259. figure {

  260.   border-top: .2vh solid #2d7474;

  261.   background-color: #e3e1e1;

  262.   text-align: center;

  263.   padding: 1.5rem 0;

  264.   margin: 1rem 0 0;

  265.   font-size: 1.5rem;

  266.   width: 100%;

  267. }

  268.   figure img {

  269.     max-width: 250px;

  270.     max-height: 250px;

  271.     border: .5vw solid #323a45;

  272.     padding: 1px;

  273.   }

  274. figcaption {

  275.   padding: 1rem;

  276.   line-height: 1.4;

  277. }

  278. aside {

  279.   display: flex;

  280.   flex-direction: column;

  281.   background-color: #e3e1e1;

  282.   padding: 1rem 0;

  283.   border-bottom: .2vh solid #07486c;

  284. }

  285.   aside p {

  286.     max-width: 50rem;

  287.     margin: 0 auto;

  288.   }

  289. 

  290. /* https://fvsch.com/code/css-locks/ */

  291. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  292.   font-size: 1rem;

  293.   line-height: calc( 1.5em + 0.2 * 1rem );

  294. }

  295. h1 {

  296.   font-size: 1.9rem;

  297.   line-height: calc( 1.2em + 0.2 * 1rem );

  298. }

  299. h2 {

  300.   font-size: 1.6rem;

  301.   line-height: calc( 1.3em + 0.2 * 1rem );

  302. }

  303. h3 {

  304.   font-size: 1.35rem;

  305.   line-height: calc( 1.4em + 0.2 * 1rem );

  306. }

  307. @media (min-width: 20em) {

  308.   /* The (100vw - 20rem) / (50 - 20) part

  309.      resolves to 0-1rem, depending on the

  310.      viewport width (between 20em and 50em). */

  311.   p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  312.     font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) );

  313.     line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) );

  314.     margin-left: 0;

  315.   }

  316.   h1 {

  317.     font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  318.     line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) );

  319.   }

  320.   h2 {

  321.     font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  322.     line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) );

  323.   }

  324.   h3 {

  325.     font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  326.     line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) );

  327.   }

  328. }

  329. @media (min-width: 50em) {

  330.   /* The right part of the addition *must* be a

  331.      rem value. In this example we *could* change

  332.      the whole declaration to font-size:2.5rem,

  333.      but if our baseline value was not expressed

  334.      in rem we would have to use calc. */

  335.   p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  336.     font-size: calc( 1rem + .6 * 1rem );

  337.     line-height: 1.5em;

  338.   }

  339.   p, li, pre, details {

  340.     margin-left: 3rem;

  341.   }

  342.   h1 {

  343.     font-size: calc( 1.9rem + 1.5 * 1rem );

  344.     line-height: 1.2em;

  345.   }

  346.   h2 {

  347.     font-size: calc( 1.5rem + 1.5 * 1rem );

  348.     line-height: 1.3em;

  349.   }

  350.   h3 {

  351.     font-size: calc( 1.35rem + 1.5 * 1rem );

  352.     line-height: 1.4em;

  353.   }

  354.   figure img {

  355.     max-width: 500px;

  356.     max-height: 500px;

  357.   }

  358. }

  359. 

  360. figure.unsquared {

  361.   margin-bottom: 1.5rem;

  362. }

  363.   figure.unsquared img {

  364.     height: inherit;

  365.   }

  366. 

  367. 

  368. 

  369. @media print {

  370.   body { font-size: 100%; }

  371.   a:after { content: " (" attr(href) ")"; }

  372.   a, a:link, a:visited, a:after {

  373.     text-decoration: underline;

  374.     text-shadow: none !important;

  375.     background-image: none !important;

  376.     background: white;

  377.     color: black;

  378.   }

  379.   abbr[title] { border-bottom: 0; }

  380.   abbr[title]:after { content: " (" attr(title) ")"; }

  381.   img { page-break-inside: avoid; }

  382.   @page { margin: 2cm .5cm; }

  383.   h1, h2, h3 { page-break-after: avoid; }

  384.   p3 { orphans: 3; widows: 3; }

  385.   img {

  386.     max-width: 250px !important;

  387.     max-height: 250px !important;

  388.   }

  389.   nav, aside { display: none; }

  390. }

  391. 

  392. ul.with_columns {

  393.   column-count: 1;

  394. }

  395. @media (min-width: 20em) {

  396.   ul.with_columns {

  397.     column-count: 2;

  398.   }

  399. }

  400. @media (min-width: 50em) {

  401.   ul.with_columns {

  402.     column-count: 3;

  403.   }

  404. }

  405. ul.with_two_columns {

  406.   column-count: 1;

  407. }

  408. @media (min-width: 20em) {

  409.   ul.with_two_columns {

  410.     column-count: 1;

  411.   }

  412. }

  413. @media (min-width: 50em) {

  414.   ul.with_two_columns {

  415.     column-count: 2;

  416.   }

  417. }

  418. 

  419. .gallery {

  420.   display: flex;

  421.   flex-wrap: wrap;

  422.   justify-content: space-around;

  423. }

  424.   .gallery figure img {

  425.     margin-left: 1rem;

  426.     margin-right: 1rem;

  427.   }

  428.   .gallery figure figcaption {

  429.     font-family: 'ConcourseT3'

  430.   }

  431. 

  432. footer {

  433.   font-family: 'ConcourseT3';

  434.   display: flex;

  435.   flex-direction: column;

  436.   border-top: 3px solid white;

  437.   padding: 4rem 0;

  438.   background-color: #07486c;

  439.   color: white;

  440. }

  441.   footer > * {

  442.     max-width: 50rem;

  443.     margin: 0 auto;

  444.   }

  445.   footer a {

  446.     color: #f1c40f;

  447.   }

  448.   footer .avatar {

  449.     width: 200px;

  450.     height: 200px;

  451.     border-radius: 50%;

  452.     float: left;

  453.     -webkit-shape-outside: circle();

  454.     shape-outside: circle();

  455.     margin-right: 2rem;

  456.     padding: 2px 5px 5px 2px;

  457.     background: white;

  458.     border-left: 1px solid #f1c40f;

  459.     border-top: 1px solid #f1c40f;

  460.     border-right: 5px solid #f1c40f;

  461.     border-bottom: 5px solid #f1c40f;

  462.   }

  463. </style>

  464. 

  465. <h1 class="single">

  466.   <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span>

  467.   Cours IUT : Flexbox et Styleguide

  468.   <time>Publié le 16 novembre 2014</time>

  469. </h1>

  470. <article class="single">

  471.   <blockquote>

  472. <p>Afin de faire émerger les pratiques personnelles des élèves, renforcer leurs connaissances, il me semble important d’instaurer l’horizontalité dans les rapports humains, au sein de la classe. J’espère pouvoir devenir alors un accompagnateur, un facilitateur, encadrant le processus de maîtrise des concepts de littérature et de grammaire. Le but est de fluidifier la communication, d’augmenter les feedbacks, de rendre les réussites plus accessibles.</p>

  473. <p><cite><em><a href="http://pedagogieagile.com/2014/11/09/une-classe-est-un-organisme-vivant/">D’une sélection artificielle à une sélection naturelle dans un écosystème complexe</a></em></cite></p>

  474. </blockquote>

  475. <p>Suite de <a href="/david/pro/enseignement/">mes aventures dans l’enseignement</a>, après <a href="/david/blog/2014/cours-iut-bases/">les bases</a>, on passe à du plus consistant. On commence par repartir de zéro sur un sujet qui leur tient à cœur et en plus petit groupes comme proposé en rétro. La première contrainte et d’établir un <em>styleguide</em> en parallèle du développement du site, c’est quelque chose que j’utilise <a href="/david/biologeek/archives/20070522-des-css-de-qualite/">depuis 7 ans</a> et qui dispose maintenant <a href="http://styleguides.maban.co.uk/">de nombreuses ressources</a>. J’aime <a href="http://la-cascade.ghost.io/creer-un-guide-de-style/">cette approche</a> pour plusieurs raisons :</p>

  476. <ul>

  477. <li>réflexion sur la sémantique lorsqu’on se rend compte du nombre d’<em>id</em>/<em>class</em> à ajouter au <em>styleguide</em> pour avoir quelque chose de potable ;</li>

  478. <li>documentation dynamique pour les divers contributeurs et pour soi-même, on a vite fait de dupliquer un style par méconnaissance du projet ;</li>

  479. <li>facilité d’expérimentation lors de refontes en applicant directement la nouvelle feuille de style au <em>styleguide</em>.</li>

  480. </ul>

  481. <p>Il s’avère que c’est aussi extrêmement utile en terme de retour pour corriger <a href="/david/blog/2013/tdd-conception-emergente/">un bug récalcitrant de façon visuelle</a>.</p>

  482. <p>Le second concept que je souhaite aborder est <a href="http://www.w3.org/TR/css3-flexbox/">Flexbox</a>, c’est encore relativement récent mais Vincent me rappelait à juste titre que l’<cite>« on enseigne pour aujourd’hui et pour demain »</cite> (pour hier, il reste les <em>polyfills</em>) et <em>Flexbox</em> est aussi un moyen de ne pas les dégoûter tout de suite des <em>CSS</em> :-). C’était bien sûr une occasion pour moi de me mettre à niveau dans ce domaine et d’expérimenter, <strong>participer à une formation reste la meilleure façon d’apprendre.</strong></p>

  483. <p>Quelques ressources sur le sujet :</p>

  484. <ul>

  485. <li><a href="http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html">CSS3 Flexbox Layout module</a> chez Alsacréations</li>

  486. <li><a href="http://www.sketchingwithcss.com/samplechapter/cheatsheet.html">The Ultimate Flexbox Cheat Sheet</a></li>

  487. <li><a href="https://philipwalton.github.io/solved-by-flexbox/">Solved by Flexbox</a></li>

  488. <li><a href="http://jonibologna.com/flexbox-cheatsheet/">Flexbox Cheatsheet Cheatsheet</a></li>

  489. <li><a href="http://css-tricks.com/snippets/css/a-guide-to-flexbox/">A Complete Guide to Flexbox</a></li>

  490. </ul>

  491. <p>Si j’ai le temps, je terminerai sur l’approche <em>mobile</em> et les <em>media-queries</em> pour tirer pleinement partie de <em>Flexbox</em>. Je me rends compte à quel point les minutes sont comptées lorsqu’on est limité à 24 heures de cours sur un sujet aussi vaste…</p>

  492. </article>

  493. 

  494.   <section>

  495.     <h3>Discussion suite à l’article :</h3>

  496. 

  497.       <article id="comment-1" class="comment">

  498.         <blockquote>

  499. <p>(pour hier, il reste les polyfills) et Flexbox est aussi un moyen de ne pas les dégoûter tout de suite des CSS</p>

  500. </blockquote>

  501. <p>C’est aussi le moyen de comprendre l’horreur de l’utilisation prématurée d’une technologie avant maturation. La syntaxe ayant changée trois fois de suite en quelques années. En Asie de nombreux sites ne sont que flexbox 1ere ou 2eme génération.</p>

  502. <p>Conséquences :</p>

  503. <ul>

  504. <li>quand le site a la vieille syntaxe seulement, il ne marche pas dans les navigateurs autre que iOS (récent et courant)</li>

  505. <li>comme les sites l’utilisent abondamment sans corriger, Safari ne peut pas abandonner la vieille syntaxe, bien que la nouvelle syntaxe est présente.</li>

  506. <li>quand on conçoit un site aujourd’hui et si on veut donner une expérience aux utilisateurs possédant des iOS sur devices de vieilles générations donc bloqués à iOS 6, il faut ajouter la vieille syntaxe en plus de la syntaxe normale.</li>

  507. </ul>

  508. <p>Une bonne façon de comprendre les conséquences de notre pratique Web en tant que développeurs.</p>

  509.         <p><cite>Karl Dubost, le <a href="#comment-1">2014-11-29 à 03:47</a></cite></p>

  510.       </article>

  511. 

  512.       <article id="comment-2" class="comment">

  513.         <blockquote>

  514. <p>Une bonne façon de comprendre les conséquences de notre pratique Web en tant que développeurs.</p>

  515. </blockquote>

  516. <p>Ce qui rappelle furieusement le "legacy" qu’a subi l’équipe Microsoft

  517. pendant des années, ou encore le moment où, faute de CSS préfixées, la

  518. propriété clip() n’a jamais pu être généralisée alors que c’était une

  519. bonne idée.</p>

  520. <p>Bis repetita et tout ça.</p>

  521.         <p><cite>Stéphane Deschamps, le <a href="#comment-2">2014-11-29 à 12:45</a></cite></p>

  522.       </article>

  523. 

  524.       <article id="comment-3" class="comment">

  525.         <blockquote>

  526. <p>Bis repetita et tout ça.</p>

  527. </blockquote>

  528. <p>Je lisais hier <a href="http://css-tricks.com/using-flexbox/">cet article à ce sujet</a>.</p>

  529. <p>Confusant qu’ils disaient…</p>

  530.         <p><cite>David Larlet, le <a href="#comment-3">2014-11-30 à 05:19</a></cite></p>

  531.       </article>

  532. 

  533.   </section>

  534. 

  535. 

  536.   <figure class="image" property="schema:image">

  537.     <img src="/static/david/blog/2014/cours-iut-flexbox-styleguide.jpg" alt="" />

  538.   </figure>

  539. 

  540. 

  541. 

  542. <nav id="jumpto">

  543.   <p>

  544.     <a rel=prev href="/david/blog/2014/flux-donnees/">← Flux et données</a> | <a href="/david/blog/" title="Retour à la liste des expériences">↑</a> | <a rel=next href="/david/blog/2014/cours-iut-responsive-documentation/">Cours IUT : Responsive et Documentation →</a>

  545.   </p>

  546. </nav>

  547. 

  548. <footer>

  549.   <div>

  550.     <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">

  551.     <p>

  552.       Bonjour/Hi!

  553.       Je suis <a href="/david/" title="Profil public">David&nbsp;Larlet</a>, je vis actuellement à Montréal et j’alimente cet espace depuis 15 ans. <br>

  554.       Si tu as apprécié cette lecture, n’hésite pas à poursuivre ton exploration. Par exemple via les <a href="/david/blog/" title="Expériences bienveillantes">réflexions bimestrielles</a>, la <a href="/david/stream/2019/" title="Pensées (dés)articulées">veille hebdomadaire</a> ou en t’abonnant au <a href="/david/log/" title="S’abonner aux publications via RSS">flux RSS</a> (<a href="/david/blog/2019/flux-rss/" title="Tiens c’est quoi un flux RSS ?">so 2005</a>).

  555.     </p>

  556.     <p>

  557.       Je m’intéresse à la place que je peux avoir dans ce monde. En tant qu’humain, en tant que membre d’une famille et en tant qu’associé d’une coopérative. De temps en temps, je fais aussi des <a href="https://github.com/davidbgk" title="Principalement sur Github mais aussi ailleurs">trucs techniques</a>. Et encore plus rarement, <a href="/david/talks/" title="En ce moment je laisse plutôt la place aux autres">j’en parle</a>.

  558.     </p>

  559. 

  560.       <p>

  561.         Les dernières publications hebdomadaires sont :

  562.       </p>

  563.       <ul class="with_columns">

  564. 

  565.           <li>

  566.             <a href="/david/stream/2019/12/31/">Merci</a>

  567.           </li>

  568. 

  569.           <li>

  570.             <a href="/david/stream/2019/12/27/">Intemporels</a>

  571.           </li>

  572. 

  573.           <li>

  574.             <a href="/david/stream/2019/12/24/">Outils</a>

  575.           </li>

  576. 

  577.           <li>

  578.             <a href="/david/stream/2019/12/17/">Origines</a>

  579.           </li>

  580. 

  581.           <li>

  582.             <a href="/david/stream/2019/12/10/">Publier</a>

  583.           </li>

  584. 

  585.           <li>

  586.             <a href="/david/stream/2019/12/03/">En forêt</a>

  587.           </li>

  588. 

  589.           <li>

  590.             <a href="/david/stream/2019/11/26/">Ecocentric</a>

  591.           </li>

  592. 

  593.           <li>

  594.             <a href="/david/stream/2019/11/19/">Se livrer</a>

  595.           </li>

  596. 

  597.           <li>

  598.             <a href="/david/stream/2019/11/12/">Dépendances</a>

  599.           </li>

  600. 

  601.           <li>

  602.             <a href="/david/stream/2019/11/05/">Positif</a>

  603.           </li>

  604. 

  605.           <li>

  606.             <a href="/david/stream/2019/10/29/">Dettes</a>

  607.           </li>

  608. 

  609.           <li>

  610.             <a href="/david/stream/2019/10/22/">Privilèges</a>

  611.           </li>

  612. 

  613.           <li>

  614.             <a href="/david/stream/2019/10/15/">Discrétion</a>

  615.           </li>

  616. 

  617.           <li>

  618.             <a href="/david/stream/2019/10/08/">Désespérance</a>

  619.           </li>

  620. 

  621.           <li>

  622.             <a href="/david/stream/2019/10/01/">Présent</a>

  623.           </li>

  624. 

  625.           <li>

  626.             <a href="/david/stream/2019/09/24/">Manifester</a>

  627.           </li>

  628. 

  629.           <li>

  630.             <a href="/david/stream/2019/09/17/">Arpenter</a>

  631.           </li>

  632. 

  633.           <li>

  634.             <a href="/david/stream/2019/09/10/">Nostalgie</a>

  635.           </li>

  636. 

  637.           <li>

  638.             <a href="/david/stream/2019/09/03/">Déconstruire</a>

  639.           </li>

  640. 

  641.           <li>

  642.             <a href="/david/stream/2019/08/27/">Documenter</a>

  643.           </li>

  644. 

  645.           <li>

  646.             <a href="/david/stream/2019/08/20/">Frustration</a>

  647.           </li>

  648. 

  649.           <li>

  650.             <a href="/david/stream/2019/08/13/">Holisme</a>

  651.           </li>

  652. 

  653.           <li>

  654.             <a href="/david/stream/2019/08/06/">1%</a>

  655.           </li>

  656. 

  657.           <li>

  658.             <a href="/david/stream/2019/07/30/">Exemplarité</a>

  659.           </li>

  660. 

  661.           <li>

  662.             <a href="/david/stream/2019/07/23/">Timelines</a>

  663.           </li>

  664. 

  665.           <li>

  666.             <a href="/david/stream/2019/07/16/">Écoute</a>

  667.           </li>

  668. 

  669.           <li>

  670.             <a href="/david/stream/2019/07/02/">Anxiété</a>

  671.           </li>

  672. 

  673.           <li>

  674.             <a href="/david/stream/2019/06/21/">À lier</a>

  675.           </li>

  676. 

  677.           <li>

  678.             <a href="/david/stream/2019/06/14/">Pauvreté</a>

  679.           </li>

  680. 

  681.           <li>

  682.             <a href="/david/stream/2019/06/07/">Amateur</a>

  683.           </li>

  684. 

  685.           <li>

  686.             <a href="/david/stream/2019/05/31/">Pollution</a>

  687.           </li>

  688. 

  689.           <li>

  690.             <a href="/david/stream/2019/05/24/">Apaisement</a>

  691.           </li>

  692. 

  693.           <li>

  694.             <a href="/david/stream/2019/05/10/">Folie</a>

  695.           </li>

  696. 

  697.           <li>

  698.             <a href="/david/stream/2019/05/03/">Sympathie</a>

  699.           </li>

  700. 

  701.           <li>

  702.             <a href="/david/stream/2019/04/12/">Péremption</a>

  703.           </li>

  704. 

  705.           <li>

  706.             <a href="/david/stream/2019/04/05/">Définitions</a>

  707.           </li>

  708. 

  709.           <li>

  710.             <a href="/david/stream/2019/03/29/">Acceptation</a>

  711.           </li>

  712. 

  713.           <li>

  714.             <a href="/david/stream/2019/03/22/">Dissonance</a>

  715.           </li>

  716. 

  717.           <li>

  718.             <a href="/david/stream/2019/03/15/">Reconnaissance</a>

  719.           </li>

  720. 

  721.           <li>

  722.             <a href="/david/stream/2019/03/08/">Lecture</a>

  723.           </li>

  724. 

  725.           <li>

  726.             <a href="/david/stream/2019/03/01/">Journaux</a>

  727.           </li>

  728. 

  729.           <li>

  730.             <a href="/david/stream/2019/02/22/">Écriture</a>

  731.           </li>

  732. 

  733.           <li>

  734.             <a href="/david/stream/2019/02/15/">Kyriarchie</a>

  735.           </li>

  736. 

  737.           <li>

  738.             <a href="/david/stream/2019/02/08/">Mots-serrures</a>

  739.           </li>

  740. 

  741.           <li>

  742.             <a href="/david/stream/2019/02/01/">Sans voie</a>

  743.           </li>

  744. 

  745.           <li>

  746.             <a href="/david/stream/2019/01/25/">Auto-diagnostic</a>

  747.           </li>

  748. 

  749.           <li>

  750.             <a href="/david/stream/2019/01/18/">Agilité</a>

  751.           </li>

  752. 

  753.           <li>

  754.             <a href="/david/stream/2019/01/11/">Métaphores</a>

  755.           </li>

  756. 

  757.           <li>

  758.             <a href="/david/stream/2019/01/04/">Balbutiements</a>

  759.           </li>

  760. 

  761.       </ul>

  762. 

  763.     <p>

  764.       Voici quelques articles choisis :

  765.       <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,

  766.       <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,

  767.       <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,

  768.       <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,

  769.       <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,

  770.       <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,

  771.       <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,

  772.       <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,

  773.       <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,

  774.       <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,

  775.       <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,

  776.       <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,

  777.       <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,

  778.       <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,

  779.       <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,

  780.       et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>

  781.     </p>

  782.     <p>

  783.       On peut <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">échanger par courriel</a>. Si éventuellement tu souhaites que l’on travaille ensemble, tu devrais commencer par consulter le <a href="http://larlet.com">profil dédié à mon activité professionnelle</a> et/ou contacter directement <a href="http://scopyleft.fr/">scopyleft</a>, la <abbr title="Société coopérative et participative">SCOP</abbr> dont je fais partie depuis six ans. Je recommande au préalable de lire <a href="/david/blog/2018/cout-site/" title="Attention ce qui va suivre peut vous choquer">combien coûte un site</a> et pourquoi je suis plutôt favorable à une <a href="/david/pro/devis/" title="Discutons-en !">non-demande de devis</a>.

  784.     </p>

  785.     <p>

  786.       Je ne traque pas ta navigation mais mon

  787.       <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>

  788.       conserve des logs d’accès.

  789.     </p>

  790.   </div>

  791. </footer>

  792. <script type="text/javascript">

  793.   ;(_ => {

  794.     const jumper = document.getElementById('jumper')

  795.     jumper.addEventListener('click', e => {

  796.       e.preventDefault()

  797.       const anchor = e.target.getAttribute('href')

  798.       const targetEl = document.getElementById(anchor.substring(1))

  799.       targetEl.scrollIntoView({behavior: 'smooth'})

  800.     })

  801.   })()

  802. </script>

  803. 

  804.   <script>

  805.   /* Service workers */

  806.   if (navigator.serviceWorker) {

  807.     window.addEventListener('load', function () {

  808.       var selector = 'a[href^="/david/cache/"], a[rel=prev], a[rel=next]'

  809.       function sendLinks (selector) {

  810.         var links = [].slice.call(document.querySelectorAll(selector)).map(function (link) {

  811.           return link.getAttribute('href')

  812.         })

  813.         links.push(location.pathname)  // Put the current page in cache too.

  814.         navigator.serviceWorker.controller.postMessage({ links: links })

  815.       }

  816.       navigator.serviceWorker.getRegistration()

  817.         .then(function (registration) {

  818.           if (!registration || !navigator.serviceWorker.controller) {

  819.             return navigator.serviceWorker.register('/serviceworker.js')

  820.               .then(navigator.serviceWorker.ready)

  821.               .then(function () {

  822.                 console.log('[ServiceWorker] Ready to go!')

  823.               })

  824.               .catch(console.error.bind(console))

  825.           } else {

  826.             console.log('[ServiceWorker] Send links via registration')

  827.             sendLinks(selector)

  828.           }

  829.         })

  830.       navigator.serviceWorker.addEventListener('controllerchange', function () {

  831.         console.log('[ServiceWorker] Send links via controller change')

  832.         sendLinks(selector)

  833.       })

  834.       navigator.serviceWorker.addEventListener('message', function (event) {

  835.         var link = document.querySelector('a[href="' + event.data.link + '"]')

  836.         if (event.data.status && link) {

  837.           link.style.backgroundColor = '#2d7474'

  838.           link.style.color = '#f0f0ea'

  839. 

  840.             link.setAttribute('title', 'En cache pour consultation sans connexion')

  841. 

  842.         }

  843.       })

  844.     })

  845.   } else {

  846.     console.warn('[ServiceWorker] No cache for old browsers.')

  847.   }

  848. </script>