28044 sujets

CSS et mise en forme, CSS3

Bonjour à tous
Je viens de faire l'acquisition d'une liseuse musicale PadMu dont l'écran est en "niveaux de gris"
Cet appareil est en fait une tablette de grande taille sous Android avec une application spécifique de gestion de pages adaptée aux musiciens.
Pour charger les partitions, je peux utiliser le navigateur, qui semble être plus ou moins issu de Chrome et me permet d'accéder à un site web et de télécharger les partitions au format PDF.

Mon problème : le site a été conçu pour des appareils supportant la couleur, et une fois réduit en niveaux de gris la lecture des pages n'est pas très agréable.

Ma question : comment faire un CSS spécifique "niveaux de gris", en particulier comment détecter que le client utilise une telle tablette et quelles pourraient être les "bonnes pratiques" pour ne pas avoir à réinventer toute la présentation du site ?

Merci de m'apporter votre aide dans un cas relativement peu commun, mais qui en fait se pose déjà pour certaines liseuses Kindle ou autres, où on voit bien que la couverture du livre, généralement en couleur, est difficilement lisible sur l'appareil.
Modifié par PapyJP (27 Aug 2023 - 11:30)
Modérateur
Salut,

La solution que je vais donner n'est pas propre, mais aura le mérite de fonctionner :


body:before{
content: '';
backdrop-filter: grayscale(1);
pointer-events: none;
position: fixed;
top:0;
right:0;
bottom: 0;
left:0;
}


Pour quelque chose de plus propre et je pense que ça doit fonctionner, le jeu de couleur doit être variabilisé et suivant le user-agent ou la taille de l'écran, tu redéfinies les couleurs.
Je ne comprends pas très bien ce que tu proposes

Voici une photo de l'écran de la tablette affichant une page du site web
upload/1693230411-48769-padmu.jpg
Ce que je cherche, c'est améliorer la lisibilité sans pour autant devoir refaire tous les fichiers .css du site.
Bonjour,

Moi je jouerais avec la propriété CSS filter ; par exemple :
html {
    filter: contrast(1.75);
}

Modifié par Olivier C (28 Aug 2023 - 19:25)
Administrateur
Bonjour,

tu as la main sur les CSS du site et l'affichage est correct sur un desktop ou iPad si j'ai bien compris ?
Pour conserver les CSS actuelles pour tous les autres appareils mais les modifier pour cette tablette spécifiquement, il faut trouver comment la détecter enfin la distinguer.
Préférer Media Queries à User Agent si possible mais encore faut-il déterminer lesquelles sont supportées...

HS : dans l'idée https://www.mydevice.io/ pour la résolution

Parmi les MQ https://developer.mozilla.org/en-US/docs/Web/CSS/@media#browser_compatibility
voir déjà color https://developer.mozilla.org/en-US/docs/Web/CSS/@media/color (visiter avec la tablette la page et voir Examples > Result)
puis monochrome https://developer.mozilla.org/en-US/docs/Web/CSS/@media/monochrome#result
Modifié par Felipe (29 Aug 2023 - 12:32)