URL: https://linuxfr.org/users/pacifiko/journaux/css-spasibocss-version-petits-%C3%A9crans Title: [CSS] spasibo.css : version petits écrans Authors: B r u n o Date: 2011年03月13日T15:03:22+01:00 License: CC By-SA Tags: css Score: 17 Dans un [journal précédent](http://linuxfr.org/users/pacifiko/journaux/une-nouvelle-feuille-de-style-orient%C3%A9e-lecture), j'avais présenté ma feuille de style [spasibo.css](http://arliguy.info/css/spasibo.css) orientée lecture pour personnaliser LinuxFR. Je l'ai faite un peu évoluer depuis, corrigeant quelques anomalies par-ci par-là. Maintenant elle me va et ne devrait plus bouger. Les principaux changements sont : - Le badge pour nouveaux commentaires s'affiche à côté de la note au niveau du titre du contenu : ![Titre de l'image](http://arliguy.info/css/linuxfr-badge-nouveau-commentaires-spasibo.png) - La navigation entre nouveaux commentaires laisse s'afficher le titre alors qu'avant il était masqué par la barre de menu. Ensuite j'ai fait une adaptation pour les écrans plus petits : - [spasibo-800.css](http://arliguy.info/css/spasibo-800.css) - [spasibo-1024.css](http://arliguy.info/css/spasibo-1024.css) Le principe est simple : il y a une feuille de style qui surcharge la CSS principale pour l'adapter à des écrans de plus petite dimension. L'inclusion se fait sur une condition de dimension de l'écran, exemple pour _spasibo-800.css_ : @import "./spasibo.css" screen; @import "./spasibo-mobile.css" screen and (max-width: 800px); Ainsi si l'écran fait moins de 800px l'ensemble des règles contenues dans _spasibo-mobile.css_ est appliqué. Cela permet d'utiliser la même feuille de style, que l'on soit sur un grand écran ou sur un petit. Facile à tester, il suffit de redimensionner la fenêtre de son navigateur pour atteindre la limite. Le rendu donne cela : ![Titre de l'image](http://arliguy.info/css/linuxfr-small-screen-spasibo.png) L'idée c'est de faire de gros _boutons_ précédent et suivant sur le côté gauche pour facilement naviguer entre nouveaux commentaires. Le soucis c'est que tous les navigateurs mobiles ne supportent pas le `position:fixed` utilisé pour cela. En tout cas sur mon android 2.1 ça ne passe pas (à ce qu'il parait ce serait bon sur android 2.2, si il y a quelqu'un pour tester, ce serait __gentil__). Ensuite j'ai bien séparé les actions _pertinent_, _inutile_ et _répondre_ pour éviter les _clics_ malencontreux. J'ai aussi augmenté les tailles des caractères.