28172 sujets

CSS et mise en forme, CSS3

Pourquoi certaines balises n'appliquent pas la police de caractères ?

Bonjour à vous tous,

Je me suis rendu compte d'une chose. Quand on défini une police de caractères dans la balise <html> pour toute la page web, elle n'est pas systématiquement appliquée partout. Par exemple, dans la balise <textarea>, c'est une police de caractères à espacement fixe, du genre Courier, qui est utilisée. Quelqu'un saurait expliquer pourquoi certaines balises ne prennent pas en compte la police de caractères définie dans la balise <html> et s'il y a moyen d'y remédier en passant par une définition générale ?

Voici un exemple de code HTML :
<!DOCTYPE html>
<html lang="fr">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test sur police de caractère</title>
    <style>
        html{
            font-family: Arial, sans-serif;
        }
    </style>
</head>
    
<body>
    <textarea name="texte" id="texte" cols="30" rows="10">Ceci est une phrase avec une police d ecaractères à espacement fixe</textarea>
    <p>Ceci est un paragrpahe classique.</p>
</body>

</html>

Modifié par ObiJuanKenobi (14 Dec 2023 - 08:18)
Modérateur
Bonjour,

Les navigateurs définissent des styles (dits par défaut) pour les différentes balises.

Comme les navigateurs définissent généralement une police monospace pour la balise textarea, ça aura la priorité sur ce que tu définiras comme police pour n'importe quelle balise contenant un textarea. Pour changer la police du textarea, il faut définir dans ton css une police pour les textareas spécifiquement pour qu'elle soit pris en compte.

Les balises impactées quand tu définis une police pour la balise html sont celles pour lesquelles les navigateurs ne définissent pas de police par défaut. Il s'agit de presque toutes les balises mais pas toutes les balises.

La priorité des styles par défaut des balises sur les styles qu'on applique aux conteneurs de ces balises est un mécanisme général qui s'applique pour toutes les propriétés. Par exemple, les navigateurs définissent généralement pour les h1 le style par défaut font-weight: bold. Même si tu mets un font-weight:normal sur la balise html, les h1 resteront en bold. Pour changer le font-weight d'un h1, il faut modifier le font-weight de ce h1 spécifiquement. Modifier le font-weight de l'une des balises contenant ce h1 n'aura aucun effet.

Amicalement,
Merci parsimonhi pour tes explications mais cela ne répond pas à ma question, pourquoi ?
Je sais que pour les balises <pre> et <code>, par exemple, c'est normal que par défaut elles appliquent une police de caractère monospace, parce que c'est pour répondre à leur rôle qui est d'écrire du code informatique avec une police monospace, mais pourquoi pour <textarea> les navigateurs appliquent une police monospace ? Ce n'est que tu texte après tout, le même texte qu'on afficherait avec la balise <p> ou les balises <h1>, <h2>, etc.
Modifié par ObiJuanKenobi (14 Dec 2023 - 09:38)
Administrateur
ObiJuanKenobi a écrit :
Merci parsimonhi pour tes explications mais cela ne répond pas à ma question, pourquoi ?

Pour qu'un document soit compréhensible même sans feuille de style additionnelle.

Sans quoi tous les éléments se ressembleraient et ne pourraient pas être différenciés (h1, h2, p, listes, etc.). De la même manière, tous les élements seraient en "inline" (valeur par défaut de display), etc.

C'est donc un "choix ergonomique" des navigateurs d'appliquer une feuille de style minimale pour la compréhension des documents.
Modérateur
Bonjour

ObiJuanKenobi a écrit :
Merci parsimonhi pour tes explications mais cela ne répond pas à ma question, pourquoi ?


J'ai pourtant bien répondu à ta question initiale. Smiley lol Smiley lol Smiley lol

Là tu en poses une autre à savoir (si je résume) "pourquoi les navigateurs ont-ils fait le choix de la police monospace pour les textarea ?"

C'est probablement pour une question de lisibilité similaire à ce qui est fait pour les outils qui affichent du code. Ils n'étaient pas obligés, mais ils l'ont fait comme ça !

Amicalement,
Modifié par parsimonhi (14 Dec 2023 - 09:56)
Raphael, ton explication ne me satisfait pas même si elle paraît logique. Parce que je le redis, le contenu d'un <textarea>, ce n'est que du texte basique comme pour les <p> et les <hn>. Certes, le corps du caractères et la graisse sont différents entre les <p> et les <hn>, et c'est ce qui les différencie, mais la police de caractère par défaut est la même pour les deux. Pareil, les différentes balises pour créer des tableaux utilisent tous la même police de caractères par défaut, ils n'utilisent pas un police monospace pour se différencier des autres entités.

