Forum Alsacreations : HTML, CSS, JavaScript et Standards Web

[Résolu] Problème GRID avec Firefox 159

boteha_2 — Sat, 31 Oct 2026 15:01:23 +0100

Bonjour, Depuis le 27-10-2026 la mise à jour Firefox 159 est chargée sur mon PC sous Windows. Je rencontre un problème d'affichage d'une grille sous GRID, problème inconnu sur précédentes versions de Firefox et sur version actuelle de Chrome. Avez-vous entendu parler de problèmes avec Firefox 159 ? Si nécessaire je peux montrer le code.

Lecteurs d'écran et attribut "lang"

parsimonhi — Sat, 31 Oct 2026 07:43:35 +0100

Bonjour, On lit souvent que si on veut que les lecteurs d'écran énoncent un texte dans la bonne langue, il ne faut pas oublier de spécifier l'attribut "lang" partout où c'est nécessaire. OK, mais je constate néanmoins pas mal de problèmes avec Voice Over sur mac même sur les pages ou portions de pages où l'attribut "lang" est correctement spécifié. Par exemple, avec le code ci-dessous, sur ma machine qui est un mac avec comme langue par défaut le français, le titre et le 2e élément de la liste sont lus avec une voix anglaise, le 1er et le 3e élément de la liste sont lus avec une voix française.

Accessibility

a: open this dialog
b: go back to the list of the last selected character if there was one
p: go to the preferences panel

J'ai aussi fait pas mal de tests sur différentes pages en anglais (en particulier le site d'Apple américain dont on peut imaginer qu'il est codé dans les règles de l'art) : même problème, la voix française est utilisée ici ou là, mais pas tout le temps, et sans raison semble-t-il ! Je précise que j'ai le même comportement avec différents navigateurs. Voice Over est donc le suspect principal. Je précise aussi qu'une bonne partie de mon activité sont des projets en français et en anglais dans le domaine de l'apprentissage des langues étrangères, notamment le japonais, le chinois et le coréen. Et pour l'instant, en gros, je n'ai rien qui marche comme attendu concernant le choix des voix par les lecteurs d'écran. Tant qu'il s'agit d'anglais et de français, c'est juste agaçant, mais c'est particulièrement critique pour le chinois/japonais qui utilisent les mêmes caractères, mais en les prononçant d'une manière complètement différente. Je précise que j'ai bien a priori ajouté dans Voice Over les voix nécessaires et que l'option "Détecter la langue" est bien cochée (si je la décoche, ça semble pire). Mais il est possible que j'aie raté quelque chose dans la configuration de Voice Over, car je n'utilise cet outil que très occasionnellement juste pour tester mes sites. J'ai aussi fait une recherche dans le web entier et je n'ai trouvé qu'un seul malheureux petit message concernant l'attribut "lang" et Voice Over (qui en gros décrit la même chose que ce que j'ai constaté, mais pour un cas particulier), ce qui suggère fortement que le problème pourrait venir de ma configuration (auquel cas ce serait une bonne nouvelle). J'ai deux questions : - Est-ce que c'est pareil sur les autres machines et avec d'autres lecteurs d'écrans ? S'il y en a qui peuvent tester ou faire un retour d'expérience plus général, je les remercie d'avance. - Est-ce qu'il y aurait des améliorations possibles à faire dans le code ou la configuration du lecteur d'écran pour augmenter les chances que ça fonctionne comme attendu (déjà, ce serait pas mal de faire marcher des pages complètement en anglais quand on les visite avec une machine en français) ? Amicalement, Modifié par parsimonhi (31 Oct 2026 - 12:57)

Présentation

CrayonSEO — Fri, 30 Oct 2026 12:15:59 +0100

Salut à tous, Je m'occupe surtout de SEO, et ça m'amène souvent à mettre le nez dans le HTML et le CSS des sites. Je lis beaucoup de sujets ici, je viendrai sûrement poser des questions, et quand je connais la réponse j'essaierai de donner un coup de main. À bientôt

[Amateur] bipjob.fr : avis sur la page d'accueil et le mobile

AntonyBipjob — Thu, 29 Oct 2026 21:06:35 +0100

Salut, c'est Antony. Je fais https://bipjob.fr (c'est mon site), qui aide à repérer des offres d'emploi IT et cyber. Je veux surtout des retours sur la lisibilité de la page d'accueil et l'affichage sur mobile. Merci d'avance pour vos avis. Antony

