Quelques retours sur la nouvelle border-radius et padding en CSS

[j127]

Je viens de mettre à jour Discourse vers la dernière version et il y a quelques problèmes avec les nouveaux arrondis des bordures CSS, en particulier sur les sites avec des en-têtes sombres.

Voici une capture d’écran d’un en-tête sombre où les pièces ne s’emboîtent plus proprement :

Voici ce que cela donne sur ce forum avec une bordure CSS rouge ajoutée pour clarifier :

Voici à quoi cela ressemble sur un forum qui n’a pas encore été mis à jour — je pense que cela rend beaucoup mieux avec moins d’arrondi et avec l’ancien padding (et aucun arrondi là où un coin touche une ligne droite).

Je pense que les bordures moins arrondies rendaient mieux dans l’ensemble. Voici un autre exemple :

Voici l’ancienne version pour comparaison (elle rend mieux à mon avis, bien que les coins extérieurs pourraient être mieux avec un rayon de 2px) :

Juste quelques suggestions.

[sam (Sam Saffron)]

Merci d’avoir signalé cela, j’ai alerté l’équipe de conception.

[jordan.vidrine]

Certaines de ces modifications ont été apportées depuis votre publication.

Nous avons ajouté un peu de séparation aux éléments de la barre latérale :

Notre panneau de notification n’a plus de marge intérieure. C’est une orientation que notre équipe de conception juge meilleure que d’avoir une marge intérieure autour de tous les éléments.

Ce coin ne devrait pas avoir d’arrondi appliqué. Nous allons régler cela, merci de nous l’avoir signalé.

[j127]

Ceci n’est qu’un retour d’information, car il devrait être assez facile pour moi de le modifier sur mes propres forums :

Le manque de marge là-bas est acceptable. C’est peut-être juste moi, mais chaque fois que je clique sur le menu, mon cerveau dit : « quelque chose ne va pas ». Je pense que c’est plus le rayon du bord qu’une marge, car il semble que la boîte entourant l’icône utilisateur ait un rayon de 4px, mais le menu a un rayon de 2 * 4px. Les boutons dans la barre latérale sont également de 4px. Je pense que cela aurait l’air mieux si les bords du menu étaient de 4px afin qu’ils soient alignés avec le reste de la page.

(Vos captures d’écran donnent l’impression que tout pourrait être de 8px, mais je trouve que cela a l’air trop arrondi. Sauf erreur de ma part, lorsque je me déconnecte, je vois un rayon de 8px, mais lorsque je suis connecté, je vois 4px. J’ai essayé sur plusieurs navigateurs.)

---

Edit : nous voyons peut-être des choses différentes. Ce n’est pas un gros problème, car je peux remplacer la variable, mais c’est ce coin supérieur gauche qui me semble étrange chaque fois que je clique dessus sur mes sites. Peut-être que l’arrondi plus grand rapproche le bord du texte, c’est pourquoi j’ai mentionné la marge dans mon commentaire précédent.