Mito - Scrivere CSS del futuro

I CSS hanno introdotto una serie di nuove funzionalità come Gradienti CSS, Ombre, Raggio bordo e Animazione che possono essere tutte ottenute esclusivamente con i CSS. Ci sono anche diverse funzionalità che devono ancora essere implementate a causa del supporto del browser per le variabili CSS e le funzioni calc() CSS. Ma se non puoi davvero aspettare il futuro, diamo un'occhiata a Myth.

Il mito, a differenza di altri pre-processori che inventano la propria sintassi, usa la stessa sintassi delle specifiche standard . È possibile utilizzare variabili, eseguire operazioni matematiche o cromatiche e scrivere nuove proprietà CSS nella sua forma ufficiale. Il suo obiettivo è consentire agli sviluppatori di scrivere puro CSS, ma allo stesso tempo essere in grado di utilizzare la sintassi del futuro standard.

Iniziare

Per iniziare, è necessario installare Myth binary per poterlo compilare allo standard CSS corrente. Non esiste un'applicazione GUI come Codekit o Koala che supporti Myth al momento della scrittura, quindi questo è l'unico modo per compilare Myth in un formato CSS compatibile con il browser .

In Terminale, digitare il seguente comando:

 npm installazione -g mito 

È quindi possibile utilizzare questo comando di seguito, ad esempio, per compilare source.css in output.css .

 mito source.css output.css 

Oppure, digita questo per monitorare source.css e compilarlo su output.css per ogni modifica.

 mito - guarda source.css output.css 

Il mito non introduce una nuova estensione. Funziona con .css come mostrato sopra.

Scrivere CSS con Myth

Il mito inoltre non introduce funzioni e regole proprietarie come gli altri preelaboratori CSS, quindi dovresti essere in grado di abituarti a Myth quasi immediatamente. È come un semplice CSS.

variabili

Iniziamo con Variabili. In CSS, viene dichiarata una variabile, in questo modo:

 : root {var-length: 10px; var-color: # 000; } .class {background-color: var (colour); larghezza: var (lunghezza); } 

Mito compila questo codice nel formato compatibile con il browser:

 .class {background-color: # 000; larghezza: 20px; } 

Puoi fare riferimento al nostro precedente articolo sull'utilizzo delle variabili CSS per maggiori dettagli.

Operazioni matematiche

Come accennato, possiamo anche eseguire operazioni matematiche con la nuova funzione calc() CSS3. Abbiamo anche trattato questa funzione nel nostro precedente articolo: Utilizzo della funzione Calcolatrice CSS3.

Estendiamo il nostro primo esempio con esso:

 : root {var-length: 10px; var-color: # 000; } .class {background-color: var (colour); larghezza: calc (var (lunghezza) / 2); } 

Mito compila i codici di cui sopra in:

 .class {background-color: # 000; larghezza: 10px; } 

Regolazioni del colore

Il mito supporta anche alcune operazioni sul colore o regolazioni come in LESS o Sass. Una nuova funzione standard è proposta per essere inclusa nella specifica CSS denominata color(), incluso un set di funzioni di regolazione del colore come tint(), shade() e blend() solo per nominarne alcune.

Di seguito è riportato un esempio: aumentiamo la luminosità del colore dello sfondo 80% e diminuiamo il colore del bordo del 50% .

 : root {var-length: 20px; var-black: # 000; var-white: #fff; } .class {background-color: color (var (black) lightness (+ 80%)); border: var (border-width) tinta unita (var (bianco) leggerezza (- 50%)); larghezza: calc (var (lunghezza) / 2); } 

Quel codice produrrà:

 .class {background-color: rgb (204, 204, 204); border: 2px solid rgb (128, 128, 128); larghezza: 10px; } 

Autoprefixer

Il mito aggiungerà automaticamente anche il prefisso del venditore alle proprietà CSS. Possiamo semplicemente scrivere, ad esempio, CSS Box Shadow, in questo modo:

 .class {box-shadow: 2px 1px 0px var (nero); } 

L'output è:

 .class {-webkit-box-shadow: 2px 1px 0px # 000; box-shadow: 2px 1px 0px # 000; } 

Pensiero finale

Adoro l'idea del Mito. Con esso, possiamo scrivere oggi puro CSS del futuro senza preoccuparci del supporto del browser. E poiché utilizza la sintassi standard, in seguito quando tutti i browser l'hanno implementata (come standard), non avremo bisogno di riscrivere tutto il codice. Penso che inizierò a usarlo in ognuno dei miei progetti futuri. E tu? Adotterete lo stesso?

PNotify - Un plugin di notifica altamente personalizzabile

Per alcuni di noi che sono costantemente occupati, le notifiche ci tengono aggiornati su ogni evento importante, news e informazioni. Riduce i tempi di attesa mentre ci aggiorna con gli ultimi eventi, e non c'è da meravigliarsi se riceviamo notifiche su desktop e cellulari allo stesso modo.Se tuttavia vuoi creare una notifica per il tuo sito, puoi crearlo facilmente con questo plugin chiamato PNotify.

(Consigli tecnici e di design)

Convertire la casella di controllo HTML in iOS 7 Switch con Switchery.js

La casella di controllo è molto utile per fornire input agli utenti. Quando gli utenti inseriscono il valore reale, visualizza un segno di spunta all'interno della quadratino quadrata. Personalizzare l'aspetto della casella di controllo può essere fatto facilmente tramite CSS. Anche così, la personalizzazione riguarda solo la casella e controlla lo stile . P

(Consigli tecnici e di design)