Présentation : Antony, cybersécurité

AntonyBipjob — Wed, 28 Oct 2026 14:16:58 +0100

Salut à tous. Moi c'est Antony, 29 ans, en Normandie. Je travaille dans la cybersécurité. J'ai aussi monté un petit projet pour aider à trouver des offres IT et cyber. Je viens surtout pour lire et donner un coup de main sur la sécurité des sites quand je peux.

[Amateur] icirouen.fr : avis sur le mobile, la structure et la vitesse

Antony76 — Tue, 27 Oct 2026 16:44:07 +0100

Bonjour, Je suis Antony, je viens de m'inscrire. J'ai fait https://icirouen.fr/ (c'est mon site). C'est un site local sur Rouen, mis à jour chaque jour : événements, expos, transports. J'aimerais des avis sur trois points : - la lisibilité sur mobile - la structure des pages - la vitesse de chargement Merci d'être honnêtes. Je réponds à tous les retours. Antony

Décalage de mise en page

Bongota — Sat, 24 Oct 2026 17:34:05 +0200

Bonjour, Sur l'un de mes sites, j'ai une indication de décalage de mise en page par Lighthouse. J'ai consulté quelques docs, mais c'est un peu obscur. Et les préconisations que j'ai mises en place n'ont pas produit le résultat attendu. Le plus fort, c'est que pour le même site, je n'ai plus ce décalage en mode mobile (sur Lighthouse). La perte étant minime, je ne l'avais pas remarqué. Avez-vous une idée ?

[Pro] Madeleine de Pourpre : menu mobile et logo à 320 px

maud_de_pourpre — Fri, 23 Oct 2026 14:38:00 +0200

Bonjour, Je suis maud de pourpre, de Madeleine de Pourpre. Notre boutique de bougies et de fondants parfumés fonctionne sous PrestaShop. Je souhaite recueillir des critiques sur l’ergonomie de son en-tête mobile. Un chevauchement entre le menu et le logo a été relevé lors de nos vérifications à 320 px de large. Ce point reste à reprendre. J’aimerais profiter de la correction pour vérifier que l’accès aux catégories est vraiment facile à repérer. Le site : https://madeleinedepourpre.com/ Sur un écran étroit, le bouton de menu vous paraît-il assez visible et facile à utiliser ? Pour mieux répartir l’espace, privilégieriez-vous un logo plus compact sur une seule ligne, ou un en-tête sur deux lignes ? Je suis preneuse d’arguments sur la lisibilité et la taille des zones cliquables. Si vous constatez un chevauchement ou un bouton difficile à atteindre, la largeur d’écran et le navigateur m’aideront à reproduire le problème. Merci pour vos conseils et vos critiques. Modifié par maud_de_pourpre (23 Oct 2026 - 14:38)

Vulnérabilité critique php

Niuxe — Wed, 21 Oct 2026 22:34:53 +0200

Salut tout le monde, Tenez à jour votre version php en prod. https://cert.cyber.gouv.fr/alerte/CERTFR-2026-ALE-014/

[Amateur] Manifs.win — avis sur la navigation et le vote mobile

Camillecss — Wed, 21 Oct 2026 08:51:09 +0200

