feuilles de style en CSS
feuilles de style en CSS
bonjour,
j'essaye de mettre de proposer pplusieurs feuilles de style pour mon site, je mets les bonnes balises, ex :
Dans le head de la page :
<link href="./style/screen.css" rel="stylesheet" type="text/css" media="screen,projection,tv" title="Default" />
<link href="./style/bleue.css" rel="alternate stylesheet" type="text/css" media="screen,projection,tv" title="Teinte bleue" />
J'arrive à changer le style avec l'icone en bas à gauche de firefox mais quand je clique sur une autre page ça me remets le style par default.
Faut-il ajouter un script pour qui le mémorise, ou c'est moi qui m'plante quelque part ?
En tout cas votre site est super sympa et est un bon complément aux sites comme openweb ou selfhtml, BRAVO [/i]
PS/: le site est sur mamadoo donc ... pas de php :'(
j'essaye de mettre de proposer pplusieurs feuilles de style pour mon site, je mets les bonnes balises, ex :
Dans le head de la page :
<link href="./style/screen.css" rel="stylesheet" type="text/css" media="screen,projection,tv" title="Default" />
<link href="./style/bleue.css" rel="alternate stylesheet" type="text/css" media="screen,projection,tv" title="Teinte bleue" />
J'arrive à changer le style avec l'icone en bas à gauche de firefox mais quand je clique sur une autre page ça me remets le style par default.
Faut-il ajouter un script pour qui le mémorise, ou c'est moi qui m'plante quelque part ?
En tout cas votre site est super sympa et est un bon complément aux sites comme openweb ou selfhtml, BRAVO [/i]
PS/: le site est sur mamadoo donc ... pas de php :'(
Mozilla Powa
Tu trouvera ton bonheur sur A List Apart pour conserver ces préférences en utilisant Javascript.
Solution intégralement en javascript et DOM, il suffit juste de mettre l'id du bloc dans lequel sera inséré la liste de sélection de style dans la variable parent_bloc et bien sùr d'appeller le script dans une balise <script>:
(un peu long, sorry)
(un peu long, sorry)
Code : Tout sélectionner
/*
* Le code html est généré comme suit (sans l'indentation et les sauts de ligne):
*
* <div id="styleForm">
* <label for="styleSwitcher">blabla : </label>
* <select id="styleSwitcher">...</select>
* <button type="button">Go</button>
* </div>
*
* Attention de ne pas créer de conflit dans votre page avec
* les deux id utilisés (styleForm et styleSwitcher)
*/
//
// Indiquez ici l'identifiant du bloc auquel sera rattaché le switcher
//
var parent_bloc = '';
//
// texte et bulle d'aide
//
var label_texte = 'Changer de thème\u2009:';
var label_title = 'La persistance du style choisi nécessitera l\'envoi d\'un cookie';
//
// Nom du cookie pour la persistence du style
//
var cookie_name = 'switcher';
function createSwitcher()
{
var current_style = '';
if( document.cookie )
{
var arg = cookie_name + '=';
var i = 0;
while( i < document.cookie.length )
{
var j = i + arg.length;
if( document.cookie.substring(i, j) == arg )
{
var endstr = document.cookie.indexOf(';', j);
if( endstr == -1 ) {
endstr = document.cookie.length;
}
current_style = unescape(document.cookie.substring(j, endstr));
break;
}
i = document.cookie.indexOf(' ', i) + 1;
if( i == 0 ) break;
}
}
//
// Bloc du switcher
//
var switcher = document.createElement('div');
switcher.setAttribute('id', 'styleForm');
//
// Label associé à la liste déroulante
//
var label = document.createElement('label');
var texte = document.createTextNode(label_texte);
label.setAttribute('for', 'styleSwitcher');
label.setAttribute('title', label_title);
label.appendChild(texte);
label.appendChild(document.createTextNode('\u00A0'));
switcher.appendChild(label);
//
// Listé déroulante
//
var box = document.createElement('select');
box.setAttribute('id', 'styleSwitcher');
var option = document.createElement('option');
var texte = document.createTextNode('Basique');
if( current_style.length && current_style.toLowerCase() == 'basique' )
{
option.setAttribute('selected', 'selected');
}
option.appendChild(texte);
box.appendChild(option);
for( var i = 0, m = document.styleSheets.length; i < m; i++ )
{
var CSSStyle = document.styleSheets[i];
if( CSSStyle.title.length )
{
var option = document.createElement('option');
var texte = document.createTextNode(CSSStyle.title);
if( current_style.length && CSSStyle.title.toLowerCase() == current_style.toLowerCase() )
{
option.setAttribute('selected', 'selected');
}
if( !CSSStyle.disabled && !default_style )
{
var default_style = CSSStyle.title;
if( !current_style.length )
{
option.setAttribute('selected', 'selected');
}
}
option.appendChild(texte);
box.appendChild(option);
}
}
switcher.appendChild(box);
switcher.appendChild(document.createTextNode('\u00A0')); // Espace entre la liste de sélection et le bouton
//
// Bouton
//
var button = document.createElement('button');
var texte = document.createTextNode('Go');
button.setAttribute('type', 'button');
button.appendChild(texte);
switcher.appendChild(button);
button.onclick = activeStyle;
//
// Insertion du switcher dans le document
//
document.getElementById(parent_bloc).appendChild(switcher);
if( current_style.length && current_style.toLowerCase() != default_style.toLowerCase() )
{
activeStyle(current_style);
}
}
function activeStyle(selected_style)
{
if( typeof(selected_style) != 'string' )
{
var switcher_box = document.getElementById('styleSwitcher');
var selected_style = switcher_box.options[switcher_box.selectedIndex].text;
}
for( var i = 0, m = document.styleSheets.length; i < m; i++ )
{
var CSSStyle = document.styleSheets[i];
if( CSSStyle.title.length )
{
CSSStyle.disabled = !( CSSStyle.title.toLowerCase() == selected_style.toLowerCase() );
}
}
var date = new Date();
date.setTime(date.getTime() + (365 * 86400));
document.cookie = cookie_name + "=" + escape(selected_style) + "; expires=" + date.toGMTString() + "; path=/";
}
if( document.getElementById && document.styleSheets && document.styleSheets.length > 1 )
{
window.onload = createSwitcher;
}
« La vie d’un geek est un combat perpétuel contre l’imperfection »
Le principe est sensiblement le même sauf que la solution de a list apart impose la présence de liens dans le document, si le javascript est désactivé, ces liens ne servent à rien, ce n'est pas une solution propre.Benoit a écrit :Je préfère la solution d'A List Apart, qui est nettement plus courte et facile à comprendre, même si elle implique de faire un lien vers chaque style.
Et pour la compréhension, je ne vois pas ce qu'il y a d'incompréhensible dans ma solution :/
<script type="text/javascript" src="/path/to/switcher.js"></script> dans le <head>
et mettre le bon id dans la variable parent_bloc.
Ah, un dernier truc, la solution donnée par a list apart impose de placer manuellement les liens dans la page en fonction des feuilles css disponibles. La solution que je donne récupère d'elle même les feuilles css associées au document pour construire la liste déroulante de sélection de style
« La vie d’un geek est un combat perpétuel contre l’imperfection »
Il veut dire qu'elle est toujours accessible via le sélecteur de style de Firefox ou Opera, c'est juste le cookie pour s'en souvenir qui ne fonctionne pas (logique). C'est aussi le cas de la tienne.
Je comprends ce que tu veux dire par "plus propre", c'est-à-dire que l'utilisateur ne pouvant pas changer de style ne verra même pas le switcher, mais je continue à trouver que ça fait beaucoup de code pour ça.
Je comprends ce que tu veux dire par "plus propre", c'est-à-dire que l'utilisateur ne pouvant pas changer de style ne verra même pas le switcher, mais je continue à trouver que ça fait beaucoup de code pour ça.
OK j'ai compris, le formulaire pour changer le style ne s'affiche pas sans javascript J'ai cru que tu parlais des feuilles de style qui ne s'affichaient pas sans jsBobe a écrit :Le principe est sensiblement le même sauf que la solution de a list apart impose la présence de liens dans le document, si le javascript est désactivé, ces liens ne servent à rien, ce n'est pas une solution propre.
D'où l'avantage du php
Ah ok. Il croyait que je parlais de <link> quand je parlais de 'liens'. Je comprend mieux.Benoit a écrit : Il veut dire qu'elle est toujours accessible via le sélecteur de style de Firefox ou Opera, c'est juste le cookie pour s'en souvenir qui ne fonctionne pas (logique). C'est aussi le cas de la tienne.
Il y a plus de code du fait de la génération du bloc contenant la liste déroulante et le bouton, mais ton argument n'en est pas un car le fichier javascript est normalement mis en cache.je continue à trouver que ça fait beaucoup de code pour ça.
Bon, maintenant, chacun utilise ce qu'il veut
J'aurai juste profité de ce sujet pour proposer la solution la plus adéquate et la plus correcte vis à vis de la philosophie des normes du W3C (du moins à mon sens).
calimo> Là, on veut rendre le document dynamique, ce qui est le rôle du javascript et du DOM. Le php n'est pas une solution pour ça.
« La vie d’un geek est un combat perpétuel contre l’imperfection »
hé bien .... un super gros MERCI à tous.
Va falloir que je me mette au JS parceque je me rend compte que je vais pas péter loin avec xhtml, html et css.
encore de longues journées qui m'attendent.
je vais essayer tt ça sans plus tarder.
je repasserai donner des nouvelles
Merci @+ tlm[/b]
ps: pour piger le JS selfhtml.com est bien ?? c'est principalement de ce site que je me sers
Va falloir que je me mette au JS parceque je me rend compte que je vais pas péter loin avec xhtml, html et css.
encore de longues journées qui m'attendent.
je vais essayer tt ça sans plus tarder.
je repasserai donner des nouvelles
Merci @+ tlm[/b]
ps: pour piger le JS selfhtml.com est bien ?? c'est principalement de ce site que je me sers
Mozilla Powa
C'est là qu'intervient ma solution sans cookies 8)
Il faut un div d'id style quelque part dans la page, là où on veut afficher le switcher, et on y lie apres ce fichier javascript :Forcement, sans cookies, faut passer par les sessions PHP...
Il faut un div d'id style quelque part dans la page, là où on veut afficher le switcher, et on y lie apres ce fichier javascript :
Code : Tout sélectionner
var d=document.getElementById('style');
var l=document.createElement('label');
l.setAttribute('accesskey','T');
l.setAttribute('for','styleswitcher');
var c=document.createTextNode('Changer de thème : ');
d.appendChild(c);
d.appendChild(l);
var styles=document.styleSheets;
<?php
if(isset($_SESSION['theme']))
{
?>
for(i=0;i<styles.length;i++){if(styles[i].title.length){styles[i].disabled=(i!=<?php echo $_SESSION['theme']; ?>);}}
<?php
}
?>
var s=document.createElement('select');
s.setAttribute('id','styleswitcher');
s.setAttribute('title','Changer de thème');
for(i=0;i<styles.length;i++)
{
if(styles[i].title.length)
{
var o=document.createElement('option');
var t=document.createTextNode(styles[i].title);
if(!styles[i].disabled)
{
o.setAttribute('selected','selected');
}
o.setAttribute('value',i);
o.appendChild(t);
s.appendChild(o);
}
}
function ch(){var ss=this.value;for(i=0;i<styles.length;i++){if(styles[i].title.length){styles[i].disabled=(i!=ss);}}var al=document.getElementsByTagName('a');for(i=0;i<al.length;i++){var href=al[i].getAttribute('href');if(!(href.match(/^http:\\\\/))){if(href.match(/\?/)){var sep='&';}else{var sep='?';}al[i].setAttribute('href',href+sep+'theme='+this.value);}}}
s.addEventListener('change',ch,false);
d.appendChild(s);
Qui est en ligne ?
Utilisateurs parcourant ce forum : Semrush [Bot] et 15 invités