CSS - Proprietà max-block-size: Una Guida Amichevole per i Principianti

Ciao là, futuri maghi del CSS! Oggi ci imbarcheremo in un viaggio emozionante nel mondo del CSS, esplorando la proprietà max-block-size. Non preoccuparti se sei nuovo a questo; sarò il tuo guida amichevole, e affronteremo questo argomento passo per passo. Quindi, prendi la tua bevanda preferita, mettiti comodo, e tuffati!

Cos'è max-block-size?

Prima di immergerci nei dettagli, capiremo di cosa si occupa la proprietà max-block-size. Immagina di costruire una torre con dei blocchi. La proprietà max-block-size è come impostare un limite su quanto alta può essere la tua torre. In termini di CSS, essa definisce la dimensione massima di un elemento nella direzione del blocco.

"Ma attendi," potresti chiedere, "cos'è la direzione del blocco?" Ottima domanda! La direzione del blocco è tipicamente la direzione verticale nei linguaggi scritti orizzontalmente (come l'inglese), e la direzione orizzontale nei linguaggi scritti verticalmente (come il giapponese tradizionale).

Sintassi e Valori Possibili

Analizziamo come possiamo utilizzare max-block-size nel nostro CSS:

.my-element {
max-block-size: value;
}

Ora, cosa possiamo mettere al posto di "value"? Ecco una tabella utile con tutti i valori possibili:

Valore	Descrizione
<length>	Una lunghezza fissa, come 300px o 20em
<percentage>	Una percentuale della dimensione del blocco contenitore
none	Nessun limite (questo è il valore predefinito)
max-content	La dimensione massima intrinseca preferita
min-content	La dimensione minima intrinseca
fit-content	Simile a auto, ma con alcune differenze
auto	Il browser decide la dimensione massima

Applica a

Non tutte le proprietà CSS si applicano a ogni elemento HTML. La proprietà max-block-size si applica a tutti gli elementi eccetto:

• Elementi inline non sostituiti
• Righe di tabella
• Gruppi di righe

Non preoccuparti se non sei ancora familiare con questi termini. Mentre progressi nel tuo viaggio con il CSS, li incontrerai e capirai perché sono eccezioni.

Effetti del CSS max-block-size - writing-mode

Ora, è il momento in cui le cose diventano interessanti! La proprietà max-block-size cambia il suo comportamento in base alla writing-mode del testo. Analizziamo alcuni esempi:

Esempio 1: Modalità di Scrittura Orizzontale

.box {
writing-mode: horizontal-tb;
max-block-size: 200px;
background-color: lightblue;
padding: 10px;
}

<div class="box">
Questo è un riquadro con modalità di scrittura orizzontale e max-block-size impostato su 200px.
</div>

In questo esempio, max-block-size limiterà l'altezza del riquadro a 200 pixel perché la direzione del blocco è verticale nella modalità di scrittura orizzontale.

Esempio 2: Modalità di Scrittura Verticale

.box {
writing-mode: vertical-rl;
max-block-size: 200px;
background-color: lightgreen;
padding: 10px;
}

<div class="box">
Questo è un riquadro con modalità di scrittura verticale e max-block-size impostato su 200px.
</div>

In questo caso, max-block-size limiterà la larghezza del riquadro a 200 pixel perché la direzione del blocco è orizzontale nella modalità di scrittura verticale.

Valore del CSS max-block-size

Quando utilizziamo un valore di lunghezza, stiamo impostando una dimensione massima fissa. Vediamo come funziona:

.fixed-size {
max-block-size: 150px;
background-color: lightyellow;
padding: 10px;
}

<div class="fixed-size">
Questo riquadro ha un max-block-size di 150px. Se il contenuto supera questa altezza, scorrerà.
</div>

In questo esempio, indipendentemente dalla quantità di contenuto che mettiamo nel div, esso non crescerà oltre i 150 pixel di altezza.

Valore del CSS max-block-size

Le percentuali sono relative alla dimensione del blocco contenitore. Ecco come funziona:

.parent {
height: 300px;
background-color: lightgray;
}

.child {
max-block-size: 50%;
background-color: lightpink;
padding: 10px;
}

<div class="parent">
<div class="child">
Questo div figlio ha un max-block-size del 50% dell'altezza del suo padre.
</div>
</div>

In questo caso, il div figlio non sarà mai più alto della metà dell'altezza del suo padre.

Valore del CSS max-block-size

Il valore max-content è particolarmente utile quando vuoi che il tuo elemento sia grande quanto il suo contenuto richiede, ma non più grande. Vediamo un esempio:

.max-content-box {
max-block-size: max-content;
background-color: lightcoral;
padding: 10px;
}

<div class="max-content-box">
Questo riquadro si espande per adattarsi al suo contenuto, ma non oltre.
</div>

Questo riquadro crescerà per accogliere il suo contenuto, ma non si stirerà oltre.

CSS max-block-size - Con Testo Orizzontale e Verticale

Chiudiamo con un esempio che combina testo orizzontale e verticale:

.mixed-text {
max-block-size: 200px;
background-color: lavender;
padding: 10px;
}

.vertical-text {
writing-mode: vertical-rl;
max-block-size: 100px;
background-color: lightsalmon;
margin-top: 10px;
}

<div class="mixed-text">
Questo è testo orizzontale con max-block-size di 200px.
<div class="vertical-text">
Questo è testo verticale con max-block-size di 100px.
</div>
</div>

In questo esempio, abbiamo un contenitore con testo orizzontale e un'altezza massima di 200px. Dentro di esso, abbiamo un altro div con testo verticale e una larghezza massima di 100px.

Ecco fatto! Abbiamo esplorato la proprietà max-block-size da diverse angolazioni. Ricorda, la chiave per padroneggiare il CSS è la pratica. Quindi, non aver paura di sperimentare con questi esempi, modificandoli e vedendo cosa succede. Buon coding, e possa i tuoi blocchi sempre essere della dimensione perfetta!

Credits: Image by storyset