Cose che non possiamo ancora fare nei CSS

Tempo di lettura: 7 minuti

La creazione di “layout in stile rivista”

CSS Grid è diventata una sorta di passatempo per i fan CSS, desiderosi di giocare con le capacità del nuovo layout Grid. Tuttavia, devo sempre scegliere attentamente i layout perché, in verità, ci sono una serie di schemi di layout di stampa molto comuni che attualmente non possiamo fare sul web.

In molti casi, tuttavia, possiamo fare queste cose con i CSS, non solo sul web. Il CSS viene utilizzato anche per la formattazione della stampa tramite agenti utente progettati per la stampa in PDF. Questi agenti utente hanno spesso implementato specifiche o estensioni a specifiche che non sono mai state implementate in supporti continui, come lo scorrimento e il contenuto non di paging che abbiamo sul web.

Inoltre, abbiamo alcune specifiche CSS che non sono ancora state implementate da un browser o sono state implementate solo in modo sperimentale su un browser. Abbiamo anche alcune cose che sono solo nella fase di discussione, forse come una nota nel livello attuale di una specifica su dove potremmo portarla in futuro.

Quindi, mentre la maggior parte dei miei articoli riguarda cose che possiamo fare, questo riguarda cose che non possiamo fare, ma che forse potremmo essere in grado di fare in futuro.

Cose Fluttuanti Da Punti Specifici

Sul web, un elemento fluttuato viene rimosso dal flusso e il testo seguente lo avvolge (a causa della riduzione delle caselle di riga del testo seguente). Pertanto, hai solo la possibilità di fare galleggiare un oggetto a sinistra o a destra.

Nella stampa, tuttavia, è spesso necessario spostare gli elementi in punti specifici della pagina. Ad esempio, spostando un elemento nella parte superiore o inferiore di una pagina.

Quando si crea un documento stampato, si definisce la dimensione delle pagine utilizzando la regola @page, quindi il contenuto scorre in quelle pagine. Aumentando la quantità di contenuto o la dimensione del carattere del testo, verranno create più pagine. Pertanto, potresti avere un elemento che sai di voler visualizzare nella parte superiore della pagina in cui appare, ma non sai esattamente su quale pagina sarà.

La specifica CSS che si occupa di questo comportamento si chiama Pagina Float . La tua immagine verrebbe visualizzata nel normale flusso del contenuto – proprio come sul web – tranne per il fatto che il contenuto è frammentato in pagine. Quando viene rilevata la pagina con l’immagine, l’immagine viene spostata dal flusso normale e spostata nella parte superiore della pagina in cui appare. (Il contenuto che sarebbe stato sopra l’immagine verrà visualizzato sotto di essa e riprenderà il normale flusso.)

img {
    float-reference: page;
    float: top;
}

Esiste un problema sollevato rispetto alla specifica Page Floats per rinominarlo, in quanto vi sono casi d’uso per questo tipo di media continuo a motivo, ad esempio in un layout a più colonne. Attualmente, se si fa galleggiare un elemento all’interno di una colonna, si comporta allo stesso modo di un galleggiante in un normale flusso normale. Supponendo che vi sia spazio, le caselle di riga dei seguenti elementi verranno accorciate e il testo verrà spostato attorno al galleggiante all’interno della colonna.

Usando un “float di pagina”, potremmo spostare un elemento nella parte superiore della colonna che potrebbe darti un controllo molto maggiore sul posizionamento degli elementi all’interno del flusso di contenuti in un contesto a più colonne.

Le colonne sono essenzialmente proprio come le pagine; frammentiamo il nostro contenuto tra le caselle di colonna nello stesso modo in cui frammentiamo il nostro contenuto tra le pagine. Pertanto, un nome più generico avrebbe senso in termini di comportamento identico per colonne e pagine.

Ci sono altri esempi di Page Float nell’eccellente esplorazione dell’argomento, “ Approcci per i media paginati: Page Float ” di Julie Blanc.

Trabocco Nella Dimensione Del Blocco Per Multicol

Il concetto di “pagina” float sarebbe ancora più necessario se dovessimo implementare le colonne di overflow della dimensione del blocco in Multicol. Attualmente, se si fissa l’altezza di un contenitore multicol, verranno create colonne aggiuntive nella direzione in linea causando una barra di scorrimento in linea.

