Trucchi e stranezze in CSS

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.
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)
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 .
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.