Tra tutte le "best practices" per velocizzare il carimento di un sito, rivolgiamo per prima cosa la nostra attenzione a i file CSS e JavaScript, e ai metodi per comprimere il codice. Molto spesso infatti, per i grandi progetti, i fogli di stile raggiungono un numero elevato di righe, e aumentano con il numero delle sezioni della pagina, sotto forma di file esterni richiamati con la regola @import. La stessa cosa avviene con i file JavaScript. Tralasciamo il discorso sul codice HTML, perché una sua compressione non apporterebbe significativi benefici.
Vediamo come ottimizzare il loro peso grazie a due ottimi strumenti online.

JavaScript: minimizzare e comprimere!

Minifyjs è un ottimo compressore di codice JavaScript, la cui funzione è quella di prendere il codice sorgente originale, eliminare tutti i caratteri non necessari (sopratutto glie spazi bianchi), e mantenere intatte le funzionalità dello script. 

Riduciamo il peso dei CSS!

Questo ottimo tool online, nella sua cassetta degli attrezzi può vantare ottimi strumenti per eliminare parti superflue o ridondanti, rendendo quindi il caricamento di una pagina più veloce.

Opzioni di compressione

Colori

• Converte i colori in esadecimale
• Converte le proprietà esadecimali da lunghe in forma breve
• Converte da esadecimale in forma lunga in nomi di colore
• Converte da RGB in esadecimale

Misure

• Rimuove le misure pari a zero

Regole

• Combina regole identiche
• Combina selettori identici
• Combina le proprietà
• Rimuove le proprietà sovrascritte

Proprietà

• Rimuove i valori inutili da margin e padding
• Convertire in numeri le proprietà text-weight

Opzioni di output

• Mostra le statistiche
• Produce un output a colori
• Produce un file di output della dimensione più piccola

Articoli correlati:

1. AI to Canvas: utilizzare subito HTML5 Canvas!
2. CSS Pseudo-classi: come usarle su IE6+!

AI⇒Canvas è un plug-in che offre infatti le opzioni per il disegno, l’animazione e la codifica, come "eventi" JavaScript in modo da poter costruire applicazioni web interattive ben progettate basate sul tag canvas.
Lo scopo di Ai⇒Canvas è di accelerare lo sviluppo del tag HTML5 canvas: esso infatti, partendo da un file vettoriale, genera ed esporta codice HTML e JavaScript che può essere subito copiato nella propria applicazione ed eventualmente ampliato in un secondo momento.

Cominciamo a usare HTML5 Canvas

Per installare Ai⇒Canvas, scaricare la versione adatta al prorio sistema operativo (per Windows o OS X), ed estrarre il file Ai2Canvas.aip nella cartella plug-in di Adobe Illustrator. Assicurarsi di riavviare Illustrator se è già in esecuzione. Una volta fatto questo, possiamo scaricare un file illustrator di esempio, e salvare ciascun elemento vettoriale in un livello separato.

Canvas in inglese vuol dire tela, per incomincare fin da subito a "dipingere" e per testare fin da subito le potenzialità del plugin, è sufficiente cambiare il nome di ciascun livello del file .AI come se fosse una funzione JavaScript, per esempio: "nomeElemento();". Possiamo vedere fin da subito il risultato scegliendo File / Esporta, selezionare " <canvas> " come tipo di file, quindi fare clic su Salva per visualizzare il risultato nel browser.

Animazioni e Canvas: ecco un semplice esempio

Ogni livello di disegno all’interno del file .AI può essere ruotato, ridimensionato, e sbiadito, configurando le impostazioni di animazione. Le impostazioni di animazione controllano come le proprietà cambiano nel tempo, e ogni impostazione è dotata di otto possibili settaggi (si veda la documentazione estesa per ulteriori dettagli). Le impostazioni includono la direzione dell’animazione, la sua durata complessiva, invertire o no la direzione, una funzione di interpolazione, e un ritardo iniziale prima che l’animazione abbia inizio.

Quando l’animazione riguarda una forma, è spesso utile riposizionare il punto di origine (il luogo in cui gli assi X e Y si intersecano a 0, 0). Ai⇒Canvas rende facile spostare l’origine di ogni livello in modo che le animazioni siano esportate correttamente.

