Switch branches/tags
Nothing to show
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
..
Failed to load latest commit information.
README.md

README.md

light bulb icon

CSS suggerimenti per esperti Awesome

Una collezione di dritte per aiutarti a migliorare le tue capacità con CSS.

Per altre fantastiche liste di questo tipo guarda la lista di fantastiche liste curata da @sindresorhus.

Sommario

Suggerimenti per esperti

  1. Utilizzare un reset CSS
  2. Eredita il box-sizing
  3. Usa unset invece di Reimposta tutte le proprietà
  4. Usa :not() per applicare/rimuovere i bordi su elementi di navigazione
  5. Aggiungi line-height al body
  6. Centra verticalmente qualsiasi cosa
  7. Liste separate da virgola
  8. Seleziona un elemento usando gli nth-child negativi
  9. Usa SVG per le icone
  10. Usa il selettore detto "Lobotomized Owl"
  11. Usa max-height per slider fatti solo con CSS
  12. Celle di tabella con larghezza uguale
  13. Sbarazzati degli hack sui margini grazie a Flexbox
  14. Usa il selettore d'attributo con i link senza testo
  15. Styling dei link di "Default"
  16. Mantieni un ritmo verticale coerente
  17. Box con proporzioni intrinseche
  18. Styling delle immagini non scaricate
  19. Usa rem per le grandezze globali; usa em per le dimensioni locali
  20. Nascondi i video in riproduzione automatica che non sono silenziati
  21. Usa :root per caratteri flessibili
  22. Imposta il font-size sugli elementi dei form per una migliore esperienza da mobile
  23. Utilizzare gli eventi puntatore per controllare gli eventi del mouse

Utilizzare un reset CSS

reset CSS aiutare a far rispettare lo stile coerenza tra diversi browser da zero per gli elementi stilistici. È possibile utilizzare libreria di reset CSS come Normalize, et al, oppure è possibile utilizzare un approccio più semplificato di ripristino.:

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

Ora elementi saranno spogliati di margini e padding, e box-sizing consente di gestire i layout con il box model CSS.

Dimostrazione

Nota: Se si segue la punta Eredita il box-sizing in basso si potrebbe optare di non includere la proprietà box-sizing nel ripristino CSS.

torna al sommario

Eredita il box-sizing

Eredita il box-sizing dall'elemento html:

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

In questo modo diventa più facile cambiare box-sizing in plugin o altri componenti che ne sfruttano un altro.

torna al sommario

Usa unset invece di Reimposta tutte le proprietà

Quando si ripristinano le proprietà di un elemento, non è necessario reimpostare ogni singola proprietà:

button {
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  outline: none;
  padding: 0;
}

Puoi specificare tutte le proprietà di un elemento usando la stenografia all. L'impostazione del valore su unset modifica le proprietà di un elemento ai valori iniziali:

button {
  all: unset;
}

Nota: la stenografia all non è supportata in IE11 ed è attualmente in considerazione per il supporto in Edge. unset non è supportato in IE11.

torna al sommario

Usa :not() per applicare/rimuovere i bordi su elementi di navigazione

Invece di impostare il bordo...

/* aggiunge il bordo */
.nav li {
  border-right: 1px solid #666;
}

...e poi rimuoverlo dall'ultimo elemento...

/* rimuove il bordo */
.nav li:last-child {
  border-right: none;
}

...usa la pseudo classe :not() per applicarlo solo agli elementi che vuoi:

.nav li:not(:last-child) {
  border-right: 1px solid #666;
}

Certo, puoi usare .nav li + li, ma con :not() l'intento è molto chiaro e il selettore CSS definisce il bordo nel modo in cui un essere umano lo descriverebbe.

Dimostrazione

torna al sommario

Aggiungi line-height al body

You don't need to add line-height to each <p>, <h*>, et al. separately. Instead, add it to body:

body {
  line-height: 1.5;
}

In questo modo gli elementi di testo possono ereditare facilmente da body.

Dimostrazione

torna al sommario

Centra verticalmente qualsiasi cosa

No, non è magia nera. Puoi veramente centrare gli elementi verticalmente:

html,
body {
  height: 100%;
  margin: 0;
}

