Utilizzo di bordi con transizioni

[KillerWorm]

Ti faccio una domanda tecnica, per completezza: i due punti prima di before devono essere necessariamente doppi? C'è una ragione per cui lo sono?

E' una domanda pertinente. Più esattamente, before e after sono pseudo-elementi, non pseudo-classi.

Cerco di spiegare in parole povere.

Una pseudo-classe identifica un elementi del DOM che possiede un particolare "stato"; ad esempio :hover identifica l'elemento nello stato in cui il mouse gli passa sopra, :checked identifica un input che è stato selezionato, :first-child identifica il primo elemento figlio, e così via.

Esistono svariate pseudo-classi suddivise anche per tipologia: di azione, funzionali, strutturali, ecc..
Qui puoi trovare la documentazione con una lista completa: Pseudo-classes - MDN Web Docs

Uno pseudo-elemento invece identifica (per un elemento del DOM) una parte accessoria che NON è presente strutturalmente nel DOM ma che permette di definire una rappresentazione grafica e funzionale per l'elemento su cui è definito.

Gli pseudo-elementi before e after sono, diciamo così, elementi fittizi "creati al volo" via CSS che definiscono un involucro (il quale sottostà alle regole del box-model) così da permettere l'aggiunta di contenuti "fittizi" prima e dopo i contenuti esistenti nell'elemento.

Attualmente anche varie parti accessorie di elementi relativamente complessi del DOM, è possibile impostarle attraverso specifici pseudo-elementi. Un esempio può essere ::marker che identifica l'involucro in cui normalmente è presente il punto o la numerazione della voce <li> di un elenco.

Qui puoi trovare la documentazione con una lista completa: Pseudo-elements - MDN Web Docs

Vari pseudo-elementi sono comunque in fase sperimentale o aspettano di essere standardizzati, dal momento che ogni vendor sviluppa a proprio modo le funzionalità dei relativi browser.

La questione dei due punti è dovuta proprio al fatto di distinguere le pseudo-classi dagli pseudo-elementi. Lo standard prevede l'uso del singolo "due punti" (":") per definire una pseudo-classe, mentre è previsto l'uso dei doppi "due punti" ("::") per definire uno pseudo-elemento.

Attualmente molti browser (se non tutti) supportano comunque l'uso del singolo ":" per definire entrambi. pseudo-classi e pseudo-elementi.

