CarmaBlog

Agilité, Développement Java, Nouvelles technologies et plus…
  • rss
  • Accueil
  • Management
  • Programmation agile
  • Technologie
  • Linux
  • Evénement
  • App Android
  • Contact
  • A propos de l'auteur
  • English
  • Francais

Les fichiers CSS et Javascript jouent à cache-cache avec les navigateurs client

Fabian Piau | dimanche 29 septembre 2013 - 16:09
  • Imprimer
  • Twitter
  • LinkedIn
  • Facebook
  • Google

 English version available

Vous venez de mettre à jour des fichiers CSS et Javascript sur votre site?

Malheureusement, vos utilisateurs réguliers ne verront sans doute pas ces mises à jour, car leur navigateur utilisera encore les anciennes versions mises en cache. Et vous ne pouvez pas contrôler le raccourci Ctrl + F5 à distance…

Clean the cache

Pour éviter cela, il existe une astuce toute simple qui consiste à « versionner » vos fichiers en ajoutant un préfixe différent pour chaque nouvelle version. En général, on utilise un numéro de version, par exemple: ?ver=x.y.

<link rel="stylesheet" href="/css/style.css" type="text/css" media="all"/>

devient

<link rel="stylesheet" href="/css/style.css?ver=1.1" type="text/css" media="all"/>

Avec cette modification d’URL, le navigateur pense qu’il s’agit d’un nouveau fichier et le rechargera.

Articles similaires

boost-wordpressBooster votre blog WordPress: W3 Total Cache + CloudFlare printerOptimiser votre site web pour l’impression en 5 minutes DropboxEmmener vos fichiers partout avec vous grâce à Dropbox
Commentaires
Pas de Commentaires »
Catégories
Programmation agile
Tags
cache, clear, css, force, htaccess, javascript
Flux rss des commentaires Flux rss des commentaires

Optimiser votre site web pour l’impression en 5 minutes

Fabian Piau | dimanche 15 septembre 2013 - 13:23
  • Imprimer
  • Twitter
  • LinkedIn
  • Facebook
  • Google

 English version available

Est-ce vraiment utile? Je pense que oui! Les gens qui impriment des pages sur internet sont sans doute plus nombreux que ce que l’on peut penser. Et puis franchement, si ça prend 5 minutes, autant le faire!


Imprimante

Prenons un scénario digne d’un film hollywoodien (presque):

Monsieur Toutlemonde n’aura accès ni à internet ni à son ordinateur ce weekend et il n’a pas eu le temps de finir de lire un article assez long, mais primordial pour la suite. Il décide donc de l’imprimer pour le lire plus tard dans l’avion (oui, Mr Toutlemonde a de la chance, il part en vacances). L’impression terminée, il se rend compte, un peu blasé (car oui ce n’est pas la première fois que ça lui arrive), qu’absolument toute la page internet est ressortie. Il se retrouve avec 7 pages imprimées pour un article qui en comptait peut-être 3… Le menu de navigation du site, les articles similaires, les liens de partage vers les réseaux sociaux… Tout est là! Mais bon, Monsieur Toutlemonde est tout de même rassuré, il pourra lire son article « Comment affronter sa phobie de l’avion? ».

Dans la continuité de l’article expliquant comment rendre votre site responsive, je vais vous montrer comment rendre votre site optimisé pour l’impression.


Le principe est le même, on utilise le langage CSS.


Il faut déclarer un fichier de style CSS dédié pour l’impression. Dans le header de vos pages, vous ajoutez un lien vers ce fichier en spécifiant « print » pour l’attribut « media », contrairement aux autres qui spécifient en général le media « all » (écran, imprimante, etc.). Consultez cette page pour en savoir plus sur les medias.

Par exemple, j’utilise le fichier « print.css » pour mon blog, j’ai donc ajouté cette ligne:

<link rel="stylesheet" href="https://blog.fabianpiau.com/wp-content/themes/freshy2/print.css" type="text/css" media="print">

Ce fichier de styles sera utilisé seulement dans le cas d’une impression. Ainsi, vous allez donc pouvoir l’utiliser pour supprimer tous les contenus « parasites » tels que:

  • Header
  • Sidebars
  • Footer
  • Articles similaires
  • Etc.

Voici un extrait de mon fichier « print.css »:

