1- Nella compilazione del CSS, procedere dall'alto verso il basso del layout e dividere con i commenti le sezioni del layout.
I commenti sono una buona idea per rendere leggibile il codice.
/****** Generic classes ***/ (body, a, p, h1, etc.) /****** Main content ****/ .main-content /****** Footer *********/ .footer
2- Accorpare il più possibile le dichiarazioni assieme ( sfruttando le regole comuni e le ereditarietà ) ed evitare i selettori troppo lunghi.
Questa pseudo-classe intercetta il primo elemento figlio dell'elemento padre ( equivale a :nth-of-type. )
Nell'esempio sotto, il selettore intercetta tutti i primi elementi che sono figli dell'elemento section
section>h3:first-of-type {
border-bottom: 2px solid #eeeeee;
}
I "mixins" permettono di inserire tutte le proprietà di una classe "padre", semplicemente includendo il nome della classe stessa come uno delle proprietà della classe "figlia".
.padre{ color: red; font-size: 12px; }
.figlia{ .padre; }
Nelle dichiarazioni dei valori nel CSS, si va in senso orario: questo vuol dire che nella regola
La proprietà box-sizing è utilizzato per dire al browser quali proprietà di dimensionamento includere in larghezza e altezza: se includere il border e padding o solo il contenuto del box. Ad esempio , se si desiderano che due div siano fianco a fianco, si può creare un box-sizing a "border-box" . In questo modo il browser interpreta il box con la larghezza e l'altezza specificate posizionando il margin e il padding all'interno del nostro box.
sudo suInstallare un qualsiasi pacchetto:
sudo apt-get install NOMEPACCHETTOInstallare un pacchetto con problemi di dipendenze:
sudo apt-get -f installRimuovere un pacchetto:
sudo apt-get remove NOMEPACCHETTORimuovere un pacchetto e i vari file di configurazione:
sudo apt-get –purge remove NOMEPACCHETTOAggiornare l’indice dei pacchetti:
sudo apt-get updateAggiornare i pacchetti:
sudo apt-get upgradeAggiornare la distribuzione:
sudo apt-get dist-upgrade
Si inizia con due semplici passi:
1. Caricare la libreria ( che più che una libreria è un vero e proprio framework MVC per il frontend ) angularjs.js
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<html ng-app="myApp">
Per iniziare ad esplorare le potenzialità di AngularJs,
una libreria sviluppata sotto il patrocinio di Google, utile ad organizzare il nostro javascript (e sviluppare siti e applicativi davvero responsivi,veloci e "leggibili"),
un corso On line gratuito di code school:
http://campus.codeschool.com/
Accedere da CSS alle proprietà di un altra dichiarazione CSS:
.text {
color:#333333;
}
.altraclasse {
color: .text['color'];
}
In merito alla CDN e ai @fontface, una problematica è legata al fatto che firefox e internet explorer interpretano in modo restrittivo le policy di "Same Origin Restiction" ai font ( http://dev.w3.org/csswg/css3-fonts/#same-origin-restriction ) , per questioni di sicurezza quindi il font non verrà visualizzato.
Per poterlo visualizzare correttamente occorre inviare un'header indicando da quali origini viene permesso l'accesso:
Prendendo spunto da fontawesome ( e con il contributo non indifferente del framework bootstrap ) ci si prensenta l'opportunità di sostituire le nostre sprite di icone con un font:
Il vantaggio del font è che l enostre icone possono essere gestite con le regole dei CSS, per cui essere scalate, colorate, ruotate o ombreggiate a piacere.
Per farlo, è necessaria un poco di pratica con la grafica vettoriale, un programma che salvi gli SVG e, comodissimo, il servizio online IcoMoon App Icon Font Generator.
E' dovuto al fatto che i file svg andrebbero caricati prima di tutti.
Per risolvere la cosa è necessario creare una mediaquery che intercetti chrome e gli imponga l'uso del solo svg: