Logo Froglab Agenzia di Comunicazione

Trucchi e stranezze in CSS

Scritto da francesco nella categoria   il giorno 6 Luglio 2021
Schermata di 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.

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

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.

Share