@media print {
	.sidebar div div {
		display:none !important;
	}
	#header {
		display:none !important;
	}
	#footer {
		display:none !important;
	}
	.yarpp-related {
		display:none !important;
	}
	.meta {
		display:none !important;
	}
	.wp-pagenavi {
		display:none !important;
	}
	.sharedaddy {
		display:none !important;
	}
	#breadcrumbs {
		display:none !important;
	}
	.navigation {
		display:none !important;
	}
	.noprint {
		display:none !important;
	}
}

Logo impression garantie

A noter: j’utilise le mot clé « !important » pour redéfinir un style déjà présent. La valeur spécifiée avec le « !important » écrasera toujours les autres.

@media print { [mon code CSS ici] } permet de rendre un code CSS interprétable uniquement dans le cas d’une impression. Si vous utilisez cette annotation autour d’un bout de code CSS, rien ne vous empêche donc de l’intégrer dans un fichier CSS utilisé pour tout media (media="all"). J’ai utilisé à la fois l’annotation et le media pour l’impression, comme cela je suis sûr, mais ce n’est absolument pas une obligation.


Une autre solution (souvent complémentaire) est d’ajouter une classe CSS dédiée pour cacher des éléments en particulier à l’impression. Cela est utile dans le cas où l’élément en question n’a pas d’attribut qui lui est propre (pas d’identifiant ou une classe trop générique qu’on ne souhaite pas cacher partout…).

Par exemple, la classe « noprint »:

.noprint {
	display:none !important;
}

Désormais, n’importe quel élément de mon site qui utilisera la classe « noprint » sera invisible à l’impression. On ne peut pas faire plus simple!


Pour voir le résultat en action, vous pouvez imprimer cet article (un aperçu avant impression ou une impression vers une imprimante PDF sera suffisant, pensez à la planète…).

Articles similaires

seo performance websiteLes meilleurs outils gratuits pour tester et optimiser une application ou un site web Maven sitePlus loin avec le Maven Site WordPress qTranslateRendre son site WordPress multilingue avec qTranslate Responsive Web DesignFaire du Responsive Web Design: oui, mais simplement!
Commentaires
Pas de Commentaires »
Catégories
Programmation agile
Tags
css, design, impression, imprimante, mobilité informatique
Flux rss des commentaires Flux rss des commentaires

Faire du Responsive Web Design: oui, mais simplement!

Fabian Piau | mardi 23 juillet 2013 - 19:00
  • Imprimer
  • Twitter
  • LinkedIn
  • Facebook
  • Google

 English version available

Il n’y a pas si longtemps, je vous parlais du « Mobile theme » inclus dans l’extension Jetpack pour que votre blog WordPress soit accessible de manière lisible et adaptée sur les appareils mobiles.

Je ne reviens pas sur mes dires à propos de ce thème mobile, car il fonctionne très bien et chaque nouvelle version du plugin Jetpack apporte son lot d’améliorations. Surtout, il a un avantage certain: une configuration quasi proche du néant, il suffit d’un clic pour activer le thème, on peut difficilement faire mieux. Oui, mais… si un peu de développement ne vous fait pas peur, il y a encore mieux!

Je parle du Responsive Web Design (conception de sites web adaptatifs), en plus c’est très tendance en ce moment, et ce n’est pas qu’une mode passagère. Grâce au Responsive Web Design, le site reste le même pour toutes les plateformes et s’adapte automatiquement à la taille de l’écran. L’identité de votre site reste la même (thème, images, couleurs…) et cela vous évite de faire de la gestion de multi-versions: une version desktop, mobile, tablette… La gestion du site est donc simplifiée et la maintenance facilitée.

Responsive Web Design

Avant, les tailles d’écran étaient peu nombreuses (une bonne vieille résolution 1024 x 768 ou, pour les plus chanceux, une résolution 1280 x 1024), c’était le temps des écrans 17 et 19 pouces à tube cathodique (aïe, mes yeux, ça pique… Bon ok je ça commence à dater). Aujourd’hui, il y a des centaines de tailles différentes, Internet est partout que ce soit sur la télévision, dans votre voiture ou même dans votre frigo (bon là je vois un peu trop loin, mais le tout-connecté n’est peut-être pas si loin). Bref, il n’est plus envisageable de travailler sur des résolutions fixes au cas par cas.

