#1 2006-11-04 08:32:26

VDigital
Former Piwigo Team
Montpellier (FR)
2005-05-04
15127

[Evolution] Les galeries sont victimes du syndrome FOUC

Si parfois vous vérifiez votre(vos) galerie(s) sous IE,
n'avez-vous jamais constaté un moment (jusqu'au refresh suivant) durant lequel votre site a perdu tout ou partie de sa mise en page ?

Si oui (merci de vous exprimer), ceci s'appelle le FOUC (Flash Of Unstyled Content)...

Merci GoûtGueule: http://www.google.com/search?hl=en& … ed+content

Cela impacte tous les navigateurs depuis de nombreuses années...
C'est la raison pour laquelle je milite pour une réduction drastique des @import dans les CSS.

1 - style.css le css par livré défaut (à ne pas modifier)
2 - /xxxxx/theme.css par thème prenant le pas sur le style (à créer au besoin, c'est le principe des thèmes)
3 - local.css les modifications locales prenant le pas sur le style et le theme.
4 - /xxxxx/ovrlocal.css (inutile dans 99% des cas) sauf si pour un thème x ou y on souhaite avoir un résultat ignorant les modifications de local.css (à créer au besoin).

A vos claviers.
8-)


Vincent -« Plus vidéaste averti que photographe amateur... »
La galerie - Le blog   

Piwigo est une application libre de gestion de photos en ligne.

Hors ligne

#2 2006-11-04 21:03:25

vimages
Membre
2004-03-27
2429

Re: [Evolution] Les galeries sont victimes du syndrome FOUC

ha.....je n'ai pas eu ça sur mon serveur photo..... 
PWG me semble peu touché par ce problème que je rencontre par ailleurs sur le site http://chamandier.org, rien à voir...  c'est un site que j'ai monté avec Joomla pour une association de quartier... (j'attends de pouvoir y intégrer facilement PWG..)

amicalement,
éric.

Hors ligne

#3 2006-11-05 14:57:02

mathiasm
Former Piwigo Team
2006-02-06
2692

Re: [Evolution] Les galeries sont victimes du syndrome FOUC

je ne sais pas si ce phénomène est dû à la complexité du site ou à la charge de la machine/du navigateur. J'ai parfois ce problème avec le forum (qui ne contient que 2 css dont une en import de l'autre), mais lorsque je charge une quinzaine de pages...

Pour revenir à ta question:
style.css contient la structure
theme.css contient la cosmétique (couleurs, bordures, polices)
local.css surcharge les deux précédents cumulés
ovrlocal, je ne vois pas le besoin, local étant spécifique à la galerie installée ( je veux bien un exemple).

Ces fichiers sont transversaux au niveau des thèmes (template/*.css) ou des templates (aka template-common/*.css) ?
A l'heure actuelle, nous avons les deux.
Vu qu'on fonctionne template+thème, il reste impératif de séparer structure et couleurs => ok avec toi, style.css et theme.css
Si l'admin d'une galerie veut modifier un thème ou un template, il crée un local.css, qu'il importe au niveau où il le souhaite (plus besoin de l'ovrlocal.css):
- Soit il veut la modif sur un ou deux thèmes : dans le theme.css, il importe son local.css (même s'il contient de la structure, il n'y a pas de problème).
- Soit il veut la modif sur tout le template, tous thèmes confondus, il l'importe dans style.css.
Point négatif: du coup, si on veut une modif tous templates confondus, il faut reporter l'import dans tous les templates.

Solution alternative nécessitant un petit développement: une action permet de compiler une feuille de style par thème à partir de l'existant.
Ex: pour le thème dark du template yoga, je concatène template-common/*.css, template/yoga/*.css, template/yoga/dark/*.css et je l'appelle template/yoga/dark/yoga-dark.css.
Du coup, un seul fichier à gérer au niveau de l'affichage, mais une structure répartie plus claire pour les modifs.

Hors ligne

#4 2006-11-05 15:57:53

VDigital
Former Piwigo Team
Montpellier (FR)
2005-05-04
15127

Re: [Evolution] Les galeries sont victimes du syndrome FOUC

Uniquement pour éclairer un peu AMHA mon ami mathiasm... (J'ai peut être tort).

Style.css = en gros (de yoga/clear)
default-layout.css + default-colors.css + content.css + menubar.css + picture.css + popuphelp.css + thumbnails.css
theme.css = cosmétique comme actuellement (Dark / HK-3 / White / etc...)
local.css = c'est l'équivalent de template-common (exemple des miniatures 200x128)
ovrlocal, j'ai dit que c'était inutile dans 99% des cas (mais voyons un cas possible).

Pour faire HK-3 aujourdhui, nulle n'est besoin de se créer un template.

Donc, style.css tel que ci-dessus.
theme.css c'est lui qui fait presque tout.

Seulement, voilà mathiasm a de très long titres de catégories.
Pour s'éviter de modifier tous les style.css de ces templates, il a changé la largeur de #menubar et la marge de #content dans local.css
Très bien...

theme.css n'est pas un fichier local, je ne dois pas le modifier.

Solution ovrlocal.css (c'est ce qu'assume theme.css aujourd'hui en réalité, sauf qu'il ne s'appelle pas local):
donc pour prendre le pas sur la modification générale de mathiasm, ce génial webmaster et rien que pour son nouvel HK-3 mettra la marge de #content à 0 à quelque chose près comme prévu dans hk-3 (élément malheureusement modifié par local.css).
Soit le 1% qui manquait à mon ami mathiasm. 8-)

A part ça, le FOUC ça existe malheureusement.

8-)


Vincent -« Plus vidéaste averti que photographe amateur... »
La galerie - Le blog   

Piwigo est une application libre de gestion de photos en ligne.

Hors ligne

#5 2006-11-05 15:59:33

VDigital
Former Piwigo Team
Montpellier (FR)
2005-05-04
15127

Re: [Evolution] Les galeries sont victimes du syndrome FOUC

mathiasm a écrit:

je ne sais pas si ce phénomène est dû à la complexité du site ou à la charge de la machine/du navigateur.

Ce n'est pas ce qui se dit sur les sujets remontés par l'ami GoûtGueule.
8-)


Vincent -« Plus vidéaste averti que photographe amateur... »
La galerie - Le blog   

Piwigo est une application libre de gestion de photos en ligne.

Hors ligne

#6 2006-11-05 21:16:16

mathiasm
Former Piwigo Team
2006-02-06
2692

Re: [Evolution] Les galeries sont victimes du syndrome FOUC

je résume avec mes mots:
local surcharge style
ovrlocal surcharge theme + style?

PS: ok pour le FOUC

Hors ligne

#7 2006-11-06 08:18:24

VDigital
Former Piwigo Team
Montpellier (FR)
2005-05-04
15127

Re: [Evolution] Les galeries sont victimes du syndrome FOUC

mathiasm a écrit:

je résume avec mes mots:
local surcharge style
ovrlocal surcharge theme + style?

PS: ok pour le FOUC

Au final, il n'y a qu'un seul css, mathias...
Les "Options par défaut du browser client" sont surchargés par le style (de l'auteur*):
1 » style.css
2 » theme.css
3 » local.css
4 » ovrlocal.css
et demain peut être le style personnel (du lecteur*).
(*: Auteur et lecteur sont les termes utilisés dans les descriptions de la norme CSS2.

---------------------------
On a plusieurs solutions:

La solution précédente que l'on peut appeler "dépannage ready" (on peut corriger dans ovrlocal).
Ce qui veut dire que le thème n'a pas toujours le dernier mot et qu'il peut y avoir des situations conflictuelles (de 2 thèmes à résoudre en ovrlocal.css, ce qui se révèlera parfois impossible à régler)

La solution "Local a le dernier mot":
1 » style.css
2 » theme.css
3 » local.css
Ce cas obligerait HK-3 a être un template et non un simple thème comme aujourd'hui,
car si theme.css indique:

#content, BODY#theAdminPage #content {
  margin-left: 1em;
  border-top: none;
}

local.css peut indiquer:

#content {
  margin-left: 22em;
  border-top: none;
}

et le thème HK-3 ne marcherait pas pour ce site.

La solution "Thème a le dernier mot":
1 » style.css
2 » local.css
3 » theme.css
Si theme.css casse une directive correcte de local.css,
on propose une correction directe dans theme.css
(Inconvénient theme.css n'est pas un fichier local, et en cas d'upgrade: aurevoir l'ami).
D'où la solution "dépannage ready".
Malheureusement, aucune solution n'est parfaite.
Si tout le monde (y compris chrisaga) s'accorde sur le principe à retenir...
---------------------------




---------------------------
Je vois poindre la question: "Comment fait-on l'appel des css?"
(situation qui a perturbé mon ami rb en 1.6 si je me souviens bien).

La responsabilité est au dernier css qui surcharge.

Exemple dans header.tpl au lieu de (situation actuelle):

<link rel="stylesheet" type="text/css" href="{pwg_root}template/{themeconf:template}/layout.css">
<!-- the next css is used to fix khtml (Konqueror/Safari) issue
the "text/nonsense" prevents gecko based browsers to load it -->
<link rel="stylesheet" type="text/nonsense" href="{pwg_root}template/{themeconf:template}/fix-khtml.css">
<!--[if lt IE 7]>
  <link rel="stylesheet" type="text/css" href="{pwg_root}template/{themeconf:template}/fix-ie5-ie6.css">
<![endif]-->
<link rel="stylesheet" type="text/css" media="print" href="{pwg_root}template/{themeconf:template}/print.css">
<link rel="stylesheet" type="text/css" href="{pwg_root}template/{themeconf:template}/default-colors.css">
<link rel="stylesheet" type="text/css" href="{pwg_root}template/{themeconf:template}/theme/{themeconf:theme}/theme.css">
{themeconf:local_head}

On aura :

<link rel="stylesheet" type="text/css" href="{pwg_root}template/{themeconf:template}/theme/{themeconf:theme}/ovrlocal.css">
<!-- the next css is used to fix khtml (Konqueror/Safari) issue
the "text/nonsense" prevents gecko based browsers to load it -->
<link rel="stylesheet" type="text/nonsense" href="{pwg_root}template/{themeconf:template}/fix-khtml.css">
<!--[if lt IE 7]>
  <link rel="stylesheet" type="text/css" href="{pwg_root}template/{themeconf:template}/fix-ie5-ie6.css">
<![endif]-->
{themeconf:local_head}

Et chaque ovrlocal.css (à distribuer avec chaque thème) devrait commencer par:

@import "../../print.css" print; /* template path is "../../" and pwg is "../../../../" */
@import "../../style.css";
@import "../../../../template-common/local.css";
@import "theme.css";

/* Specific global changes (to all templates) must be done in "../../../../template-common/local.css" */
/* Add below only specific changes (to this template-theme) */

(Jillij ne devrait pas être forcément content en première lecture, puisqu'on changerait encore la logique des template).
Et surtout pas d'autres @import pour éviter le FOUC.
8-)


Vincent -« Plus vidéaste averti que photographe amateur... »
La galerie - Le blog   

Piwigo est une application libre de gestion de photos en ligne.

Hors ligne

#8 2006-11-06 12:24:40

beorn32
Membre
2006-08-06
2

Re: [Evolution] Les galeries sont victimes du syndrome FOUC

De mon côté j'ai des petits soucis avec IE et PWG qui semble fort s'apparenter à ce syndrome !!
En gros pour chaque images j'ai ce type d'affichage :

Haut de la page : http://album.tuxguy.org/haut.jpg


Milieu de la page : http://album.tuxguy.org/bas.jpg

L'image reprend bien sa place après avoir scrollé tout en bas de la page...

Si vous voulez testé :
http://album.tuxguy.org
l: teamwebgallery
p: teamwebgallery

A vos IE !

Dernière modification par beorn32 (2006-11-06 12:26:22)

Hors ligne

#9 2006-11-06 13:31:25

VDigital
Former Piwigo Team
Montpellier (FR)
2005-05-04
15127

Re: [Evolution] Les galeries sont victimes du syndrome FOUC

Il faut nous donner une catégorie publique avec au moins une image... 8-)

PS: En plus, ce n'est pas le FOUC... 8-)
Pour ceux qui ont FF c'est facile de voir ce que cela donne: Affichage + Style de la page + Aucun style.
En IE, c'est plus compliqué à voir (mais le syndrôme est plus fréquent).

8-)


Vincent -« Plus vidéaste averti que photographe amateur... »
La galerie - Le blog   

Piwigo est une application libre de gestion de photos en ligne.

Hors ligne

#10 2006-11-06 15:56:56

beorn32
Membre
2006-08-06
2

Re: [Evolution] Les galeries sont victimes du syndrome FOUC

Bon je vous avais créé un zoli ptit compte mais bon...
Je viens de rendre une catégorie publique... C'est pas la plus jolie mais ça fera bien l'affaire !
Merci d'y avoir jeté un coup d'oeil !

http://album.tuxguy.org

Et puis désolé de vous avoir pourri ce sujet qui ne semble finalement pas me concerner...

Dernière modification par beorn32 (2006-11-06 15:58:03)

Hors ligne

#11 2006-11-06 17:56:40

VDigital
Former Piwigo Team
Montpellier (FR)
2005-05-04
15127

Re: [Evolution] Les galeries sont victimes du syndrome FOUC

Pourrais-tu re-uploader tous les répertoires /template/yoga/ et /template-common/
il semble qu'il me manque une partie du css...

