[Résolu] Des styles dans HEAD c'est mieux que dans un doc CSS

quand un internaute consulte une page HTML en étant déconecté alors a ma connaissance les styles n'apparaissent pas quand ces styles ont été écrit dans un doc CSS plutôt que dans la partie HEAD d'un doc HTML, en tout cas c'est ce qui se passe avec mon site

cela arrive dans les situations suivantes (liste non hexaustive) :

§ il a sauvé rapidement au préalable la page HTML sur son disc dure puis il les consulte lentement hors connexion pour ne pas avoir une facture internet trop élevée

§ il a sauvé la page HTML sur une clé USB au cybercafé puis la consulte chez lui sans qu'il ait de connexion internet

comme les styles n'apparaissent pas hors connexion il vaut mieux a mon avis les écrire dans la partie HEAD d'un doc HTML, bien sur si un site contient 17 pages différentes alors toutes modif de style devra être répercutée 16 fois

mais 16 copier-coller ce n'est pas la mere a boire, ca fait un peu plus de travail pour le webmaster, mais pas beaucoup au final car on ne change pas les style toutes les semaines, ce légé surplus de travail du webmaster se traduit par un meilleurs confort pour l'internaute qui consultera des page toujours avec leur style même hors connexion

je pense écrire mes styles que dans la partie HEAD d'un doc HTML, a moins qu'il soit possible que ces styles écrit dans un doc CSS n'empèchent pas leur non affichage hors connexion, cela est-il possible ?
Modifié par RR7008 (22 May 2013 - 13:31)

Bonjour,

Sauf erreur de ma part, les ressources telles que les fichiers CSS sont automatiquement téléchargées et mises en cache local par tous les navigateurs du monde.

Ils n'ont donc plus besoin d'aller les chercher en ligne par la suite.

PS : en outre, quand on "enregistre une page HTML", on enregistre automatiquement tous les fichiers associés (CSS, images, JavaScript, etc.). Donc là aussi cela ne pose aucun problème.

Le problème va aussi se poser pour les images alors.
Dans tous les cas, je viens de tester sur Firefox et Chrome (à tester sur les plus vieux navigateurs), ils enregistrent bien la page HTML avec les fichiers CSS, JS et les images dans un dossier. Donc pas de soucis pour exporter le CSS…

RR7008 a écrit :
je pense écrire mes styles que dans la partie HEAD d'un doc HTML

http://media.giphy.com/media/GtebMffmh0pNK/original.gif

(désolé, Raph il a dit qu'on pouvait )

Bon, blague à part, après quelques tests enregistrer une page depuis le navigateur enregistre bien les CSS dans un dosiser. Par contre si dans ton CSS il y a des chemins relatifs à ton serveur pour les images de fond ou polices par exemple, il va pas enregistrer tout ton serveur. Donc si ta mise en page dépend de beaucoup d'images de fond CSS (les img du HTML sont récupérées) bah oui tu perds une partie.

Par contre on est en 2013, donc c'est PAS une raison pour reprendre les pratiques archaïques d' il y a quelques années à savoir mettre les styles dans le head. Ton souci se situe pas au niveau des feuilles de styles, mais des chemins vers les images et polices d'écriture qui y sont associées.

Il y a aussi, en 2013, pleins de solutions pour avoir le contenu des pages "hors ligne", des applications, des plugins navigateur, voir même un copier/coller dans un document word et des enregistrements des pages au format PDF. L'utilisateur qui va enregistrer son site sur disque dur ou une clé USB (qu'il se dénonce d'ailleurs j'ai connais aucun) c'est le contenu qui l’intéresse et pas le joli CSS (qui on le répète est bien enregistré dans le dossier).

RR7008 a écrit :
mais 16 copier-coller ce n'est pas la mere a boire, ca fait un peu plus de travail pour le webmaster, mais pas beaucoup au final car on ne change pas les style toutes les semaines, ce légé surplus de travail du webmaster se traduit par un meilleurs confort pour l'internaute qui consultera des page toujours avec leur style même hors connexion

En faisant ça il me semble que tu ne peux plus "cacher" le CSS (ce qui est permis quand tu le mets dans un fichier .css). Du coup tu pénalises les autres utilisateurs qui viennent régulièrement sur le site sans l'enregistrer. Le navigateur n'a alors qu'à le charger une seule fois et le récupérer en cache, alors que le CSS dans le head, si je ne me trompes, est chargé à chaque fichier HTML. Étrange choix.

Enfin, même si ta technique est faisable à petite échelle, c'est justement pour éviter le copier/coller et le "un peu de travail en plus pour le webmaster" qu'on externalise les styles pour justement la maintenance du site. Si c'est techniquement moins contraignant sur un petit site, ce n'est pas le cas en agence. Ce qui tend à expliquer le sortir les styles du head pour les mettre dans un fichier .css est devenu, une bonne pratique
Modifié par Stéphanie W. (18 May 2013 - 19:05)