Bien sûr dans le cas d’une application spécifique, il y a des arguments contre le Responsive Design. Une application web aura des performances plus lentes comparée à une application native, mais ce n’est pas l’objet de cet article. Cet article met le focus sur les sites web, disons grand public (site d’un journal, site marchand…), qui veulent se rendre accessibles sur mobile et veulent éviter des versions mobiles dédiées (les fameuses URL commençant par « m »). Par exemple m.facebook.com, m.linkedin.com ou encore m.lequipe.fr qui vont disparaitre tôt ou tard.


Testez vous-même

Vous pouvez dès maintenant modifier la taille de la fenêtre de votre navigateur, vous verrez que ce blog s’adaptera automatiquement en conséquence (si vous voyez des bogues ou des idées d’amélioration, je suis preneur!).

CarmaBlog en 1024 x 768

CarmaBlog en 1024 x 768

CarmaBlog en 400 x 768

CarmaBlog en 400 x 768


Vous l’aurez sans doute remarqué, voici les impacts lorsque la taille de la fenêtre diminue:

  • Le menu principal devient plus petit avant de se transformer en une liste déroulante.
  • Des blocs passent à la ligne (icône RSS et boîte de recherche).
  • Le contenu secondaire disparait au profit du principal. Sur un petit écran, on veut aller à l’essentiel (ici les articles) et éviter au maximum les scrolls.
  • L’effet d’ombre et d’arrière-plan disparait. Sur les petits écrans, quelques dizaines de pixels de gagné peuvent représenter 10% de la résolution totale, ce n’est pas négligeable.
  • Les images se redimensionnent pour éviter des disproportions trop fortes.


Des frameworks Responsive, en veux-tu en voilà…

De nombreux frameworks existent pour vous aider à réaliser un site responsive. Le plus connu est sans doute Bootstrap, d’ailleurs c’est le seul que j’ai pu utiliser sur un projet. Il y en a plein d’autres:

  • Foundation
  • Gumby
  • Unsemantic
  • Skeleton
  • Pure
  • KnaCSS


Du Responsive fait-maison!

Il est aussi possible de faire du Responsive Web Design soi-même, sans framework. C’est ce que j’ai fait pour mon blog. Un peu de CSS, un peu de Javascript et quelques heures de boulot suffiront. Ce ne sera peut-être pas compatible avec IE6, ça n’affichera sûrement pas de superbes animations bling-bling, mais cela suffira dans la majorité des cas.

Le secret, c’est l’utilisation des media queries disponibles depuis CSS3, voici des exemples de code:

@media all and (max-width:1000px) {
	.sidebar div {
		display:none;
	}
}

Quand l’écran fait moins de 1000 pixels en largeur, on masque les sidebars à gauche et à droite.


@media all and (min-width:870px) and (max-width:975px) {
	#menu ul li {
		font-size:.7em;
	}
	#header_image {
		height:150px;
	}
}

Quand l’écran fait entre 870 pixels et 975 pixels, on rétrécit le menu (la taille de la police) et le header.


@media all and (max-width:870px) {
	#menu {
		display:none;
	}
	#menuselect select {
		display:block;
	}
	#header_image {
		height:80px;
	}
}

Quand l’écran fait moins de 870 pixels, on cache le menu et le remplace par la liste déroulante et on rétrécit encore l’image du header.


@media all and (max-width:585px) {
	img:not(.fixed):not(.avatar):not(.wp-smiley):not(#sb-player) {
		height:auto !important;
		max-width:80%;
		min-width:70px;
	}
}

Toutes les images dépendent de la taille de l’écran quand celui-ci fait moins de 585 pixels. Les images avec les classes CSS « fixed », « avatar », « wp-smiley » ou ayant l’ID « sb-player » ne sont pas concernées. J’ai eu le problème d’avoir des images grossies avec certaines icônes comme les smileys ou le lecteur d’images Shadowbox.js… Aussi, une image ne peut faire moins de 70 pixels de hauteur (en dessous, je pense qu’il faudrait une très bonne vue).

A noter: j’utilise le mot clé « !important » pour redéfinir un style déjà présent. La valeur spécifiée avec le « !important » écrasera toujours les autres.


J’ai aussi écrit un peu de Javascript pour la création de la liste déroulante qui remplace le menu. Je ne mets pas le code ici (c’est très spécifique à mon site), mais sachez que la fonction ne fait pas plus de 15 lignes. J’ai profité du fait que la librairie jQuery était déjà incluse dans le projet pour utiliser quelques-unes de ses fonctions, histoire d’économiser quelques lignes de code.