Questo è dovuto al periodo in cui sono stati introdotti gli pseudo-elementi come standard CSS, prima inesistenti. Le ultime versioni di IE infatti supportavano gli pseudo elementi, appena introdotti, ma non la sintassi col doppio "::". Per cui era necessario usare (e tutt'ora si può usare) la sintassi col singolo ":" per mantenere la compatibilità con tali browser.

Non è quindi raro vedere ancora usata la "vecchia sintassi" :before e :after, anziché quella più appropriata ::before e ::after, benché ad oggi sia alquanto minimo l'uso di vecchi browser per cui è richiesto farlo.

[ivanisevic82]

Ciao Killer e grazie innanzitutto (in ritardo) per la chiarissima ed utilissima spiegazione sugli pseudo elementi!

Avrei un'altra domanda collegata alla pagina che sto creando, trattandosi di una cosa "da poco", forse è meglio utilizzare ancora questo topic piuttosto che aprirne un altro (in caso contrario dimmelo e apro un nuovo topic).

Se apri la pagina che hai potuto scaricare con il metodo che mi hai indicato, vedrai che sotto il titolo di ogni sezione c'è un elemento "<hr>", a cui ho dato uno stile css.

Adesso vorrei che tale elemento, quanto mi trovo in modalità ".link:hover", cambi colore e aumenti di spessore, passando da 1px a 2px.

Sono riuscito a realizzare facilmente questo effetto...ma il problema è che così facendo gli elementi successivi (contrassegnati dalle classi "contenuto_griglia" e "leggi"), scendono di 1 px.

Potrei dare un posizionamento assoluto a questi ultimi due elementi, tuttavia mi piacerebbe sapere se esiste una soluzione più semplice per far si che l'aumento di spessore dell'elemento HR (oppure di un eventuale border-top da applicare alla classe "contenuto_griglia"), possa essere adottato senza influire sugli elementi successivi posizionati relativamente.

[KillerWorm]

Ciao, possiamo continuare qui, d'altronde si parla pur sempre di bordi con transizioni

Sono riuscito a realizzare facilmente questo effetto...ma il problema è che così facendo gli elementi successivi (contrassegnati dalle classi "contenuto_griglia" e "leggi"), scendono di 1 px.

Chiaro, il bordo è "aggiunto" alle dimensioni dell'elemento nel calcolo dell'ingombro quando ha proprietà box-sizing:content-box (valore di default).

Potresti però risolvere applicando box-sizing:border-box, quindi impostando height con un valore fisso (in questo caso il valore finale di 2px) e un solo bordo (top o bottom) che va da 1px a 2px. In questo modo l'altezza (e quindi l'ingombro dell'elemento) non varia e non genera lo spostamento degli elementi a seguire.

Qui un esempio. Chiaramente rimuovi le altre eventuali tue regole, relative ad hr, così che non interferiscano con queste:

.link hr{
  box-sizing: border-box; /* vedi nota */
  height: 2px;
  border: none;
  border-bottom: 1px solid #888;
}

.link:hover hr{
  border-bottom: 2px solid #d97132;
}

NOTA:
Per convenzione, in genere box-sizing viene ridefinito come border-box per tutti gli elementi. Questa pratica è detta "reset del box model css".
Anche nella tua pagina è presente questa particolarità ma viene fatto uso anche del normalize.css dove (per vecchie questioni di compatibilità tra browser, da quel che so) viene RIapplicato content-box su hr.

Ad oggi, secondo gli standard attuali supportati comunque da pressoché tutti i moderni browser, non ci sono problemi di sorta nell'applicare quanto indicato.

---

Questa mi pare la soluzione più semplice per il caso specifico ma chiaramente potrebbero esserci varie altre soluzioni più o meno complesse da valutare anche a seconda dei casi.

Giusto per chiarire, nota che il bordo viene "inspessito" verso l'alto o il basso (a seconda di usare bottom o top) perché mantiene comunque il riferimento relativo al limite del suo contenitore. Ora, su una variazione tra 1px e 2px questo effetto è piuttosto irrilevante ma, se la variazione fosse maggiore, potrebbe risultare sgradevole qualora l'effetto voluto fosse quello di estendere la linea rispetto al suo centro e non verso l'alto o il basso.

Supponiamo ad esempio di volere una riga che vada da 1px a 8px. In quest'ultimo caso si potrebbe adottare un'altra soluzione (comunque valida anche per la riga di 2px). Puoi usare background per creare la riga (anziché border) e applicare background-clip:content-box, quindi giocare, ad esempio, col padding per "tagliare" il background in modo da ridurre lo spessore della "riga".

Più facile farlo che spiegarlo. Qui un esempio:

.link hr{
  box-sizing: border-box;
  height: 8px; /* spessore finale della riga */
  border: none;
  background: content-box #888; /* qui il trucco con background-clip: content-box */
  padding: 3.5px 0; /* il background viene tagliato di 3.5px sia sopra sia sotto, lasciando quindi 1 su 8px dello spessore finale */
  transition: .2s;
}

.link:hover hr{
  background-color: #d97132; 
  padding: 0; /* il background qui avrà l'altezza totale di 8px */
}

[ivanisevic82]

Grazie per la consueta disponibilità e per la meravigliosa spiegazioni killer!

Domani mi concentrerò con calma per mettere in atto i tuoi preziosi suggerimenti, grazie ancora!

[KillerWorm]

you're welcome

Per il momento buon fine anno