A moins que tu aies fait des modifs mal à propos.
Rien avoir avec FOUC.

Ouvrir un autre topic si tu as besoin d'assistance encore.

Merci à ceux qui relèvent parfois le pb de FOUC d'intervenir sur ce topic.
8-)


Vincent -« Plus vidéaste averti que photographe amateur... »
La galerie - Le blog   

Piwigo est une application libre de gestion de photos en ligne.

Hors ligne

#12 2006-11-07 00:53:41

mathiasm
Former Piwigo Team
2006-02-06
2692

Re: [Evolution] Les galeries sont victimes du syndrome FOUC

VDigital a écrit:

La responsabilité est au dernier css qui surcharge.

Exemple dans header.tpl au lieu de (situation actuelle):

<link rel="stylesheet" type="text/css" href="{pwg_root}template/{themeconf:template}/layout.css">
<!-- the next css is used to fix khtml (Konqueror/Safari) issue
the "text/nonsense" prevents gecko based browsers to load it -->
<link rel="stylesheet" type="text/nonsense" href="{pwg_root}template/{themeconf:template}/fix-khtml.css">
<!--[if lt IE 7]>
  <link rel="stylesheet" type="text/css" href="{pwg_root}template/{themeconf:template}/fix-ie5-ie6.css">
<![endif]-->
<link rel="stylesheet" type="text/css" media="print" href="{pwg_root}template/{themeconf:template}/print.css">
<link rel="stylesheet" type="text/css" href="{pwg_root}template/{themeconf:template}/default-colors.css">
<link rel="stylesheet" type="text/css" href="{pwg_root}template/{themeconf:template}/theme/{themeconf:theme}/theme.css">
{themeconf:local_head}

On aura :

<link rel="stylesheet" type="text/css" href="{pwg_root}template/{themeconf:template}/theme/{themeconf:theme}/ovrlocal.css">
<!-- the next css is used to fix khtml (Konqueror/Safari) issue
the "text/nonsense" prevents gecko based browsers to load it -->
<link rel="stylesheet" type="text/nonsense" href="{pwg_root}template/{themeconf:template}/fix-khtml.css">
<!--[if lt IE 7]>
  <link rel="stylesheet" type="text/css" href="{pwg_root}template/{themeconf:template}/fix-ie5-ie6.css">
<![endif]-->
{themeconf:local_head}

Et chaque ovrlocal.css (à distribuer avec chaque thème) devrait commencer par:

@import "../../print.css" print; /* template path is "../../" and pwg is "../../../../" */
@import "../../style.css";
@import "../../../../template-common/local.css";
@import "theme.css";

/* Specific global changes (to all templates) must be done in "../../../../template-common/local.css" */
/* Add below only specific changes (to this template-theme) */

(Jillij ne devrait pas être forcément content en première lecture, puisqu'on changerait encore la logique des template).
Et surtout pas d'autres @import pour éviter le FOUC.
8-)

Pour supprimer totalement le FOUC, pourquoi ne pas "linker" directement les 5 CSS, puisqu'elles sont connues ? Quelle est la politique du W3C à ce sujet?

Hors ligne

Pied de page des forums

Propulsé par FluxBB

github twitter newsletter Faire un don Piwigo.org © 2002-2024 · Contact