En tout, il m’aura fallu environ 200 lignes de code CSS (avec le formatage ci-dessus donc beaucoup de lignes contenant une seule accolade fermante) pour rendre mon site responsive. Ce n’est pas aussi compliqué qu’on aurait pu le penser.

Enfin, il y a une dernière chose importante. Dans le header de vos pages, ajoutez cette balise meta pour indiquer que votre site est adapté pour les mobiles.

<meta name="viewport" content="width=device-width, initial-scale=1.0">


Vérification

Finalement, le plus long et fastidieux aura été l’affinage des styles en fonction de la résolution. Pas de secret, c’est un processus manuel itératif: on modifie le CSS, on rafraîchit la page et on inspecte.

A ce propos, le site Responsinator teste un site sous les résolutions d’écran les plus fréquentes correspondant à des appareils grand public. Vous pouvez aussi installer Firesizer, une extension Firefox pour connaitre la résolution de la fenêtre du navigateur, très utile lors de la construction des media queries.

Articles similaires

Mobile devicesUne version mobile de votre Blog WordPress printerOptimiser votre site web pour l’impression en 5 minutes
Commentaires
5 Commentaires »
Catégories
Programmation agile
Tags
css, design, mobilité informatique, responsive, wordpress
Flux rss des commentaires Flux rss des commentaires
Page 1 sur 212»
Télécharger l'app CarmaBlog

Articles les plus vus

  • Changer la langue de Firefox - 112 659 vues
  • Réaliser un sondage en ligne avec Google Forms / Drive / Docs - 58 977 vues
  • Personnaliser Gnome 3 (Shell) - 27 809 vues
  • FAQ – Sondage en ligne avec Google Forms / Drive / Docs - 18 226 vues
  • Java EE & CDI vs. Spring - 13 950 vues
  • Comparaison NoSQL: Couchbase et MongoDB - 12 715 vues
  • Firefox Nightly, Aurora, Beta, Desktop, Mobile, ESR & Co. - 12 335 vues
  • La signification d’URL, URI et URN - 12 092 vues
  • Open Street Map, une meilleure carte que Google Maps? - 11 965 vues
  • Extensions WordPress de CarmaBlog - 11 032 vues