J'ai posé la question à ChatGPT et il m'a répondu ceci :
upload/1702544573-62242-capturedncran2023-12-14100220.png
La réponse est similaire à ce que tu as écrit mais je continue à ne pas être satisfait. Je crois plutôt qu'il y a une explication plus rationnelle, plus logique du genre, la balise <textarea> peut éventuellement se comporter comme un "input" et son contenu pourrait être envoyé à un traitement sur un serveur distant. Et donc, pour faciliter la tâche, les navigateurs appliquent une police monospace par défaut.
Modérateur
Bonjour,

ObiJuanKenobi a écrit :
... Certes, le corps du caractères et la graisse sont différents entre les <p> et les <hn>, et c'est ce qui les différencie, mais la police de caractère par défaut est la même pour les deux. Pareil, les différentes balises pour créer des tableaux utilisent tous la même police de caractères par défaut, ils n'utilisent pas un police monospace pour se différencier des autres entités.


Les balises p, hn, table, th, td n'ont pas de police par défaut en propre. Elles héritent de la police de leur conteneur.

Il y a très peu de balises qui ont une police par défaut en propre (et qui donc ne peuvent pas hériter de la police de leur conteneur). Et textarea est l'une de ces rares balises.

ObiJuanKenobi a écrit :
Parce que je le redis, le contenu d'un <textarea>, ce n'est que du texte basique comme pour les <p> et les <hn>.


Hum ! Il y a une différence majeure entre les p ou hn d'une part, et un textarea d'autre part. Le textarea va contenir du texte saisi par l'utilisateur. C'est probablement pour faciliter la lisibilité de ce qui est saisie qu'une police monospace est définie par défaut pour les textareas.

EDIT: et aussi textarea a des attributs cols and rows. Ça peut motiver le choix d'une police monospace.

Amicalement,
Modifié par parsimonhi (14 Dec 2023 - 11:20)
Hello !

ObiJuanKenobi a écrit :
Je sais que pour les balises &lt;pre&gt; et &lt;code&gt;, par exemple, c'est normal que par défaut elles appliquent une police de caractère monospace, parce que c'est pour répondre à leur rôle qui est d'écrire du code informatique avec une police monospace

Je crois que tu te trompes sur l'utilisation des polices monospace. Elles favorisent la lecture du code, mais ça ne veux pas dire qu'elles sont utilisées pour cela uniquement. En l'occurence, il s'agit juste de distinguer le contenu de la page et l'entrée de l'utilisateur.
Merci Anymah mais si j'utilise des <imputs>, on voit qu'ils prennent la police de caractères que j'ai définit dans <style>, aussi bien les champs que les labels. Et pourtant, les champs <inputs> sont des entrées. Ce n'est donc pas que pour distinguer le contenu brut des entrées de l'internaute.
upload/1702795762-62242-test-montage.jpg 
<!DOCTYPE html>
<html lang="fr">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test sur police de caractère</title>
    <style>
        html{
            font-family: Arial, sans-serif;
        }
    </style>
</head>
    
<body>
    <textarea name="texte" id="texte" cols="30" rows="10">Ceci est une phrase avec une police d ecaractères à espacement fixe</textarea>
    <p>Ceci est un paragrpahe classique.</p>
    <form action="page cible">
        <label>Nom :</label>
        <input type="text" name="nom"><br>
        <label>Prénom :</label>
        <input type="text" name="pnom"><br>
        <input type="submit" value="Envoyer">
     </form>
</body>

</html>

Modifié par ObiJuanKenobi (17 Dec 2023 - 07:51)
Modérateur
Bonjour,

Après avoir cherché un peu, je suis de plus en plus convaincu que les textarea ont par défaut une police de caractères monospace parce que dans les temps anciens, on utilisait l'attribut cols de la balise textarea pour définir sa largeur (j'avais très sommairement évoqué cette possibilité dans un de mes posts précédents). Cet attribut cols permet de définir combien de "colonnes" de caractères pourront être visibles dans le textarea.

Dans le monde moderne où on utilise intensivement du css, ça n'a plus trop d'intérêt d'utiliser cols. Mais ça justifie que par défaut, la police de caractères soit monospace, car dans le cas où un développeur utilise l'attribut cols, on aura un affichage cohérent avec ce que souhaite (peut-être) ce développeur : des colonnes de caractères bien alignées verticalement.

Amicalement,
Modifié par parsimonhi (19 Dec 2023 - 03:06)
Ton explication, où se serait un reliquat du passé, me semble tenir la route, parsimonhi.
Modifié par ObiJuanKenobi (19 Dec 2023 - 07:49)
Prévenir un modérateur
Répondre au sujet
Aller à