Bonjour, Je viens de mettre en ligne un petit site indépendant consacré aux mobilisations en France : https://manifs.win Le but est de rassembler sur une même page les informations principales, les sources et les liens vers les différents acteurs. Le site comporte également un vote dont les résultats apparaissent après avoir répondu. J’aimerais surtout avoir vos retours sur quelques points : - comprend-on rapidement que le site sert d’abord de navigation vers les sources ? - le bloc de vote est-il clair, notamment sur mobile ? - la hiérarchie entre les informations, les sources et les différentes prises de position fonctionne-t-elle ? - les pages consacrées aux événements sont-elles agréables à lire ou encore trop proches d’un document ? Je suis également preneur de remarques sur la structure HTML, l’accessibilité et les performances. Merci d’avance pour vos retours, Camille

Retours d'expérience sur le testeur SMTP de LetsExtract ?

conntect — Fri, 16 Oct 2026 21:30:43 +0200

Bonjour à tous, Je suis tombé récemment sur le Vérificateur SMTP de LetsExtract et j'envisage de l'utiliser pour diagnostiquer un problème d'envoi sur un de mes serveurs. Avant de m'appuyer dessus, j'aimerais avoir vos retours. Ce qui m'intéresse particulièrement : 1. Est-ce que le journal fourni est vraiment détaillé, ou est-ce qu'il reste vague quand la connexion échoue ? J'ai besoin de savoir si c'est un problème d'identifiants, de port bloqué ou de configuration TLS. 2. Avez-vous testé avec des fournisseurs comme SendGrid, Mailgun ou un serveur d'entreprise ? Est-ce que ça fonctionne aussi bien qu'avec un serveur standard ? 3. Le fait qu'aucune donnée ne soit conservée après le test est-il confirmé en pratique, ou est-ce juste une promesse marketing ? 4Est-ce que ça remplace vraiment un test en local avec swaks ou telnet, ou est-ce juste plus pratique quand on n'a pas accès au terminal ? Je pose la question parce que je ne veux pas perdre du temps avec un outil qui donne des résultats partiels, mais je ne veux pas non plus installer tout un environnement juste pour un diagnostic ponctuel. Merci d'avance pour vos retours.

Textures de fond répétables pour un site vitrine : génération, opt

aitexturegenerator — Wed, 07 Oct 2026 14:16:29 +0200

Bonjour à tous, Je travaille en ce moment sur un petit site vitrine pour un artisan menuisier, et je me suis retrouvé face à un problème que beaucoup d'entre vous ont sans doute déjà rencontré : trouver des textures de fond (bois, papier, béton léger) qui soient à la fois discrètes, répétables sans couture visible et suffisamment légères pour ne pas plomber le temps de chargement. Jusqu'ici, je piochais dans des banques d'images gratuites, mais j'avais toujours le même souci : soit la licence était floue, soit la texture se répétait de façon évidente dès qu'on l'utilisait en background-repeat sur un grand écran. J'ai donc testé plusieurs approches ces dernières semaines et je voulais partager mon retour, et surtout avoir vos avis. 1) La génération par IA J'ai essayé un ai texture generator -https://imgtoimg-ai.com/usecase/ai-texture-generator : on décrit la matière voulue (par exemple « chêne clair, grain fin, légèrement usé ») et l'outil propose des tuiles carrées censées être raccordables. Le résultat est plutôt bluffant pour des fonds décoratifs. Il faut tout de même vérifier les bords à la main : sur une dizaine de tuiles, deux ou trois présentaient une petite rupture de motif visible à 1920 px de large. 2) L'optimisation derrière Une fois la tuile choisie, je l'exporte en 512×512, puis je la convertis en WebP et en AVIF avec un fallback JPEG via image-set(). Sur un fond bois, je passe ainsi d'environ 180 Ko à moins de 30 Ko en AVIF, sans différence perceptible une fois le contenu par-dessus. 3) L'accessibilité et le contraste Point important que j'ai failli oublier : une texture, même discrète, réduit le contraste du texte. J'ajoute systématiquement un léger voile (background-color semi-transparent en superposition) et je contrôle le ratio avec l'outil de contraste du navigateur. Pour les utilisateurs qui activent prefers-contrast: more, je supprime carrément la texture. 4) Le CSS utilisé Rien de très exotique : background-image avec image-set, background-size fixé à 256px pour garder un grain fin sur écrans haute densité, et un background-attachment classique (j'évite fixed qui pose des soucis de performance sur mobile). Mes questions pour vous : - Est-ce que vous utilisez des textures générées pour vos projets clients, ou est-ce que vous restez sur de la photo réelle ? - Avez-vous une méthode fiable pour détecter automatiquement les raccords ratés d'une tuile avant de la mettre en production ? - AVIF en fond CSS : vous le servez déjà partout, ou vous attendez encore ? Merci d'avance pour vos retours, je mettrai à jour le sujet avec ce que j'aurai appris ! Modifié par Felipe (07 Oct 2026 - 14:22)