Per esempio, rinominiamo il livello nomeElemento(); in nomeElemento(origine: -1.5, 0.5);. I due valori indicano uno spostamento rispettivamente sull’asse orizzontale e su quella verticale: in particolare essi posizionano il punto di origine a una volta e mezzo l’intera larghezza dell’oggetto vettoriale verso sinistra (al di fuori dei confini dell’oggetto, verso sinistra), in verticale a metà della sua altezza.
Per aggiungere una seconda proprietà, inserire un punto e virgola prima della nuova proprietà e il suo valore. Cambiare il nome del livello in nomeElemento(origin: -1.5, 0.5; rotate-direction:cw);, questa prprietà imposta una rotazione all’animazione, che imprime all’oggetto un movimento in senso orario ("CW significa ClockWise, senso orario; per imposare in senso antiorario scrivere AW, AnticlockWise ").

Come utilizzare il tag Canvas su Internet Explorer 6+?

Ecco come essere sicuri che il tag canvas, ad oggi non supportato da IE precedenti alla versione 9, sia interpretato da tutte le versioni, dalla 6 alla 8.
Ecco come procedere: per prima cosa, scarichiamo la versione compatta di explorercanvas e colleghiamola al file contenente il canvas, inserendo la chiamata alla libreria all’interno dei commenti condizionali per InternetExplorer, così:

<!--[if IE]><script type="text/javascript" src="cartellaScript/excanvas.compiled.js"></script><![endif]--> 

Purtroppo però, ExCanvas non permette a IE di vedere le animazioni costruite con canvas.

Articoli correlati:

1. HTML5: tag nuovi e anteprima delle novità
2. 10+ HTML5-CSS3 Website Template: per iniziare a progettare il web di domani!
3. HTML5: tavola degli elementi interattiva!

Di seguito sono riportati alcuni piccoli trucchi e consigli molto utili, raccolti da varie fonti in Internet, che permettono di migliorare l’interazione dell’utente e di risolvere alcune problematiche in modo semplice ed efficace, anche per i webdesigner meno esperti e gli sviluppatori principianti. Dal momento che questi esempi sono incentrati su jQuery, il codice proposto non entra nei dettagli dei CSS.

CSS diversi per browser diversi

Ecco come dichiarare codice JavaScript per browser specifici:

jQuery.each(jQuery.browser, function(i) {
   if($.browser.msie && $.browser.version <= 6 ){
     // fai questo e quello
   }
});

//Target Safari
  if( $.browser.safari )
//Target IE6+
  if ($.browser.msie && $.browser.version > 6 )
//Target IE6 e precedenti
  if ($.browser.msie && $.browser.version <= 6 )
//Target Firefox 2 e successivi
  if ($.browser.mozilla && $.browser.version >= "1.8" )

Disabilitare il tasto destro del mouse dal menu contestuale

Ci sono molti frammenti JavaScript disponibili per disattivare il tasto destro del mouse dal menu contestuale, ma jQuery rende le cose molto più facili:

$(document).bind("contextmenu",function(e){
	return false;
 });

Verifichiamo che un elemento esista in jQuery…

if ($('#id').length) {
 // fai questo e quello
 }

…per caricare un plugin solo quando serve!

Quando il lavoro su un determinato sito cresce, gli script esterni iniziano ad accumularsi nella sezione <head> del documento, e alla fine ciò impatta sulle prestazioni.
Grazie al metodo $.getScript, ecco una soluzione elegante a questo problema.

if ($('a.email').length > 0){
	$.getScript('js/jquery.mailto.js',function(){
		$('a.email').mailto();
	});
}

Eseguire solo ciò che serve veramente

Ogni programmatore/webdesigner per comodità di solito scrive tutto il codice JS per il sito web in un unico file.
jQuery però impiega tempo per cercare gli elementi nella pagina, anche se non esistono, e questo rallenta le cose. Ci sono due modi con cui è possibile aggirare questa situazione terribile. Quella più semplice è quello mettere un ID al tag body (il nome della pagina, ad esempio) ed eseguire il codice necessario per quell’unica pagina:

$(document).ready (function () {
	if ('body').hasClass ('home') {
  // codice per home page}else if ('body').hasClass ('blog') {
  // codice per la pagina blog
}
// e così via
});

Modalità non conflittuale

Per evitare conflitti quando si utilizzano più framework in un sito web, è possibile utilizzare questo Metodo jQuery, e assegnare un nome diverso alla variabile invece che il segno di dollaro. Ecco tutte le informazioni per utilizzare jQuery con altre librerie.

var $j = jQuery.noConflict();
$j('#mioDiv').hide();

Aggiungere un’icona per link diversi

