Articoli con Tag ‘Stile’

Very short trick: CSS condizionali e ottimizzazione

L’uso delle condizioni all’interno del browser viene spesso utilizzato per decidere quale foglio di stile caricare in base al tipo di browser. Ad esempio possiamo utilizzare questo codice per caricare un particolare foglio di stile quando il browser è Internet Explorer 6:

Continua...

WordPress: personalizzare la navigazione tra i post

WordPress mette a disposizione numerose funzioni per spostarsi tra i vari post e pagine in avanti ed indietro. Queste sono usate all’interno dei temi, spesso in modo del tutto interscambiabile, anche se contengono alcune differenze. Tutto questo, a dire il vero, creo non poca confusione al momento della scelta della funzione da usare. Eccone alcune note:

Continua...

Very short trick: disabilitare il ridimensionamento di una textarea su Safari

In tutti i browser sviluppati partendo dal motore di rendering WebKit (come apputo Safari o Google Chrome), i campi textarea mostrano, in basso a destra, la caratteristica funzionalità di resizing. Se questa particolarità può risultare davvero utile in certi casi, in altri si trasforma in un elemento fastidioso.

Continua...

Very short trick: come centrare elementi sulla pagina, anche su IE5

Non è che io me la prendo sempre con Internet Explorer, è solo che ogni dannata cosa positiva dello sviluppo Web (HTML e CSS) sembra non funzionare con il browser – ancora – più diffuso (un giorno qualcuno mi spiegherà il perchè). Un metodo assai comodo per posizionare un elemento al centro della finestra del browser è quello di sfrutture la proprietà auto dello stile margin; ad esempio ecco come posizionare un div al centro dello schermo:

Continua...

Come sopportare IE6 e vivere felici

Trovo sempre un certo “malore” quando affronto l’argomento “compatibilità tra i browser”. Inoltre, e devo ancora capirne il vero motivo, tra tutti i browser che conosco quello più “antipatico” rimane sempre lui: Microsoft Internet Explorer 6! Purtroppo la release 6 di IE è ancora in circolazione e sono frequenti le segnalazioni di problemi nella visualizzazione delle pagine.

Continua...

Very short trick: versatilità delle classi CSS

I più esperti lo sapranno già, tuttavia mi viene spesso chiesto che differenza c’è tra class e id nei fogli di stile CSS. Una panoramica su alcune differenze e avvertenze è possibile trovarla in Classi e ID nei CSS, tuttavia una caratteristica utile, che distingue class da id, è la possibilità di usare classi multiple.

Continua...

jQuery: bordi rotondi sulle immagini per sovrapposizione

A causa dei diversi rendering tra i vari browser, che vedono sicuramente Microsoft Internet Explorer in testa, bisogna sempre ricorrere ad artifizi particolari per applicare effetti che, ormai, dovrebbero rappresentare uno standard. I pluri-discussi bordi arrotondati sono un classico esempio del “disastro” prodotto dalla completa incapacità di realizzare uno standard serio sul rendering delle pagine HTML/CSS. Esistono in rete numerosissime soluzioni che permettono di ottenere “effetti” (effetti che esonerano dall’HTML attuale come bordi arrotondati, effetti ombra, riflessioni, etc…) con patch sui fogli di stili, particolari trucchi con l’uso di div innestati, librerie Javascript, uso delle canvas, etc…
A titolo puramente didattico vorrei illustrare un’ulteriore tecnica (cross-browser) per applicare dei bordi arrotondati a delle immagini:

Demo e sorgenti

Continua...

WordPress: modifcare AdminBigWidth per gli sviluppatori

AdminBigWidth è un Plugin per WordPress in grado di impostare l’area di lavoro dell’amministrazione a tutto schermo. È un plugin davvero semplice e banale, infatti il suo codice non fa altro che modificare la classe CSS .wrap:

1
2
3
4
function AdminBigWidth () {
    echo '<style type="text/css">.wrap{max-width:none}</style>';
}
add_action('admin_head','AdminBigWidth');

Per chi come me usa l’editor di WordPress in modalità HTML potrebbe risultare utile impostare dei caratteri a spaziatura fissa, come il Courier, invece del font proposto di default. In questo modo, almeno per gli sviluppatori, risulta più facile allineare codici sorgenti. Per fare questo basta aggiungere, sullo stile di AdminBigWidth, una nuova impostazione CSS che si rifletta sull’editor quando è in modalità HTML. Si potrebbe scrivere un Plugin (di due righe) per fare questo, tuttavia è meglio sfruttare proprio il codice di AdminBigWidth, così da evitare un ulteriore carico dovuto all’ennesimo Plugin:

1
2
3
4
function AdminBigWidth () {
  echo '<style type="text/css">.wrap{max-width:none}#editorcontainer #content{font-family:"Courier New", Courier, monospace}</style>';
}
add_action('admin_head','AdminBigWidth');

Continua...

L’arte di commentare: consigli utili

Se un “esempio” può valere più di mille parole, per un programmatore un “commento” può valere ore e ore di lavoro! Commentare il codice è spesso un’operazione noiosa e, nel momento della stesura del codice, sembra sempre un’attività inutile. Al contrario, soprattutto quando si riprendono vecchi codici, l’aver inserito i giusti commenti può risultare infinitamente utile per ricostruire percorsi mentali ormai dimenticati. Fortunatamente, per chi come me sviluppa sul Web, si ha l’enorme vatanggio di poter commentare quasi tutto il codice allo stesso modo! Il doppio slash (//) o il contenimento tramite slash asterisco e asterisco slash (/* e */) è supportato praticamente da tutti i lunguaggi di sviluppo di uso comune, derivati in pratica tutti dal C: Javascript, Actionscript, PHP, …

Continua...


Stop SOPA