body {
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-flex;
  display: flex;
}

Vuoi centrare qualcos'altro? In verticale, in orizzontale... qualsiasi cosa, in qualsiasi momento ovunque? Su CSS-Tricks trovi un ottimo articolo a riguardo.

Nota bene: si verificano dei comportamenti anomali con flexbox e IE11.

Dimostrazione

torna al sommario

Liste separate da virgola

Visualizza gli elementi di una lista come fossero una vera lista con le virgole:

ul > li:not(:last-child)::after {
  content: ",";
}

Usa la pseudo classe :not() in modo da non aggiungere la virgola all'ultimo elemento.

Nota bene: può non essere l'ideale per garantire l'accessibilità, nello specifico per gli screen reader. Inoltre il copia/incolla dal browser non funziona con il contenuto generato mediante CSS. Procedi con attenzione.

torna al sommario

Seleziona un elemento usando gli nth-child negativi

Usa gli nth-child negativi di CSS per selezionare gli elementi da 1 a n.

li {
  display: none;
}

/* seleziona gli elementi da 1 a 3 e li mostra */
li:nth-child(-n+3) {
  display: block;
}

Oppure, dato che hai già imparato un po' di cose circa l'uso di :not(), prova:

/* selezionare tutti gli elementi tranne i primi 3 e visualizzarli */
li:not(:nth-child(-n+3)) {
  display: none;
}

Beh... era abbastanza facile.

Dimostrazione

torna al sommario

Usa SVG per le icone

Non c'è ragione per non usare SVG per le icone:

.logo {
  background: url("logo.svg");
}

SVG scala molto bene a tutti i tipi di risoluzione ed è supportata in tutti i browser fino a IE9. Perciò butta i tuoi file .png, .jpg o .gif-jif-qualsiasicosa.

Nota bene: se usi bottoni con esclusivamente grafica SVG e le icone SVG non vengono caricate, questo ti aiuterà a preservare l'accessibilità:

.no-svg .icon-only::after {
  content: attr(aria-label);
}

torna al sommario

Usa il selettore detto "Lobotomized Owl"

Sebbene il suo nome sia un po' strano, l'uso del selettore universale (*) insieme al selettore del fratello adiacente (+) può fornire una potenzialità CSS molto potente:

* + * {
  margin-top: 1.5em;
}

In questo esempio, tutti gli elementi nel flusso del documento che seguono altri elementi riceveranno la proprietà margin-top: 1.5em.

Per saperne di più sul selettore detto "lobotomized owl", leggi l'articolo di Heydon Pickering su A List Apart.

Dimostrazione

torna al sommario

Usa max-height per slider fatti solo con CSS

Realizza slider fatti solo con CSS usando max-height con overflow hidden:

.slider {
  max-height: 200px;
  overflow-y: hidden;
  width: 300px;
}

.slider:hover {
  max-height: 600px;
  overflow-y: scroll;
}

L'elemento si espande al valore max-height all'hover e lo slider diventa visibile come risultato dell'overflow.

torna al sommario

Celle di tabella con larghezza uguale

Lavorare con le tabelle può dare il tormento, perciò prova a usare table-layout: fixed per avere celle di larghezza uguale:

.calendar {
  table-layout: fixed;
}

Layout con le tabelle e senza tormento.

Dimostrazione

torna al sommario

Sbarazzati degli hack sui margini grazie a Flexbox

Quando lavori con gli spazi tra colonne puoi sbarazzarti di nth-, first- e last-child usando la proprietà space-between di flexbox:

.list {
  display: flex;
  justify-content: space-between;
}

.list .person {
  flex-basis: 23%;
}

Ora le colonne avranno sempre una spaziatura uniforme.

torna al sommario

Usa il selettore d'attributo con i link senza testo

Quando l'elemento <a> non ha testo al suo interno ma l'attributo href ha un link, lo mostra:

a[href^="http"]:empty::before {
  content: attr(href);
}

Decisamente comodo.

Dimostrazione

torna al sommario

Styling dei link di "Default"

Aggiunge uno stile per i link "default":

a[href]:not([class]) {
  color: #008000;
  text-decoration: underline;
}