Bonjour,

Je ne suis pas un régulier de ce forum mais il me semble que la politesse (bonjour, merci) ne te tuerais pas, c'est beau que tu ai eu des réponses aussi complète...

http://i.imgur.com/A3L7jRi.gif
Modifié par scorpio57 (18 May 2013 - 20:15)

Tiens ça me rappelle l'histoire de cette jeune fille qui s'était fait tatouer des étoiles...



ben quoi

<head><style></style></head>

non ?

Son frère n'est pas mal non plus :



A moins qu'il n'ait une araignée au plafond ?!...

Ok, je sors...

On parle quand même d'un internaute qui habite à la campagne ou les connexions sont encore facturées au temps (56k powa) et dans la ville la plus proche il y a encore ce qu'on appelait au siècle dernier des cybercafés. Cet internaute qui passe son temps à enregistrer des sites sur des clés USB n'a jamais entendu parler d'un aspirateur de site comme par exemple Httrack.

Je suis pas sûr qu'il soit super représentatif de l'internaute moyen actuel.

Je crée un nouveau projet ruby plutôt que php avec yeoman, un générateur d'application.
J'implémente mon ORM pour gérer la relation avec la BDD.
Je choisis backbone + underscore pour structurer mon application logique en javascript (en ajoutant une librairie comme jQuery, ou Zepto pour la version mobile).
Je décide d'utiliser la librairie sass Bourbon pour sa souplesse et sa légèreté vis à vis de Compass, ainsi que sa librairie Neat pour créer le layouting. Et pourquoi pas remplacer le fichier de style de base du html5 boilerplate par knacss, par curiosité !
Je ferait de l'unit testing avec Shoulda et Jasmine, pour éviter les régressions. J'utiliserai des outils de vérification comme Jslint pour vérifier mon json aussi.
J'utiliserai également des outils de performance (que ce soit en plein développement ou en phase de recette) pour m'assurer que mon application soit accessible (et par la même occasion je m'assure que mon site soit réellement accessible à tous, malvoyant comme mobilenautes).

Je met tout ça en place et crée mon repo github pour le partager avec les autres développeurs, créant des issues et vérifiant l'état d'avancement du projet via les milestones. J'ai bien sûr pris soin de tout prévoir avec étude de marché, spécifications techniques, fonctionnelles, recherche graphique et interactive (UX/UI) avec la partie créative et un planning Gant. Je décide de choisir la méthode Agile pour que mes équipes travaillent efficacement, sans que les uns attendent les autres (le temps c'est de l'argent !).

Une fois le projet terminé, je communique via les réseaux sociaux, j'envoi des neswletters, je paye au cpc Google avec son programme Ad Sense pour une meilleure visibilité, je prévois un contrat de maintenance avec mon client, j'analyse mes visites grâce à google Analytics et les booste avec un coup de marketing pour remplir mes objectifs en terme de ROI.

Bref, je suis une agence et nous sommes en 2013.

Bienvenue sur internet RR7008.

PS: j'oubliais cette histoire de facture internet, il est évident qu'une étude de marché pour offrir une localisation du site adapté dans le pays visé est nécessaire, mais certaines entreprises le font (les menus de chez KFC/MacDo ne sont pas les mêmes en fonction des pays par exemple).

Edit: petite correction vis à vis de GA, merci jb_gfx
Modifié par Djeezy (19 May 2013 - 12:37)

Allons booster notre trafic à coup de Google Analytics (sigh) et promouvoir notre site avec Adsense (double sigh). Franchement si vous voulez rigoler essayez au moins de ne pas raconter n'importe quoi.
Modifié par jb_gfx (19 May 2013 - 06:35)

merci pour toutes vos reponses

je voulais être pointilleux en pensant aux internautes dans toutes les situations imaginables, j'avais fait des testes sur le PC d'un amis qui a un ordinosaure avec Windows98 et ca marchait que dans la partie HEAD d'un doc HTML

vous m'avez convaincu, je vais mettre mes styles dans un doc CSS plutôt que dans la partie HEAD d'un doc HTML, les internautes qui ne veront pas mes pages dans le style voulu seront bien rare

a écrit :
Allons booster notre trafic à coup de Google Analytics (sigh) et promouvoir notre site avec Adsense (double sigh). Franchement si vous voulez rigoler essayez au moins de ne pas raconter n'importe quoi.

Effectivement, ce n'est pas Google Analytics qui permet de booster son traffic. Il permet de l'analyser afin d'établir une stratégie pour le booster.
Par contre je n'ai jamais parlé de promouvoir son site avec Adsense, je parle bien de visibilité sur leur moteur de recherche.

Donc j'ai bien commis une erreur dans ma formulation jb_gfx, pas la peine de me troller ^^

Djeezy a écrit :

Par contre je n'ai jamais parlé de promouvoir son site avec Adsense, je parle bien de visibilité sur leur moteur de recherche.

Donc c'est Adwords et pas Adsense.