Un focus avancé sur la propriété CSS display (block, flex, inline, grid...)#CSS#display#Flex#GridDJo09 avril 2019 à 08h20ACCEDER AU SITE1753J'aime cet articleNative image lazy-loading for the web!In this post, we'll look at the new loading attribute which brings native and lazy-loading to the web!. For the curious, here&...</div></div><div class="article-detailed-details"><div class="block-grid"><div class="h3-size primary-color text-bold">Popularité de cette veille</div><span class="article-detailed-details-help" data-tooltip title="La popularité est calculée à partir du nombre de mises en favoris, clics, RT, ... depuis la plublication, avec des pondération dans le temps.">?</span><div class="article-detailed-hits"><span class="icon-power"></span><p>1753</p></div></div><div class="article-detailed-graph"><canvas id=scoringFinal></canvas><script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script><script> (function() { var periods = JSON.parse('[["janv.","2024"],["f\u00e9vr.","2024"],["mars","2024"],["avril","2024"],["mai","2024"],["juin","2024"],["juil.","2024"],["ao\u00fbt","2024"],["sept.","2024"],["oct.","2024"],["nov.","2024"],["d\u00e9c.","2024"]]'); var scoring = JSON.parse('[145,1608,145,1608,145,1608,145,1608,145,1608,145,1608]'); var ranks = JSON.parse('[791,156,791,156,791,156,791,156,791,156,791,156]'); var ctx = document.getElementById("scoringFinal").getContext('2d'); Chart.defaults.global.defaultFontFamily = 'Barlow'; Chart.defaults.global.elements.point.backgroundColor = 'rgba(255,255,255,1)'; var myChart = new Chart(ctx, { type: 'line', maintainAspectRatio: true, data: { labels: periods, datasets: [{ label: 'Final score', data: scoring, backgroundColor: 'rgba(247, 143, 44, 0.3)', borderColor: 'rgba(247, 143, 44, 1)', borderWidth: 2, pointBackgroundColor: 'rgba(255,255,255,1)', pointRadius: 5, pointBorderWidth: 2, pointHoverRadius: 5, pointHoverBackgroundColor: '#f78f2c', lineTension: 0 }] }, options: { maintainAspectRatio: false, scales: { yAxes: [{ ticks: { beginAtZero: false, fontColor: '#f78f2c', padding: 12, min: 0 }, gridLines: { display: true, borderDash: [10,5], lineWidth: 1, drawTicks: false, zeroLineWidth: 2, zeroLineColor: '#f78f2c', zeroLineBorderDash:[0,0] }, }], xAxes: [{ ticks: { beginAtZero: false, fontColor: '#a1a1a1', padding: 12 }, gridLines: { display: true, borderDash: [10,5], lineWidth: 1, drawTicks: false, zeroLineWidth: 2, zeroLineColor: '#f78f2c', zeroLineBorderDash:[0,0] }, }], }, tooltips: { backgroundColor: '#506A85', cornerRadius: 5, xPadding: 13, yPadding: 13, titleMarginBottom: 10, titleFontSize: 13, bodyFontSize: 13, callbacks: { label: function (tooltipItem, data) { var tooltipContent = ""; if (ranks[tooltipItem.index]) { tooltipContent += 'Classement : '+ ranks[tooltipItem.index]; } tooltipContent += ' (' + data.datasets[tooltipItem.datasetIndex].label + ' : ' + data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index] + ')'; return tooltipContent; } } }, legend: { display: false }, } }); })(); </script></div></div><div class="article-detailed-source"><p>Source : addyosmani.com</p></div><ul class="js-share share no-bullet small-up-5"><li><a href="https://www.facebook.com/sharer/sharer.php?u=https://lafermeduweb.net/veille/un-focus-avance-sur-la-propriete-css-display-block-flex-inline-grid" class="js-share-item share-item share-item-facebook block-grid" disabled rel="nofollow" target="_blank"><span class="share-icon icon-facebook"></span><span class="share-text show-for-sr">Partager sur Facebook</span></a></li><li><a href="https://twitter.com/share?text=Un%20focus%20avanc%C3%A9%20sur%20la%20propri%C3%A9t%C3%A9%20CSS%20display%20%28block%2C%20flex%2C%20inline%2C%20grid...%29&url=https://lafermeduweb.net/veille/un-focus-avance-sur-la-propriete-css-display-block-flex-inline-grid" class="js-share-item share-item share-item-twitter block-grid" disabled rel="nofollow" target="_blank"><span class="share-icon icon-twitter"></span><span class="share-text show-for-sr">Partager sur Twitter</span></a></li><li><a href="https://plus.google.com/share?url=https://lafermeduweb.net/veille/un-focus-avance-sur-la-propriete-css-display-block-flex-inline-grid" class="js-share-item share-item share-item-googleplus block-grid" disabled rel="nofollow" target="_blank"><span class="share-icon icon-googleplus"></span><span class="share-text show-for-sr">Partager sur Google Plus</span></a></li><li><a href="https://www.linkedin.com/shareArticle?mini=true&url=https://lafermeduweb.net/veille/un-focus-avance-sur-la-propriete-css-display-block-flex-inline-grid&title=Un%20focus%20avanc%C3%A9%20sur%20la%20propri%C3%A9t%C3%A9%20CSS%20display%20%28block%2C%20flex%2C%20inline%2C%20grid...%29" class="js-share-item share-item share-item-linkedin block-grid" disabled rel="nofollow" target="_blank"><span class="share-icon icon-linkedin"></span><span class="share-text show-for-sr">Partager sur LinkedIn</span></a></li><li><a href="mailto:?&subject=Un%20focus%20avanc%C3%A9%20sur%20la%20propri%C3%A9t%C3%A9%20CSS%20display%20%28block%2C%20flex%2C%20inline%2C%20grid...%29&body=Bonjour, %0D%0ALien vers l'annonce : https://lafermeduweb.net/veille/un-focus-avance-sur-la-propriete-css-display-block-flex-inline-grid" class="js-share-item share-item share-item-email block-grid" disabled rel="nofollow" target="_blank"><span class="share-icon icon-email"></span><span class="share-text show-for-sr">Partager par email</span></a></li></ul></article><div class="row"><div class="small-12 large-6 small-order-2 medium-order-2 large-order-1 column"><a href="/veille/9-astuces-seo-avancees-basees-sur-les-sitemaps" class="article-browse is-block"><small>Veille précédente</small><h3> 9 astuces SEO avancées basées sur les sitemaps </h3><div class="article-browse-icon icon-arrow-left"></div></a></div><div class="small-12 large-6 small-order-1 medium-order-1 large-order-2 column"><a href="/veille/du-lazy-loading-natif-embarque-dans-les-navigateurs-avec-loading-lazy" class="article-browse is-block"><small>Veille suivante</small><h3> Du lazy loading natif embarqué dans les navigateurs avec loading=lazy </h3><div class="article-browse-icon icon-arrow-right"></div></a></div></div></div><aside class="column sidebar side-column-offset small-12 large-3"><div class="trends side-column small-12 medium-6 large-12 is-relative"><h3 class="h2-size text-uppercase secondary-color">TAGS ASSOCIES</h3><ul class="trends-list no-bullet"><li class="trends-item is-flex"><a href="/tag/css" class="trends-item-title">CSS</a><div class="trends-chart is-flex"><i class="trends-chart-item trends-chart-item-full"></i><i class="trends-chart-item trends-chart-item-full"></i><i class="trends-chart-item trends-chart-item-full"></i><i class="trends-chart-item trends-chart-item-full"></i><i class="trends-chart-item trends-chart-item-full"></i><i class="trends-chart-item trends-chart-item-full"></i><i class="trends-chart-item trends-chart-item-full"></i></div></li><li class="trends-item is-flex"><a href="/tag/grid" class="trends-item-title">Grid</a><div class="trends-chart is-flex"><i class="trends-chart-item trends-chart-item-empty"></i><i class="trends-chart-item trends-chart-item-empty"></i><i class="trends-chart-item trends-chart-item-empty"></i><i class="trends-chart-item trends-chart-item-empty"></i><i class="trends-chart-item trends-chart-item-empty"></i><i class="trends-chart-item trends-chart-item-empty"></i><i class="trends-chart-item trends-chart-item-full"></i></div></li><li class="trends-item is-flex"><a href="/tag/flex" class="trends-item-title">Flex</a><div class="trends-chart is-flex"><i class="trends-chart-item trends-chart-item-empty"></i><i class="trends-chart-item trends-chart-item-empty"></i><i class="trends-chart-item trends-chart-item-empty"></i><i class="trends-chart-item trends-chart-item-empty"></i><i class="trends-chart-item trends-chart-item-empty"></i><i class="trends-chart-item trends-chart-item-empty"></i><i class="trends-chart-item trends-chart-item-empty"></i></div></li><li class="trends-item is-flex"><a href="/tag/display" class="trends-item-title">display</a><div class="trends-chart is-flex"><i class="trends-chart-item trends-chart-item-empty"></i><i class="trends-chart-item trends-chart-item-empty"></i><i class="trends-chart-item trends-chart-item-empty"></i><i class="trends-chart-item trends-chart-item-empty"></i><i class="trends-chart-item trends-chart-item-empty"></i><i class="trends-chart-item trends-chart-item-empty"></i><i class="trends-chart-item trends-chart-item-empty"></i></div></li></ul></div><div class="article-side-wrapper side-column small-12 medium-6 large-12 is-relative"><h3 class="h2-size text-uppercase primary-color">ARTICLES ASSOCIES</h3><ul class="article-side-list no-margin no-bullet"><li class="article-side block-grid is-relative small-collapse"><div class="column small-2 medium-1 large-3"><a href="/veille/aligner-en-css-un-guide-pratique-complet"><img src="https://img.lafermeduweb.net/veille_68_48/img/links/2019/03/1111523383995518977.jpg" alt="Aligner en CSS : un guide pratique complet" /></a></div><div class="column small-10 medium-11 large-9"><div class="article-side-content"><h4><a href="/veille/aligner-en-css-un-guide-pratique-complet">Aligner en CSS : un guide pratique complet</a></h4></div></div></li><li class="article-side block-grid is-relative small-collapse"><div class="column small-2 medium-1 large-3"><a href="/veille/to-grid-or-to-flex"><img src="https://img.lafermeduweb.net/veille_68_48/img/links/2019/02/1096310648026398720.jpg" alt="To Grid or to Flex ?" /></a></div><div class="column small-10 medium-11 large-9"><div class="article-side-content"><h4><a href="/veille/to-grid-or-to-flex">To Grid or to Flex ?</a></h4></div></div></li><li class="article-side block-grid is-relative small-collapse"><div class="column small-2 medium-1 large-3"><a href="/veille/un-focus-complet-sur-la-propriete-css-display-contents"><img src="https://img.lafermeduweb.net/veille_68_48/img/links/2018/03/979246782675812352.jpg" alt="Un focus complet sur la propriété CSS display: contents;" /></a></div><div class="column small-10 medium-11 large-9"><div class="article-side-content"><h4><a href="/veille/un-focus-complet-sur-la-propriete-css-display-contents">Un focus complet sur la propriété CSS display: contents;</a></h4></div></div></li><li class="article-side block-grid is-relative small-collapse"><div class="column small-2 medium-1 large-3"><a href="/veille/css-grid-comprendre-les-differences-entre-grid-template-et-grid-auto"><img src="https://img.lafermeduweb.net/veille_68_48/img/links/2018/10/1051714329026940928.jpg" alt="CSS Grid: comprendre les différences entre grid-template et grid-auto" /></a></div><div class="column small-10 medium-11 large-9"><div class="article-side-content"><h4><a href="/veille/css-grid-comprendre-les-differences-entre-grid-template-et-grid-auto">CSS Grid: comprendre les différences entre grid-template et grid-auto</a></h4></div></div></li><li class="article-side block-grid is-relative small-collapse"><div class="column small-2 medium-1 large-3"><a href="/veille/grid-css-vs-flexbox-lequel-choisir"><img src="https://img.lafermeduweb.net/veille_68_48/img/links/2018/09/1045201374009589762.jpg" alt="Grid CSS vs Flexbox: Lequel choisir ?" /></a></div><div class="column small-10 medium-11 large-9"><div class="article-side-content"><h4><a href="/veille/grid-css-vs-flexbox-lequel-choisir">Grid CSS vs Flexbox: Lequel choisir ?</a></h4></div></div></li></ul></div><div class="autopromo side-column small-12" style="background-image: url('https://assets.lafermeduweb.net/images/misc/autopromo.png?v=1636132746');"><p>Vous souhaitez partager une veille avec la communauté <span class="secondary-color">La Ferme du Web</span> ?</p><a href="/contact" class="button">Proposer une veille</a></div></aside></div></main><footer class="l-footer"><div class="l-footer-top"><div class="row l-footer-inner"><nav class="l-navigation-footer block-grid"><a href="/mentions-legales">Mentions légales</a><a href="/donnees-privees">Vie privée</a><a href="/apropos">A propos</a><a href="/contact">Proposer une veille</a><a href="/contact">Nous contacter</a></nav><div class="social-networks-container large-right"><span class="social-networks-text">Suivez-nous</span><ul class="social-networks no-bullet "><li><a href="https://fr-fr.facebook.com/lafermeduweb/" target="_blank" class="social-networks-item" rel="nofollow"><div class="social-networks-icon"><span class="icon-facebook"></span></div><span class="show-for-medium">Facebook</span></a></li><li><a href="https://twitter.com/lafermeduweb" target="_blank" class="social-networks-item" rel="nofollow"><div class="social-networks-icon"><span class="icon-twitter"></span></div><span class="show-for-medium">Twitter</span></a></li></ul></div></div></div><div class="l-footer-bottom"><div class="row l-footer-inner"><div class="block-grid small-12 medium-5"><h3>La ferme du web est un site de veille technologiques destinées aux développeurs, designers et ergonomes web.</h3><p> Créée en 2008, La Ferme du Web est une plateforme dédiée au partage des connaissances, astuces, outils et bonnes pratiques du web / mobile.<br /> Les thématiques sont variées et s'adressent particulièrement aux développeurs, webdesigners, webmarketeurs, chefs de projets, webmasters et tous curieux du web.<br /> Tous les jours, retrouvez votre dose de veille techno et créez vos alertes emails sur les sujets qui vous intéressent.<br /><strong>Le net, ça se cultive !</strong></p></div><div class="block-grid small-12 medium-offset-1 medium-6 large-auto"><div class="l-footer-bottom-icon"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="572.74" height="604" viewBox="0 0 572.74 604"><defs><path id="hdvba" d="M798.42 291.99c-23.73-9.72-99.33-43.66-110.42-80.9 0 0 63.53 13.12 71.6 8.08 0 0-48.4-47.4-45.38-113.95 0 0 36.3 6.05 87.72 60.5 0 0-25.2-88.73-8.07-138.14 0 0 50.4 122.17 77.44 149.22 8.3-5.93 17-11.05 25.93-15.36-2.48-12.06-8.16-33.88-18.16-42.1 0 0 31.76 19.66 36.3 27.23 4.54 7.56-17.14-56.47-27.23-65.04-10.08-8.57 44.88 14.12 50.93 34.79 6.05 20.67-6.05-74.62-21.68-80.17-15.63-5.54 44.87-1.5 79.66 66.05 0 0 21.17-112.93-4.04-145.2 0 0 54.45 54.45 53.44 97.8-1 43.37-1 62.02-1 62.02s30.75-39.83 33.27-107.39c0 0 39.63 47.5 10.44 214.37 8.86 19.31 13.5 40.8 13.8 62.99 24.78 12.24 80 33.54 157.77 29.18 0 0-30.25 44.36-102.85 48.4 0 0 44.36 19.16 44.36 24.2 0 0-25.2 31.25-98.81 5.04 0 0 25.2 18.15 25.2 32.27 0 0-28.93-5.45-55.57-38.2-.59.9-1.14 1.82-1.75 2.73-36.22 53.9-94.58 82.51-149.67 79.3 4.4 24.3 4.05 52.93-7.61 83.42 0 0-6.75-12-5.25-28.5 0 0-19.87 31.87-31.87 36.37 0 0 4.12-22.12 15.37-40.86 0 0-27.37 26.61-38.24 20.99 0 0 26.48-29.84 36.03-76.97a133.01 133.01 0 0 1-26.34-11.13c28.78-12.32 64.76-36.18 85.11-81.75 0 0-13.26 3.72-23.86 16.44 0 0 8.48-36.59 3.18-48.25 0 0-12.72 18.56-18.02 39.76 0 0-.53-38.17-12.2-41.88 0 0-3.5 58.89-49.8 105.5-36.78-27.86-55.7-72.38-54.88-119.54z"/></defs><g><g clip-path="url(#clip-5E41C870-E190-4BEC-B198-F811B92AA8EA)" transform="translate(-688 43)"><use fill="#fff" xlink:href="#hdvba"/></g></g></svg></div></div></div></div></footer><div id="js-reveal-ajax" class="reveal"></div><script> var isPwa = false; var VAPID_PUBLIC_KEY = "BIlRmQxjRZIUF0k7hoUKkvHYueAEZybFJU_E47zte305zjnaltmxJQ25DXagV8LZ1Qn021xMv7ju2m73H1m7gt0"; var PUSH_SUBSCRIPTION_URL = "/mon-compte/souscription-alertes"; var USER_NOTIFICATIONS_URL = "https://lafermeduweb.net/veille/pwa_webpush_subscribe_step_3"; if (window.matchMedia('(display-mode: standalone)').matches) { isPwa = true; } </script><script src="https://assets.lafermeduweb.net/bundle.js?v=1636132746"></script><script src="https://assets.lafermeduweb.net/sw.js?v=1636132746"></script></body> </html>
