Per creare grafici nelle nostre pagine web, siamo abituati ad usare librerie esterne in Javascript.

Anche giustamente, visto che ce ne sono alcune spettacolari.

Ma in verità possiamo creare grafici anche per conto nostro, usando HTML, Canvas e Javascript (ovviamente).

Ho scoperto che nelle applicazioni web è possibile utilizzare un file manifest, che da determinate informazioni quando si "installano" nelle homescreen dei dispositivi mobili.

E' una tecnologia non ancora stabile e pienamente suppoortata, ma sarebbe già il caso di aggiungerla ai nostri siti.

CSS è in continua evoluzione, e sta prendendo anche spunto dai più tradizionali linguaggi di programmazione.

Oggi vediamo come usare le variabili, per riutilizzare un determinato valore in tutto il documento.

Supponiamo di voler usare il font nero ovunque, tranne che nei componenti h1, dove vogliamo usare il rosso.

Se vogliamo impostare l'autocomplete di un form a off, in modo che non visualizzi eventuali dati salvati, ci basta fare questo:

<form method="post" action="" autocomplete="off">
    <div>
        <label>Email:</label>
        <input type="email" name="email" value="" placeholder="Email">
    </div>
    <div>
        <label>Password:</label>
        <input type="password" name="password" value="">
    </div>
    <button type="submit" name="btn">Salva</button>
</form> 

Oppure possiamo impostarlo un campo specifico:

 <form method="post" action="">
    <div>
        <label>Email:</label>
        <input type="email" name="email" value="" placeholder="Email" autocomplete="off">
    </div>
    <div>
        <label>Password:</label>
        <input type="password" name="password" value="">
    </div>
    <button type="submit" name="btn">Salva</button>
</form> 

Il problema è che su Chrome (e Chromium) questo non funziona benissimo.

Centrare orizzontalmente un div è facile, in quanto basta usare i margin:auto a sinistra e destra.

Centrarlo verticalmente può essere un pò più complicato.

Oggi vediamo una possibile soluzione, considerando che non penso funzioni con le vecchie versioni di IE (ma sinceramente a me non interessa!).

Ho scoperto che con i CSS è possibile applicare filtri alle immagini in maniera molto semplice.

Questi sono i filtri disponibili:

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

A parte il filtro url() gli altri hanno una sintassi molto semplice, e sono tutti filtri "pre-impostati".

Flexbox è un nuovo tipo di layout da usare con CSS3.

In pratica permette di creare dei layout "flessibili" e facilmente responsive in breve tempo.

Da quanto ho capito, anche Twitter Bootsrap 4 lo userà come base per il suo nuovo layout system.

Per usarlo in maniera più semplice, esiste un helper HTML: Flex Layout Attribute!

In pratica è un semplice foglio di stile.

In genere è sempre buona norma validare i dati di un form sia lato server che lato client.

Per quanto riguarda il client, ci siamo sempre avvalsi di Javascript (o di uno dei milioni plugin per jQuery).

Ma con HTML 5 possiamo farne a meno.

Anche se il supporto dei browser non è al 100%, ci rimane comunque la parte server; quindi, per quanto mi riguarda, preferisco evitare l'uso dei plugin o di Javascript per fare questo (almeno quando possibile).

Vi propongo oggi una lista di metodi per nascondere gli elemtni di una pagina web usando i CSS.

Non so se ce ne siano altri, e non saprei neanche dirvi quale sia il migliroe.

Io in genere per abitudine uso l'attributo display, quindi cominciamo da questo.

La proprietà clip-path di CSS 3 ci permette di "clippare" parti di una pagina senza ricorrere ad immagini create ad-hoc o ad altri tecnicismi.

Ad oggi (20 giugno 2016) non è compatibile con Firefox, ma potete testarlo su Chrome e Safari.

Qui vi propongo due esempi:

• in uno clippiamo una immagine creando un rombo
• nell'altro tagliamo una parte del titolo