Choses que nous ne pouvons pas (encore) faire en CSS

Building “magazine- style layouts ”en utilisant CSS Grid est devenu un passe-temps pour les fans de CSS, désireux de jouer avec les capacités de la nouvelle présentation en grille. C’est quelque chose que j’ai fait moi-même et avec les personnes qui ont assisté à mes ateliers. Cependant, je dois toujours choisir les mises en page avec soin car, en réalité, il existe un certain nombre de modèles de mise en page très courants que nous ne pouvons pas actuellement utiliser sur le Web.

Dans de nombreux cas, toutefois, nous pouvons le faire. ces choses avec CSS mais pas sur le Web. Si vous avez lu certains de mes articles précédents, tels que « Conception pour l’impression avec CSS », vous saurez que CSS est également utilisé pour le formatage d’impression via des agents utilisateurs conçus pour la sortie au format PDF. Ces agents utilisateurs ont souvent implémenté des spécifications ou des extensions de spécifications qui n'ont jamais été implémentées sur des supports continus, tels que le contenu à défilement et non paginé que nous avons sur le Web.

De plus, certaines spécifications CSS ont été modifiées. n n’a pas encore été implémenté par un navigateur ou n’a été implémenté de manière expérimentale que sur un navigateur. Nous avons également des éléments qui ne font que commencer au stade de la discussion, peut-être une note dans le niveau actuel d'une spécification indiquant où nous pourrons le faire à l'avenir.

Alors, la plupart de mes articles traitent de choses que nous peut faire, celui-ci concerne des choses que nous ne pouvons pas mais que nous pourrions peut-être faire à l'avenir. Jetez un coup d'oeil.

Des objets flottants à partir de points spécifiques

Sur le Web, un élément flottant est retiré du flux et le texte suivant l'enroule (en raison du raccourcissement des zones de ligne du texte suivant). Par conséquent, vous avez uniquement la possibilité de faire flotter une chose vers la gauche ou la droite.

Toutefois, en version imprimée, vous devez souvent faire flotter des éléments à des endroits spécifiques de la page. Par exemple, en faisant glisser un élément en haut ou en bas d'une page.

Lors de la création d'un document imprimé, vous définissez la taille de vos pages à l'aide de la règle @page puis le contenu de votre flux dans ces pages. En augmentant la quantité de contenu ou la taille de la police du texte, davantage de pages seront créées. Par conséquent, vous pourriez avoir un élément que vous savez que vous souhaitez afficher en haut de la page dans laquelle il apparaît, mais vous ne savez pas exactement sur quelle page il sera.

La spécification CSS qui traite de ce problème s'appelle Flotteurs de page . Votre image s'afficherait dans le flux normal du contenu – exactement comme sur le Web – sauf que le contenu est fragmenté en pages. Lorsque la page avec l'image est rencontrée, l'image est déplacée hors du flux normal et flotte en haut de la page où elle apparaît. (Le contenu qui aurait été au-dessus de l'image s'affichera en dessous et le flux normal reprendra.)

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

Il existe un problème lié à la spécification Page Floats pour le renommer, car il existe des cas d'utilisation de ce type de motif continu médias, par exemple dans une mise en page multicolonne. Actuellement, si vous faites flotter un élément dans une colonne, il se comporte de la même manière qu'un flottant dans un flux normal. En supposant qu'il y ait de la place, les blocs de lignes des éléments suivants seront raccourcis et le texte entourera le flottant dans la colonne.

En utilisant un "flottement de page", nous pourrions faire flotter un élément en haut de la colonne qui pourrait vous donne beaucoup plus de contrôle sur l'emplacement des éléments dans le flux de contenu dans un contexte multicolonne.

Les colonnes ressemblent essentiellement à des pages; nous fragmentons notre contenu entre les zones de colonnes de la même manière que nous fragmentons notre contenu entre les pages. Par conséquent, un nom plus générique aurait du sens si ce comportement était identique pour les colonnes et les pages.

Il existe d'autres exemples de pages flottantes dans l'excellente exploration du sujet, « Approches de supports paginés: pages flottantes ”de Julie Blanc.

Débordement dans la dimension de bloc pour Multicol

Le concept de« page »flotte, serait encore plus nécessaire si nous implémentions des colonnes de débordement de dimensions de bloc dans Multicol. Actuellement, si vous corrigez la hauteur d'un conteneur multicol, des colonnes supplémentaires seront créées dans le sens de la ligne, générant ainsi une barre de défilement intégrée. @rachelandrew ) sur CodePen .

Comme je le décris dans mon article « Quand et comment utiliser la disposition en plusieurs colonnes », dans le groupe de travail CSS, nous avons envisagé la possibilité de spécifier un débordement dans la dimension de bloc. Cela nous permettrait de fixer la hauteur du conteneur multicol dans la dimension de bloc et, s’il y avait plus de contenu que l’on pouvait adapter, créer une autre rangée de colonnes en dessous et y ajouter du contenu.

Comment cela se lie-il à Page Floats? Eh bien, dans ce scénario, vous voudriez avoir plus de contrôle sur l'emplacement des images et des autres éléments dans ces rangées de colonnes. Par exemple, je ne voudrais pas qu'une image ait une ligne de texte en dessous du contenu, puis fragmentée pour former la ligne de colonnes suivante. Page Floats me permettrait de préciser que les images se trouvant dans cette situation seraient placées en bas de la colonne ou en haut de la première colonne de la nouvelle ligne.

Spanning n Columns

