Traduzione dell’articolo “UNDERSTANDING THE CSS CLIP PROPERTY” del blog “CODROPS“
Oggi ci accingiamo a fare qualcosa di diverso: scavare in profondità una singola proprietà CSS.
La proprietà è “clip”.
Sono piuttosto sicuro che alcuni di voi non sanno nemmeno che c’è un proprietà CSS chiamato clip dal momento che probabilmente è la proprietà meno usata in tutto il mondo.
Non è un grosso problema ragazzi, copriremo praticamente tutto ciò che dovete sapere su di essa.
La proprietà clip mira a definire quale parte di un elemento che si desidera visualizzare.
Potreste aver sentito questa cosa come “crop”.
Ci sono un sacco di plugin JavaScript in giro per ritagliare un elemento, ma in realtà si può fare praticamente la stessa cosa con la proprietà CSS clip. Probabilmente, con alcune limitazioni del caso. Daremo un’occhiata a loro più tardi.
SINTASSI
Iniziamo subito con la sintassi della proprietà clip che non è solo un po ‘ strana ma anche probabilmente difficile da capire a prima vista. Si consideri il seguente esempio: e un’occhiata al loro seguito.
.my-element {
position: absolute;
clip: rect(110px, 160px, 170px, 60px);
}
La prima cosa che è necessario tenere presente: la proprietà clip funziona solo su elementi con “posizione: absolute” o “posizione: fixed”. Non funzionerà con posizionamento relativo o statico.
Per essere onesti, io non so davvero perché ma è così. Almeno, non ho trovato nulla sul web sull’argomento così se si desidera condividere alcune conoscenze, fatelo.
Come ho detto su Twitter un paio di giorni fa — e come si potrebbe pensare, questo è un enorme svantaggio per la proprietà clip.
Tuttavia, potrebbe essere interessante sperimentare con la proprietà clip e trovare alcuni casi di utilizzo recenti. Ancora con me? Grande, bene analizziamo la sintassi.
La proprietà clip accetta solo tre valori diversi:
- auto: questo è il comportamento predefinito.
- inherit: Beh, eredita il valore di clip dal “padre”.
- una funzione, attualmente solo “rect()”.
clip: { shape | auto| inherit } ;
Nella maggior parte dei casi, si desidera utilizzare la funzione “shape”.
Spero che un giorno avremo accesso a più shape (come “circle()” per esempio) ma per oggi, questa è l’unica cosa che possiamo fare.
Ma non ti preoccupare, noi ci possiamo fare cose molto carine con lei.
LA FUNZIONE RECT()
Ora, approfondiamo la sintassi “rect()”. Richiede quattro valori di lunghezza, separati da virgole: alto, destra, inferiore e sinistro. Come per il padding o il margin, sono in senso orario.
clip: rect(<top>, <right>, <bottom>, <left>);
Ora fate attenzione perché può essere difficile. Sia la parte superiore e i valori di fondo definiscono l’offset dal bordo superiore e la parte sinistra e destra i valori l’offset dal bordo sinistro.
Facciamo un piccolo esempio per chiarire le cose. Si prega di considerare il seguente CSS:
clip: rect(40px, 260px, 150px, 80px);
Questo significa che vogliamo mantenere la porzione dell’elemento tra 40 e 150px verticalmente e tra 80 e 260px orizzontalmente. Se non è ancora chiaro, si prega di avere uno sguardo all’immagine seguente.
Una volta che hai capito come funziona la funzione “rect()”, è abbastanza facile da usare la proprietà clip, ma può essere molto confusa, all’inizio.
Ora una domanda veloce per vedere se tu hai appreso la proprietà clip.
Diciamo che ho un 400px (larghezza) e 200px (altezza).
Ora voglio rimuovere 50px da destra dell’elemento, 10px dalla parte superiore e 30px dal basso.
Quale delle seguenti linee è quello che devo usare?
- clip: rect(50px, 30px, 350px, 70px);
- clip: rect(0, 10px, 30px, 50px);
- clip: rect(10px, 50px, 30px, 0);
- clip: rect(50px, 30px, 10px, 10px);
- clip: rect(10px, 350px, 170px, 0);
Continua a leggere per la risposta!
La risposta corretta è il quinto: clip: rect (10px, 350px, 170px, 0);.
Assicurati di controllare questo JSFiddle per avere una spiegazione visiva.
Complimenti se fosse corretto.
VARIE
OK, ora abbiamo appreso gli utilizzi di base della proprietà clip.
Penso che ci siano alcune altre cose che volete sapere su di esso.
In primo luogo, la funzione “rect()” accetta auto come un valore per ciascuno dei quattro parametri.
Fondamentalmente significa “100 %”. Diciamo che è come se fosse
rect (0, 50px, 50px, 0)
e si desidera visualizzarla in full size (100 × 100 diciamo).
È possibile sia fare
rect (0, 100px, 100px, 0)
che
rect (0, auto, auto, 0)
In secondo luogo, poiché la funzione rect() richiede valori di lunghezza per ogni parametro, significa che è possibile animare con le transizioni CSS o animazioni CSS.
Questa è un’ottima notizia per rendere effetti più “dolci”. Naturalmente non si può animare con il valore “auto” poichè non è un valore numerico.
In terzo luogo, i valori di percentuale per la funzione rect() non sono supportati. Peccato perché non è possibile renderlo responsive.
BROWSER SUPPORTATI
Probabilmente sarete sorpresi di sapere che il supporto del browser per la proprietà clip è molto buona (secondo MDN)!
| Feature | Chrome | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Support | 1.0 | 1.0 | 4.0 | 7.0 | 1.0 |
| 8.0 Sintassi della virgola supportata in questa versione.. |
Sì, avete letto bene: Internet Explorer 4! Ma, fino a Internet Explorer 8, è necessario utilizzare la vecchia sintassi che richiede quattro valori rect() separati da spazi invece di virgole. Va bene nessun grosso problema, che dire di questo?
.my-element {
position: absolute;
clip: rect(10px 350px 170px 0); /* IE4 to IE7 */
clip: rect(10px, 350px, 170px, 0); /* IE8+ & other browsers */
}
DEMO
Per rendere le cose un po’ più chiare, ho fatto due demo.
Il primo è solo un piccolo esempio della proprietà clip. In questa demo, ho usato un paio di cose:
- La proprietà clip (oh, davvero?)
- Transizioni CSS; come abbiamo visto in precedenza, i valori sono animabili.
- Un selettore di pari livello (~ o +)
Che cosa succede? In un primo momento, l’immagine è ritagliata per essere invisibile. Poi, quando si passa sopra il “bottoncino”, è l’immagine successiva essere ritagliata apparendo per circa 0, 5s dal suo centro.
Nel caso si visualizzi da un dispositivo mobile cliccare qui per l’esempio
Abbastanza facile, giusto? Ora vorrei mostrarvi cosa si può fare la proprietà clip, alcuni selettori CSS avanzati e le transizioni CSS.
Nel caso si visualizzi da un dispositivo mobile cliccare qui per l’esempio
Spiegare l’intero codice probabilmente non sarebbe solo un po ‘ pesante, ma anche certamente non interessante poiché ciò che è stato più difficile da fare era trovare i selettori CSS sulle immagini che volevo.
Cose come :
nth-of-type(n+7): nth-of-type(-n+9): hover img {...}.
Tuttavia c’era un piccolo bug di sovrapposizione causato dalle transizioni CSS e z-index nell’hover delle immagini, che è stato risolto da Ana Tudor così grandi ringraziamenti a lei.
Comunque, se c’è qualcosa che volete sapere su questa demo, assicuratevi di domandare in un commento. Cercherò di tornare a voi, non appena possibile.
Si potrebbe ancora chiedere cos’altro si può fare con questa strana proprietà. Ecco alcune idee di casi d’uso; Se ne avete una qualsiasi, si prega di assicurarsi di condividerle.
- Una galleria di immagini come sopra
- Un modo per ritagliare variamente dimensioni immagini
- CSS sprites (fonte)
- Un metodo accessibile per nascondere il contenuto (fonte)
Il prossimo tutorial su Codrops inoltre vi mostrerà come utilizzare la proprietà clip praticamente per creare un effetto di sovrapposizione d’espansione: mettendo CSS Clip al lavoro: espansione dell’effetto di sovrapposizione.
CONCLUSIONE
Alla fine, che cosa possiamo dire circa la proprietà clip?
In primo luogo, che è strana.
Ha una sintassi particolare e richiede valori non intuitivi. Il fatto che sia il valore superiore e inferiore sono gli offset dal bordo superiore e non rispettivamente dei bordi superiori e inferiori, può essere piuttosto difficile da ottenere.
Tuttavia, il W3C può risolvere questo problema in futuro modificando la sintassi.
Nota. In CSS 2.1, tutte le sezioni di ritaglio sono rettangolari. Anticipiamo future estensioni per consentire un clipping non rettangolare . I futuri aggiornamenti possono anche reintrodurre una sintassi per ritagliare da ogni bordo, invece che da un punto.
– Fonte W3C
In secondo luogo, sicuramente possiamo dire che non è una comune proprietà CSS.
Ha un utilizzo piuttosto limitato, ma posso assicurarvi che dà veramente un sacco di possibilità e penso che il suo scarso utilizzo è probabilmente a causa di una mancanza di comprensione.
Bene ragazzi, penso che abbiamo spiegato praticamente tutto ciò che dovete sapere circa le proprietà CSS clip al fine di essere in grado di utilizzarlo in progetti reali. Se avete qualsiasi domanda o per visualizzare qualsiasi lavoro correlato, si prega di essere sicuri di farlo. Grazie per la lettura!
Traduzione dell’articolo “UNDERSTANDING THE CSS CLIP PROPERTY” del blog “CODROPS“