Questo trucco è molto semplice e utile per l’usabilità. Se i link portano a siti Web esterni, vogliamo che una immagine venga visualizzata accanto al link, così come se sono presenti link a documenti .pdf, o .doc. Dopo aver definito delle regole CSS per ogni tipo di collegamento, associamole ai link corrispondenti:

// Link a pdf
		$("a[href$='.pdf']").addClass("pdf");
// Link a documenti (doc, rtf, txt)
		$("a[href$='.doc'], a[href$='.txt'], a[href$='.rft']").addClass("txt");
// Link ad archivi compressi (zip, rar)
		$("a[href$='.zip'], a[href$='.rar']").addClass("zip");
// Email link
		$("a[href^='mailto:']").addClass("email");
//Aggiungiamo uno stile per i link esterni:
		$('a').filter(function() {
//Compariamo l'host name nell'anchor tag con 's host name location
		return this.hostname && this.hostname !== location.hostname;
    }).addClass("external");
//Possimao anche aggiungere l'attributo _blank al terget dei link esterni:
/*
	$('a').filter(function() {
  //Compariamo l'host name nell'anchor tag con 's host name location
  	return this.hostname && this.hostname !== location.hostname;
    }).addClass("external").attr("target", "_blank");
*/

Applicare un effetto hover a qualsiasi elemento

$('#hover-demo2 p').hover(function() {
  $(this).addClass('pretty-hover');
}, function() {
  $(this).removeClass('pretty-hover');
});

Rendere cliccabile qualsiasi elemento

Vogliamo rendere cliccabile qualsiasi elemento (attenzione: il nostro HTML non sarà più validato!):

<div class="clickable" url="http://google.com">
	Contenuto del div
</div>

Ecco come fare:

$("div.clickable").click(
function()
	{
  window.location = $(this).attr("url");
});

Imparare ad usare correttamente le animazioni

Il metodo animate() prende semplicemente qualsiasi stile CSS e lo fa passare in modo fluido da un valore all’altro. Quindi, è possibile modificare width, height, opacity, background-color, top, left, margin, color, font-size tutto quello che accetta un valore numerico. Ecco per esempio come è facile animare tutte le voci di un menù facendole crescere a 100 pixel di altezza quando si passa sopra il mouse:

$('#miaLista li').mouseover(function() {
		$(this).animate({"height": 100}, "slow");
});

A differenza di altre funzioni jQuery, le animazioni sono automaticamente eseguite in coda, quindi se si desidera eseguire una seconda animazione una volta che la prima è finita, basta chiamare il metodo animate() per due volte, senza funzioni di callback ulteriori:

$('#mioBox').mouseover(function() {
		$(this).animate({ "width": 200 }, "slow");
   $(this).animate({"height": 200}, "slow");
});

Se si desidera che le animazioni avvengano in concomitanza, basta mettere entrambi gli stili nei parametri di una singola chiamata, così:

$('#mioBox').mouseover(function() {
	$(this).animate({ "width": 200, "height": 200 }, "slow");
});

È possibile animare qualsiasi proprietà che sia numerica. È però possibile scaricare un plugin per animare le proprietà che non sono numeriche, come i colori.

Shorthand per l’evento ready

Ecco un piccolo trucco che permette di salvare alcuni caratteri utilizzando una scorciatoia per la $(document).ready(function(){}).
Invece di:

$(document).ready(function (){
	// codice da eseguire
});

…possiamo scrivere:

$(function (){
	// codice da eseguire
});

Scorrere fino alla parte superiore di una pagina web

Per tornare a inizio pagina in modo fluido utilizzando le animazioni di jQuery, inseriamo questo codice HTML in pagina:

<a href="#top">Torna a inizio pagina</a>

…e settiamo l’animazione così:

$('a[href=#top]').click(function(){
	$('html, body').animate({scrollTop:0}, 'slow');
	return false;
});

…oppure possiamo realizzare lo stesso scroll animato con jQuery tramite una funzione a cui passiamo come parametro l’ id del selettore desiderato:

function scrollWin(anc){
	target = $(anc);
	$('html, body').animate({
		scrollTop: target.offset().top
	}, 1000);
}
$(".scroller").click(function() {
    scrollWin("#pippo");
});

Come personalizzare le liste

Aggiungiamo a ogni list-item ,per esempio, l’elemento “»":

$("ul").addClass("Replaced");
$("ul > li").prepend("»");

Impostiamo i CSS in modo tale da nascondere i bullet-point preimpostati:

