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

Seconda parte del tutorial che illustra alcune utili funzionalità CSS.

 

 

 

9 – Espandere la chat quando riceve il focus

Al momento la chat box è chiusa ed inutilizzabile. Come possiamo espanderla utilizzando solo CSS? Semplice, tramite la pseudo-classe Focus Container: focus-within.

L’aggiunta di questa classe aumenterà il max-height dell’elemento .messages a 300px ogni qualvolta gli elementi presenti all’interno di .chat ricevono il focus.

.chat:focus-within .messages {

 max-height: 300px; }

 

 

10 – Focus: uno step in più

Quando la chat riceve il focus possiamo oscurare il newsfeed. Questa operazione è possibile con l’aiuto del simbolo subsequent-sibling (~)

.chat:focus-within ~ .container {

 filter: blur(5px); }

 

 

11 – Placeholder-shown

Un’altra interessante pseudo classe è :placeholder-shown. Di solito gli elementi input di un form mostrano il testo segnaposto tramite click sul campo input. Con :placeholder-shown  possiamo attribuire uno stile agli elementi che mostrano il testo segnaposto.

Aggiungere

<input type=”text” class=”input” placeholder=”Inserisci  il tuo messaggio”>

Ed aggiungere subito dopo un messaggio da mostrare all’utente:

<div class=”prompt”>Cliccare su Enter per inviare il messaggio</div>

Ora aggiungi lo stile da attribuire al messaggio:

.prompt {

 line-height: 2em;

 max-height: 0;

 overflow: hidden;

 padding: 0 10px;

 text-align: right;

 transition: max-height 500ms; }

 

 

12 – Rendere visibile il prompt

.input:not(:placeholder-shown) + .prompt {

 max-height: 2em; }

 

 

13 – Attivazione

Così com’è il newsfeed con la funzione chat è inattivo. Occorre aggiungere del codice JS che consenta l’inserimento di messaggi nella chat box.

Innanzitutto aggiungiamo in ID ad <input> e <ul>

<ul id=”messages” …

<input type=”text” id=”input” required …

Poi creiamo un file JS vuoto chiamandolo script.js ed aggiungiamolo alla pagina inserendo il seguente codice prima del tag </body>

<script src=”script.js”></script>

</body>

Nel file script.js inserire il seguente codice:

// Finds the important elements

const input = document.getElementById(‘input’);

const messages = document.getElementById(‘messages’);

// Listens for keypress events on the input

input.addEventListener(‘keypress’, (event) => {

  // Checks if the key pressed was ENTER

   if (event.keyCode === 13) {

  // Checks the field is valid

  if (input.validity.valid) {

  // Creates a DOM element using the value

  const message = createMessage(input.value);

  // Appends the new message to the list

  messages.appendChild(message);

  // Clears the field

  input.value = ‘’;

  // Scrolls the messages to the bottom

  messages.parentNode.scrollTop = messages.parentNode.scrollHeight;

  }

  }

});

// Converts value to string of HTML

function createMessage (value) {

  // Warning: Don’t do this in production without sanitizing the string first!

  return stringToDom(`<li><div class=”message”>${value}</div></li>`)

}

// Converts string to real DOM

function stringToDom (string) {

  const template = document.createElement(‘template’);

  template.innerHTML = string.trim();

  return template.content.firstChild; }

 

 

14 – Aggiungere alcune ulteriori iinformazioni

Comunichiamo quando il messaggio è stato inviato. Tale informazione compare quando il puntatore del mouse passa sopra il messaggio (i.e. hover)

Inseriamo nella pagina quanto segue:

return stringToDom(`

 <li>

 <div class=”message message–mine” data-timestamp=”${new Date().toString()}”>

 ${value}

 </div>

 </li>

 `);

 

Aggiungere quindi la classe .message—mine

.message–mine {

 background: #ff2089;

 margin-left: 20%;

 margin-right: 0;

}

 

Qui si conclude questo tutorial che mostra alcune utili funzionalità CSS da testare ed utilizzare nel tuo prossimo progetto web.

You may also like