Ora i link inseriti mediante un CMS, che solitamente non hanno un attributo class, saranno distinti senza intaccare tutti gli altri in cascata.

torna al sommario

Mantieni un ritmo verticale coerente

Fai uso di un selettore universale (*) all'interno di un elemento per creare un ritmo verticale coerente:

.intro > * {
  margin-bottom: 1.25rem;
}

Un ritmo verticale coerente procura un'estetica visuale che favorisce la leggibilità del conenuto.

torna al sommario

Box con proporzioni intrinseche

Per creare un contenitore con proporzioni intrinseche tutto ciò che devi fare è applicare a un div del padding superiore o inferiore:

.container {
  height: 0;
  padding-bottom: 20%;
  position: relative;
}

.container div {
  border: 2px dashed #ddd;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

Uare un padding del 20% rende l'altezza del contenitore pari al 20% della sua larghezza. Non importa quale sia la larghezza della finestra, il div figlio manterrà le proporzioni stabilite (100% / 20% = 5:1).

Dimostrazione

torna al sommario

Styling delle immagini non scaricate

Rendi le immagini non scaricate più piacevoli esteticamente con un po' di CSS:

img {
  display: block;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 300;
  height: auto;
  line-height: 2;
  position: relative;
  text-align: center;
  width: 100%;
}

Ora aggiungi le regole per gli pseudo elementi al fine di mostrare un messaggio e un riferimento URL dell'immagine non scaricata:

img::before {
  content: "Siamo spiacenti, l'immagine non è stata scaricata. :(";
  display: block;
  margin-bottom: 10px;
}

img::after {
  content: "(url: " attr(src) ")";
  display: block;
  font-size: 12px;
}

Ulteriori informazioni sullo styling secondo questo pattern nell'articolo di Ire Aderinokun.

torna al sommario

Usa rem per le grandezze globali; usa em per le dimensioni locali

Dopo avere impostato la dimensione di base del font sull'elemento root (html { font-size: 100%; }), imposta la dimensione del font per gli elementi testuali con em:

h2 {
  font-size: 2em;
}

p {
  font-size: 1em;
}

Poi imposta il font-size per i moduli con rem:

article {
  font-size: 1.25rem;
}

aside .module {
  font-size: .9rem;
}

A questo punto ogni modulo diventa compartimentalizzato, più facile da modellare, più manutenibile e più flessibile.

torna al sommario

Nascondi i video in riproduzione automatica che non sono silenziati

Questo è un fantastico trucchetto per un foglio di stile personalizzato per un utente. Evita di sovraccaricare un utente col suono di un video che parte in riproduzione automatica quando la pagina viene caricata. Se il suono non è disabilitato non mostrare il video:

video[autoplay]:not([muted]) {
  display: none;
}

Ancora una volta stiamo sfruttando la pseudo classe :not().

torna al sommario

Usa :root per caratteri flessibili

In un layout responsive la grandezza del carattere dovrebbe essere in grado di adattarsi a ogni risoluzione. Puoi calcolare la dimensione del font basandoti sull'altezza e sulla larghezza della finestra usando :root:

:root {
  font-size: calc(1vw + 1vh + .5vmin);
}

Adesso puoi usare l'unità basata su root em sul valore calcolato da :root:

body {
  font: 1rem/1.6 sans-serif;
}

Dimostrazione

torna al sommario

Imposta il font-size sugli elementi dei form per una migliore esperienza da mobile

Per evitare lo zoom sugli elementi dei form dai browser mobile (iOS Safari, et al.) quando si tocca una <select>, aggiungi font-size alle regole del selettore:

input[type="text"],
input[type="number"],
select,
textarea {
  font-size: 16px;
}

💃

torna al sommario

Utilizzare gli eventi puntatore per controllare gli eventi del mouse

Eventi puntatore consentono di specificare come il mouse interagisce con l'elemento che sta toccando. Per disabilitare l'evento puntatore predefinito su un pulsante, ad esempio:

.button-disabled {
  opacity: .5;
  pointer-events: none;
}

È così semplice.

torna al sommario

Supporto

Le attuali versioni di Chrome, Firefox, Safari, Opera, Edge ed IE11.