ul.Replaced {
 list-style : none;
}

Cambiare i fogli di stile

Vogliamo aggiungere uno “style-switch” in modo che i navigatori del nostro sito possano scegliere, per esempio, tra uno stile ad alto contrasto e uno stile di stampa? E’ molto facile da fare: quello che ci serve è una serie di link con ID univoco:

<h1>Scegli uno stile:</h1>
	<ul>
  <li><a id="StyleContrast" href="#">Contrast</a></li>
  <li><a id="StylePrint" href="#">Print</a></li>
  <li><a id="StyleNormal" href="#">Normal</a></li>
</ul>

Ecco come impostare i comandi JavaScript:

$("#StyleContrast").click(function() {
	$("link[media='screen']").attr("href", "Contrast.css");
  });
$("#StylePrint").click(function() {
	$("link[media='screen']").attr("href", "Print.css");
});
$("#StyleNormal").click(function() {
	$("link[@media='screen']").attr("href", "Normal.css");
});

Campi di ricerca personalizzati

Un piccolo script, che popola un campo di testo di un modulo con un testo predefinito come descrizione.
Questo testo sparisce se l’input è in focus, e ricompare se il focus è perso senza alcun input:

<form action="#" method="post">
	<input id="SearchText" name="text" />
  <button>Cerca</button>
</form>

Dato che questo compito può essere usato in diverse situazioni, è una buona idea scrivere una funzione riutilizzabile. Il primo parametro è un selettore (nel nostro caso “#Testo di ricerca”, ma qualcosa come “input[@name=search]” potrebbe andare bene), il secondo parametro è il nuovo valore predefinito di tale elemento di input (ad esempio “Inserisci i termini di ricerca qui ..”).

function populateElement(selector, defvalue) {
 $(selector).each(function() {
         if($.trim(this.value) == "") {
                     this.value = defvalue;
         }
})
 $(selector).focus(function() {
        if(this.value == defvalue) {
                    this.value = "";
         }
});
$(selector).blur(function() {
        if($.trim(this.value) == "") {
        this.value = defvalue;
        }
      });
}

Nel nostro caso particolare il codice JavaScript potrebbe apparire così:

populateElement('#SearchText', 'Inserisci la parola che cerchi..');

Prevenire il comportamento di default

Supponiamo di avere una pagina molto lunga, e di avere un link simile a quello qui sotto che viene utilizzato per scopi diversi da un collegamento ipertestuale. Se si fa clic su di esso, ci porterà in cima alla pagina. La ragione di questo comportamento è la presenza del simbolo #.

<a href="#" id="chiudi"></a>

Per risolvere questo problema, è necessario annullare il comportamento predefinito, in questo modo:

$('#chiudi).click(function(e){
     e.preventDefault();
}); 

/* oppure */

$('#chiudi).click(function(){
    return false;
});

Font resizing

Questo è una delle più usate funzionalità in una pagina web, cioè la possibilità di permettere all’utente aumentare/diminuire la dimensione del carattere.
Siamo in grado di specificare l’ID, le classi o gli elementi HTML di cui si desidera regolare il carattere tramite un array.

$(document).ready(function(){
	 //Inseriamo un un array gli ID, classi e tag di cui vogliamo ridimensionare i font
  //Mettiamo html or body se vogliamo rendere tutti i caratteri ridimensionabili:
  var section = new Array('span','.section2');
  section = section.join(',');

	 //Resettiamo il font-size
  var originalFontSize = $(section).css('font-size');
  $(".resetFont").click(function(){
  $(section).css('font-size', originalFontSize);
  });

  //Aumentiamo il font-size
  $(".increaseFont").click(function(){
  var currentFontSize = $(section).css('font-size');
  var currentFontSizeNum = parseFloat(currentFontSize, 10);
  var newFontSize = currentFontSizeNum*1.2;
  $(section).css('font-size', newFontSize);
  return false;
  });

  //Diminuiamo il font-size
  $(".decreaseFont").click(function(){
  var currentFontSize = $(section).css('font-size');
  var currentFontSizeNum = parseFloat(currentFontSize, 10);
  var newFontSize = currentFontSizeNum*0.8;
  $(section).css('font-size', newFontSize);
  return false;
  });
  });

Impostiamo adesso un pannello per passare da un font-size a un altro:

<div>
		<a class="increaseFont">+</a> |
		<a class="decreaseFont">-</a> |
		<a class="resetFont">=</a>
