CSS / clip / Ritaglio rettangolare e migrazione a clip-path

clip è una proprietà CSS legacy che limita la parte visibile di un elemento a un rettangolo. Si applica agli elementi con position: absolute o position: fixed ed è deprecata, quindi preferisci clip-path nel nuovo codice. Durante la migrazione del codice esistente, distingui le coordinate dei confini in rect() dalle distanze verso l'interno in inset().

Condizioni e valori principali

Il ritaglio nasconde il disegno al di fuori di una regione. Si differenzia dalla modifica del file immagine originale o dalla riduzione effettiva della larghezza e dell'altezza dell'elemento. Il valore iniziale di clip è auto, e non viene ereditato. Impostare solo position: relative non fa applicare il ritaglio legacy.

Il vecchio rettangolo di ritaglio non accetta percentuali. Il valore completo clip: auto differisce anche da rect(auto, auto, auto, auto). Quest'ultimo ritaglia ai bordi interni, quindi i discendenti che traboccano possono rivelare la differenza. MDN sintassi e condizioni di applicazione del ritaglio

Confrontare l’area originale e quella ritagliata con un esempio completo

Salva il seguente codice completo come clip-example.html in UTF-8 e aprilo in un browser. Non sono necessarie immagini esterne, librerie o server. Mantieni questi stili dimostrativi in questo file piuttosto che incollarli in un foglio di stile condiviso. Confronta tutte e tre le caselle, quindi cambia un valore alla volta, salva e ricarica.

