28128 sujets

CSS et mise en forme, CSS3

Hello,

Mes pérégrinations du week-end qui s’annonce. Je cherche des ressources récentes sur le rythme vertical en CSS, avec un exemple pratique.

En effet, je galère un trouver des explications avec des rem, plutôt que des pixels, qui me paraît un peu obsolète. La plupart des articles datent.

Merci de toute aide.
salut,
avec
body font-size: 100%;

1 rem vaut 16px
qu'entend tu par rythme vertical?
Modifié par drphilgood (28 Jan 2023 - 11:38)
Administrateur
Hello,

Il existe assez peu de ressources concernant le rythme vertical en rem/em en effet.

En voici une qui me semble très bien : https://nowodzinski.pl/syncope/ La taille de base est exprimée en px mais rien ne t'empêche de la remplacer par 100% ou 1rem. Et toutes les valeurs calculées des espacements et hauteurs de lignes sont exprimées en px ou em ou rem.

Cette ressource semble faire le taf aussi : https://gridlover.net/try.html

Bon dimanche !
Ah merci Raphael, je n’étais en effet pas tombée sur ces liens-là lors de mes recherches.

Je cherchais surtout des explications, mais dans mon cas, j’ai des images dans les colonnes, et je ne vois pas trop comment les concilier avec le texte.

Tu as peut-être une idée sur ce point-là ?

Merci.
Le rythme vertical... je m'y suis essayé à une époque. Je déconseille cette approche.

En effet, bien que séduisante de prime abord, l'esthétique ne sera pas forcément au rendez-vous dans des conditions réelles. Par exemple, l'usage de séparer deux paragraphes doit nécessairement être d'une ligne d'espace vide dans ce cas de figure, alors que la moitié serait bien suffisante sur un plan esthétique. Et là je n'aborde pas le manque d'harmonie visuelle des espaces liés aux différentes tailles de titre, je ne parle pas non plus des contraintes sur les images... Au final le bénéfice apporté par cette technique n'est pas évident, en plus d'être hasardeux (cf. les différences d'interprétation entre navigateurs), je préfère un rendu des margin/padding relatif à la taille de la police. Pour l'harmonie visuelle entre blocs on pourra compenser si besoin par une solution en rupture totale d'alignement (donc l'inverse de l'effet recherché ici) : avec un effet masonry par exemple.
Modifié par Olivier C (30 Jan 2023 - 09:14)
Merci à tous.

Je vais rester avec ma feuille de style actuelle dans ce cas.
Modifié par myself (02 Feb 2023 - 05:50)