La NASA bénéficie chaque année d’un budget conséquent, de quelques dizaines de milliards de dollars, parfois questionné ou remis en cause. Avec le site Home & City, l’agence spatiale américaine a eu l’idée de montrer quelles ont été les retombées technologiques de ses recherches.
Toujours dans cette optique d’avoir un site optimisé pour tous, je me suis retrouvé face à un souci au niveau de mon thème en responsive, notamment sur les petits écrans avec mon menu.
En effet, sous mobile, avec n’importe quel navigateur, mon menu se refermait tout seul lors du scrolling pour faire défiler un peu le menu.
Cet effet de fermeture correspond en fait au moment où le navigateur enlève une de ses barres de navigation (celle de l’URL surtout).
Ce souci a lieu avec les navigateurs Firefox, Samsung, Opéra et Chrome pour mobile… Autrement dit, tous.
L’astuce que j’ai trouvé c’est donc de faire un menu déroulant lorsque l’écran est un peu petit (si vous voulez tester, il suffit de vous mettre en paysage sur mobile sur la page d’accueil).
Mais le plus fun, c’est que ça se fait en CSS.
Le code que j’ai appliqué est celui-là :
overflow: scroll;
overflow-x: hidden !important;
max-height: 100vh;
Overflow c’est pour afficher l’ascenseur de défilement, ça autorise un débordement avec défilement.
Je dis à mon block de ne pas afficher de barre de défilement sur l’axe x (« Overflow-x »). Cette technique évite à mon menu d’avoir un glissé vers la droit qui apparaît lorsque l’ascenseur vertical se montre, ça ajoute une marge en quelque sorte et décale le block du menu.
Enfin, je dis à mon menu que sa hauteur maximale théorique ne pourra pas dépasser 100vh. Le vh c’est une unité qui se définit comme un pourcentage de la surface d’affichage visible en hauteur. 100vh c’est donc 100% de l’écran visible.
Dans ce cas, mon menu occupera 100% de la page mais aura un ascenseur de défilement.
Quelques unités qui peuvent être utiles sans devoir tout calculer à chaque fois :
BQ annonce la mise à jour vers Android P pour 10 appareils
Source : BQ annuncia l’aggiornamento a Android P per 10 device
La liste des appareils est :
– Aquaris X2
– Aquaris X2 Pro
– Aquaris X
– Aquaris X Pro
– Aquaris U2
– Aquaris U2 Lite
– Aquaris VS
– Aquaris VS Plus
– Aquaris V
– Aquaris V Lite
Qui a dit que les appareils Android avaient une durée de vie courte ?
Merci BQ !!! <3
Source : Pixels Are Dead: Why You Should Stop Using Pixels In CSS
Je suis en train de refaire ma charte graphique pour rendre mon blog accessible pour tous, car demain, je serai peut-être dans la même galère que pour certains pour naviguer et trouver l’information…
Comme partagé dans cette article, j’ai commencé à améliorer les contrastes, etc.
Le thème global risque de bien changer voire de changer complètement. Pour le moment j’essaie des trucs afin de garder mon thème…
Par contre, je vais tenter de changer toutes mes valeurs en pixels pour les mettre à jour pour que la taille globale reste la même sur tous les écrans. Sur ceux que j’ai à disposition, pour moi, ça rend bien, mais peut-être qu’il y a de gros soucis pour les résolutions très élevées. Je vais donc passer des px en r/em et je vais tenter d’appliquer le conseil donné par cette personne.
À suivre
Mauvaise nouvelle pour Enedis et son activisme en faveur du compteur communicant Linky. La justice a reconnu le droit pour les abonnés de refuser l’installation de Linky et la transmission de données à des tiers.
Source : Les Français peuvent dire non à Linky et à sa collecte de données – ZDNet
À garder en tête…