Calculateur Gratuit : avis sur les modes du calculateur de pourcentage

pb193105 — Tue, 06 Oct 2026 14:32:14 +0200

Bonjour, Je développe Calculateur Gratuit et je souhaiterais un regard extérieur sur l’interface de cette page : https://calculateur-gratuit.fr/outils/calcul-pourcentage/ Le calculateur propose dix modes, avec des boutons tels que « X % d’une valeur », « % d’un total », « Évolution » et « Points de % ». Les résultats changent immédiatement pendant la saisie. La page utilise Next.js, React et TypeScript. Mon interrogation concerne surtout le choix du mode et la lecture du résultat sur mobile. Pour un calcul de 80 à 100, le mode « Évolution » donne +25 %. Dans l’autre sens, de 100 à 80, on obtient −20 % : la valeur de référence change. Cet exemple me semble utile pour vérifier que les intitulés restent compréhensibles. J’aimerais vos avis sur trois points : - Comprend-on assez vite la différence entre « % d’un total » et « Évolution », ou faudrait-il afficher une question concrète avant les boutons ? - Sur un petit écran, les différents résultats et la formule se distinguent-ils suffisamment ? - Lors de la navigation au clavier et de la saisie de nombres décimaux, voyez-vous un obstacle ou une information manquante ? Je suis le créateur du site. Je cherche des remarques précises sur ces éléments pour guider les améliorations. Merci pour vos critiques.

Étranges espacements

cde — Mon, 05 Oct 2026 16:46:25 +0200

Bonjour J'ai un soucis de CSS sur la page https://qua.name/rolistologie/revue-de-presse-octobre-2026 Pour contexte, je n'ai pas la main sur le HTML, uniquement le CSS. Mon problème, il y a un étrange espacement entre les h2 et les p de l'article, par exemple entre "Incendie du château de Monchat" et "Un nouveau drame lié à la canicule et au manque de moyen des pompiers." Toutes les margins (annoncées et effectivement calculées par le navigateur) sont bien à 0, il n'y a pas de padding... Est-ce que vous auriez une idée pour expliquer cet espacement (en vue de le supprimer) ? Merci

Reporting-Endpoints et report-to

boteha_2 — Sat, 03 Oct 2026 19:51:09 +0200

Bonjour, www.monsite.com Le programme pour traiter les erreurs CSP s'appelle : csp_rapport.php Header always set Content-Security-Policy: report-to tlc-csp-endpoint Ma question est quelle URL donner ? Header set Reporting-Endpoints "tlc-csp-endpoint=\"https://monsite.com/csp_rapport.php\"" Est-ce bon, ça a l'air de ne pas marcher ?

[Pro] Cœur de Famille — navigation entre arbre et souvenirs

Florent_CoeurFamille — Tue, 22 Sep 2026 11:45:24 +0200

Bonjour, Je développe Cœur de Famille, un espace familial privé qui réunit arbre, photos, événements et souvenirs des proches. Je cherche des regards extérieurs sur la lisibilité du parcours : une personne peu habituée aux outils de généalogie comprend-elle comment passer de l’arbre aux souvenirs d’un proche ? La page de présentation : https://coeurdefamille.fr/memoire-familiale Un exemple fictif accessible sans compte : https://coeurdefamille.fr/demo?start=69&person=69#profil La Fiche Mémoire rassemble biographie, repères de vie, photos anciennes et anecdotes. J’aimerais surtout vos critiques sur la hiérarchie de l’information, les libellés et la navigation sur mobile. Qu’est-ce qui vous paraît peu clair au premier passage ? Merci pour vos retours. Modifié par Florent_CoeurFamille (22 Sep 2026 - 11:45)

