Problemi di incapsulamento

Il problema comune in tutti gli sviluppatori è affrontare la situazione dell’incapsulamento. L’incapsulamento è la base della programmazione ad oggetti su cui si basa la maggior parte del software moderno. La domanda è: come si fa ad ottenere la giusta armonia tra il codice scritto e la struttura finale nella quale sarà implementato?

In informatica si definisce incapsulamento (o encapsulation) la tecnica di nascondere il funzionamento interno – deciso in fase di progetto – di una parte di un programma, in modo da proteggere le altre parti del programma dai cambiamenti che si produrrebbero in esse nel caso che questo funzionamento fosse difettoso, oppure si decidesse di implementarlo in modo diverso. Per avere una protezione completa è necessario disporre di una robusta interfaccia che protegga il resto del programma dalla modifica delle funzionalità soggette a più frequenti cambiamenti.

Facciamo un esempio pratico rimanendo in ambiente css: se si crea un widget personalizzato risulterebbe complicato evitare i confilitti di denominazione con altri elementi della stessa pagina, soprattutto se si sta sviluppando per conto terzi, cioè non si può avere idea di quale altro css sarà presente. Si può sicuramente ridurre la probabilità di tali difficoltà definendo i selettori con una elevata specificità ma per evitare tutto questo non c’è soluzione, a meno che non si racchiude l’intero widget all’interno di un iframe, ma questa è una pazzia.

L’ombra oscura del web

Per Shadow DOM si intende l’inclusione da parte dei browser di sottostrutture nascoste di elementi nel rendering di un documento.

In poche parole lo Shadow DOM mira a risolvere i problemi citati nel paragrafo precedente. Si prenda ad esempio un codice del genere:

<input id="foo" type="range">

Abbastanza semplice. Questo è un input range appartenente all’html5, vi è una pista di scorrimento ed un cursore che è possibile far scorrere lungo il binario. In realtà la struttura dell’input range non è così semplice ma ha elementi nascosti dal browser. Ecco come è veramente l’input in questione:

<input type="range">
  #document-fragment
    <div>
      <div pseudo="-webkit-slider-runnable-track">
        <div></div>
      </div>
    </div>
</input>

Siccome in questo modo il tutto è isolato non vie è alcuna possibilità di conflitto con tutte le classi o gli ID che si usano. C’è da dire anche che tutto ciò inserito nello Shadow DOM è inaccessibile a tecnologie come screen reader e non è disponibile per i motori di ricerca.

Vedere lo Shadow DOM con Chrome

Prima di procedere con qualche esempio pratico attivate l’opzione per visualizzare lo Shadow DOM di Chrome in questo modo: aprite il Developer Tools e selezionate “Show Shadow DOM” dal pannello delle impostazioni (l’icona ingranaggio in alto a destra) dopodichè controllate l’input range e vedrete qualcosa di simile al codice scritto sopra.

Supporto browser

Ecco come è attualmente la situazione di compatibilità dello Shadow DOM:

Raggiungere il DOM Shadow con i CSS

Un altro aspetto da conoscere è la capacità di raggiungere lo Shadow DOM tramite CSS. Supponiamo di voler personalizzare l’aspetto del nostro input range, invece dell’aspetto standard del sistema operativo vogliamo associargli una grafica tutta nostra, si procede in questo modo:

input[type=range]{
   -webkit-appearance:none;
   background-color:red;
   width:200px;
}

Il risultato è questo:
screen-shot-2011-01-14-at-3-18-32-pm

Ora non ci resta che modificare il cursore attraveso uno pseudo-elemento che riesce ad interagire con la sottostruttura nascosta. Il cursore webkit può essere raggiunto in questo modo:

input[type=range]::-webkit-slider-thumb{
   -webkit-appearance:none;
   background-color:green;
   opacity:0.5;
   width:10px;
   height:40px;
}

Per scovare lo pseudo-elemento da modificare basta andare con il Developer Tools sull’elemento, nel nostro caso il cursore, e vedere come si comporta il css dell’user agent:

useragent

graficamente questo è il risultato:

screen-shot-2011-01-14-at-3-21-04-pm

Creare uno Shadow DOM

Per concludere vi segnalo questi due video di 27 minuti totali in cui Sandro Paganotti ci spiega in modo semplice e preciso come creare uno Shadow DOM.

GDL Italia – Template HTML5 e Shadow DOM (parte 1)

GDL Italia – Template HTML5 e Shadow DOM (parte 2)

Search
Tags
Seleziona rubrica
Seleziona rubrica
Codice Github