Nel gruppo di lavoro CSS abbiamo considerato come potremmo specificare l’overflow nella dimensione del blocco. Ciò ci consentirebbe di correggere l’altezza del contenitore multicol nella dimensione del blocco e, se ci fosse più contenuto che potesse adattarsi, creare un’altra riga di colonne in basso e riempirla di contenuto.

In che modo questo si lega a Page Float? Bene, in questo scenario, vorresti un maggiore controllo su dove le immagini e gli altri elementi finiscono in queste file di colonne. Non vorrei, ad esempio, che un’immagine avesse una riga di testo sotto di essa prima del contenuto, e quindi frammentata per formare la riga successiva di colonne. Page Float mi consentirebbe di specificare che le immagini in quella situazione verrebbero spostate nella parte inferiore della colonna o all’inizio della prima colonna nella nuova riga.

Spanning nColumns

Nella prossima versione di Firefox (Firefox 71), column-spanviene implementata la proprietà dalla specifica Layout a più colonne, il che significa che tutti i nostri browser Web implementano column-span. La proprietà column-span può assumere uno di due valori allo none. Se il valore è all, si estende su tutte le colonne; se lo è none(che è il valore iniziale), non si estende.

Che dire dei layout a più colonne con elementi che si estendono su alcune colonne? Questo è un motivo che trovo abbastanza spesso nel design di stampa. L’elemento spanning sarà generalmente nella parte superiore o inferiore della pagina, accorciando le colonne sotto o sopra di essa.

Questo non è attualmente possibile sul Web e non abbiamo ancora una specifica per questo comportamento, tuttavia alcuni agenti utente di stampa hanno già implementato un’estensione della specifica per farlo. Usando Prince, posso usare il seguente CSS per estendere due colonne:

img {
    float: column-top-corner;
    column-span: 2;
}

Ciò consentirebbe a un elemento di essere spostato nell’angolo superiore utilizzando la versione Prince di Page Float e quindi di estendere due delle colonne. Il resto del contenuto scorre nelle caselle di colonna come è normale quando si usa multicol. In Prince, lo spanning di alcune colonne è legato ad elementi fluttuanti; gli elementi non flottanti si comportano secondo le specifiche multicol di Livello 1 e possono solo estendersi allo none.

Specificare questo solleva alcuni problemi interessanti. Attualmente, quando introduciamo una chiave inglese in multicolore, l’elemento spanning crea essenzialmente una riga di caselle di colonna sopra di essa e una riga di caselle di colonna in basso. Il contenuto non salta sull’elemento spanning e continua.

Cosa dovrebbe accadere se disponiamo di un elemento che si estende su due colonne su tre e che viene posizionato al centro del contenuto? In molti degli esempi di stampa che ho visto, il contenuto salta la chiave quando incontra questi span parziali, piuttosto che comportarsi come oggi fa il multicolore.

Ci sono ulteriori esplorazioni di spanning delle colonne ed estensioni o float nel documento CSS Figures Living Idea. In un mio post più vecchio, ho anche esplorato alcune di queste idee, ” Pensare a galleggianti, figure, regioni e griglie della pagina “.

Colonne Di Diverse Dimensioni In Multicol

Sia Flexbox che Grid Layout ci danno la possibilità di fare colonne di dimensioni diverse che rimangono proporzionate l’una all’altra mentre si flettono. Multicol, tuttavia, può solo dividere il contenuto in colonne di dimensioni uguali. È comune nel design della stampa avere colonne di dimensioni diverse.

Ora che Flexbox e Grid hanno questo comportamento, ha senso che multicol dovrebbe seguire l’esempio e consentire dimensioni di colonna diverse. Forse qualcosa da considerare per il livello 2 della specifica Multicol.

Testo Che Avvolge Tutti I Lati Di Un Elemento

Avrai problemi ad aprire una rivista e a non individuare qualcosa come l’immagine qui sotto. Contenuto che avvolge tutti i lati di un preventivo, callout o immagine. È un modello molto comune e sembra ragionevole come un modello che potremmo voler usare sul web.

Abbiamo una specifica CSS che abilita questo comportamento. Le esclusioni CSS , un tempo associate alla specifica Forme CSS come Esclusioni e forme CSS, definiscono le proprietà wrap-flowe wrap-through. Le esclusioni non definiscono il posizionamento. Invece, lo useresti con un altro metodo di posizionamento – molto probabilmente layout griglia CSS.

Flussi Di Testo Disconnessi

Il design di stampa spesso include contenuto che scorre in modo simile a multicol, tuttavia le caselle di contenuto non sono collegate tra loro.

