Doppio CSS

**carlomarx** · 06-07-2011, 15:31

Cmq spero che tu abbia capito la logica. Tutti gli stili non modificabili stanno in static.css (ma puoi aggiungere infiniti fogli di stile senza l'attributo title), mentre quelli alternativi tra loro sono default.css, fancy.css e basic.css (insomma, tutti i fogli con attributo title settato). Quando costruisci la tua pagina tutti quelli con attributo title settato tranne uno dovranno avere anche l'attributo disabled settato su true. Ciao.

**FullsaReturn** · 06-07-2011, 15:42

SI ho capito il funzionamento... anche se con l'aggiunta delle tue modifiche al cambiare della pagina torna anche il css di default...

mi correggo, funziona xD

**fcaldera** · 06-07-2011, 16:04

Fullsa, su quali browser (e versioni) deve funzionare questo meccanismo? Anche su IE 7 e 8?

**FullsaReturn** · 06-07-2011, 16:13

su tutti possibilmente... lo script funziona, solo che la modifica avviene a fine caricamento della pagina... io vorrei che invece si caricasse sin da subito con le modifiche... non è possibile?

**carlomarx** · 06-07-2011, 16:33

Originariamente inviato da FullsaReturn
su tutti possibilmente... lo script funziona, solo che la modifica avviene a fine caricamento della pagina... io vorrei che invece si caricasse sin da subito con le modifiche... non è possibile?

Prova così. Con queste modifiche la dichiarazione dei fogli di stile deve stare prima dello script. Chiaro?

codice:

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Pagina vuota</title>
<link href="static.css" rel="stylesheet" type="text/css" />
<link href="default.css" rel="stylesheet" type="text/css" title="Default Style" />
<link href="fancy.css" rel="stylesheet" disabled="true" type="text/css" title="Fancy" />
<link href="basic.css" rel="stylesheet" disabled="true" type="text/css" title="Basic" />
<script type="text/javascript">
function chooseStyleSheet(sTitle) {
	if (!sTitle) { return; }
	for (var iStyleSh, iStyleSheetId = 0, aLinkEls = document.getElementsByTagName("link"); iStyleSheetId < aLinkEls.length; iStyleSheetId++) {
		iStyleSh = aLinkEls[iStyleSheetId];
		if (iStyleSh.rel === "stylesheet" && iStyleSh.title) { iStyleSh.disabled = iStyleSh.title !== sTitle; }
	}
	localStorage.setItem("customStyle", sTitle);
}

if (localStorage.hasOwnProperty("customStyle")) { chooseStyleSheet(localStorage.getItem("customStyle")); }
</script>
</head>

<body>


[ <span class="intLink" onclick="chooseStyleSheet('Default Style');">Default Style</span> | <span class="intLink" onclick="chooseStyleSheet('Fancy');">Fancy</span> | <span class="intLink" onclick="chooseStyleSheet('Basic');">Basic</span> ]</p>


<span class="classeEsempio">Testo di esempio</span>



</body>
</html>

**fcaldera** · 06-07-2011, 16:37

Originariamente inviato da FullsaReturn
su tutti possibilmente...

allora è meglio non usare il localstorage (essendo una funzionalità presente solo sui browser recentissimi), su IE7 e 8 il salvataggio/recupero non funzionerà. Meglio se salvi l'informazione del foglio semplicemente su un cookie.

**carlomarx** · 06-07-2011, 16:43

Originariamente inviato da fcaldera
allora è meglio non usare il localstorage (essendo una funzionalità presente solo sui browser recentissimi), su IE7 e 8 il salvataggio/recupero non funzionerà. Meglio se salvi l'informazione del foglio semplicemente su un cookie.

Chi mi ha visto intervenire su questo forum avrà notato che sono un recentista per quanto riguarda il codice. Io non mi preoccuperei delle precedenti versioni di IE. Con le ultime versioni di windows il browser si aggiorna da solo con gli aggiornamenti automatici... Cmq a lui la scelta

**fcaldera** · 06-07-2011, 16:46

Originariamente inviato da carlomarx
Chi mi ha visto intervenire su questo forum avrà notato che sono un recentista per quanto riguarda il codice. Io non mi preoccuperei delle precedenti versioni di IE.

Tu no, ma purtroppo per lui e per il resto del mondo che sviluppa non si può ignorare che ci sono ancora milioni di utenti che usano quei browser

**carlomarx** · 06-07-2011, 17:48

Originariamente inviato da fcaldera
Tu no, ma purtroppo per lui e per il resto del mondo che sviluppa non si può ignorare che ci sono ancora milioni di utenti che usano quei browser

fcaldera, prova ad aggiungere in testa alla pagina questo codice di compatibilità e provalo con i vecchi browsers, io non posso farlo.. Ho simulato l'oggetto localStorage coi cookies per i browser più vecchi. Fammi sapere!

codice:

if (!localStorage) {
	Object.defineProperty(window, "localStorage", new (function () {
		function encode(sTxt1) { return sTxt1.replace(/[;=%]/g, "%$&"); }
		function decode(sTxt2) { return sTxt2.replace(/%([;=%])/g, "$1"); }
		this.get = function () {
			var oReturn = {}, aCookies = document.cookie.split(/\s*;\s*/);
			for (var iCookie, iCookId = 0; iCookId < aCookies.length; iCookId++) {
				iCookie = aCookies[iCookId].split("=");
				if (iCookie.length > 1) { oReturn[decode(iCookie[0])] = decode((iCookie[1])) };
			}
			Object.defineProperty(oReturn, "getItem", { value: function (sKey) { return this[sKey]; }, writable: false, enumerable: false, configurable: false });
			Object.defineProperty(oReturn, "key", { value: function (nKeyId) { return Object.keys(this)[nKeyId]; }, writable: false, enumerable: false, configurable: false });
			Object.defineProperty(oReturn, "setItem", { value: function (sKey, sValue) { if(!sKey) { return; } document.cookie = encode(sKey) + "=" + encode(sValue) + ";path=/"; }, writable: false, enumerable: false, configurable: false });
			Object.defineProperty(oReturn, "length", { get: function () { return Object.keys(this).length; }, enumerable: false, configurable: false });
			Object.defineProperty(oReturn, "removeItem", { value: function (sKey) { if(!sKey) { return; } document.cookie = encode(sKey) + "=;path=/"; }, writable: false, enumerable: false, configurable: false });
			return oReturn;
		};
		this.enumerable = false;
		this.configurable = false;
	})());
}

**FullsaReturn** · 06-07-2011, 21:34

Ancora devo provare gli ultimi codici, però inizio a dire che lo switch viene mantenuto da chrome mentre da ie8 no... ritorna il css primario.

Ad ogni modo ora provo i codici e le modifiche nuove

Discussione: Doppio CSS

Strumenti discussione

Ricerca discussione

Visualizza

Permessi di invio