Trucchi e stranezze in CSS

Scritto da francesco nella categoria Web Design il giorno 6 Luglio 2021

CSS non è un linguaggio noto per la sua difficoltà, al contrario: a differenza di altri linguaggi del web è possibile impararne le basi in tempo relativamente breve e con strumenti gratuiti e a disposizione di chiunque ne voglia far uso. Nonostante questo, però esistono delle stranezze in CSS che probabilmente non tutti conoscono e che possono trasformare un facile progetto in un incubo di !important non necessari.

Le peculiarità di CSS sono talmente tante che aggiornerò questo post in più fasi.

I margini si sovrappongono

Prendiamo come esempio questo codice:

<div style="margin-bottom: 20px; padding:10px; background-color: tomato">foo</div>
<div style="margin-top: 20px; padding:10px; background-color: darkseagreen">foo</div>
Code language: HTML, XML (xml)

A rigor di logica le due div dovrebbero avere margine 40px (20px + 20px), giusto? Sbagliato.

foo

In CSS i margini si sovrappongono e non si sommano tra loro.

Height: 100% deve avere un parent con altezza stabilita

Stesso discorso vale per width: 100%. Se l'elemento genitore non ha una dimensione allora height e width non funzioneranno nel modo che ci aspettiamo.

<html>
<body>
  <div style="height:100%; background-color: darkseagreen;"></div>
</body>
</html>
Code language: HTML, XML (xml)

Viceversa, se applichiamo un'altezza qualsiasi al container genitore allora:

<html>
<body style="height:20vh">
  <div style="height:100%; background-color:darkseagreen;"></div>
</body>
</html>
Code language: HTML, XML (xml)

In questo modo il contenuto occuperà tutto lo spazio in altezza lasciato dal contenitore.

Si possono targettare gli attributi

Forse non tutti sono a conoscenza che, in CSS; è possibile selezionare gli elementi utilizzando il loro attributi: nell'esempio ho usato come target l'attributo custom-attribute e ho applicato lo pseudo-selettore :not per escluderlo dalla mia selezione.

<div class="demo-container">
<div custom-attribute="attribute" style="background-color: tomato; padding:10px; margin-bottom: 20px;">foo</div>
<div style="padding:10px; margin-bottom: 20px;">foo</div>
<div custom-attribute="attribute" style="background-color: tomato; padding:10px; margin-bottom: 20px;">foo</div>
</div>
<style>
.demo-container div:not([custom-attribute]) {
  background-color: darkseagreen
}
</style>
Code language: HTML, XML (xml)

foo

Si possono popolare le proprietà content con gli attributi

Gli attributi possono essere utilizzati per popolare dinamicamente certi contenuti.

<a custom-tooltip="Vai al mio link" class="demo-link" href="https://miolink.com">Questo è il mio link</a>

<style>
.demo-link { 
  position: relative;
  width: 150px;
  padding: 5px 10px;
  color: white;
  background-color: darkseagreen;
}
.demo-link:before {
  position:absolute;
  content: attr(href);
  width:100%;
  height:100%;
  padding: 3px 6px;
  top: 0;
  left: calc(100% + 6px);
  background-color: gray;
  text-align:center;
}
</style>
Code language: HTML, XML (xml)

In questo caso ho utilizzato l'attributo href per popolare il contenuto dello pseudo-elemento before .

Questo è il mio link

Questi sono solo alcune delle "stranezze" e delle peculiarità di CSS. Continuerò ad aggiornare la lista man mano che incontrerò di nuovo (o per la prima volta) le strane e poco usate implementazioni di questo linguaggio.