5 interessanti funzionalità CSS. Ecco come utilizzarle – Prima parte

In questo articolo esploreremo alcune utili funzionalità CSS. Creeremo un layout per un sito web che includerà un newsfeed ed una chat.

 

 

01 – Impostazione dell’HTML per il newsfeed

Innanzitutto dobbiamo impostare un semplicissimo markup per il nostro newsfeed.
Creiamo un div  .container contenente una lista non ordinata. Attribuire al tag <ul> la classe .feed e poi creare una lista di 10 elementi ognuno contenente un div .card.

Infine creare un altro elemento <li> tra l’elemento 5 e l’elemento 6 con classe .nested.

<body>

 <div class=”container”>

 <ul class=”feed”>

 <li><div class=”card”>Card 1</div></li>

 <li><div class=”card”>Card 2</div></li>

 <li><div class=”card”>Card 3</div></li>

 <li><div class=”card”>Card 4</div></li>

 <li><div class=”card”>Card 5</div></li>

    <li class=”nested”>

 <ul>

 <li><div class=”card”>Card A</div></li>

 <li><div class=”card”>Card B</div></li>

 <li><div class=”card”>Card C</div></li>

 </ul>

 </li>

 <li><div class=”card”>Card 6</div></li>

 <li><div class=”card”>Card 7</div></li>

 <li><div class=”card”>Card 8</div></li>

 <li><div class=”card”>Card 9</div></li>

 <li><div class=”card”>Card 10</div></li>

 </ul>

</div>

</body>

 

 

 

02 – Attribuire lo stile al newsfeed

Creare un background grigio da attribuire a <body>. Impostare quindi una larghezza massima di 800 px a .container ed un margin: 0 auto; per allineare al centro i contenuti.

Attribuire a .card un background bianco, 10 px di padding e margine ed un min-height di 300px.

Infine inseriremo un modulo Flexbox in .feed per rendere il tutto più fluido, con due card per ogni riga.

.feed {

display: flex;

flex-wrap: wrap;

}

.feed li {

flex: 1 0 50%;

}

 

 

03 – Risolvere i problemi di layout

Se provi a far scorrere la lista di elementi creata ti accorgerai che Card A – C creano problemi al layout. Anziché scorrere come tutte le altre card le due card rimangono unite come se fossero un unico blocco. La soluzione al problema si ha utilizzando display:contents

.feed ul,

.feed li {

display: contents;

}

A questo punto le card dovrebbero scorrere normalmente all’interno della pagina, hanno però perso l’impostazione sizing. Il problema si risolve facilmente aggiungendo una proprietà flex alla classe .card

.card {

flex: 1 0 40%;

}

 

 

04 – Queries

Per valutare se una proprietà o un valore CSS sono supportati dal browser occorre spostare gli stili in display:contents in una query

@supports (display: contents) {

.feed ul,

.feed li {

  display: contents;

}

.card {

  flex: 1 0 40%;

}

}

 

 

05 – Utilizzare ‘not’ per un risultato più pulito

Nel caso in cui display:contents non sia supportato dal browser è opportuno avere una soluzione alternativa.

@supports not (display: contents) {

.feed li {

  flex: 1 0 50%;

}

}

All’interno della query “not” possiamo aggiungere alcuni stili in maniera tale che gli elementi gestiti dalla classe .nested possano usufruire di quanto ereditato da display:contents

feed li.nested {

flex-basis: 100%;

}

.feed li.nested ul {

 display: flex;

 flex-wrap: wrap;

}

 

06 – Aggiungere una chat

A questo punto possiamo aggiungere una chat in fondo alla pagina. Aggiungere il seguente blocco subito dopo il tag <body>

<div class=”chat”>

 <div class=”messages”>

 <ul>

<li><div class=”message”>Messaggio 1</div></li>

<li><div class=”message”> Messaggio 2</div></li>

<li><div class=”message”> Messaggio 3</div></li>

<li><div class=”message”> Messaggio 4</div></li>

<li><div class=”message”> Messaggio 5</div></li>

<li><div class=”message”> Messaggio 6</div></li>

<li><div class=”message”> Messaggio 7</div></li>

<li><div class=”message”> Messaggio 8</div></li>

<li><div class=”message”> Messaggio 9</div></li>

<li><div class=”message”> Messaggio 10</div></li>

 </ul>

 </div>

 <input type=”text” class=”input”>

</div>

 

 

07 – Stili da attribuire alla chat

.chat {

 background: #fff;

 border: 10px solid #000;

 bottom: 0;

 font-size: 10px;

 position: fixed;

 right: 0;

 width: 300px;

 z-index: 10;

}

.messages {

 border-bottom: 5px solid #000;

 overflow: auto;

 padding: 10px;

 max-height: 300px;

}

.message {

 background: #000;

 border-radius: 5px;

 color: #fff;

 margin: 0 20% 10px 0;

 padding: 10px;

}

.messages li:last-child .message {

 margin-bottom: 0;

}

.input {

 border: none;

 display: block;

 padding: 10px;

 width: 100%;

}

 

08 – Nascondere la chat quando non in uso

La chat così com’è occupa troppo spazio ed occorre ridimensionarla quando non è in uso.

.messages {

 …

 max-height: 25px;

transition: max-height 500ms; }

 

 

Nel prossimo articolo riporteremo la seconda parte di questo tutorial illustrando altre interessanti funzionalità CSS.

You may also like