Commentaires récents

  • User AvatarFabian Piau Oui, un formulaire n'a pas de date de fin. Le... – FAQ - Sondage en ligne avec Google Forms / Drive / Docs – Il y a 1 semaine et 3 heures
  • User AvatarFallcesam Monsieur, Un formulaire framaform est actif pendant 6 mois (voire... – FAQ - Sondage en ligne avec Google Forms / Drive / Docs – Il y a 1 semaine et 10 heures
  • User AvatarFabian Piau Le créateur d'origine doit vous donner des droits supplémentaires sur... – FAQ - Sondage en ligne avec Google Forms / Drive / Docs – Il y a 1 semaine et 1 jour
  • User AvatarChloé Cheyrezy bonjour, comment peut -on obtenir les réponses d'un questionnaire, qui... – FAQ - Sondage en ligne avec Google Forms / Drive / Docs – Il y a 1 semaine et 1 jour
  • User AvatarFabian Piau Effectivement, le lien que vous avez fourni n'est pas le... – FAQ - Sondage en ligne avec Google Forms / Drive / Docs – Il y a 1 semaine et 4 jours

Twitter

Mes Tweets

Articles récents

  • TransferWise, Revolut et Monzo, une petite révolution pour les voyageurs et les expats - Il y a 4 ans et 6 mois
  • Autocomplétion pour Git - Il y a 4 ans et 6 mois
  • Swagger, la documentation API automatisée - Il y a 4 ans et 6 mois
  • Architecture Microservices – Les bonnes pratiques - Il y a 4 ans et 6 mois
  • FAQ – Sondage en ligne avec Google Forms / Drive / Docs - Il y a 4 ans et 6 mois
  • QCon London 2016 – Projet Jigsaw dans JDK 9 – La modularité arrive sur Java - Il y a 4 ans et 6 mois
  • QCon London 2016 – Spring Framework 5 – Preview et Roadmap - Il y a 4 ans et 6 mois
  • Les meilleurs outils gratuits pour tester et optimiser une application ou un site web - Il y a 4 ans et 6 mois
  • Faut-il se méfier de Google? - Il y a 4 ans et 6 mois
  • Création de tweets à partir d’un flux RSS - Il y a 4 ans et 6 mois
  • Booster votre blog WordPress: W3 Total Cache + CloudFlare - Il y a 4 ans et 6 mois
  • Décompilateur de bytecode Java - Il y a 4 ans et 6 mois
  • Choisir la solution d’hébergement web qui correspond à vos besoins - Il y a 4 ans et 6 mois
  • Comment rendre iTunes plus léger et rapide sous Windows? - Il y a 4 ans et 6 mois
  • Updapy, le centre de mises à jour applicatives pour Windows - Il y a 4 ans et 6 mois

Langue

  • Français
  • English

Flux RSS

  • RSS Feed RSS - Articles
  • RSS Feed RSS - Commentaires

Suivez-moi!

Suivez-moi sur Twitter
Suivez-moi sur Linkedin
Suivez-moi sur Stackoverflow
Suivez-moi sur Google
Suivez-moi sur Rss
Link to my Contact

Abonnement email

Saisissez votre adresse email pour être informé des nouveaux articles.

Étiquettes

.net agile agilité android app stores astuce bash blog bonnes pratiques cache chrome cloud css eclipse extension extreme programming firefox formation fosdem google hibernate intégration continue java javascript jquery jug microsoft mobilité informatique mongodb nantes nosql outil partage performance plugin script société sondage spring tdd test test unitaire ubuntu windows wordpress

Liens

  • Agile Nantes
  • Blog Ippon Technologies
  • Blog Netapsys
  • Blog Xebia France
  • Blog Zenika
  • CommitStrip
  • Coursera
  • Developpef
  • Le Touilleur Express
  • Les Cast Codeurs Podcast
  • new Blog( perso );
  • OCTO talks !
  • Open2Study
  • The Coder's Breakfast

Catégories

  • Evénement (11)
  • Linux (3)
  • Management (7)
  • Programmation agile (25)
  • Technologie (43)

Archives

  • janvier 2018 (1)
  • mai 2017 (1)
  • mars 2017 (1)
  • octobre 2016 (1)
  • avril 2016 (2)
  • mars 2016 (1)
  • novembre 2015 (1)
  • mai 2015 (1)
  • février 2015 (1)
  • décembre 2014 (1)
  • novembre 2014 (1)
  • septembre 2014 (2)
  • août 2014 (1)
  • juillet 2014 (2)
  • juin 2014 (1)
  • avril 2014 (1)
  • mars 2014 (1)
  • février 2014 (2)
  • janvier 2014 (1)
  • décembre 2013 (1)
  • novembre 2013 (1)
  • octobre 2013 (3)
  • septembre 2013 (5)
  • juillet 2013 (1)
  • juin 2013 (1)
  • mai 2013 (1)
  • avril 2013 (1)
  • mars 2013 (2)
  • février 2013 (1)
  • janvier 2013 (2)
  • décembre 2012 (2)
  • octobre 2012 (1)
  • septembre 2012 (1)
  • juillet 2012 (1)
  • mai 2012 (1)
  • avril 2012 (1)
  • mars 2012 (1)
  • février 2012 (1)
  • janvier 2012 (2)
  • décembre 2011 (1)
  • novembre 2011 (2)
  • octobre 2011 (2)
  • septembre 2011 (1)
  • juillet 2011 (1)
  • juin 2011 (2)
  • avril 2011 (1)
  • mars 2011 (1)
  • février 2011 (1)
  • janvier 2011 (2)
  • novembre 2010 (2)
  • septembre 2010 (1)
  • août 2010 (1)
  • juillet 2010 (1)
  • juin 2010 (1)
  • mai 2010 (1)
  • avril 2010 (1)
  • mars 2010 (1)
  • février 2010 (1)
  • décembre 2009 (1)
  • novembre 2009 (1)
  • octobre 2009 (2)
  • septembre 2009 (2)
  • août 2009 (3)
  • juillet 2009 (1)
  • juin 2009 (2)
Suivez-moi sur Twitter
Suivez-moi sur Linkedin
Suivez-moi sur Stackoverflow
Suivez-moi sur Google
Suivez-moi sur Rss
Link to my Contact
rss Flux rss des commentaires powered by Wordpress get firefox
Fabian Piau | Copyright © 2009 - 2018
Tous droits réservés | Haut ↑