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?

50 siti che ti pagheranno per le cose che fai ogni giorno

Persone in tutto il mondo sono alla ricerca di nuovi modi per guadagnare denaro extra, e a volte fanno di tutto per farlo. Tuttavia, il mercato del lavoro online è così vasto e ci sono una serie di fonti dalle quali puoi guadagnare denaro facendo cose che già fai nella tua vita normale.Potresti aver sentito parlare di siti di lavoro freelance per designer e sviluppatori, tuttavia, questi siti si rivolgono a una nicchia specifica. E

(Consigli tecnici e di design)

30 Altri siti Web da scaricare Foto stock e immagini royalty-free

Che sia per il tuo sito personale o solo un nuovo ritratto che ti piacerebbe appendere da qualche parte nella tua stanza, le foto d'archivio sono essenziali per le tue esigenze di progettazione . Poiché le questioni relative al copyright diventano un problema, è necessario considerare l'utilizzo di un'immagine royalty-free per il progetto a cui stai lavorando, in parte per il budget e in parte per mantenere il tuo lavoro libero da violazioni.I

(Consigli tecnici e di design)