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


10 fantastici plugin PostCSS per creare una procedura guidata CSS

PostCSS è recentemente diventato il nuovo ragazzo dei cerchi di sviluppo web, e giustamente, in quanto offre un ottimo modo per accelerare il flusso di lavoro dello sviluppo di frontend e migliorare la qualità dei CSS . È uno strumento incredibilmente versatile che rende possibile trasformare gli stili CSS con i plugin JavaScript . La sua flessibilità sta nel modo in cui è costruita.

La parte centrale di PostCSS è un modulo Node.js che puoi installare con npm e ha un ecosistema di oltre 200 plug-in che puoi scegliere di utilizzare nel tuo progetto.

PostCSS non è né un preprocessore né un postprocessore, in quanto diversi plug-in PostCSS possono rientrare in una di queste categorie o in entrambi; dipende interamente da te cosa ne pensi. Con PostCSS, non è necessario imparare una sintassi diversa come nel caso di Sass o LESS; puoi immediatamente iniziare a usarlo.

PostCSS prende il tuo file CSS esistente e lo trasforma in dati leggibili da JavaScript, quindi i plug-in JavaScript eseguono le modifiche e PostCSS restituisce la versione modificata del file originale. Sembra fantastico, vero?

In questo post daremo un'occhiata a 10 plugin PostCSS per darti un'idea di alcune delle grandi cose che puoi ottenere con questo fantastico strumento.

# 1. Autoprefixer

Autoprefixer è probabilmente il plug-in PostCss più conosciuto, poiché è utilizzato da aziende tecnologiche note come Google, Twitter e Shopify. Aggiunge i prefissi dei fornitori alle regole CSS dove è necessario .

Autoprefixer utilizza i dati da Can I Use. In questo modo non viene datato e può sempre applicare le regole più recenti. Puoi controllare come funziona sul suo sito demo interattivo.

# 2. CSSnext

CSSnext è un transpiler CSS che ti permette di usare la futura sintassi CSS sui siti correnti . W3C ha molte nuove regole CSS che non sono attualmente implementate dai browser, ma potrebbe consentire agli sviluppatori di scrivere CSS più sofisticati più velocemente e più facilmente. CSSnext è stato creato per colmare questa lacuna.

Vale la pena dare un'occhiata alle sue funzionalità per vedere cosa è possibile ottenere con esso, ad esempio è possibile utilizzare query multimediali personalizzate, selettori personalizzati, modificatori di colore, filtri SVG e nuove pseudoclassi nei progetti.

# 3. PreCSS

PreCSS è uno dei plugin PstCSS che funziona come un preprocessore CSS. Permette di sfruttare un markup simile a Sass nei tuoi file del foglio .

Introducendo PreCSS nel tuo flusso di lavoro puoi utilizzare variabili, istruzioni if-else, for loop, mixin, regole @extend e @import, nidificazione e molte altre utili funzionalità nel codice CSS. La documentazione Github di PreCSS fornisce istruzioni dettagliate su come sfruttarla al meglio.

# 4. StyleLint

StyleLint è un moderno linter CSS che rilegge e convalida il tuo codice CSS. Semplifica gli errori e ti spinge a seguire convenzioni di codifica coerenti.

StyleLint comprende l'ultima sintassi CSS, quindi può essere utilizzato insieme al plug-in PreCSS precedentemente menzionato. Permette anche di creare la tua configurazione e controlla anche se le tue impostazioni sono valide.

# 7. Font Magician

Se sei un fan della tipografia sofisticata, ti piacerà sicuramente il plugin PostCSS di Font Magician . La magia di Font Magician si basa sulla sua capacità di generare automaticamente tutte le necessarie regole @font-face .

Il suo funzionamento è piuttosto semplice, è sufficiente aggiungere la font-family: "My Fav Font"; Regola CSS per un elemento HTML e Font Magician fa il resto del lavoro. Può aggiungere Google Fonts, la copia locale di un font, la tipografia Bootstrap e anche caricare i caratteri in modo asincrono. Ecco il suo sito demo interattivo.

# 8. Scrivi SVG

Ti sei mai chiesto quanto sarebbe bello scrivere SVG direttamente nei tuoi file CSS? Con l'aiuto del plug-in Write SVG PostCSS puoi raggiungere facilmente questo obiettivo.

Questo pratico plug-in, ad esempio, consente di archiviare gli sfondi e le icone SVG nel file CSS e successivamente di aggiungerli all'elemento HTML pertinente nel seguente modo:

 @svg square {@rect {fill: var (- colore, nero); larghezza: 100%; altezza: 100%; }} .example {background: white svg (square param (- color # 00b1ff)) cover; } 
# 10. PostCSS Sprites

Il plugin PostCSS Sprite semplifica la generazione di sprite di immagini, ovvero raccolte di immagini inserite in un singolo file. Dopo aver impostato alcune opzioni, il plug-in preleva le immagini dal file del foglio di stile, le unisce in uno sprite, quindi aggiorna i riferimenti alle immagini ovunque sia necessario.

È possibile utilizzare diversi filtri e cernie per determinare quali immagini si desidera inserire nello sprite ed è anche possibile impostare le dimensioni dell'immagine di output.

Supercharge Siri per controllare le app di terze parti con GoogolPlex

Supercharge Siri per controllare le app di terze parti con GoogolPlex

Introdotta come funzionalità per iPhone 4S nel 2011, Siri ha consentito agli utenti iOS di controllare le proprie app tramite comandi vocali. Tuttavia, questo non si estende alle app di terze parti, a meno che non si effettui il jailbreak del dispositivo iOS.La buona notizia è un hack chiamato GoogolPlex, progettato da 4 matricole dell'Università della Pennsylvania per l' hackathon della Primavera 2014 di PennApps, sta per cambiare tutto questo.Us

(Consigli tecnici e di design)

Scopri il nuovo Surface Pro di Microsoft

Scopri il nuovo Surface Pro di Microsoft

Sono passati quasi due anni da quando Surface Pro 4 è stato rilasciato per la prima volta e molti speravano che Microsoft sarebbe finalmente arrivata con il suo successore . Bene, quelli che stavano aspettando un nuovo dispositivo Surface saranno lieti di sapere che Microsoft ha annunciato ufficialmente il nuovo Surface Pro, ed ecco quello che devi sapere al riguardo .

(Consigli tecnici e di design)