{"id":556,"date":"2015-09-07T13:34:46","date_gmt":"2015-09-07T11:34:46","guid":{"rendered":"https:\/\/alistapart.com\/it\/article\/quantity-queries-per-css\/"},"modified":"2015-09-07T13:34:46","modified_gmt":"2015-09-07T11:34:46","slug":"quantity-queries-per-css","status":"publish","type":"article","link":"https:\/\/alistapart.com\/it\/article\/quantity-queries-per-css\/","title":{"rendered":"Quantity Queries per CSS"},"content":{"rendered":"

Non odiate anche voi i documentari che alla fine non mantengono le promesse? Hanno titoli attraenti come Alla ricerca del Calamaro Gigante<\/cite> e vi stuzzicano con inquadrature sottomarine di forme misteriose e vi fanno vedere scienziati esaltati che indicano un non meglio precisato punto, laggi\u00f9 nel mare. Vi mettete comodi per guardare questo documentario, aguzzate la vista con sospetto, pensando \u201cSar\u00e0 meglio che io veda qualche calamaro o qualcuno di questo newtork ricever\u00e0 una lettera che non dimenticher\u00e0 facilmente.\u201d<\/p>\n

Ovviamente, dopo 90 minuti di interviste con pescatori annoiati, il presentatore \u00e8 costretto a concludere \u201cNo\u2026 no, non abbiamo trovato nessun calamaro gigante. Ma magari un giorno [orchestra suona musica maestosa].\u201d Grandioso. Volevate Alla ricerca di Nemo<\/cite> e invece vi hanno dato Non abbiamo trovato Nemo<\/cite>.<\/p>\n

Io non vi farei mai una cosa del genere, amici. Questa \u00e8 la vostra guida alla creazione di breakpoint di stile per quantit\u00e0 di elementi HTML, pi\u00f9 o meno come fate gi\u00e0 con le @media<\/code> queries per le dimensioni della viewport. Non vi indirizzer\u00f2 verso specifiche fumose o a un vago pensiero di uno sviluppatore. Le creiamo oggi<\/em>, con quello che CSS mette gi\u00e0 a nostra disposizione.<\/p>\n

\n

Contenuto dinamico<\/h2>\n

Principalmente il Responsive web design<\/a> ruota attorno ad una variabile: lo spazio. Per testare i layout responsive, prendiamo una certa quantit\u00e0 di contenuto e vediamo a quale spazio si adatta bene. Il contenuto viene considerato una costante, lo spazio una variabile.<\/p>\n

La @media<\/code> query \u00e8 la beniamina del responsive web design perch\u00e9 ci permette di inserire dei \u201cbreakpoints\u201d ovunque non funzioni pi\u00f9 la strategia di layout e andrebbe meglio un altro layout. Tuttavia, non sono solo le dimensioni della viewport che possono mettere sotto pressione lo spazio, ma anche la quantit\u00e0<\/em> di contenuto.<\/p>\n

Proprio come i vostri utenti finali possono usare device con una moltitudine di dimensioni di schermo diverse, cos\u00ec i vostri content editor potranno aggiungere o rimuovere il contenuto. I content management systems servono proprio a questo. Ci\u00f2 rende due volte vecchi i mockup Photoshop delle pagine web: sono solo un’istantanea di un’unica viewport, con il contenuto in un unico stato.<\/p>\n

In questo articolo, delineer\u00f2 una tecnica per rendere CSS quantity-aware<\/em> (consapevole della quantit\u00e0) utilizzando dei selettori formati ad hoc. In particolare, applicher\u00f2 questi selettori ad un problema classico: come alterare la visualizzazione delle voci di un menu di navigazione orizzontale quando ce ne sono troppe per andare bene nella modalit\u00e0 di layout iniziale, cio\u00e8, dimostrer\u00f2 come passare da un layout display: table-cell<\/code> a un layout display: inline-block<\/code> quando il numero delle voci del menu diventa \u201cmaggiore o uguale a 6\u201d.<\/p>\n

Non far\u00f2 affidamento su nessun JavaScript n\u00e9 su alcuna logica di template e il markup dell’elenco del menu rimarr\u00e0 senza attribuzione di class. Utilizzando solo CSS, la tecnica onora il principio di separation of concerns<\/a> secondo il quale il contenuto (HTML) e la presentazione (CSS) hanno ruoli chiaramente definiti. Il layout \u00e8 affare del CSS e, ove possibile, solo del CSS.<\/p>\n

\"Confronto<\/div>\n

La dimostrazione \u00e8 disponibile su CodePen<\/a> e vi far\u00f2 riferimento per tutto l’articolo.<\/p>\n

Per aiutarmi a illustrare questo requisito di quantit\u00e0, utilizzer\u00f2 in questo articolo dei grafici di calamari, che rappresenteranno gli elementi HTML. I calamari verdi con le spunte verdi rappresentano gli elementi che si abbinano al selettore CSS in questione, i calamari rossi con le croci sono gli elementi non selezionati e i calamari grigi denotano gli elementi che non esistono.<\/p>\n

\"Una<\/div>\n<\/div>\n
\n

Contare<\/h2>\n

La chiave per determinare la quantit\u00e0 di elementi in un dato contesto \u00e8 contarli. CSS non fornisce un’esplicita \u201cAPI per i conteggi\u201d ma possiamo risolvere lo stesso problema con una combinazione fantasiosa di selettori.<\/p>\n

Contare fino a uno<\/h3>\n

Il selettore :only-child<\/code> fornisce un mezzo per assegnare stili agli elementi se appaiono isolati. Sostanzialmente, ci permette di \u201cassegnare uno stile a tutti gli elementi figlio (child) di un particolare elemento, se contando questi figli (children) si ha 1 come totale\u201d. A parte il suo compagno di scuderia :only-of-type<\/code>, \u00e8 l’unico selettore semplice che pu\u00f2 essere descritto come \u201cquantity-based\u201d.<\/p>\n

Nell’esempio seguente, uso :only-of-type<\/code> per aggiungere uno stile speciale a qualunque pulsante che sia il solo<\/em> elemento del suo tipo tra gli elementi sibling (fratelli). D\u00f2 a questi pulsanti solitari un font-size<\/code> maggiore perch\u00e9 la singolarit\u00e0 suggerisce importanza.<\/p>\n

\nbutton <\/span>{<\/span> \n  font-size<\/span>:<\/span> 1.25em;<\/span>\n}<\/span>\n\nbutton:only-of-type <\/span>{<\/span>\n  font-size<\/span>:<\/span> 2em;<\/span>\n}<\/span>\n\n<\/code><\/pre>\n
Ecco la parte cruciale: se cominciassi con un pulsante a cui assegno una dimensione del font maggiore, e aggiungessi pulsanti prima o dopo questo, ciascun<\/em> pulsante adotterebbe come conseguenza una dimensione del font pi\u00f9 piccola. Lo stile di tutti gli elementi nell’insieme dipende da una soglia di quantit\u00e0 pari a due: se ci sono \u201cmeno di due\u201d elementi, viene assegnato il font size pi\u00f9 grande. Date un’occhiata ancora a tale codice con in mente la nozione \u201cmeno di due\u201d:<\/p>\n
\nbutton <\/span>{<\/span>\n  font-size<\/span>:<\/span> 1.25em;<\/span>\n}<\/span>\n\nbutton:only-of-type <\/span>{<\/span>\n  font-size<\/span>:<\/span> 2em;<\/span>\n}<\/span>\n\n<\/code><\/pre>\n
\"La<\/div>\n
Se sembra pi\u00f9 naturale, potete ribaltare la logica CSS usando la negazione<\/a> e rendendo la condizione \u201cpi\u00f9 di uno\u201d.<\/p>\n
\n\/* \"More than one\" results in a smaller font size *\/<\/span>\nbutton <\/span>{<\/span>\n  font-size<\/span>:<\/span> 2em;<\/span>\n}<\/span>\n\nbutton:not(:only-of-type) <\/span>{<\/span>\n  font-size<\/span>:<\/span> 1.25em;<\/span>\n}<\/span>\n\n<\/code><\/pre>\n
\"La<\/div>\n
Quantit\u00e0<\/h3>\n
Assegnare stili agli elementi basandosi sulle soglie \u201cpi\u00f9 di uno\u201d e \u201cmeno di due\u201d \u00e8 un trucco interessante, ma un’interfaccia con \u201cquantity query\u201d flessibili dovrebbe accettare una qualunque quantit\u00e0, ossia, dovrei poter assegnare uno stile per ogni valore di n<\/em> \u201cmaggiore o uguale a n<\/em>\u201d. Allora potrei assegnare stili per valori \u201cmaggiori o uguali a 6\u201d nel nostro menu di navigazione.<\/p>\n
Con la prospettiva di raggiungere quest’ultimo obiettivo, cosa succederebbe se fossi in grado di assegnare stili a quantit\u00e0 discrete come \u201cesattamente 6 in totale\u201d o \u201cesattamente 745\u201d? Come potrei fare? Dovrei usare un selettore che mi permetta di attraversare insiemi di elementi di qualunque quantit\u00e0 nemerica.<\/p>\n
Fortunatamente, il selettore :nth-last-child(n)<\/code><\/a> accetta il numero \u201cn<\/em>\u201d, mettendomi nelle condizioni di contare degli insiemi di elementi a partire dalla fine<\/em> dell’insieme fino all’inizio. Per esempio, :nth-last-child(6)<\/code> seleziona il sesto elemento a partire dall’ultimo tra gli elementi sibling.<\/p>\n
Le cose si fanno interessanti quando concateno :nth-last-child(6)<\/code> con :first-child<\/code>, introducendo una seconda condizione. In questo caso, cerco qualsiasi elemento che sia contemporaneamente<\/em> il sesto elemento dalla fine e<\/em> il primo elemento.<\/p>\n
\nli:nth-last-child(6):first-child <\/span>{<\/span>\n  \/* green squid styling *\/<\/span>\n}<\/span>\n\n<\/code><\/pre>\n
Se questo elemento esiste, la quantit\u00e0 di elementi dell’insieme deve essere esattamente<\/em> 6. In maniera lievemente radicale, ho scritto del CSS che mi dice quanti elementi sto guardando.<\/p>\n
\"Dei<\/div>\n
Tutto quello che rimane da fare \u00e8 sfruttare questo elemento chiave per assegnare gli stili agli elementi rimanenti nell’insieme. Per fare ci\u00f2, utilizzo il general sibling combinator<\/a>.<\/p>\n
\"Sei<\/div>\n
Se non avete familiarit\u00e0 con il general sibling combinator, il - li<\/code> in li:nth-last-child(6):first-child ~ li<\/code> significa \u201cqualsiasi elemento li<\/code> ci sia dopo li:nth-last-child(6):first-child<\/code>\u201d. Nell’esempio seguente, ciascuno degli elementi adotta il colore del font verde se ce ne sono esattamente<\/em> sei in totale.<\/p>\n
\nli:nth-last-child(6):first-child, \nli:nth-last-child(6):first-child ~ li <\/span>{<\/span>\n  color<\/span>:<\/span> green;<\/span>\n}<\/span>\n\n<\/code><\/pre>\n<\/div>\n
\n
Maggiore o uguale a 6<\/h2>\n
Avere come target una quantit\u00e0 discreta, che sia 6, 19 o 653, non \u00e8 particolarmente utile perch\u00e9 \u00e8 una situazione troppo specifica. Sarebbe altrettanto inutile utilizzare delle larghezze discrete piuttosto che min-width<\/code> o maz-width<\/code> nelle nostre @media<\/code> queries:<\/p>\n
\n@media screen and (width: 500px) <\/span>{<\/span>\n  \/* styles for exactly 500px wide viewports *\/<\/span>\n}<\/span>\n\n<\/code><\/pre>\n
La domanda \u00e8: come si fa a costruire un selettore di questo tipo? \u00c8 una questione di offset<\/em>.<\/p>\n
L’argomento n<\/em>+6<\/h3>\n
Un altro argomento aritmetico adottabile dal selettore :nth-child()<\/code> prende la forma di \u201cn<\/em> + [integer]\u201d. Per esempio, :nth-child(n+6)<\/code> assegna stili a tutti gli elementi in un insieme partendo dal sesto.<\/p>\n
\"Un<\/div>\n
Sebbene questo abbia di per s\u00e9 possibili applicazioni, non \u00e8 un metodo di selezione \u201cquantity-aware\u201d in quanto tale: non stiamo assegnando alcuno stile perch\u00e9 ci sono sei o pi\u00f9 elementi in totale, stiamo solo assegnando stili a quelli che hanno un numerale pi\u00f9 alto di cinque.<\/p>\n
Per cominciare a risolvere il problema in maniera appropriata, quello che dobbiamo davvero fare \u00e8 creare un insieme di elementi che esclude gli ultimi cinque oggetti. Utilizzando l’opposto di :nth-child(n+6)<\/code>\u2014:nth-last-child(n+6)<\/code>\u2014 posso applicare le propriet\u00e0 del layout cambiato a tutti gli \u201cultimi elementi\u201d a partire dal sesto<\/em>, contando all’indietro verso l’inizio dell’insieme.<\/p>\n
\nli:nth-last-child(n+6) <\/span>{<\/span>\n  \/* properties here *\/<\/span>\n}<\/span>\n\n<\/code><\/pre>\n
Questo esclude gli ultimi cinque oggetti da un insieme di qualunque lunghezza, il che implica che quando si riduce la lunghezza dell’insieme a meno di sei, si smettono di vedere gli oggetti selezionati. \u00c8 una specie di effetto \u201csliding doors\u201d.<\/p>\n
\"Un<\/div>\n
Se, effettivamente, l’insieme ha sei o pi\u00f9 elementi in totale, allora tutto quello che rimane \u00e8 assegnare gli stili anche a quegli ultimi cinque oggetti. Questo \u00e8 facile: dove ci sono pi\u00f9 di sei oggetti, devono esistere uno o pi\u00f9 oggetti che \u201critornano true\u201d (in gergo JavaScript) per la condizione nth-last-child(n+6)<\/code>. Ciascuno di questi elementi esistenti pu\u00f2 essere combinato con \u201c~<\/code>\u201d per influenzare tutti gli oggetti (inclusi gli ultimi cinque) che lo seguono.<\/p>\n
\"Quando<\/div>\n
La soluzione sorprendentemente tersa del nostro problema \u00e8 questa:<\/p>\n
\nli:nth-last-child(n+6),\nli:nth-last-child(n+6) ~ li <\/span>{<\/span>\n  \/* properties here *\/<\/span>\n}<\/span>\n\n<\/code><\/pre>\n
Naturalmente, 6 pu\u00f2 essere sostituito con un qualunque intero positivo, anche 653.279.<\/p>\n<\/div>\n
\n
Minore o uguale a n<\/em><\/h2>\n
Come nell’esempio di prima con :only-of-type<\/code>, potete capovolgere la logica, passando da \u201cmaggiore o uguale a n<\/em>\u201d a \u201cminore o uguale a n<\/em>\u201d. Il tipo di logica che usate dipende da quale stato considerate come lo stato di default pi\u00f9 naturale. \u201cMinore o uguale a n<\/em>\u201d \u00e8 possibile negando n<\/em> e ripristinando la condizione :first-child<\/code>.<\/p>\n
\nli:nth-last-child(-n+6):first-child,\nli:nth-last-child(-n+6):first-child ~ li <\/span>{<\/span>\n  \/* properties here *\/<\/span>\n}<\/span>\n\n<\/code><\/pre>\n
Effettivamente, l’uso di \u201c-\u201d cambia la direzione della selezione: invece di puntare all’inizio partendo dal sesto, punta verso la fine partendo dal sesto. In entrambe i casi, il selettore include il sesto oggetto.<\/p>\n
nth-child<\/code> versus nth-of-type<\/code><\/h3>\n
Notate che nel precedente esempio ho usato :nth-child()<\/code> e :nth-last-child()<\/code>, non :nth-of-type()<\/code> e :nth-last-of-type()<\/code>. Dal momento che ho a che fare con elementi <li><\/code> e che gli <li><\/code> sono gli unici figli legittimi degli <ul><\/code>, :last-child()<\/code> e :last-of-type()<\/code> funzionerebbero entrambe in questo caso.<\/p>\n
Le famiglie di selettori :nth-child()<\/code> e :nth-of-type()<\/code> hanno diversi vantaggi a seconda di quello che si sta cercando di ottenere. Poich\u00e9 :nth-child()<\/code> \u00e8 \u201celement agnostic\u201c, potreste applicare la tecnica descritta per i sibling di diverso tipo:<\/p>\n
\n<<\/span>div<\/span> class<\/span>=<\/span>\"<\/span>container\"<\/span><\/span>><\/span><\/span>\n\n  <<\/span>p<\/span>><\/span><\/span>...<\/<\/span>p<\/span>><\/span><\/span>\n\n  <<\/span>p<\/span>><\/span><\/span>...<\/<\/span>p<\/span>><\/span><\/span>\n\n  <<\/span>blockquote<\/span>><\/span><\/span>...<\/<\/span>blockquote<\/span>><\/span><\/span>\n\n  <<\/span>figure<\/span>><\/span><\/span>...<\/<\/span>figure<\/span>><\/span><\/span>\n\n  <<\/span>p<\/span>><\/span><\/span>...<\/<\/span>p<\/span>><\/span><\/span>\n\n  <<\/span>p<\/span>><\/span><\/span>...<\/<\/span>p<\/span>><\/span><\/span>\n\n<\/<\/span>div<\/span>><\/span><\/span>\n\n<\/code><\/pre>\n
\n.container > :nth-last-child(n+3),\n.container > :nth-last-child(n+3) ~ * <\/span>{<\/span>\n  \/* properties here *\/<\/span>\n}<\/span>\n\n<\/code><\/pre>\n
(Si noti il modo in cui sto usando qui il selettore universale<\/a> per mantenere \u201dl’element agnosticism\u201d. :last-child(n+3) ~ *<\/code> vuol dire \u201cqualunque elemento di qualunque tipo che segue :last-child(n+3)<\/code>\u201d.)<\/p>\n
Il vantaggio di :nth-last-of-type()<\/code>, d’altro canto, \u00e8 che siete in grado di puntare gruppi di elementi uguali dove sono presenti altri sibling di diversi tipi. Per esempio, potreste puntare la quantit\u00e0 di paragrafi nella snippet seguente, indipendentemente che siano inclusi in un <div><\/code> e in un <blockquote><\/code>.<\/p>\n
\n<<\/span>div<\/span> class<\/span>=<\/span>\"<\/span>container\"<\/span><\/span>><\/span><\/span>\n\n  <<\/span>div<\/span>><\/span><\/span>...<\/<\/span>div<\/span>><\/span><\/span>\n\n  <<\/span>p<\/span>><\/span><\/span>...<\/<\/span>p<\/span>><\/span><\/span>\n\n  <<\/span>p<\/span>><\/span><\/span>...<\/<\/span>p<\/span>><\/span><\/span>\n\n  <<\/span>p<\/span>><\/span><\/span>...<\/<\/span>p<\/span>><\/span><\/span>\n\n  <<\/span>p<\/span>><\/span><\/span>...<\/<\/span>p<\/span>><\/span><\/span>\n\n  <<\/span>p<\/span>><\/span><\/span>...<\/<\/span>p<\/span>><\/span><\/span>\n\n  <<\/span>p<\/span>><\/span><\/span>...<\/<\/span>p<\/span>><\/span><\/span>\n\n  <<\/span>p<\/span>><\/span><\/span>...<\/<\/span>p<\/span>><\/span><\/span>\n\n  <<\/span>blockquote<\/span>><\/span><\/span>...<\/<\/span>blockquote<\/span>><\/span><\/span>\n\n<\/<\/span>div<\/span>><\/span><\/span>\n\n<\/code><\/pre>\n
\np:nth-last-of-type(n+6),\np:nth-last-of-type(n+6) ~ p <\/span>{<\/span>\n  \/* properties here *\/<\/span>\n}<\/span>\n\n<\/code><\/pre>\n<\/div>\n
\n
Supporto per i selettori<\/h2>\n
Tutti i selettori CSS2.1 e CSS3 utilizzati in questo articolo sono supportati da Internet Explorer 9 e successivi<\/a>, inclusi tutti i browser ragionevolmente recenti per mobile\/handheld.<\/p>\n
Il supporto da parte di Internet Explorer 8 per la maggior parte dei tipi di selettore \u00e8 buono, ma tecnicamente parziale, quindi dovreste considerare un polyfill JavaScript. In alternativa, potreste accoppiare i selettori per la strategia di layout \u201cpi\u00f9 sicura\u201d con classi specifiche per IE9<\/a>. Nel caso del menu di navigazione, l’opzione pi\u00f9 sicura \u00e8 quella che viene incontro alle esigenze di pi\u00f9 voci, utilizzando inline-block<\/code>. Il blocco della dichiarazione potrebbe essere pi\u00f9 o meno cos\u00ec:<\/p>\n
\nnav li:nth-last-child(n+6),\nnav li:nth-last-child(n+6) ~ li, \n\n.lt-ie9 nav li <\/span>{<\/span>\n  display<\/span>:<\/span> inline-block;<\/span>\n  \/* etc *\/<\/span>\n}<\/span>\n\n<\/code><\/pre>\n<\/div>\n
\n
Nel mondo reale<\/h2>\n
Supponiamo che il nostro menu di navigazione<\/a> appartenga a un sito con un content management system. A seconda di chi amministra il tema, sar\u00e0 popolato con un numero maggiore o minore di opzioni. Alcuni autori faranno in modo che tutto risulti semplice fornendo solo i link \u201cHome\u201d e \u201cAbout\u201d, mentre altri riempiranno il menu di pagine personalizzate e di opzioni per categoria.<\/p>\n
Fornendo layout alternativi a seconda del numero di voci di menu presenti, aumentiamo l’eleganza con la quale tolleriamo diverse implementazioni del tema: gestiamo il contenuto variabile come faremmo con le dimensioni variabili dello schermo.<\/p>\n
\"Confronto<\/div>\n
Ecco fatto: calamari ahoy! Potete adesso aggiungere al vostro repertorio la quantit\u00e0 come condizione per gli stili.<\/p>\n<\/div>\n
\n
Design content-independent<\/h2>\n
Il responsive web design risolve un problema importante: rende lo stesso<\/em> contenuto digeribile comodamente tra diversi<\/em> device. Che la gente riceva contenuto diverso solo perch\u00e9 ha un dispositivo diverso \u00e8 inaccettabile. Analogamente, \u00e8 inaccettabile che un design detti legge sulla natura del contenuto. Non possiamo dire a un editor: \u201cPuoi tralasciarlo? Incasina il layout.\u201d<\/p>\n
Indipendentemente da quale forma assuma il contenuto, e da quanto ce ne sia in qualunque momento, \u00e8 spesso indeterminato: un altro sconosciuto. E non possiamo sempre far affidamento sugli script di text wrapping e troncamento. Per avere davvero il polso dell’indipendenza del contenuto, dobbiamo sviluppare nuovi tools e tecniche. Le quantity queries sono solo una delle tante idee.<\/p>\n
Il web design \u00e8 cambiamento, differenza, incertezza. \u00c8 non sapere<\/em>. Nella sua unicit\u00e0 \u00e8 una modalit\u00e0 di visual design che non si manifesta in una forma ma nell’anticipazione di varie forme che qualcosa potrebbe<\/em> assumere. Per alcuni \u00e8 insopportabilmente sconcertante, ma per voi e per me \u00e8 una sfida che apprezziamo. Come l’elusivo calamaro gigante, \u00e8 un cliente davvero sfuggente.<\/p>\n
Illustrazioni: {carlok}<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
Nel responsive design pensiamo molto allo spazio, specialmente nel contesto delle dimensioni di schermo, ma \u00e8 destino che la quantit\u00e0 di contenuto o il numero di elementi influenzino anche loro lo spazio, esattamente altrettanto imprevedibilmente e, se non vogliamo che i nostri design si impongano sui contenuti, abbiamo bisogno di modi nuovi per rendere i nostri design coscienti del cambiamento di quantit\u00e0 del contenuto. Heydon Pickering ci guida attraverso una nuova idea per creare breakpoint di stile per le quantit\u00e0 di elementi HTML.<\/p>\n","protected":false},"author":818,"featured_media":7000769,"comment_status":"open","ping_status":"open","template":"","categories":[244,247,132],"tags":[],"coauthors":[452],"class_list":["post-556","article","type-article","status-publish","has-post-thumbnail","hentry","category-css","category-html","category-numero-115-8-settembre-2015"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/article\/556","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/users\/818"}],"replies":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/comments?post=556"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/media\/7000769"}],"wp:attachment":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/media?parent=556"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/categories?post=556"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/tags?post=556"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/coauthors?post=556"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Nel menu di navigazione<\/a> voglio davvero cambiare il layout ad una soglia<\/em>: uno spartiacque di quantit\u00e0. Voglio cambiare quando ci sono sei o pi\u00f9<\/em> elementi, non quando ci sono esattamente<\/em> sei elementi. Quando raggiungo la soglia, vorrei cambiare da un layout a tabella distribuita ad una configurazione pi\u00f9 semplice, con inline-block<\/code> che vadano a capo. Ancora pi\u00f9 importante, vorrei conservare<\/em> quella configurazione a cui sono arrivato man mano che il numero di elementi aumenta ulteriormente.<\/p>\n