Scenario: ser­viamo una pagina in https e vogliamo inse­rire un link ad una risorsa esterna al sito. Come fac­ciamo? Sempre con le URL rela­tive ma spe­ci­fi­cate in modo leg­ger­mente diverso.

Di solito si usano que­ste due solu­zioni: <img src='image.png' /> per le risorse interne al sito e <img src='http://host/image.png' /> per quelle esterne. Ma esi­ste una terza pos­si­bi­lità: <img src='//host/image.png />.

Qual’è il van­tag­gio? Che, come nello sce­na­rio della domanda ini­ziale, tutte le risorse da un sito esterno in una pagina in https ver­ranno cari­cate con que­sto pro­to­collo, men­tre in una pagina nor­male verrà usato l’http. A che serve? Ad evi­tare gli avvisi ter­ro­ri­stici di Explorer quando ven­gono cari­cate risorse in http in una pagina https.

Bel truc­chetto, vero?

Via: Stringify

In que­sto arti­colo viene pre­sen­tato un sistema per sem­pli­fi­care, o forse sarebbe meglio dire com­pat­tare, un form complesso.

L’idea di fondo è quella di ridurre le diverse sezioni del form in wid­get espan­di­bili e con­trai­bili a pia­cere per ridurre al minimo lo spa­zio occupato.

A mio parere si sor­vola troppo sui difetti di una solu­zione del genere che sono due: le opzioni dispo­ni­bili non sono tutte imme­dia­ta­mente visi­bili e il numero di click neces­sari per sele­zio­nare un’opzione. So benis­simo che è pro­prio lo scopo dell’articolo quello di mostrare un modo per ridurre l’affollamento dello schermo ma non dob­biamo dimen­ti­care che ogni solu­zione ha i suoi pro e contro.

Nel com­plesso rimane comun­que un approc­cio piut­to­sto effi­cace, cal­co­lando il fatto che le eti­chette rias­sun­tive pre­sen­tate quando l’elemento è con­tratto pos­sono for­nire infor­ma­zioni sulla sele­zione attiva in quel momento.

Che ne pen­sate? Avete usato solu­zioni del genere? In par­ti­co­lare per appli­ca­zioni web che pre­ve­dono inse­ri­menti dati massicci?

Una volta che sap­piamo qual’è la dimen­sione di default dei font nei bro­w­ser, è facile con­ver­tire le misure da px ad em; ma pos­siamo fare meglio se dele­ghiamo il lavoro sporco a LaunchBar.

Il trucco, se così si può chia­mare, con­si­ste nell’uso dei tem­plate di ricerca, com­bi­nato con l’uso dei comandi via URL, che offre que­sta uti­lity. LaunchBar, infatti, espone alcune delle sue fun­zio­na­lità attra­verso delle URL. Ad es. se regi­striamo come tem­plate di ricerca la stringa x-launchbar:select?file=/Applications, LaunchBar aprirà la car­tella Applications; allo stesso modo l’URL x-launchbar:calculate? può essere usata per ese­guire dei sem­plici calcoli.

E allora, quale comando pos­siamo usare per la con­ver­sione da px ad em? Eccola:

x-launchbar:calculate?\
    argument=*&\
    expression=1/16*@&\
    title=@px%20=&\
    result=@em

I back­slash non fanno parte della stringa, li ho messi solo per ren­derla più leggibile.

Spero possa essere utile. Ovviamente se avete delle per­so­na­liz­za­zioni che volete con­di­vi­dere, fatemi sapere!

So che il titolo del post non è molto invi­tante ma volevo solo segna­lare que­sto arti­colo su :target.

Questo pseudo selec­tor si attiva quando nell’URL com­pare l’id di un ele­mento. Ad es. se l’URL è http://my.web.net/page.html#sect1, abbiamo un para­grafo con quell’id e nel foglio di stile abbiamo una regola del tipo: p:target { background-color: silver; }, allora quel para­grafo avrà quel colore di sfondo.

L’uso di :target mostrato nell’articolo è un po’ più inte­res­sante del mio esem­pio: ven­gono mostrati esempi di tabs e ani­ma­zioni (ben­tor­nate, gif ani­mate!) senza una riga di JavaScript.

Creo lo spe­ri­men­terò quanto prima. Voi l’avete già usato?

Su 24 Ways tro­vate un arti­colo di Eric Meyer sullo sty­ling dia­gno­stico, già segna­lato. Dovrebbe trat­tarsi di una ver­sione rivi­sta e cor­retta, anche se non in modo sostanziale.

Stavo cer­cando di tro­vare un modo per visua­liz­zare l’attributo cite, via CSS, che ho usato nel post di ieri ma non ho tro­vato una solu­zione soddisfacente.

L’idea era una cosa del tipo:

blockquote:after {
con­tent: ““attr(cite)””;
}

Funzionicchia, ma…

Il primo pro­blema è che se l’url è troppo lunga rompe il lay­out; il secondo, che nasce per rime­diare al primo, è che non pos­siamo inse­rire via CSS un href; infine, il testo gene­rato non è sele­zio­na­bile dal bro­w­ser, vani­fi­cando l’utilità del tentativo :-(

Qualcuno ha suggerimenti?

Yahoo! ha rila­sciato YUI 2.4, in cui la novità più inte­res­sante è l’implementazione dei selec­tor CSS 3 via JavaScript.

Prima o poi rifarò que­sto sito usando quello libre­rie… Nel frat­tempo credo che pro­verò ad usare il rich text edi­tor in un nuovo pro­getto che (spero) par­tirà il pros­simo anno. Sono curioso…

Via Laburno, apprendo di CSS Text Wrapper, un tool per creare – o simu­lare? – box di testo non rettangolari.

L’idea di base sem­bra essere simile a quella illu­strata in “Sliced and Diced Sandbags”.

Se c’è una cosa che sim­bo­leg­gia l’aleatorietà del web, a mio parere, è il com­por­ta­mento dei vari bro­w­ser nel ren­de­ring del testo: ognuno ha le sue imper­fe­zioni e cer­care di otte­nere un risul­tato omo­ge­neo è un’impresa.

Questo arti­colo di A List Apart offre una solu­zione, basata su un’indagine siste­ma­tica che prende le mosse dal lavoro fatto da Owen Briggs qual­che anno fa.

La linea guida gene­rale è quella di spe­ci­fi­care la dimen­sione nel body in per­cen­tuale e tutto il resto in em. Escludendo Safari 2 con i mono­space i risul­tati sono più che buoni.

Questo arti­colo su 24 ways descrive una solu­zione che mitiga que­sti pro­blemi, tra­mite uno script chia­mata SuperSleight.
Per quanto sia ten­tato di rubri­care il sup­porto a IE6 come supe­rato, visto il rila­scio di IE7 da un anno, la verità è che non è ancora arri­vato il momento. Di con­se­guenza arti­coli come quello che vado a segna­larvi hanno ancora un loro perché.

Tradizionalmente, per poter usare PNG tra­spa­renti con IE6, si faceva ricorso alla pro­prietà filter che, inu­tile dirlo, era pro­prie­ta­ria di Microsoft. Inoltre que­sta solu­zione ha diversi difetti:

• le imma­gini in back­ground non pos­sono essere posi­zio­nate o ripetute;
• pro­blemi con i link e con i form che si tro­vano sopra l’immagine;
• l’implementazione è comun­que laboriosa.