</div>
	<span>Questo font può cambiare di dimensione</span>
  <div class="section1">Questa sezione non cambia il font!</div>
  <div class="section2">Questa invece sì!</div>

Rimuovere una parola

Ecco il modo più semplice: usiamo le espressioni regolari:

var el = $('#id');el.html(el.html().replace(/parolaDaRimuovere+parolaDaRimuovere/ig, ""));

Ottimizziamo l’uso dei Plugin

I plugin di jQuery devono essere inclusi nella pagina principale dopo il core jquery.js, così:

<script type="text/javascript" src="jquery-core.js"></script>
<script type="text/javascript" src="jquery.plugin-1.0.js"></script>
<script type="text/javascript" src="jquery.plugin-2.4.js"></script>

Il metodo migliore però è quello di copiare tutti i file JavaScript in un singolo file e poi comprimerli con YUI e impacchettarli.

Aggiungere / inserire elementi HTML dentro un elemento

Il metodo .append() inserisce il contenuto specificato come l’ultimo figlio di ciascun elemento della collezione jQuery (per inserirlo come primo figlio, usare. .prepend()).

I metodi .append() e .appendTo() svolgono lo stesso compito. La principale differenza è nella sintassi, in particolare, nel posizionamento dei contenuti e di destinazione.
Con append(), l’espressione che precede il metodo di selezione è il contenitore in cui è inserito il contenuto. Con .appendTo(), al contrario, il contenuto precede il metodo, sia come espressione di selezione o di markup creati al volo, ed è inserita nel contenitore di destinazione. Ecco cosa scrivere:

$('#questoDiv').append("<b>testo inserito</b>");

..che equivale a:

$('<p>testo inserito</p>').appendTo('#questoDiv');

Aggiungere / inserire elementi HTML dopo un elemento

Dobbiamo usare .insertAfter(), oppure .after()

Rimpiazzare un <div> con jQuery

$('#questoDiv').replaceWith('<div>Altro div</div>');

Rimuoviamo un elemento dopo gli effetti Fadeout e Slideup

Combiniamo più effetti in jQuery per animare e rimuovere un elemento dal DOM:

$("#myButton").click(function() {
        $("#myDiv").fadeTo("slow", 0.01, function(){ //fade
            $(this).slideUp("slow", function() { //slide up
            $(this).remove(); //e rimozione dal DOM
        });
});
});

…alla fine: Javascript Error Checker!

Adesso che abbiamo tutti questi script da utilizzare nel nostro sito, come testarli? Il debug di script javascript possono essere molto lunghi in termini di tempo. Così, se non riusciamo a risalire a che cosa sta causando gli errori, è possibile utilizzare questo strumento online gratuito: JSLint

Articoli correlati:

1. jQuery SmoothScroll: effetto scorrimento verticale morbido!
2. jQuery: imparare le basi con toggle. Mostra e nascondi con stile!
3. CSS3 Columns e jQuery: layout multi-colonne ad altezza pari

Purtroppo, anche se alcune di esse appartengono già alle specifiche CSS 2.1, non sono supportate da nesusn browser IE. Ecco allora che ci vengono in aiuto alcune librerie JavaScript che uniformano il comportamento di IE ai browser più recenti.

IE7.js è una libreria JavaScript (100kb) per far sì che Internet Explorer 6+ si comporti come un browser standard-compliant. Essa risolve molti problemi legati a HTML, CSS e fa funzionare correttamente con IE5 e IE6 le PNG trasparenti.
Scarichiamola e scegliamo di includere il JavaScript che ci permette di aggiornare tutti gli IE alla versione 9, così:

<!--[if lt IE 9]>
  <script src="IE9.js"></script>
<![endif]-->

Pseudoclassi: sintassi

Tutte le pseudo-classi seguono questa sintassi:

elemento:pseudoClasse {
...
}

Alcune pseudo-classi fanno uso anche delle parentesi. Per esempio, la pseudo-classe :not() dichiara quale regola CSS non applicare. Ciò è utile quando si desidera applicare qualcosa a tutto tranne a un certa classe/ID. Per esempio, questa dichiarazione:

.miaClasse:not(div) {
 background:#CCC;
}  

imposta uno sfondo di colore #CCC per tutti gli elementi che non siano div.

Utilizzo delle pseudo-classi

Pseudo-classi correlate ai link

Queste pseudo-classi applicano degli stili ai diversi stati di un link. Ecco di seguito la lista completa e cosa possiamo ottenere:

