Comments on Je hais le CSS

Ah oui en effet, je te confirme - si besoin est - que ça marche bien et que c'est plus agréable ! Merci :-)

@Ruxor: Ok.Merci pour l'info ! Bon courage ;-)

Ces modifications sont vraiment bienvenues !
J'ai cependant l'impression que tu n'as pas appliqué ces nouvelles règles aux pages de commentaires de tes entrées. Est-ce volontaire ?

Tu as l'air d'avoir pas mal étudié ces questions, donc désolé si tout ce que je vais dire est évident, mais tu ne sembles pas y répondre dans le texte donc ça vaut le coup de le dire.

À propos de la largeur des lignes de texte, je ne vois pas le problème d'utiliser la technique classique du max-width, pour prendre 100% de la largeur si la fenêtre est petite, mais une largeur acceptable en plein écran :

body { max-width: 80em; margin: auto; }

NB: j'ai utilisé une largeur qui dépend de la taille du texte, comme ça je contrôle un minimum le nombre de caractères par ligne.

À propos des sites qui se comportent mal quand on zoome le texte et pas les images : c'est pas la faute du CSS, mais des designers, qui précisent des tailles de police (en pixels) pour maximiser les chances que le rendu chez l'internaute correspondent à leur joli design. Ce n'est pas comme ça que CSS est censé être utilisé. Toucher à la taille du texte, c'est équivalent à un doigt d'honneur. La taille initiale du texte est dans les préférences du navigateur (par défaut c'est 16px) ; dans quasiment tous les cas les tailles de police n'ont aucune raison de ne pas être relatives.

À propos de la taille du texte sur navigateur mobile : je n'utilise pas ces trucs donc je parle hors de mon âne, mais s'il n'y a pas moyen de zoomer comme sur un navigateur normal, c'est effectivement tout pourri… Il me paraît logique que quand on met initial-scale=1 pour pouvoir faire du responsive, on a aussi envie que le zoom soit le même que celui d'un navigateur (le zoom qui garde la largeur de la page ne me semble avoir de raison d'être que pour les pages non adaptatives). Bref, a priori la seule solution que je vois pour ton propre site c'est d'enlever les tailles de polices absolues et de trouver le réglage de ton navigateur mobile pour changer la taille du texte.

À propos de la balise meta viewport, je ne sais pas si c'est vraiment encore d'actualité, mais j'avais compris que initial-scale=1 suffisait, que mettre width=device-width peut poser des problèmes : <URL: http://webdesign.tutsplus.com/tutorials/quick-tip-dont-forget-the-viewport-meta-tag--webdesign-5972 >. Quand au fait qu'on ne puisse pas mettre un pourcentage, ça devrait changer avec la règle CSS @viewport, si je comprends bien les specs (genre width:150%). En revanche elle n'est pas encore très supportée <URL: http://caniuse.com/#search=%40viewport >…

À propos de la taille des images, tout n'est pas encore au point, mais il y a des trucs prévus pour. Je suppose que tu connais déjà, mais au cas où : <URL: http://www.smashingmagazine.com/2014/05/responsive-images-done-right-guide-picture-srcset/ > et <URL: https://html.spec.whatwg.org/multipage/embedded-content.html#embedded-content >. Je crois que ce qui t'intéresse c'est surtout <picture>, qui n'a pas l'air très supporté, en particulier sur mobile, c'est ballot.

Tu as regardé ce que l'on appelle le "responsive design" ? L'idée générale c'est d'utiliser une fonction avancée du CSS, les media-queries, pour afficher un certain nombre de colonnes en fonction de la taille du viewport. Ainsi, un développeur peut gérer les dispositions sur mobile, tablette, laptop et 27 pouces. De nombreux frameworks existent, par exemple Bootstrap, ils reposent souvent sur un concept de grille et des tailles standardisées.
Ça ne rend pas le CSS plus agréable, ni n'en règle la plupart des problèmes. Mais il me semble que ça aide bien pour régler un problème de ce type.

Le problème de Bootstrap, c'est qu'après on se retrouve avec beaucoup de sites qui se ressemblent (et ressemblent à Twitter), surtout si on adopte les composants fournis (boutons, menus déroulants, etc.). L'avantage, à mes yeux de non-graphiste, c'est que d'autres gens se sont coltinés les coins "dégueulasses" du CSS, et me fournissent une interface optimisée (c'est-à-dire que tous les navigateurs récents sont supportés, les bugs corrigés/bricolés, etc.), ce qui m'évite d'aller dans ces coins…

Bonjour.

Connaissez-vous SASS ou LESS qui rendent d'énorme services ?

“on ne peut pas ajuster la taille d'une <iframe> automatiquement à son contenu” => I think that one is deliberate, and required for security. The iframe you embed in your page can show a webpage from a different server that has access to cookies and passwords that your server must not know about, and revealing the height of its contents could be used to leak a lot of information, especially if you can change its width.

The feature I'm missing is a symbolic name for a "red" color that I can use as text color to display warning or error messages, if I am using the default colors for page background and text. There are lots of variable symbolic color names defined, see eg. https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#System_Colors and the next two sections, just not one like that.

As for long lines and bands on the side, you can at least use CSS magic to make the width of the column relative to the size of the font, rather than a fixed size like most websites do. I've seen this done on a few webpages, but too few. I would prefer no bands though.

Anyway, the consequencies of all this CSS madness is indeed annoying. Very often I am viewing idiotic pages with text that is overlapping with other text or cropped pointlessly, and I have to override the layout on client side to be able to read anything. I don't use mobile phone browsers though, so I can't tell anything about those.