Articolo

Velocizzare il caricamento di una pagina con una Proprietà CSS

Google ha appena rilasciato Chrome 85, il più grande aggiornamento che il noto browser riceverà nel 2020. Tra i aggiornamenti, c’è una nuova proprietà CSS, si chiama content-visibility.

Quando un browser carica un sito web, ci sono vari passaggi che vengono fatti per mostrare la pagina finale all’utente, molti dei quali devono essere eseguiti prima di poter mostrare qualsiasi cosa sulla pagina. Infatti, prima di vedere qualcosa, il browser dovrà processare l’intera pagina, anche quello fuori dalla …

Articolo

Combinatori CSS: differenza tra “>” e “spazio”

Qual è la differenza tra l’utilizzo di .container div e .container > div ?

Nel primo esempio viene utilizzato il combinatore (spazio bianco), chiamato descendant (discendente), mentre nel secondo esempio, il combinatore è > che prende il nome di child (figlio).

Il combinatore ha effetto su tutti gli elementi specificati nel secondo selettore che hanno come elemento genitore quello specificato nel primo selettore. Ma vediamo con un esempio:

Dato questo CSS:

.container div {
    background-color: red;
}

e …

Articolo

Incorporare un video YouTube in modo responsive

Molto spesso capita di dover incorporare un video caricato su YouTube o Vimeo ma con molto traffico web proveniente da dispositivi mobili come spartphone e tablets è fondamentale che questi elementi incorporati siano responsive.

#Analizziamo il problema

Se noi vogliamo incorporare il seguente video caricato su YouTube sul nostro sito web:

Questo è il codice che YouTube ci fornice:

<iframe width="1903" height="768" src="https://www.youtube.com/embed/62uKFlNVZ1w" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen</iframe

Osservando questo frammento di codice notiamo subito che …

Articolo

Torna a Windows 98 con 98.CSS

98.css è una libreria CSS creata da Jordan Scales per realizzare interfacce web moderne con lo stile di Windows 98, uno dei primi sistemi operativi desktop diffusi.

Questa libreria sfrutta l’utilizzo dei tag semantici di HTML, associando ad essi uno stile personalizzato. Per esempio, per creare un bottone dovrai utilizzare il tag <button. Gli elementi di input richiedono delle etichette. I pulsanti icona si basano su aria-label.

Ovviamente è possibile personalizzare l’aspetto della libreria sovrascrivere lo stile predefinito, mantenendo …