Vos outils indispensables pour le développement

Olivier C — Mon, 21 Sep 2026 11:24:31 +0200

Bonjour à tous, Le forum est calme en ce moment et depuis quelques temps déjà (merci les LLMs), j'en profite donc pour vous poser une question par curiosité : Parmi les outils que vous utilisez pour le développement, quels sont ceux dont vous ne pourriez vous passer (par exemple Vite.js) ? Et surtout pour quels cas d'utilisation pratique ? Ou encore, l'outil existe mais n'est pas optimal pour vos besoins, où il n'est plus maintenu, etc... ** Toutes stacks confondues, on ne se limite pas à NPM. La question ne se limite pas non plus à un domaine : en principe on parle du web, mais pas exclusivement. Je ne parle pas des IDEs, par contre leurs plugins ça compte. On ne parle pas non plus des LLMs et de leur workflow, on parle uniquement des outils déterministes. C'est à vous. --- ** Ce fût par exemple le cas pour moi avec Stylus, un préprocesseur CSS, cet exemple date un peu ; actuellement je trouve que Pug, un système de templating HTML, suis le même chemin Modifié par Olivier C (21 Sep 2026 - 12:07)

Problème de caractères accentués

AlaiM — Fri, 18 Sep 2026 19:28:20 +0200

bonjour j'utilise phpMyadmin 4.7.0 en local mon problème est que les caractères accentués, en sortie avec la fonction PHP echo, apparaissent avec un point d’interrogation dans un losange noir. pourquoi ? (je n'ai pas ce problème avec un serveur distant)

[Résolu] Problème de menu hamburger

RaW — Tue, 15 Sep 2026 18:50:20 +0200

Bonjour. Je cherche à créer des albums photo qui s affiche correctement sur tout les supports. Le problème est le suivant mon menu s affiche bien sur mon ordinateur mais sur mon téléphone c'est une autre pair de manche.. Le menu hamburger que j'ai créer ne s 'affiche correctement qu'une fois qu'il a été cliqué. C'est à dire que on voit pas mon header autrement qu'aprés avoir cliqué sur le menu hamburger. J'ai bien essayé de régler le problème avec différente IA mais rien n'y fait. Je précise que je suis débutant désolé si le soucis paraît simple et que je vous fais perdre un peu de temps mais moi je n'ai pas trouvé la solution malgré de longue heures à chercher la solution . voici le code : Mes Albums Photos - Version Design Personnalisé

album photo général

album nature

[Résolu] Uncaught Error: Class "PHPMailer" not found

boteha_2 — Sat, 12 Sep 2026 15:41:35 +0200

Bonjour, J'utilise PHPMailer depuis des années, cela marche bien sauf quand OVH me bloque des mails car SMTP n'est soi-disant pas activé. J'ai donc ajouté quelques lignes de code préconisées chez Ionos : use PHPMailer\PHPMailer\PHPMailer; // Ajout use PHPMailer\PHPMailer\SMTP; // Fin ajout use PHPMailer\PHPMailer\Exception; require_once 'PHPMailer603/src/PHPMailer.php'; // Ajout require_once 'PHPMailer603/src/SMTP.php'; // Fin ajout require_once 'PHPMailer603/src/Exception.php'; $mail = new PHPMailer\PHPMailer\PHPMailer; // Ajout $mail->SMTPSecure = PHPMailer::ENCRYPTION_STARTTLS; // Fin ajout Et je me prends l'erreur : Uncaught Error: Class "PHPMailer" not found Avez-vous une explication ? Modifié par boteha_2 (12 Sep 2026 - 15:42)