In la prochaine version de Firefox (Firefox 71), la propriété column-span de la spécification de disposition en colonnes multiples est implémentée, ce qui signifie que tous nos navigateurs Web implémentent de colonnes . La propriété column-span peut prendre l'une des deux valeurs, all ou none . Si la valeur est all elle couvre toutes les colonnes; si elle est aucune (qui est la valeur initiale), elle ne s'étend pas.

Qu'en est-il des dispositions multi-colonnes avec des éléments qui couvrent certaines colonnes? C’est un motif que je trouve assez souvent dans les dessins imprimés. L'élément couvrant se trouve généralement en haut ou en bas de la page, raccourcissant les colonnes situées en dessous ou au-dessus.

Cela n’est actuellement pas possible sur le Web et nous n’avons pas encore défini de spécification pour ce problème. Cependant, certains agents utilisateurs d’impression ont déjà implémenté une extension du spec pour le faire. En utilisant Prince, je peux utiliser le code CSS suivant pour couvrir deux colonnes:

 img {
    float: coin en haut de la colonne;
    colonne-envergure: 2;
}

Cela permettrait de placer un élément dans l'angle supérieur en utilisant la version Prince de Page Floats, puis de l'étendre sur deux des colonnes. Le reste du contenu s'écoule dans les zones de colonne comme d'habitude avec multicol. Dans Prince, l'envergure de certaines colonnes est liée à des éléments flottants; Les éléments non flottants se comportent conformément à la spécification multicol de niveau 1 et ne peuvent concerner que tous ou aucun .

Cette spécification soulève des questions intéressantes. Actuellement, lorsque nous introduisons une clé dans multicol, l'élément spanning crée essentiellement une rangée de zones de colonne au-dessus de celle-ci et une rangée de zones de colonne en dessous. Le contenu ne saute pas au-dessus de l'élément central et continue – comme vous pouvez le voir dans son prochain CodePen.

Que devrait-il se passer si un élément couvrant deux colonnes sur trois est placé au centre du contenu? Dans de nombreux exemples imprimés que j'ai vus, le contenu saute aux yeux quand on rencontre ces étendues partielles, plutôt que de se comporter comme le fait multicol aujourd'hui.

Le document CSS Figures Living Idea contient d'autres explorations des colonnes et des extensions de colonnes. Dans un de mes articles plus anciens, j'ai également exploré certaines de ces idées: « Réflexions sur les flotteurs, les figures, les régions et les grilles de page ».

Différentes colonnes de tailles dans Multicol

Flexbox et disposition de la grille nous donner la possibilité de faire des colonnes de tailles différentes qui restent proportionnelles les unes aux autres lorsqu'elles se plient. Multicol, cependant, ne peut diviser le contenu qu'en colonnes de même taille. Il est courant en conception d'impression d'avoir des colonnes de tailles inégales.

Maintenant que Flexbox et Grid ont ce comportement, il est logique que multicol fasse de même et autorise différentes tailles de colonne. Peut-être une chose à considérer pour le niveau 2 de la spécification Multicol.

Texte enveloppant tous les côtés d'un élément

Vous aurez du mal à ouvrir un magazine et à ne pas repérer quelque chose qui ressemble à l'image ci-dessous. Contenu englobant tous les côtés d'un devis, d'une légende ou d'une image. C'est un modèle très courant et qui semble raisonnable comme modèle que nous pourrions utiliser sur le Web.

Nous avons une spécification CSS qui permet ce comportement. Les exclusions CSS jadis associées à la spécification CSS Shapes en tant qu'exclusions et formes CSS, définissent les propriétés wrap-flow et wrap-through . Les exclusions ne définissent pas le positionnement. Au lieu de cela, vous l'utiliseriez avec une autre méthode de positionnement – très probablement CSS Grid Layout. Cela active un motif tel que dans l'image ci-dessous (prise dans IE11):

Note : Si vous avez une version antérieure à Chromium Edge ou Internet Explorer 11, voir l'exemple CodePen .

L'exemple ci-dessus fonctionne avec Internet Explorer 11 (ou pré-Chromium Edge) en utilisant la version de grille préfixée par -ms . Internet Explorer est le seul navigateur à avoir tenté d'implémenter la propriété. Je suis très désireux de voir la mise en œuvre des exclusions. Je pense que cela résout un certain nombre de problèmes que nous avons avec les mises en page éditoriales sur le Web.

Note : Pour plus d’informations, consultez mon post « Éditions éditoriales, exclusions et grille . ] ”Ou lisez le présent numéro dans le référentiel de brouillons des groupes de travail CSS.

Flux de texte déconnectés

La conception de l'impression comprend souvent un contenu similaire à celui de multicol, mais les zones de contenu ne sont pas Vous pouvez voir un exemple ci-dessous tiré du magazine Monocle:

C'est très difficile à faire sur le Web. Si vous savez quelle quantité de contenu vous êtes susceptible d’avoir, vous pouvez créer ces mises en page à l’aide de Grid dans de nombreux cas. Cependant, ils sont alors assez fragiles; ils comptent sur nous pour comprendre la quantité de contenu dont nous disposons et pour le diviser en éléments HTML distincts. Cela nous obligera généralement à envelopper des morceaux de contenu dans un div afin de pouvoir positionner un élément sur la grille.

Un scénario plus idéal consisterait à conserver l'article tel quel (correctement marqué). fil de contenu) pouvant se retrouver dans des zones définies de la mise en page.

Nous avons une spécification qui détaille quelque chose comme ceci: la spécification CSS Regions . Cela a été implémenté dans IE10 (et donc dans les versions antérieures à Chromium Edge), ainsi que dans Chrome et WebKit avant d’être supprimé. Puis-je utiliser indique l'état des choses .