Cursore di confronto immagini in CSS

Vi svelo un “segreto” riguardo l’uso alternativo della proprietà resize, è una delle mie preferite dato che è usata raramente.
Cursore di confronto immagini in CSS

Specifiche sulla traduzione

Di seguito la traduzione dell’articolo “Image comparison slider with pure CSS“.

Cursore di confronto in puro CSS

Come molti di voi sanno, ho passato gran parte di quest’anno a scrivere un libro per O’Reilly intitolato “CSS Secrets” (preordina qui!). Ho voluto includere un “segreto” riguardo l’uso alternativo della proprietà resize, è una delle mie preferite dato che è usata raramente. Tuttavia basta citare il tipico caso dei campi di testo e non sembra più un segreto.
L’intero scopo del libro è ottenere degli autori che pensano fuori dagli schemi su ciò che è possibile fare con i CSS. Così ho iniziato il brainstorming: Che altro potremmo fare con essi?

Poi mi sono ricordata il dispositivo “Prima/Dopo” di Dudley di qualche tempo fa. Anche se mi è piaciuto il risultato, il markup non è dei migliori e richiede dello scripting. Inoltre, entrambe le immagini sono dei background CSS, quindi non adatto ad uno screen reader. E poi mi è venuto in mente, cosa succede se sovrappongo un div sull’immagine e faccio un ridimensionamento orizzontale attraverso la proprietà resize? Ho provato, e come potete vedere qui sotto, ha funzionato!


I miglioramenti

  • Altro tipo di markup (2 immagini e 2 div). Se object-fit fosse ampiamente supportato, potrebbe anche essere solo un div e due immagini.
  • Nessun JS
  • Meno codice CSS

Certo, alcune cose sono senza inconvenienti. In questo caso:

  • Un grande svantaggio è l’accessibilità da tastiera. La demo di Dudley utilizza un input range, quindi è già accessibile da tastiera in modo nativo.
  • E’ possibile trascinare solo dagli angoli in basso a destra. Nella demo di Dudley, è possibile cliccare in qualsiasi punto della slide. E si, ho provato con il ::webkit-resizer ad aumentarne la dimensione ma non sembrava funzionare.

Tuttavia, nessuno dei due sembra funzionare sul mobile.

Potrebbe non essere perfetto, ma ho pensato che è una demo piuttosto notevole che mostra ciò che è possibile fare con la proprietà resize, che tutti sembrano utilizzare solo nelle textarea e simili, ma il suo potenziale è molto più grande.

E ora, se volete scusarmi, ho un capitolo da scrivere 😉

Search
Tags
Seleziona rubrica
Seleziona rubrica
Codice Github