davidbgk
/
larlet-fr-david-cache
Watch 1
Star 0
Fork 0
Code Releases 0 Activity
A place to cache linked articles (think custom and personal wayback machine)
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.
67 Commits
1 Branch
Tree: 1cc0cc7759
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from '1cc0cc7759'
${ noResults }
larlet-fr-david-cache/cache/6ab93fddd6436fc39962c832c70.../index.html

index.html 35KB
Raw Blame History

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829 
  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>Quantity Queries for CSS (archive) — 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.   <meta name="robots" content="noindex, nofollow">

  29.   <meta content="origin-when-cross-origin" name="referrer">

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

  31.   <link rel="canonical" href="http://alistapart.com/article/quantity-queries-for-css">

  32. 

  33. <style>

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

  35. html, body, div, span,

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

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

  38. del, dfn, em, img, ins,

  39. small, strike, strong, tt, var,

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

  41. fieldset, form, label, legend,

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

  43. article, aside, canvas, details, embed,

  44. figure, figcaption, footer, header, hgroup,

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

  46. time, mark, audio, video {

  47.   margin: 0;

  48.   padding: 0;

  49.   border: 0;

  50.   font-size: 100%;

  51.   font: inherit;

  52.   vertical-align: baseline;

  53. }

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

  55. article, aside, details, figcaption, figure,

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

  57. body { line-height: 1; }

  58. blockquote, q { quotes: none; }

  59. blockquote:before, blockquote:after,

  60. q:before, q:after {

  61.   content: '';

  62.   content: none;

  63. }

  64. table {

  65.   border-collapse: collapse;

  66.   border-spacing: 0;

  67. }

  68. 

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

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

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

  72. @font-face {

  73.   font-family: 'EquityTextB';

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

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

  76.   font-weight: 300;

  77.   font-style: normal;

  78.   font-display: swap;

  79. }

  80. @font-face {

  81.   font-family: 'EquityTextB';

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

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

  84.   font-weight: 300;

  85.   font-style: italic;

  86.   font-display: swap;

  87. }

  88. @font-face {

  89.   font-family: 'EquityTextB';

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

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

  92.   font-weight: 700;

  93.   font-style: normal;

  94.   font-display: swap;

  95. }

  96. 

  97. @font-face {

  98.   font-family: 'ConcourseT3';

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

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

  101.   font-weight: 300;

  102.   font-style: normal;

  103.   font-display: swap;

  104. }

  105. 

  106. 

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

  108. body {

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

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

  111.   background-color: #f0f0ea;

  112.   color: #07486c;

  113.   font-kerning: normal;

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

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

  116.   text-rendering: optimizeLegibility;

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

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

  119. }

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

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

  122. }

  123. em {

  124.   font-style: italic;

  125.   color: #323a45;

  126. }

  127. strong {

  128.   font-weight: bold;

  129.   color: black;

  130. }

  131. nav {

  132.   background-color: #323a45;

  133.   color: #f0f0ea;

  134.   display: flex;

  135.   justify-content: space-around;

  136.   padding: 1rem .5rem;

  137. }

  138.   nav:last-child {

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

  140.   }

  141.   nav a {

  142.     color: #f0f0ea;

  143.   }

  144.   nav abbr {

  145.     border-bottom: 1px dotted white;

  146.   }

  147. 

  148. h1 {

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

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

  151.   background-color: #e3e1e1;

  152.   color: #323a45;

  153.   text-align: center;

  154.   padding: 5rem 0 4rem 0;

  155.   width: 100%;

  156.   font-family: 'ConcourseT3';

  157.   display: flex;

  158.   flex-direction: column;

  159. }

  160.   h1.single {

  161.     padding-bottom: 10rem;

  162.   }

  163.   h1 span {

  164.     position: absolute;

  165.     top: 1vh;

  166.     left: 20%;

  167.     line-height: 0;

  168.   }

  169.     h1 span a {

  170.       line-height: 1.7;

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

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

  173.       background: #2d7474;

  174.       font-size: 1.3rem;

  175.       color: white;

  176.       text-decoration: none;

  177.     }

  178. h2 {

  179.   margin: 4rem 0 1rem;

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

  181.   padding-top: 1vh;

  182. }

  183. h3 {

  184.   text-align: center;

  185.   margin: 3rem 0 .75em;

  186. }

  187. hr {

  188.   height: .4rem;

  189.   width: .4rem;

  190.   border-radius: .4rem;

  191.   background: #07486c;

  192.   margin: 2.5rem auto;

  193. }

  194. time {

  195.   display: bloc;

  196.   margin-left: 0 !important;

  197. }

  198. ul, ol {

  199.   margin: 2rem;

  200. }

  201. ul {

  202.   list-style-type: square;

  203. }

  204. a {

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

  206.   text-decoration-thickness: 0.05em;

  207.   text-underline-offset: 0.09em;

  208. }

  209. article {

  210.   max-width: 50rem;

  211.   display: flex;

  212.   flex-direction: column;

  213.   margin: 2rem auto;

  214. }

  215.   article.single {

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

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

  218.     background: #f0f0ea;

  219.     padding: 2rem;

  220.   }

  221.   article p:last-child {

  222.     margin-bottom: 1rem;

  223.   }

  224. p {

  225.   padding: 0 .5rem;

  226.   margin-left: 3rem;

  227. }

  228.   p + p,

  229.   figure + p {

  230.     margin-top: 2rem;

  231.   }

  232. 

  233. blockquote {

  234.   background-color: #e3e1e1;

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

  236.   display: flex;

  237.   flex-direction: column;

  238.   align-items: center;

  239.   padding: 1rem;

  240.   margin: 1.5rem;

  241. }

  242.   blockquote cite {

  243.     font-style: italic;

  244.   }

  245.   blockquote p {

  246.     margin-left: 0;

  247.   }

  248. 

  249. figure {

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

  251.   background-color: #e3e1e1;

  252.   text-align: center;

  253.   padding: 1.5rem 0;

  254.   margin: 1rem 0 0;

  255.   font-size: 1.5rem;

  256.   width: 100%;

  257. }

  258.   figure img {

  259.     max-width: 250px;

  260.     max-height: 250px;

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

  262.     padding: 1px;

  263.   }

  264. figcaption {

  265.   padding: 1rem;

  266.   line-height: 1.4;

  267. }

  268. aside {

  269.   display: flex;

  270.   flex-direction: column;

  271.   background-color: #e3e1e1;

  272.   padding: 1rem 0;

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

  274. }

  275.   aside p {

  276.     max-width: 50rem;

  277.     margin: 0 auto;

  278.   }

  279. 

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

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

  282.   font-size: 1rem;

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

  284. }

  285. h1 {

  286.   font-size: 1.9rem;

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

  288. }

  289. h2 {

  290.   font-size: 1.6rem;

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

  292. }

  293. h3 {

  294.   font-size: 1.35rem;

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

  296. }

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

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

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

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

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

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

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

  304.     margin-left: 0;

  305.   }

  306.   h1 {

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

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

  309.   }

  310.   h2 {

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

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

  313.   }

  314.   h3 {

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

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

  317.   }

  318. }

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

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

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

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

  323.      but if our baseline value was not expressed

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

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

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

  327.     line-height: 1.5em;

  328.   }

  329.   p, li, pre, details {

  330.     margin-left: 3rem;

  331.   }

  332.   h1 {

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

  334.     line-height: 1.2em;

  335.   }

  336.   h2 {

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

  338.     line-height: 1.3em;

  339.   }

  340.   h3 {

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

  342.     line-height: 1.4em;

  343.   }

  344.   figure img {

  345.     max-width: 500px;

  346.     max-height: 500px;

  347.   }

  348. }

  349. 

  350. figure.unsquared {

  351.   margin-bottom: 1.5rem;

  352. }

  353.   figure.unsquared img {

  354.     height: inherit;

  355.   }

  356. 

  357. 

  358. 

  359. @media print {

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

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

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

  363.     text-decoration: underline;

  364.     text-shadow: none !important;

  365.     background-image: none !important;

  366.     background: white;

  367.     color: black;

  368.   }

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

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

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

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

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

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

  375.   img {

  376.     max-width: 250px !important;

  377.     max-height: 250px !important;

  378.   }

  379.   nav, aside { display: none; }

  380. }

  381. 

  382. ul.with_columns {

  383.   column-count: 1;

  384. }

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

  386.   ul.with_columns {

  387.     column-count: 2;

  388.   }

  389. }

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

  391.   ul.with_columns {

  392.     column-count: 3;

  393.   }

  394. }

  395. ul.with_two_columns {

  396.   column-count: 1;

  397. }

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

  399.   ul.with_two_columns {

  400.     column-count: 1;

  401.   }

  402. }

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

  404.   ul.with_two_columns {

  405.     column-count: 2;

  406.   }

  407. }

  408. 

  409. .gallery {

  410.   display: flex;

  411.   flex-wrap: wrap;

  412.   justify-content: space-around;

  413. }

  414.   .gallery figure img {

  415.     margin-left: 1rem;

  416.     margin-right: 1rem;

  417.   }

  418.   .gallery figure figcaption {

  419.     font-family: 'ConcourseT3'

  420.   }

  421. 

  422. footer {

  423.   font-family: 'ConcourseT3';

  424.   display: flex;

  425.   flex-direction: column;

  426.   border-top: 3px solid white;

  427.   padding: 4rem 0;

  428.   background-color: #07486c;

  429.   color: white;

  430. }

  431.   footer > * {

  432.     max-width: 50rem;

  433.     margin: 0 auto;

  434.   }

  435.   footer a {

  436.     color: #f1c40f;

  437.   }

  438.   footer .avatar {

  439.     width: 200px;

  440.     height: 200px;

  441.     border-radius: 50%;

  442.     float: left;

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

  444.     shape-outside: circle();

  445.     margin-right: 2rem;

  446.     padding: 2px 5px 5px 2px;

  447.     background: white;

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

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

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

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

  452.   }

  453. </style>

  454. 

  455. <h1>

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

  457.   Quantity Queries for CSS (archive)

  458.   <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>

  459. </h1>

  460. <section>

  461.   <article>

  462.     <h3><a href="http://alistapart.com/article/quantity-queries-for-css">Source originale du contenu</a></h3>

  463.     <p>Don’t you just hate documentaries that don’t deliver? They have enticing names like <cite>In Search of the Giant Squid</cite>, and tease you with shots of murky underwater shapes and excited scientists pointing far out to sea. You settle down to watch, eyes narrowed with suspicion, thinking, “I better see some squid or I’m writing an angry letter to the network.”</p>

  464. 

  465. <p>Sure enough, 90 minutes of interviews with bored-looking fishermen later, the presenter is forced to conclude, “No… no, we didn’t find any big squids. But maybe one day [majestic orchestral flourish].” Great. You wanted <cite>Finding Nemo</cite> and got <cite>Not Finding Nemo</cite> instead.</p>

  466. 

  467. <p>I wouldn’t do that to you, friends. This is your guide to creating style breakpoints for quantities of HTML elements, much as you already do with <code>@media</code> queries for viewport dimensions. I’m not pointing at some blurry specification in the distance or a twinkle in an implementer’s eye. We’re going to do this <em>today</em>, with CSS that’s already available.</p>

  468. 

  469. <h2>Dynamic content</h2>

  470. 

  471. <p><a href="http://www.abookapart.com/products/responsive-web-design">Responsive web design</a> is primarily concerned with one variable: space. In testing responsive layouts, we take an amount of content and see which spaces it will successfully fit into. The content is deemed constant; the space, variable.</p>

  472. 

  473. <p>The <code>@media</code> query is the darling of responsive web design because it allows us to insert “breakpoints” wherever one layout strategy ceases to be viable and another should succeed it. However, it’s not just viewport dimensions, but the <em>quantity</em> of content that can put pressure on space. </p>

  474. 

  475. <p>Just as your end users are liable to operate devices with a multitude of different screen sizes, your content editors are liable to add and remove content. That’s what content management systems are for.  This makes Photoshop mockups of web pages doubly obsolete: they are snapshots of just one viewport, with content in just one state.</p>

  476. 

  477. <p>In this article, I will be outlining a technique to make CSS <em>quantity-aware</em> using specially formed selectors. I will be applying these selectors to one classic problem in particular: how to alter the display of items in a horizontal navigation menu when there are too many to suit the initial layout mode. That is, I will demonstrate how to switch from a <code>display: table-cell</code> to a <code>display: inline-block</code> layout when the number of items in the menu becomes “more than or equal to 6.”</p>

  478. 

  479. <p>I will not be relying on any JavaScript or template logic, and the menu’s list markup will remain devoid of class attribution. By using CSS only, the technique honors the <a href="http://www.w3.org/TR/html-design-principles/#separation-of-concerns">separation of concerns</a> principle, according to which content (HTML) and presentation (CSS) have clearly defined roles. Layout is CSS’s job and, where possible, CSS’s only.</p>

  480. 

  481. <figure>

  482. <img src="http://alistapart.com/d/415/fig1_menu.png" alt="Comparing the initial menu bar layout for fewer than six items with the layout for six or more items"/>

  483. </figure>

  484. 

  485. <p>The demonstration is <a href="http://codepen.io/heydon/pen/QwjGZp">available on CodePen</a> and will be referred to throughout the article.</p>

  486. 

  487. <p>To help me illustrate this qualification of quantity, I’ll be employing diagrams of squids in the article to represent HTML elements. Green squids with ticks represent elements that match the CSS selector in question, red squids with crosses are unselected elements, and grayed-out squids denote elements that don’t exist.</p>

  488. 

  489. <figure>

  490. <img src="http://alistapart.com/d/415/fig2_squid.png" alt="A key for the three squid symbols to be used in following diagrams. A green squid (for selected elements), a red squid (for unselected elements) and a grey squid for elements that don't exist"/>

  491. </figure>

  492. 

  493. <h2>Counting</h2>

  494. 

  495. <p>The key to determining the quantity of elements in a given context is to count them. CSS doesn’t provide an explicit “counting API,” but we can solve the same problem with an inventive combination of selectors.</p>

  496. 

  497. <h3>Counting to one</h3>

  498. 

  499. <p>The <code>:only-child</code> selector provides a means to style elements if they appear in isolation. Essentially, it lets us “style all the child elements of a particular element, if counting those children returns 1 as the total.” Aside from its stablemate <code>:only-of-type</code>, it is the only simple selector that can be described as quantity-based.</p>

  500. 

  501. <p>In the following example, I use <code>:only-of-type</code> to add a special style to any buttons that are the <em>only</em> elements of their element type among sibling elements. I give these lone buttons an increased <code>font-size</code> because singularity suggests importance.</p>

  502. 

  503. <pre><code class="language-css">

  504. button { 

  505.   font-size: 1.25em;

  506. }

  507. 

  508. button:only-of-type {

  509.   font-size: 2em;

  510. }

  511. 

  512. </code></pre>

  513. 

  514. <p>Here’s the crucial part. If I were to start out with one button, replete with a larger font size, and add buttons before or after it, <em>each</em> button would then adopt a smaller font size. The style of all the elements in the set is dependent on a quantity threshold of two: if there are “fewer than two” elements, the larger font size is honored. Take a look at that code again with the “fewer than two” notion in mind:</p>

  515. 

  516. <pre><code class="language-css">

  517. button {

  518.   font-size: 1.25em;

  519. }

  520. 

  521. button:only-of-type {

  522.   font-size: 2em;

  523. }

  524. 

  525. </code></pre>

  526. 

  527. <figure>

  528. <img src="http://alistapart.com/d/415/fig3_fewerthan.png" alt="The fewer than two logic means one selected element (green squid) becomes two unselected elements (red squids) when an element is added"/>

  529. </figure>

  530. 

  531. <p>If it feels more natural, you can turn the CSS logic on its head using <a href="http://css-tricks.com/almanac/selectors/n/not/">negation</a> and make the condition “more than one.”</p>

  532. 

  533. <pre><code class="language-css">

  534. /* "More than one" results in a smaller font size */

  535. button {

  536.   font-size: 2em;

  537. }

  538. 

  539. button:not(:only-of-type) {

  540.   font-size: 1.25em;

  541. }

  542. 

  543. </code></pre>

  544. 

  545. <figure>

  546. <img src="http://alistapart.com/d/415/fig4_morethan.png" alt="The more than one logic means one unselected element (red squid) becomes two selected elements (green squids) when an element is added"/>

  547. </figure>

  548. 

  549. <h3>Quantity <i>n</i></h3>

  550. 

  551. <p>Styling elements based on the “more than one” and “fewer than two” thresholds is a neat trick, but a flexible “quantity query” interface would accept any quantity. That is, I should be able to style “more than or equal to <i>n</i>” for any value of <i>n</i>. Then I can style “more than or equal to 6” in our navigation menu.</p>

  552. 

  553. <p>With a view to achieving this final goal, what if I were able to style discrete quantities like “exactly 6 in total” or “exactly 745”? How would I go about that? I would need to use a selector that allowed me to traverse sets of elements of any quantity numerically.</p>

  554. 

  555. <p>Fortunately, the <a href="http://css-tricks.com/almanac/selectors/n/nth-last-child/"><code>:nth-last-child(n)</code> selector</a> accepts the number “<i>n</i>”, enabling me to count sets of elements from the <em>end</em> of the set toward the beginning. For example, <code>:nth-last-child(6)</code> matches the element that is sixth from last among sibling elements.</p>

  556. 

  557. <p>Things get interesting when concatenating <code>:nth-last-child(6)</code> with <code>:first-child</code>, introducing a second condition. In this case, I am looking for any element that is <em>both</em> the sixth element from the end <em>and</em> the first element.</p>

  558. 

  559. <pre><code class="language-css">

  560. li:nth-last-child(6):first-child {

  561.   /* green squid styling */

  562. }

  563. 

  564. </code></pre>

  565. 

  566. <p>If this element exists, the set of elements <em>must be exactly six</em> in quantity. Somewhat radically, I have written CSS that tells me how many elements I am looking at.</p>

  567. 

  568. <figure>

  569. <img src="http://alistapart.com/d/415/fig5_firstchild.png" alt="Of six squids, the first is green and the rest red. The first is subject to the nth-last-child(6) selector as well as the first-child selector"/>

  570. </figure>

  571. 

  572. <p>All that remains is to leverage this key element to style the remaining elements in the set. For this, I employ the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_selectors">general sibling combinator</a>.</p>

  573. 

  574. <figure>

  575. <img src="http://alistapart.com/d/415/fig6_firstchild_li.png" alt="Six green squids because the first green squid is combined with the general sibling combinator to make all the red squids that follow green"/>

  576. </figure>

  577. 

  578. <p>If you’re not familiar with the general sibling combinator, the <code>~ li</code> in <code>li:nth-last-child(6):first-child ~ li</code> means “any <code>li</code> elements that occur after <code>li:nth-last-child(6):first-child</code>.” In the following example, the elements each adopt a green font color if there are <em>precisely</em> six of them in total.</p>

  579. 

  580. <pre><code class="language-css">

  581. li:nth-last-child(6):first-child, 

  582. li:nth-last-child(6):first-child ~ li {

  583.   color: green;

  584. }

  585. 

  586. </code></pre>

  587. 

  588. <h2>More than or equal to 6</h2>

  589. 

  590. <p>Targeting a discrete quantity—whether it’s 6, 19, or 653—is not especially useful because it pertains to such a specific situation. Using discrete widths rather than <code>min-width</code> or <code>max-width</code> in our <code>@media</code> queries would be similarly unhelpful:</p>

  591. 

  592. <pre><code class="language-css">

  593. @media screen and (width: 500px) {

  594.   /* styles for exactly 500px wide viewports */

  595. }

  596. 

  597. </code></pre>

  598. 

  599. <p>In <a href="http://alistapart.com/d/415/content-aware-navigation/">the navigation menu</a>, I really want to switch layouts at a <em>threshold</em>: a quantity watershed. I want to switch at six <em>or more</em> items—not <em>exactly</em> six items. When I reach that threshold, I  would like to change from a distributed table layout to a simpler, wrappable <code>inline-block</code> configuration. Importantly, I would like to <em>retain</em> that switched configuration as the number of items further increases. </p>

  600. 

  601. <p>The question is, how does one begin to construct such a selector? It’s a question of <em>offsets</em>.</p>

  602. 

  603. <h3>The <i>n</i>+6 argument</h3>

  604. 

  605. <p>Another arithmetical argument adoptable by the <code>:nth-child()</code> selector takes the form “<i>n</i> + [integer]”. For example, <code>:nth-child(n+6)</code> styles all the elements in a set starting from the sixth.</p>

  606. 

  607. <figure>

  608. <img src="http://alistapart.com/d/415/fig7_adinfinitum.png" alt="A set of red squids that become green at the sixth squid for the remainder of the set (which can be of any size), counting upwards."/>

  609. </figure>

  610. 

  611. <p>Though this has conceivable applications all its own, it’s not a “quantity-aware” selection method as such: we’re not styling anything because there are six elements or more in total; we’re just styling the ones that happen to enumerate higher than five.</p>

  612. 

  613. <p>To begin solving the problem properly, what we really need is to create a set of elements that excludes the last five items. Using the opposite of <code>:nth-child(n+6)</code>—<code>:nth-last-child(n+6)</code>—I can apply the switched layout properties to all “last elements” <em>starting from the sixth</em>, counting back toward the beginning of the set.</p>

  614. 

  615. <pre><code class="language-css">

  616. li:nth-last-child(n+6) {

  617.   /* properties here */

  618. }

  619. 

  620. </code></pre>

  621. 

  622. <p>This omits the last five items from a set of any length, meaning that when you reduce the length of the set below six, you cease to see any selected items. It’s a sort of “sliding doors” effect.</p>

  623. 

  624. <figure>

  625. <img src="http://alistapart.com/d/415/fig8_slidingdoors.png" alt="A set of green squids (to the left) and red squids (to the right) become a set of just red squids when the set becomes fewer than six in number"/>

  626. </figure>

  627. 

  628. <p>If, indeed, the set is greater than or equal to six in total, then all that remains is to style those last five items as well. This is easy: where there are more than six items, one or more items that “return true” (in JavaScript-speak) for the <code>nth-last-child(n+6)</code> condition must exist. Any and all of these extant elements can be combined with “<code>~</code>” to affect all items (including the last five) that follow it.</p>

  629. 

  630. <figure>

  631. <img src="http://alistapart.com/d/415/fig9_breakpoint.png" alt="When a set of red squids has squids added to it, the squids to the right of the set become green and can be used to make the rest of the red squids green too (with the general sibling combinator)"/>

  632. </figure>

  633. 

  634. <p>The surprisingly terse solution to our problem is this:</p>

  635. 

  636. <pre><code class="language-css">

  637. li:nth-last-child(n+6),

  638. li:nth-last-child(n+6) ~ li {

  639.   /* properties here */

  640. }

  641. 

  642. </code></pre>

  643. 

  644. <p>Naturally, 6 can be replaced with any positive integer, even 653,279.</p>

  645. 

  646. <h2>Fewer than or equal to <i>n</i></h2>

  647. 

  648. <p>As in the earlier <code>:only-of-type</code> example, you can turn the logic on its head, switching from “more than or equal to <i>n</i>” to “fewer than or equal to <i>n</i>.” Which brand of logic you use depends on which state you consider the more natural default state. “Fewer than or equal to <i>n</i>” is possible by negating <i>n</i> and reinstating the <code>:first-child</code> condition.</p>

  649. 

  650. <pre><code class="language-css">

  651. li:nth-last-child(-n+6):first-child,

  652. li:nth-last-child(-n+6):first-child ~ li {

  653.   /* properties here */

  654. }

  655. 

  656. </code></pre>

  657. 

  658. <p>In effect, the use of “-” switches the direction of the selection: instead of pointing toward the start from the sixth, it points toward the end from the sixth. In each case, the selector is inclusive of the sixth item.</p>

  659. 

  660. <h3><code>nth-child</code> versus <code>nth-of-type</code></h3>

  661. 

  662. <p>Note that I am using <code>:nth-child()</code> and <code>:nth-last-child()</code> in the preceding examples, not <code>:nth-of-type()</code> and <code>:nth-last-of-type()</code>. Because I am dealing in <code>&lt;li&gt;</code> elements and <code>&lt;li&gt;</code>s are the only legitimate children of <code>&lt;ul&gt;</code>s, <code>:last-child()</code> and <code>:last-of-type()</code> would both work here.</p>

  663. 

  664. <p>The <code>:nth-child()</code> and <code>:nth-of-type()</code> families of selectors have different advantages depending on what you are trying to achieve. Because <code>:nth-child()</code> is element agnostic, you could apply the described technique across different element type siblings:</p>

  665. 

  666. <pre><code class="language-markup">

  667. &lt;div class="container"&gt;

  668. 

  669.   &lt;p&gt;...&lt;/p&gt;

  670. 

  671.   &lt;p&gt;...&lt;/p&gt;

  672. 

  673.   &lt;blockquote&gt;...&lt;/blockquote&gt;

  674. 

  675.   &lt;figure&gt;...&lt;/figure&gt;

  676. 

  677.   &lt;p&gt;...&lt;/p&gt;

  678. 

  679.   &lt;p&gt;...&lt;/p&gt;

  680. 

  681. &lt;/div&gt;

  682. 

  683. </code></pre>

  684. 

  685. <pre><code class="language-css">

  686. .container &gt; :nth-last-child(n+3),

  687. .container &gt; :nth-last-child(n+3) ~ * {

  688.   /* properties here */

  689. }

  690. 

  691. </code></pre>

  692. 

  693. <p>(Note how I am using <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Universal_selectors">the universal selector</a> to maintain element agnosticism here. <code>:last-child(n+3) ~ *</code> means “any element of any type following <code>:last-child(n+3)</code>.”)</p>

  694. 

  695. <p>The advantage of <code>:nth-last-of-type()</code>, on the other hand, is that you are able to target groups of like elements where other siblings of different types are present. For example, you could target the quantity of paragraphs in the following snippet, despite them being bookended by a <code>&lt;div&gt;</code> and a <code>&lt;blockquote&gt;</code>.</p>

  696. 

  697. <pre><code class="language-markup">

  698. &lt;div class="container"&gt;

  699. 

  700.   &lt;div&gt;...&lt;/div&gt;

  701. 

  702.   &lt;p&gt;...&lt;/p&gt;

  703. 

  704.   &lt;p&gt;...&lt;/p&gt;

  705. 

  706.   &lt;p&gt;...&lt;/p&gt;

  707. 

  708.   &lt;p&gt;...&lt;/p&gt;

  709. 

  710.   &lt;p&gt;...&lt;/p&gt;

  711. 

  712.   &lt;p&gt;...&lt;/p&gt;

  713. 

  714.   &lt;p&gt;...&lt;/p&gt;

  715. 

  716.   &lt;blockquote&gt;...&lt;/blockquote&gt;

  717. 

  718. &lt;/div&gt;

  719. 

  720. </code></pre>

  721. 

  722. <pre><code class="language-css">

  723. p:nth-last-of-type(n+6),

  724. p:nth-last-of-type(n+6) ~ p {

  725.   /* properties here */

  726. }

  727. 

  728. </code></pre>

  729. 

  730. <h2>Selector support</h2>

  731. 

  732. <p>All of the CSS2.1 and CSS3 selectors used in this article are supported in <a href="http://caniuse.com/#feat=css-sel3">Internet Explorer 9 and above</a>, including all reasonably recent mobile/handheld stock browsers. </p>

  733. 

  734. <p>Internet Explorer 8 support is good for most selector types, but technically partial, so you might want to consider a JavaScript polyfill. Alternately, you could pair the selectors for the “safer” of the layout strategies with <a href="http://nicolasgallagher.com/better-conditional-classnames-for-hack-free-css/">IE9-specific classes</a>. In the case of the navigation menu, the safer option is the one catering to more items, using <code>inline-block</code>. The declaration block would look something like this:</p>

  735. 

  736. <pre><code class="language-css">

  737. nav li:nth-last-child(n+6),

  738. nav li:nth-last-child(n+6) ~ li,

  739. 

  740. .lt-ie9 nav li {

  741.   display: inline-block;

  742.   /* etc */

  743. }

  744. 

  745. </code></pre>

  746. 

  747. <h2>In the real world</h2>

  748. 

  749. <p>Suppose our <a href="http://alistapart.com/d/415/content-aware-navigation/">navigation menu</a> belongs to a content-managed site. Depending on who is administering the theme, it will be populated with a greater or fewer number of options. Some authors will keep things simple with just “Home” and “About” links provided, while others will cram their menu full of custom page and category options. </p>

  750. 

  751. <p>By providing alternative layouts depending on the number of menu items present, we increase the elegance with which we tolerate different implementations of the theme: we address variable content as we might variable screen dimensions.</p>

  752. 

  753. <figure>

  754. <img src="http://alistapart.com/d/415/fig1_menu.png" alt="Comparing the initial menu bar layout for fewer than six items with the layout for six or more items"/>

  755. </figure>

  756. 

  757. <p>So, there you have it: squid ahoy! You can now add quantity as a styling condition to your repertoire.</p>

  758. 

  759. <h2>Content-independent design</h2>

  760. 

  761. <p>Responsive web design solves an important problem: it makes the <em>same</em> content comfortably digestible between <em>different</em> devices. For folks to receive different content just because they have different devices would be unacceptable. Similarly, it’s unacceptable for a design to dictate the nature of the content. We wouldn’t tell an editor, “Lose that, will you? It makes the design look wrong.”</p>

  762. 

  763. <p>But what form the content takes, and how much of it there is at any one time, is frequently indeterminate—another unknown. And we can’t always rely on text wrapping and truncation scripts. To get a real handle on content independence, we need to develop new tools and techniques. Quantity queries are just one idea.</p>

  764. 

  765. <p>Web design is about mutability, difference, uncertainty. It’s about <em>not knowing</em>. Uniquely, it is a mode of visual design not about manifesting a form, but about anticipating the different forms something <em>might</em> take. To some it is unbearably perplexing, but to you and me it is a challenge to relish. Like the elusive giant squid, it is a seriously slippery customer.</p>

  766.   </article>

  767. </section>

  768. 

  769. 

  770. <nav id="jumpto">

  771.   <p>

  772.     <a href="/david/blog/">Accueil du blog</a> |

  773.     <a href="http://alistapart.com/article/quantity-queries-for-css">Source originale</a> |

  774.     <a href="/david/stream/2019/">Accueil du flux</a>

  775.   </p>

  776. </nav>

  777. 

  778. <footer>

  779.   <div>

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

  781.     <p>

  782.       Bonjour/Hi!

  783.       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>

  784.       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>).

  785.     </p>

  786.     <p>

  787.       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>.

  788.     </p>

  789.     

  790.     <p>

  791.       Voici quelques articles choisis :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  808.     </p>

  809.     <p>

  810.       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>.

  811.     </p>

  812.     <p>

  813.       Je ne traque pas ta navigation mais mon

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

  815.       conserve des logs d’accès.

  816.     </p>

  817.   </div>

  818. </footer>

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

  820.   ;(_ => {

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

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

  823.       e.preventDefault()

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

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

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

  827.     })

  828.   })()

  829. </script>