• :link applica uno stile a un link non visitato
• :visited applica uno stile a un link visitato
• :hover applica uno stile su un elemento al passaggio del mouse
• :active applica uno stile a un elemento attivo. Per esempio, un link è attivo da quando ci si clicca a quando si rilascia il click

A questo riguardo occorre ricordare che l’ordine sopra indicato non è casuale: in fatti, ogni pseudo-classe link-related ha una sua specificità.
Esiste una sorta di short-hand per ricordarsi la corretta successione: prendendo la lettera iniziale di ogni stato si ottiene "LVHA", che può essere ampliato a "LoVe HAte".

Pseudo-classi correlate a Input & link

• :focus applica uno stile a un elemento in uso. Per esempio, quando si scrive dentro una textarea, in quel momento essa è in uso
• :target se si dispone di un URL tipo index.html#about, questo permetterà di applicare i CSS per l’elemento con id="about"
• :enabled seleziona tutti gli elementi input in stato enable
• :disabled seleziona tutti gli elementi input in stato disabled
• :checked controllato nelle caselle di immissione selezionate
• :indeterminate seleziona i radio e i check-box, quando essi non sono né selezionata né non selezionata
• :required seleziona gli elementi input che sono required
• :optional seleziona gli elementi input che sono optional
• :invalid seleziona input non validi
• :in-range selziona elementi che sono in un range (da utilizzare con input type="range" in HTML5)
• :out-of-range seleziona elementi fuori dal range
• :default seleziona l’elemento di default, per esempio, in un form il bottone submit
• :valid seleziona un campo input valido (HTML5)

Pseudo-classi correlate alla posizione/numero

Ecco un esempio:

• :root applica uno stile CSS all’elemento radice, ossia il tag <html> in un documento HTML
• :first-child applica uno stile al primo figlio di un elemento
• :last-childapplica i CSS all’ultimo elemento contenuto. Esempio div p:last-child seleziona l’ultimo paragrafo d un div
• :nth-child(N) seleziona elementi numerati, su base 1. Per esempio, p:nth-child(3) seleziona l’elemento p che è il terzo figlio. Si possono anche aggiungere regole, per esempio p:nth-child(2n+1), dove n è il numero di partenza partendo da 0 e viene incrementato di 1. Perciò, questa regola seleziona tutti gli elementi pari (odd): in questo caso è equivalente a scrivere nth-child(odd), così come per i dispari si scrive nth-child(even)
• :nth-of-type(N) applicare i CSS a un elemento numerato di un certo tipo. Per esempio: div:nth-of-type(2) seleziona il secondo di quel tipo
• :nth-last-of-type(N) seleziona un elemento in base alla sua posizione, per esempio nth-last-of-type(4)
• :first-of-type applica i CSS solo al primo alemento di quel genere. Per esempio, se ci sono due div consecutivi, applica la regola solo al primo
• :last-of-type Seleziona l’utlimo elemento di un genere
• :only-child seleziona un elemento solo se è l’unico figlio del contenitore padre
• :only-of-type seleziona un elemento solo se esso è l’unico nel suo genere contenuto nell’elemento padre

Pseudo-classi relazionali

• :not(elemento | classe) applica una regola CSS solo agli elementi che non sono specificati tra le parentesi
• :empty applica i CSS a un elemento solo se è vuoto

Pseudo classi e paseudo elementi legati al testo

Pseudo-elementi

• :first-line definisce lo stile CSS della prima riga di un elemento
• :first-letter definisce lo stile CSS del primo carattere di un elemento

Pseudo-classi

• :lang() applica uno stile a un elemento che usa una lingua specifica, per esempio :lang(en) per l’inglese. È quindi possibile mettere lang = "en" in un tag HTML e impostare gli stili solo per esso
• ::selection permette di cambiare lo stile del testo selezionato nel browser
• :read-only seleziona gli elementi che sono read-only
• :read-write seleziona la parte editabile in un elemento

Content-related pseudo-elementi

• :before è in grado di aggiungere contenuti prima di un certo elemento
• :after è in grado di aggiungere contenuti, dopo un certo elemento

jQuery: pseudo-selettori CSS3

jQuery permette di usare tutti questi selettori, per esempio:

• :first funziona come :nth-child(1)
• :eq(X) è uguale a :nth-child(X)
• :contains('text')
• :lt(X)come :nth-child(-n+X), seleziona “i primi X elementi”
• :gt(X) è come :nth-child(n+X), seleziona tutto tranne “i primi (X-1) elementi”
• :even è come :nth-child(even) o :nth-child(2n)
• :odd è uguale a :nth-child(odd) o :nth-child(2n+1)
• :has(S) controlla se l’elemento contiene un certo discendente

