[CSS]Possibilità di caricare diversi CSS

paola.mi

[CSS]Possibilità di caricare diversi CSS

Ciao,
cercando di fare i siti il più accessibili possibili mi è sorta la necessità di creare tre css (credo sia la strada giusta, altrimenti vi sarò grata se mi correggerete) con la dimensione del font diversa.
Ora, per fare in modo che sul sito compaiano le tre opzioni, qual è il comando per far sì che si carichi il css scelto?

Grazie di cuore!

haccah

Su ogni pagina puoi caricare un CSS attraverso il tag link posto nell'head
Un esempio:

<link rel="stylesheet" type="text/css" href="nomefile.css">

Ma per facilitare il tutto, non puoi creare un unico foglio di stile con differenti nomi per i tag? Tipo, potresti chiamarli text12 (per dimensione testo 12px), text14 (per 14px), text16...

lkv

@Paola_mi said:

Ciao,
cercando di fare i siti il più accessibili possibili mi è sorta la necessità di creare tre css (credo sia la strada giusta, altrimenti vi sarò grata se mi correggerete) con la dimensione del font diversa.
Ora, per fare in modo che sul sito compaiano le tre opzioni, qual è il comando per far sì che si carichi il css scelto?

Grazie di cuore!

Hai due strade che puoi percorrere, una e' usare javascript, l'altro e' farlo lato server (con php ad esempio).

Prima di tutto assieme al classico:

<link rel="stylesheet" type="text/css" href="css_1.css" title="default">

crei gli altri due:

<link rel="alternate stylesheet" type="text/css" href="css_2.css" title="css_2">
<link rel="alternate stylesheet" type="text/css" href="css_3.css" title="css_3">

Poi metti il richiamo al file che contiene il codice javascript:

<script type="text/javascript" src="cambia_css.js"></script>

che conterra':

var style = "default";
var cookiename = "Layout";
var days = 1;

function switchStyle&#40;s&#41; &#123;
  if &#40;!document.getElementsByTagName&#41; return;
  var el = document.getElementsByTagName&#40;"link"&#41;;
  for &#40;var i = 0; i < el.length; i++ &#41; &#123;
    if &#40;el&#91;i&#93;.getAttribute&#40;"rel"&#41;.indexOf&#40;"style"&#41; != -1 && el&#91;i&#93;.getAttribute&#40;"title"&#41;&#41; &#123;
      el&#91;i&#93;.disabled = true;
      if &#40;el&#91;i&#93;.getAttribute&#40;"title"&#41; == s&#41; el&#91;i&#93;.disabled = false;
    &#125;
  &#125;
&#125;

function loadStyle&#40;&#41; &#123;
  var c = getStyleCookie&#40;&#41;;
  if &#40;c && c != style&#41; &#123;
    switchStyle&#40;c&#41;;
    style = c;
  &#125;
&#125;

function setStyle&#40;s&#41; &#123;
  if &#40;s != style&#41; &#123;
    switchStyle&#40;s&#41;;
    style = s;
    setStyleCookie&#40;&#41;;
  &#125;
&#125;

window.onload = loadStyle;




function setCookie&#40;name, value, expdays&#41; &#123;
  var now = new Date&#40;&#41;;
  var exp = new Date&#40;now.getTime&#40;&#41; + &#40;1000*60*60*24*expdays&#41;&#41;;
  document.cookie = name + "=" + escape&#40;value&#41; + ";" +
                    "expires=" + exp.toGMTString&#40;&#41; + ";" +
                    "path=/";
&#125;

function delCookie&#40;name&#41; &#123;
  var now = new Date&#40;&#41;;
  var exp = new Date&#40;now.getTime&#40;&#41; - 1&#41;;
  document.cookie = name + "=;" +
                    "expires=" + exp.toGMTString&#40;&#41; + ";" + 
                    "path=/";
&#125;

function getCookie&#40;name&#41; &#123;
  var cname = name + "=";
  var dc = document.cookie;
  if &#40;dc.length > 0&#41; &#123;
    var start = dc.indexOf&#40;cname&#41;;
    if &#40;start != -1&#41; &#123;
      start += cname.length;
      var stop = dc.indexOf&#40;";", start&#41;;
      if &#40;stop == -1&#41; stop = dc.length;
      return unescape&#40;dc.substring&#40;start,stop&#41;&#41;;
    &#125;
  &#125;
  return null;
&#125;

function setStyleCookie&#40;&#41; &#123;
  setCookie&#40;cookiename, style, days&#41;;
&#125;

function getStyleCookie&#40;&#41; &#123;
  return getCookie&#40;cookiename&#41;;
&#125;

function delStyleCookie&#40;&#41; &#123;
  delCookie&#40;cookiename&#41;;
&#125;

Poi per dare ai visitatori la possibilita' di scegliere inserisci:

[url="javascript:setStyle&#40;'default'&#41;"]Primo foglio di stile
[url="javascript&#58;setStyle&#40;'css_2'&#41;"]secondo foglio di stile
[url="javascript&#58;setStyle&#40;'css_3'&#41;"]terzo foglio di stile

Personalmente non mi piace molto come metodo, col php non so come si faccia.

paola.mi

Ragazzi non ho capito niente...

Cioè... devo fare TRE VERSIONI del sito o solo TRE VERSIONI del css?

claudioweb

@Paola_mi said:

Ragazzi non ho capito niente...

Cioè... devo fare TRE VERSIONI del sito o solo TRE VERSIONI del css?

Devi fare un solo sito che però permetta di usare alternativamente i tre css diversi.

Come detto per usarne uno dei tre devi fare la scelta o con javascript, oppure generando dimicamente pagine che richiamo uno solo dei tre css.

@HaccaH said:

Ma per facilitare il tutto, non puoi creare un unico foglio di stile con differenti nomi per i tag? Tipo, potresti chiamarli text12 (per dimensione testo 12px), text14 (per 14px), text16...
Lei vuole fare una cosa diversa, cioè tre css diversi a seconda della scelta dell'utente.

Ciao

paola.mi

ok!
non mandatemi al diavolo, ma fate conto di spiegare q.cosa a un bimbo...

Io preparo i tre css identici, varia solo la dimensione del FONT per il problema che potrebbe avere l'Utente ipovedente.

Ora... io uso il php in modo elementare: utilizzando solo l'include, per includere testata e piè di pagina.
Laddove solitamente metto il richiamo al css, cosa devo mettere?
e nella home, quando farò tipo tre immagini piccole che stanno ad indicare i tre diversi css, come li richiamo?
Davvero, so di chiedere troppo, se lo è mandatemi pure al diavolo...

claudioweb

Ciao

Ho guardato un po' in giro e [url=http://www.constile.org/DHTML/ridimensionare_i_caratteri/]questa soluzione è molto più elegante dei tre css.... ed è pure ben illustrata... vedi se ti piace oppure in alternativa guarda [url=http://pro.html.it/articoli/id_263/idcat_8/pag_1/pag.html]qui

paola.mi

Grazie, Claudio.
Ho preso l'esempio dal tuo primo link.
Cmq grazie mille, è l'ennesima volta che mi tiri fuori dai guai...