<!doctype html>
<html lang="it">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Confronto tra clip e clip-path</title>
  <style>
    body { margin: 0; padding: 16px; font: 16px/1.6 sans-serif; }
    main { max-width: 760px; margin: auto; }
    h1 { font-size: 1.5rem; }
    h2 { font-size: 1rem; }
    .samples { display: flex; flex-wrap: wrap; gap: 24px; }
    .frame { position: relative; width: 200px; height: 120px;
      background: #e5e7eb; outline: 1px solid #666; }
    .target { width: 100%; height: 100%; padding: 0; border: 0;
      background: linear-gradient(135deg, #006c9c, #ffd166); }
    .legacy { position: absolute; top: 0; left: 0;
      clip: rect(20px, 180px, 100px, 20px); }
    .modern { clip-path: inset(20px); }
  </style>
</head>
<body>
  <main>
    <h1>Confronto tra clip e clip-path</h1>
    <div class="samples">
      <section><h2>clip: auto</h2>
        <div class="frame"><div class="target"></div></div></section>
      <section><h2>clip: rect(20px, 180px, 100px, 20px)</h2>
        <div class="frame"><div class="target legacy"></div></div></section>
      <section><h2>clip-path: inset(20px)</h2>
        <div class="frame"><div class="target modern"></div></div></section>
    </div>
  </main>
</body>
</html>

La prima casella è il riferimento, mostrando l'intero gradiente di 200×120px. La seconda e la terza dovrebbero mostrare una regione di 160×80px dopo aver escluso 20px da ogni bordo. Lo sfondo grigio e il contorno appartengono a un telaio separato, quindi le dimensioni originali della casella rimangono visibili. In una finestra stretta le caselle di confronto si spostano su un'altra riga.

Convertire le coordinate rect in distanze inset

Le due dichiarazioni producono la stessa regione visibile perché i loro numeri significano cose diverse. Queste regole corrispondono a .legacy e .modern nell'esempio completo.

.legacy {
  position: absolute;
  clip: rect(20px, 180px, 100px, 20px);
}
.modern {
  clip-path: inset(20px);
}

Nel rettangolo legacy, top e bottom sono misurati dal bordo interno superiore; left e right sono misurati dal bordo interno sinistro. Una coordinata right di 180px non significa sottrarre 180px dal lato destro. I quattro valori inset invece misurano verso l'interno dai rispettivi bordi, usando il border-box a meno che non sia specificata un'altra reference box. L'elemento target in questo esempio non ha padding o bordo, quindi quella differenza di reference-box non influisce sul confronto.

Per una scatola di larghezza W e altezza H senza padding o bordo, rect(t, r, b, l) corrisponde a inset(t, W − r, H − b, l). Nel CSS reale, inserisci le lunghezze calcolate invece di copiare espressioni esplicative come W − r. Se ci sono bordi, padding o una scatola di riferimento diversa, allinea prima i sistemi di coordinate. Riferimenti a scatole e forme clip-path MDN

Cambiare le dimensioni dell’elemento e confrontare

Per prima cosa cambia solo .frame a una larghezza di 300px e un'altezza di 180px nell'esempio completo. Mantenendo le vecchie coordinate del rettangolo si ottiene una regione visibile di 160×80px, mentre inset(20px) ora lascia 260×140px escludendo 20px da ciascun lato della scatola più grande. Confronta il motivo per cui gli stessi numeri non garantiscono lo stesso risultato ritagliato.

Per far corrispondere di nuovo i due metodi, cambia il limite destro di .legacy a 280px e il limite inferiore a 160px. Sostituisci queste due regole nell'esempio completo come segue. Lascia invariata la dichiarazione .modern.

.frame {
  width: 300px;
  height: 180px;
}
.legacy {
  clip: rect(20px, 280px, 160px, 20px);
}

Entrambi i metodi dovrebbero ora lasciare una regione di 260×140px. Dopo il confronto, ripristina .frame a 200×120px e rect a 20px, 180px, 100px, 20px. Per preservare lo stesso spazio interno in una scatola reattiva, inset esprime l’intenzione in modo più diretto rispetto al ricalcolo ripetuto dei confini fissi.

Ritaglio, layout e accessibilità

Il ritaglio con clip-path generalmente lascia invariato lo spazio di layout dell’elemento. La .modern dell’esempio occupa 200×120px e solo la sua area dipinta diventa più piccola. L’elemento .legacy esce dal flusso normale a causa del posizionamento assoluto; il suo genitore .frame riserva lo spazio per il confronto. Distingui quell’effetto del posizionamento dal ritaglio stesso.

Per il nuovo codice, considera forme clip-path come inset per un rettangolo o circle per un cerchio. Quando l'obiettivo è nascondere contenuti in eccesso o offrire lo scorrimento, considera il ruolo separato di overflow. Un valore di clip-path diverso da none può anche creare un contesto di impilamento, quindi verifica gli elementi sovrapposti dopo la migrazione. CSS Mascheramento su clipping e geometria degli elementi

Il clipping non è controllo degli accessi né protezione della privacy. Il testo nascosto può rimanere nel documento e il suo trattamento da parte della tecnologia assistiva richiede verifiche separate. Non tagliare pulsanti, input, informazioni essenziali o indicatori di focalizzazione da tastiera in modi che impediscano agli utenti di operare l'interfaccia. Fornisci un modo per leggere il contenuto durante lo zoom o utilizzando la navigazione touch e da tastiera.

Quando il ritaglio non funziona come previsto

• Ispeziona la posizione calcolata e il ritaglio dell'elemento selezionato negli strumenti per sviluppatori. Il posizionamento relativo o statico non soddisfa le condizioni del ritaglio legacy. Nell'esempio, cambia solo position di .legacy in relative, confronta se il ritaglio scompare, quindi ripristina absolute.
• L'ordine del rettangolo è alto, destra, basso, sinistra. Se destra è minore di sinistra o basso è minore di alto, il rettangolo previsto non rimarrà. Controlla se le vecchie coordinate sono rimaste dopo aver cambiato larghezza o altezza.
• L'overflow di un elemento antenato, clip-path o un'altra regola di ritaglio può ridurre ulteriormente la regione visibile. Disabilita e riabilita le dichiarazioni individualmente negli strumenti per sviluppatori per isolare la causa.
• Quando si sostituisce clip con clip-path, confronta il posizionamento, le caselle di riferimento, i bordi, il padding, l'ordine di sovrapposizione e gli indicatori di focus. Il vecchio rect() usato da clip e il nuovo shape rect() in clip-path hanno sintassi diverse; avere lo stesso nome non rende i loro valori intercambiabili.