Oltre a questi ve ne sono molti altri.

Selettori di discendenza

C’è una differenza tra figli e discendenti?

Vediamo come impostare degli stili CSS per capire come funzionano il combinatore figlio diretto, il combinatore fratello adiacente, e il combinatore fratello di pari livello.

Child: combinatore "figlio diretto"

Nel codice sottostante, dichiariamo una discendenza generica (Combinatore del discendente – Descendant), e di seguito, una diretta.

#child  p { color: #000;font-weight:normal; }
#child > p { color: #F00;font-weight:bold; }  

Adjacent sibling: combinatore "fratello adiacente"

Ecco come funziona adjacent sibling: in pratica appica lo stile all’elemento, se e solo se, esso è immediatamente successivo altro elemento indicato.

p + p { font-size: smaller; }
/* Applica lo stile solo al paragrafo che ne segue un altro (adiacente) */
#intro + ul { margin-top: 0; }
/* Applica lo stile solo alla lista che segue direttamente un elemento con  ID intro */

General sibling: combinatore "fratello generico"

General sibling è molto simile ad adiacent sibling: la differenza è che l’elemento che viene selezionato non ha bisogno di essere immediatamente successivo al primo elemento, ma può apparire ovunque dopo di esso. Ecco un esempio di general sibling:

