it.hideout-lastation.com
Paradiso Per Designer E Sviluppatori


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?

Crea la tua Guida al piano personale con la guida del percorso

Crea la tua Guida al piano personale con la guida del percorso

La navigazione di un grande edificio per la prima volta può essere molto disorientante, in particolare se stai cercando attivamente uno sport particolare in detto edificio. La stessa Microsoft sarebbe probabilmente consapevole del fatto che la navigazione in un nuovo luogo potrebbe essere una sfida per alcuni, motivo per cui la società ha rilasciato un'app chiamata Path Guide per dispositivi Android.P

(Consigli tecnici e di design)

Più di 60 siti Web per acquistare regali Geeky che dovresti sapere

Più di 60 siti Web per acquistare regali Geeky che dovresti sapere

I negozi online come Amazon sono il posto migliore per trovare grandi regali per i tuoi cari. Tuttavia, se il tuo amico è un geek a memoria, potresti essere interessato a ottenere qualcosa di unico. E per quel regalo unico, dovresti fare irruzione in alcuni negozi online geek. Se vuoi acquistare roba da geek per te o regalarla al tuo genio amico, ci sono molti negozi di geek online che possono farti piacere.

(Consigli tecnici e di design)