🌍
Français
Alors c'est un peu délicat car en fait, pour mon besoin j'ai joué sur les polices (fonts) et suivant la police, j'ai augmenté la taille, mis en gras etc. Et ça, en CSSx c'est interprétée.
D'où l'idée de faire une feuille de style bien à part.
Jouer avec les hacks serait trop dangereux au long-terme et puis au lieu d'avoir 36 hacks, une seule condition appelant une seule feuille de style pour 36 navigateur compatibles, c'est plus simple.
Je viens d'écrire un solution pour les navigateurs compatibles par la classe * :
@font-face {
font-family: 'Nom de ma police hype';
src: url('url de ma police hype');
}* Internet Explorer : Embedded OpenType uniquement
* Opera : à partir de la version 10
* Safari : à partir de la version 3.1
* Firefox : à partir de la version 3.5
* Chrome : 4
(*) Dans mon code, j'ignore volontairement IE car mes polices sont en TrueType.
(PS : Je vais mettre à jour mon message précèdent et passer le sujet en [Résolu])
Ok merci de partager le résultat de tes recherches.
Dis-moi les attributs du CSS 3 ne seraient pas simplement ignorés par les navigateurs qui ne les supportent pas?
Quel est le besoin? Quel est l'intérêt?
Ce soir j'ai jonglé avec :
- PHP
- Javascript
- du .css
- du .tpl
- du .js
- du Smarty
- et un nombre incroyable de page web pour parvenir à mes fins !
Je suis têtu est obstiné mais je ne voulais pas me contenter d'un "patch" ou autre limitation qui ferait qu'une astuce ne soit pas pérène.
Là ça y est. J'arrive enfin à insérer une feuille de style en détéctant le moteur de rendu et sa version. En effet, une version minimal était imposé pour que le CSS3 soit compatible.
Au bout de 3 jours à remuer au moins 25% des pages web mondiales (sifflote) je vois enfin le bout du tunnel.
I'm happy this night
[EDIT]
La solution est rédigé sur mon wiki personnel : http://www.julien-moreau.fr/wiki/doku.p … iwigo:css3
Petite avancée :
Je laisse tomber les commentaires conditionnels qui semblent n'être lu que par IE, du coup j'ai deux solution pour identifier le moteur de rendu de mes visiteurs.
- Le javascript, ce qui oblique que les visiteurs l'ai activé et puis c'est compliqué de faire un test du genre "supérieur ou égal)
- Le PHP, pas vraiment plus simple surtout que je suis dans la balise <head> et donc attention à Smarty qui me rappel à l'ordre.
En dépannage, j'ai écrit ça :
{php} if(strstr($_SERVER['HTTP_USER_AGENT'], 'Firefox/3.5.')) {
echo '<link rel="stylesheet" type="text/css" href="./template/yoga/theme/bw/CSS3.css">';
} {/php}J'avais bien essayé d'écrire le php dans le fichier themeconf.inc.php mais je suis hors de la balise <head> donc pas bon :-(
Maintenant, le but du jeux de non pas identifier le browser mais le moteur de rendu et de faire un test "supérieur ou égal" sur la version de ce dernier...
VDigital a écrit:
Sur quel site as-tu lu qu'on pouvait coder ainsi?
;-)
Justement j'en suis arrivé à cette conclusion à savoir qu'il semble n'y avoir que IE qui lise ces commentaires conditionnels.
Bon...
Bah ça ne m'arrange pas non plus ça alors :'(
Sur quel site as-tu lu qu'on pouvait coder ainsi?
;-)
{* $Id: my-header.tpl $ *}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="{$lang_info.code}" dir="{$lang_info.direction}">
<head>
<meta http-equiv="Content-Type" content="text/html; charset={$CONTENT_ENCODING}">
<meta name="generator" content="Piwigo (aka PWG), see piwigo.org">
{if isset($meta_ref) }
{if isset($INFO_AUTHOR)}
<meta name="author" content="{$INFO_AUTHOR|@replace:'"':' '}">
{/if}
{if isset($related_tags)}
<meta name="keywords" content="{foreach from=$related_tags item=tag name=tag_loop}{if !$smarty.foreach.tag_loop.first}, {/if}{$tag.name}{/foreach}">
{/if}
{if isset($COMMENT_IMG)}
<meta name="description" content="{$COMMENT_IMG|@strip_tags:false|@replace:'"':' '}{if isset($INFO_FILE)} - {$INFO_FILE}{/if}">
{else}
<meta name="description" content="{$PAGE_TITLE}{if isset($INFO_FILE)} - {$INFO_FILE}{/if}">
{/if}
{/if}
{if (isset($REVERSE) and $REVERSE and $PAGE_TITLE == l10n('home'))}
<title>{$GALLERY_TITLE} | {$PAGE_TITLE}</title>{else}
<title>{$PAGE_TITLE} | {$GALLERY_TITLE}</title>{/if}
<link rel="shortcut icon" type="image/x-icon" href="{$ROOT_URL}template-common/favicon.ico">
<link rel="start" title="{'home'|@translate}" href="{$U_HOME}" >
<link rel="search" title="{'Search'|@translate}" href="{$ROOT_URL}search.php" >
{if isset($first.U_IMG) }<link rel="first" title="{'first_page'|@translate}" href="{$first.U_IMG}" >{/if}
{if isset($previous.U_IMG)}<link rel="prev" title="{'previous_page'|@translate}" href="{$previous.U_IMG}" >{/if}
{if isset($next.U_IMG) }<link rel="next" title="{'next_page'|@translate}" href="{$next.U_IMG}" >{/if}
{if isset($last.U_IMG) }<link rel="last" title="{'last_page'|@translate}" href="{$last.U_IMG}" >{/if}
{if isset($U_UP) }<link rel="up" title="{'thumbnails'|@translate}" href="{$U_UP}" >{/if}
<link rel="stylesheet" type="text/css" href="{$ROOT_URL}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="{$ROOT_URL}template/{$themeconf.template}/fix-khtml.css">
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="{$ROOT_URL}template/{$themeconf.template}/fix-ie5-ie6.css">
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="{$ROOT_URL}template/{$themeconf.template}/fix-ie7.css">
<![endif]-->
<!--[if !IE]> <-->
<link rel="stylesheet" href="{$ROOT_URL}template/{$themeconf.template}/not-ie.css" type="text/css">
<!--> <![endif]-->
<!--[if gte Gecko 1.9.1]>
<link rel="stylesheet" type="text/css" href="{$ROOT_URL}template/{$themeconf.template}/theme/{$themeconf.theme}/CSS3.css">
<![endif]-->
<link rel="stylesheet" type="text/css" media="print" href="{$ROOT_URL}template/{$themeconf.template}/print.css">
<link rel="stylesheet" type="text/css" href="{$ROOT_URL}template/{$themeconf.template}/theme/{$themeconf.theme}/theme.css">
{$themeconf.local_head}
{if isset($U_PREFETCH) }<link rel="prefetch" href="{$U_PREFETCH}">{/if}
{if not empty($page_refresh) }<meta http-equiv="refresh" content="{$page_refresh.TIME};url={$page_refresh.U_REFRESH}">{/if}
<script type="text/javascript" src="{$ROOT_URL}template-common/scripts.js"></script>
<!--[if lt IE 7]>
<style>
{* only because we need {$ROOT_URL} otherwise use fix-ie5-ie6.css *}
BODY {ldelim} behavior:url("{$ROOT_URL}template-common/csshover.htc"); }
A IMG, .button, .icon {ldelim}
behavior:url("{$ROOT_URL}template-common/tooltipfix.htc");
}
FORM {ldelim} behavior: url("{$ROOT_URL}template-common/inputfix.htc"); }
</style>
<script type="text/javascript" src="{$ROOT_URL}template-common/pngfix.js"></script>
<![endif]-->
{if not empty($head_elements)}
{foreach from=$head_elements item=elt}{$elt}
{/foreach}
{/if}
</head>
<body id="{$BODY_ID}">
<div id="the_page">
{if not empty($header_msgs)}
<div class="header_msgs">
{foreach from=$header_msgs item=elt}
{$elt}<br />
{/foreach}
</div>
{/if}
<div id="theHeaderAlt"><a href="./index.php"><img src="./extras/header-simple_alt.png" width="760" height="114" alt="Galerie de Julien Moreau"></a></div>
<div id="theHeader">{$PAGE_BANNER}</div>
{if isset($theSwiftHeader)}{$theSwiftHeader}{/if}
{if not empty($header_notes)}
<div class="header_notes">
{foreach from=$header_notes item=elt}
<p>{$elt}</p>
{/foreach}
</div>
{/if}Tu peux copier tout le début de ton fichier ?
Je viens de faire quelque chose de "parlant".
J'ai fait une feuille de style pour un autre navigateur, à savoir Opera. Et bien ça ne fonctionne pas pieux non plus. Il y a donc une histoire de blocage quelque part qui fait que que la condition n'est même pas lu !
Pas mieux.
J'avais déjà essayé de placer différemment l'ordre de grandeur mais la condition est comme... non lu.
:-(
et avec
<!--[if Gecko glt 1.9.1]>
cela donne quoi ?
[EDIT]
La solution est rédigée dans mon wiki personnel : http://www.julien-moreau.fr/wiki/doku.p … iwigo:css3
Solution qui sera retranscrite dans le wiki de Piwigo lorsque j'aurais le temps.
[/EDIT]
Bonjour à tous,
Je m'arrache les cheveux sur un problème qui n'est pas logique.
J'ai suivi à la lettre la procédure et pourtant ça ne fonction.
Le dilemme.
Je souhaite ajouter une feuille de style uniquement pour le navigateur Firefox. Pour corser un peu le tout, je cible une version particulière et toutes celles qui seront supérieures.
La procédure.
La dans my-header.tpl j'ajoute le code suivant dans le <head>:
<!--[if gte Gecko 1.9.1]>
<link rel="stylesheet" type="text/css" href="{$ROOT_URL}template/{$themeconf.template}/theme/{$themeconf.theme}/CSS3.css">
<![endif]-->La condition stipule d'inclure la feuille de style CSS3 seulement si le navigateur (moteur Gecko = Firefox, Camino etc) est supérieur ou égale (gte) à la version 1.9.1 (soit la version 3.5 de Firefox).
Le liens vers la feuille de style est bon.
Ce qui ne fonctionne pas c'est la condition.... Même si je simplifie avec [b]if Gecko[/i] la condition n'est pas lu/interprétée/vérifiée/validée...
Sans la condition la feuille de style est correctement chargé.
Le problème vient donc de cette fichue condition.
J'ai enlever même tous les autres commentaires conditionnels pour vérifié que ça ne vienne pas d'un nombre limité de ces instructions mais non, rien :-(
J'ai fait l'essai avec "IE" à la place de "Gecko" et là ça fonctionne bien.
Mon navigateur n'est pas configuré pourtant pour bloquer son identification.
Impossible de configurer cette condition correctement.
Pourtant, ça a fonctionné bien... 10 minutes ! Juste avant que je ne relance mon ordinateur en fait. Que ce soit en ligne comme en local ça a fonctionné...
Est-ce que quelqu'un à une idée ?
Merci.