Questo è molto difficile da fare sul web. Se sai quanti contenuti hai probabilmente, puoi creare questi layout usando Grid in molti casi. Tuttavia, sono quindi abbastanza fragili; fanno affidamento sul fatto che comprendiamo quanti contenuti abbiamo e li suddividiamo in elementi HTML separati. Questo di solito ci richiederà di avvolgere pezzi di contenuto in dival fine di avere un elemento da posizionare sulla griglia.

Uno scenario più ideale sarebbe quello di mantenere l’articolo come uno (thread di contenuto correttamente contrassegnato) che potrebbe fluire in aree definite nel layout.

Abbiamo una specifica che dettaglia qualcosa di simile: la specifica delle regioni CSS . Questo è stato implementato in IE10 (ed è quindi pre-Chromium Edge), ed era anche in Chrome e WebKit prima di essere rimosso. Posso usare mostra lo stato delle cose .

Ci sono stati alcuni problemi significativi con la specifica delle regioni in quanto richiedeva la presenza di elementi HTML per il flusso del contenuto. A differenza di multicol, in cui vengono generate caselle di colonna anonime per contenere il contenuto, le regioni richiedono un elemento HTML esistente per ospitare il contenuto. Quindi, mentre hai ottenuto il buon comportamento del contenuto che scorre attraverso queste scatole disconnesse, hai comunque dovuto capire quante scatole avevi bisogno e creare messaggi vuoti divper contenere quel contenuto.

La soluzione per un contenuto maggiore di quello che si adatterebbe sarebbe quella di disporre di un elemento di dimensione automatica finale per “raccogliere” questo contenuto extra senza una casa. Questa non sembra una soluzione molto elegante!

Per ulteriori informazioni sui problemi con le specifiche delle Regioni così come sono attualmente, vedere ” Regioni CSS considerate dannose “.

UN FUTURO PER LE REGIONI?

Mi piacerebbe molto vedere qualcosa come le Regioni tornare. Penso che ora sappiamo di più sul tipo di layout che vogliamo costruire, ora che abbiamo il layout a griglia. Le regioni consentirebbero a un articolo contrassegnato in modo sensibile di fluire attraverso caselle definite in un layout a griglia e consentirebbero esattamente il tipo di layout che vediamo nelle riviste. Dal semplicissimo – saltando una colonna centrale che contiene una citazione o un’immagine – a complessi set di scatole e immagini.

Nella specifica dei supporti di paging, abbiamo un modello per un riquadro definito che viene ripetutamente duplicato per creare tutte le pagine necessarie per il contenuto che abbiamo – non è necessario definire tali pagine in anticipo. Nell’idea di sviluppo per le colonne di overflow della dimensione del blocco in multicol, stiamo prendendo in considerazione un modello in cui è possibile creare nuove righe di colonne, quante ne sono necessarie fino all’esaurimento del contenuto. Potremmo vedere un futuro per le Regioni in cui possiamo definire un modello di aree e continuare a ripetere quel modello fino a quando non esauriamo il contenuto per riempirlo?

Qualunque sia la soluzione trovata per le regioni, risponderebbe su un solido supporto per la frammentazione nei browser. Una volta suddivisi i tuoi contenuti in tutte le regioni, vorrai evitare che cose come un’intestazione diventino l’ultima cosa in una regione, con i contenuti associati da qualche parte completamente disconnessi. Come per le idee multicolori, penso che richiederebbe anche il supporto per Page Float in modo che siamo in grado di controllare meglio il modo in cui alcuni elementi vengono visualizzati in una Regione e di interrompere la visualizzazione delle linee orfane sotto un’immagine mentre il contenuto si frammenta in un’altra Regione. Inoltre, le Regioni aumenterebbero il potenziale di confusione dei riordini dei contenuti sul Web , quindi penso che ci siano un certo numero di cose correlate da affrontare prima che potessimo vedere una soluzione solida ed elegante a questo problema.

Condividi I Tuoi Casi D’uso

Mi piacerebbe sapere se hai casi d’uso per uno dei suddetti tipi di layout, o se ci sono altri layout che ti piacerebbe fare ma che sono impossibili (o possibili solo in modo fragile). Fammi sapere nei commenti – o ancora meglio – scrivi il problema sul tuo sito e rilascia un link nella sezione commenti qui sotto. L’aggiunta di nuove funzionalità ai CSS inizia con la comprensione dei casi d’uso e dei requisiti.