p ~ p { background-color:#0F0; color:#FFF; padding:10px; }

Articoli correlati:

1. CSS3: effetto foto piegata!
2. Tabelle HTML: come usarle, quando usarle
3. CSS3: compatibilità cross-browser…da oggi!

Eccoli riassunti:

• i visitatori devono avere Flash e JavaScript installati e attivati: altrimenti verrà mostrato il testo con l’eventuale presentazione CSS
• sIFR non offre piena compatibilità per dispositivi mobili quali PDA e telefoni cellulari
• il suo utilizzo potrebbe rallentare il caricamento del sito

sIFR: come funziona

Il principio di funzionamento di sIFR è un misto tra CSS, Javascript e Flash. Vediamolo in dettaglio:

• Javascript, se abilitato, verifica la presenza del Flash Player
• In caso positivo, lo script individua gli elementi definiti da un sorta di selettore CSS passato come argomento della funzione principale
• Questi elementi vengono nascosti da Javascript, e il loro contenuto è passato attraverso le flashVars ad un filmato Flash che incorpora un font specifico
• Il filmato Flash, contenente il testo da rimpiazzare (che sarà selezionabile con il mouse) verrà quindi mostrato, cercando di occupare la stessa area del testo che sostituisce (da qui il termine "scalable").

sIFR: dove usarlo

Con sIFR potremo rimpiazzare titoli, link (anche con effetto hover) e intere sezioni di testo, dato che ha il supporto per il testo multi-linea. Andrebbe però usato esclusivamente per i titoli, e preferibilmente andrebbe evitato sui link. Questi infatti vengono "mascherati" da Flash, e non sarà possibile con sIFR attivo controllare dove porta un link sulla barra di stato del browser.

sIFR: file necessari

Per prima cosa occorre scaricare l’utlima versione di sIFR o la versione ufficiale 2.0.7. Per questo tutorial useremo la versione sIFR 3 r419, contenente solo i file di cui abbiamo bisogno:

• css/sIFR-print.css, che contiene gli stili per la stampa
• css/sIFR-screen.css, che contiene gli stili per il Web
• js/sifr.js, che contiene il "core" di sIFR (da non modificare)
• js/sifr-config.js, che serve per definire e attivare sIFR
• flash/sifr.fla (con i relativi file .as), che serve per inserire il font

Di seguito tutte le risorse usate per completare l’esempio, e una anteprima del risultato.

sIFR: impostare Flash per inserire il font

Per prima cosa occorre procurarsi il font da includere nel file swf. Per questo esempio useremo Fontin, liberamente utilizzabile.
Per formattare correttamente i diversi stili, il font deve essere OpenType TT, cioè avere tutti gli stili inclusi.
Scarichiamolo e installiamolo nel sistema operativo.
Fatto questo, apriamo con Flash il file sifr.fla: il file è suddiviso in livelli. Facciamo doppio clic sulla stage per visualizzare il testo Bold, Italic e Normal.
Clicchiamo poi nella riga di testo: nel pannello Proprietà scegliamo Fontin. Per includere gli stili, applichiamoli rispettivamente al testo Bold, Italic e Normal.
Senza modificare altro esportiamo il filmato: File->Export->Export Movie, facendo attenzione a selezionare Filmato SWF tra le impostazioni. Chiamiamo il filmato fontin.swf

sIFR: caricare i file in pagina

All’interno del tag head inseriamo i collegamenti ai file necessari:

<link rel="stylesheet" href="css/sIFR-screen.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/sIFR-print.css" type="text/css" media="print" />
<script src="js/sifr.js" type="text/javascript"></script>
<script src="js/sifr-config.js" type="text/javascript"></script>

sIFR: configurare e attivare il font

Per configurare sIFR apriamo il file vuoto sifr-config.js.
Quello che ci accingiamo a fare è definire il nome del font e il link al file flash:

var fontin = {
   src: 'flash/fontin.swf'
};

Abbiamo definito una variabile che si collega al nostro file Flash. Questo comando non fa ancora niente, fintantoché non la attiviamo digitando il comando di attivazione:

sIFR.activate(fontin);

Adesso abbiamo bisogno di definire quale testo deve essere sostituito con il testo in flash. Per fare questo, usiamo il comando di sostituzione in sIFR3:

sIFR.replace(fontin, {
   selector: 'h2'
});

Abbiamo appena sostituito tutto il testo contenuto nel tag h2, ma possiamo sostituire il testo dentro qualsiasi tag, anche se questo, come detto prima, potrebbe rallentare sensibilmente il caricamento del sito.

sIFR: applicare gli stili

Ora che sIFR3 funziona, abbiamo bisogno di applicare gli stili, cosa che facciamo modificando di nuovo il file sifr-config.js file e il file sIFR-screen.css.
Apriamo il file sIFR-screen.css: non modifichiamo le righe di codice che si trovano dopo /*---- sIFR ---*/, e occupiamoci di ciò che si trova dopo /*---- Header styling ---*/.
Specifichiamo la classe .sIFR-active e impostiamo la visibilità su "nascosto", per rendere visibile solo il testo rimpiazzato:

/*---- Header styling ---*/

.sIFR-active h2 {
  visibility:hidden;
  font-size:40px;
  padding:0;
  margin:0;
}

Adesso andiamo a modificare il colore del font, il colore di sfondo e il line-height, ma non solo.
Per modificarle, dobbiamo inserirle nel file sifr-config.js, in questo modo, richiamando la funzione CSS, facendo attenzione alla posizione delle virgole:

sIFR.replace(fontin,{
  selector: 'h2'
  ,css: [
  	'.sIFR-root { color: #FAC421; background-color: #FFFC7F; }'
 ]
});

Ecco a cosa fare attenzione: i comandi sono posti tra " ‘ "e una "," deve essere aggiunta dopo ogni comando, fatta eccezione per l'ultimo. Una cosa importante è che bisogna scrivere i codici dei colori nella loro forma completa, cioè #FFFFFF, non #FFF. Inoltre, come anticipato sopra, per ottenere la proprietà line-height, dobbiamo utilizzare leading, oppure ricorrere ai metodi JavaScript.

sIFR: modifiche avanzate sul testo

Adesso ci accingiamo a settare il file sifr-config.js in modo che il testo assuma comportamenti personalizzati, per esempio, cambiare colore del carattere e dello sfondo, o applicare i filtri (di Flash).
Applichiamo le modfiche a una classe CSS chiamata multicolor associata a un altro titolo, questa volta h3:

sIFR.replace(fontin,{	selector: 'h3.multicolor'
	,css: [
    	'.sIFR-root { color: #775555; background-color: #010101; }'
        ,'em { font-style: italic; color: #444477; }'
        ,'strong { color: #44aa44; }'
        ,'.bold { font-style:bold; text-decoration:underline; }'
        ,'a { color: #aa4444; }'
        ,'a:hover { color: #bbbb44; }'
    ]
});

Facciamo la stessa cosa con la classe glow e shadow. Nell’esempio vediamo cosa succede.

Come potete notare, quando clicchiamo sul testo rimpiazzato da sIFR, si forma un bordo tratteggiato. Possiamo rimuoverlo agendo sul tag object, così:

.sIFR-active object  {
	outline:none;
	display: block;
}

Articoli correlati:

1. GDI++: come installare il font rendering del Mac su Pc
2. AI to Canvas: utilizzare subito HTML5 Canvas!