CSS clip e thumb image

Di che parliamo? La proprietà css clip, applicabile solamente ad elementi posizionati in assoluto, consente di specificare cosa vedere o […]
CSS clip e thumb image

Di che parliamo?

La proprietà css clip, applicabile solamente ad elementi posizionati in assoluto, consente di specificare cosa vedere o meno di un particolare elemento. E’ una di quelle proprietà molto interessanti ma poco usate, forse per la poca chiarezza che c’è al riguardo.

Chi interpreta cosa?

La proprietà in questione, nella sua forma standard, viene interpretata correttamente da tutti i browser tranne che da internet explorer versione 6 e 7, mentre la forma ormai deprecata senza l’utilizzo delle virgole viene interpretata anche dal magico IE.

#element{
    /*Forma Standard*/
    clip: rect(20px, 300px, 200px, 100px);

    /*Forma Deprecata*/
    clip: rect(20px 300px 200px 100px);
}

Validiamo il codice

A dimostrazione di quanto appena detto, nella validazione della precedente porzione di codice, in un italiano non proprio perfetto :), ci viene comunicato che come separatore è necessaria una virgola. Ma non giungere a conclusioni affrettate, la storia non finisce qui.

validazione clip

Cosa ci dice il W3c

Nasce nuovamente l’esigenza di dover scegliere se restare aderenti agli standard oppure infrangere le regole del w3c ed utilizzare la proprietà clip nella sua forma deprecata. Ancora una volta IE ci mette nella condizione di dover scegliere. Spesso infatti non esistono alternative valide per colmare le lacune e siamo così “costretti” a inficiare la validazione a favore di una soluzione cross-browsing. In questo particolare caso però secondo le specifiche CSS 2.1 si evince che:

“Authors should separate offset values with commas. User agents must support separation with commas, but may also support separation without commas (but not a combination), because a previous revision of this specification was ambiguous in this respect.” … ovvero … “Gli Autori dovrebbero separare i valori di offset (scostamento) con le virgole. I Browser devono supportare la separazione dei valori per mezzo delle virgole, ma possono anche supportare tale separazione senza l’uso delle virgole (ma non con un uso combinato), in quanto la precedente revisione di questa specifica non è stata chiara al riguardo.”

Per curiosità sono andato a recuperare la specifica della precedente revisione 2.0 dei CSS per la proprietà clip, ed effetticamente, ho appurato che vige un alone di mistero riguardo l’uso o meno delle virgole, in quanto in primo luogo, non viene espressamente detto che vanno usate e in piu nella dichiarazione vera e propria vengono omesse! Ti cito la parte di interesse:

“In CSS2, the only valid value is: rect ([top] [right] [bottom] [left]) where [top], [bottom], [right], [left] specify offsets from the respective sides of the box.”

In teoria come si usa?

Chiarita questa fondamentale questione (per questa volta perdoniamo il team di IE 🙂 ), vediamo nel concreto come utilizzarla. Nei CSS 2.1, L’unico valore valido per la proprietà clip è “rect”(x, x , x ,x), dove ognuna delle 4 incognite rappresenta un offset (scostamento) dal suo bordo in senso orario, come rappresentato in figura.


In pratica come si usa?

Il codice seguente rappresenta un caso concreto di utilizzo. L’immagine è posizionata in assoluto perchè ad essa viene applicato il clip; pongo di conseguenza in relative il contenitore e gli fornisco una larghezza e un’altezza. il contenitore può essere usato per inserire grafica aggiuntiva all’immagine, in questo caso gli ho attribuito un padding e un bordino, ma le varianti possono essere veramente tante. Infine, se nella miniatura dovete mostrare quanta piu immagine originale possibile, allora impostate la sua width in modo che si avvicini a quella del contenitore, altrimenti se dovete creare dei ritagli veri e propri potete anche non impostare la larghezza; stesso discorso per left e top. Con la pratica capirete voi stessi dove andare ad intervenire nel codice.

<div class="boxphoto">
    <img alt="mare" src="http://www.laboratoriocss.it/wp-content/uploads/Schermata-2011-05-03-a-23.40.46.png">
</div>
.boxphoto{
    border: 1px solid #CCCCCC;
    height: 120px;
    padding: 5px;
    position: relative;
    width: 310px;
}
.boxphoto img{
    position:absolute;
    clip: rect(55px 380px 175px 71px);
   /* left:-65px;
    top:-50px;
    width: 310px; */
}

e il risultato sarà proprio il seguente:

mare

Alternativa al Clip

Se volessi invece del tutto evitare la proprietà clip perchè “aborri” l’utilizzo di css non conforme agli standard per far contento IE, posso mostrarti come sia possibile realizzare delle miniature di immagini tramite css. Il crop in php sarebbe la soluzione l’ideale, ma in assenza di un programmatore a tua disposizione potrai tranquillamente ripiegare su questa. Questo metodo ci consente tramite due div innestati, di creare miniature di immagini tutte alte e larghe uguali, cosi nel caso di una gallery, da non avere problemi nel floating.

.container_boxphoto {
    border:1px solid #ccc;
    width:120px;
    float:left;
    margin:10px;
}
.container_boxphoto .boxphoto {
    border:5px solid white;
    height:80px;
    overflow:hidden;
}
.container_boxphoto .boxphoto img {
	width:120px;
}

Il contenitore piu esterno ha un bordo di un pixel decorativo, ma avremmo potuto mettere qualsiasi altra cosa. Il contenitore padre dell’immagine ha un overflow per impedire alla stessa di fuoriuscire ed in più ha un bordo di 5 pixel che funge da padding, in quanto se avessimo usato del padding al div.boxphoto, l’overflow lo avrebbe ignorato non consentendoci di creare quella spaziatura bianca di 5 pixel.

mare
mare
mare
mare
mare
mare

Vuoi cimentarti?

Il risultato finale potrebbe essere quello appena visto e dico potrebbe perchè questa è solo una delle tanti varianti grafiche che puoi ottenere. A te lascio la sperimentazione e la creatività di elaborare altre varianti sulla base di quella proposta.

  • scusate si può usare anche per acustica e supermobili questa funzione? ❗ 😯

  • Ciro

    Ottimo Articolo! 🙂

  • LaboratorioCSS

    @Quita … certamente, chiedi ad Antonio e ti sarà dato!!! 😉

    @Ciro … Grazie mille, spero sia utile per fare un po di chiarezza in merito!!

  • Marco

    Spettacolo!

  • Pingback: Una thumbnail gallery in HTML, CSS e jQuery | Laboratorio CSS()

  • Discus

    Certo che sti qua del w3c non sanno più cosa inventarsi eh

Search
Tags
Seleziona rubrica
Seleziona rubrica
Codice Github