Share
Molti di voi potrebbero essere consapevoli del fatto che di recente abbiamo lanciato un servizio Web utile, chiamato Nettuts + Prefixr. Per fortuna, lo strumento ha fatto molta strada dal lancio iniziale, poiché ho eliminato numerosi bug e aggiunto alcune nuove funzionalità. Mi piacerebbe darvi una rapida carrellata sullo stato attuale dello strumento, nonché su come usarlo.
Prefixr prende tutti quei fastidiosi prefissi CSS3 che dobbiamo digitare ancora e ancora e li elimina! Se crei i tuoi fogli di stile utilizzando la sintassi ufficiale, puoi, in fase di distribuzione, eseguire il tuo foglio di stile pulito tramite Prefixr e aggiornerà immediatamente il tuo foglio di stile per includere tutti i prefissi richiesti.
In questo modo, non devi occuparti di ricordare se una particolare proprietà CSS3 richiede o meno una -Signorina prefisso o no Quella conoscenza è incorporata in Prefixr.
Esaminiamo un rapido esempio. Di seguito, ho alcuni CSS sparsi che hanno un forte bisogno di aggiornamento. Nota che, in alcuni posti, abbiamo solo dichiarato un -moz prefisso; in altre aree, abbiamo usato la sintassi ufficiale, ecc.
.box opacity: .5; .container box-shadow: 20px; -moz-transition: box-shadow 2s; -webkit-border-radius: 4px; animazione: slide 1s alternate; sfondo: gradiente lineare (in alto, # e3e3e3 10%, bianco); @ -webkit-keyframes "slide" 0% left: 0; 100% left: 50px;
Copia il codice sopra e incollalo in Prefixr. In cambio, riceverai:
.box -ms-filter: "progid: DXImageTransform.Microsoft.Alpha (Opacity = 50)"; filtro: alfa (opacità = 50); opacità: 0,5; .container -webkit-box-shadow: 20px; -moz-box-shadow: 20px; box-shadow: 20px; -webkit-transition: box-shadow 2s; -moz-transition: box-shadow 2s; -o-transizione: box-shadow 2s; -ms-transition: box-shadow 2s; transizione: box-shadow 2s; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-animation: slide 1s alternate; -moz-animation: slide 1s alternate; -ms-animation: slide 1s alternate; animazione: slide 1s alternate; background-image: -webkit-gradient (lineare, a sinistra in alto, a sinistra in basso, color-stop (10%, # e3e3e3), a (bianco)); background: -webkit-linear-gradient (in alto, # e3e3e3 10%, bianco); sfondo: -moz-linear-gradient (in alto, # e3e3e3 10%, bianco); sfondo: -o-linear-gradient (in alto, # e3e3e3 10%, bianco); sfondo: -ms-linear-gradient (in alto, # e3e3e3 10%, bianco); sfondo: gradiente lineare (in alto, # e3e3e3 10%, bianco); @keyframes "slide" 0% left: 0; 100% left: 50px; @ -moz-keyframes "slide" 0% left: 0; 100% left: 50px; @ -webkit-keyframes "slide" 0% left: 0; 100% left: 50px; @ -ms-keyframes "slide" 0% left: 0; 100% left: 50px;
Wow - questo è un sacco di stile duplicato. Ma, sfortunatamente, è necessario in questo momento. Se si desidera che le applicazioni Web siano il più coerenti possibile dal browser al browser, è necessario utilizzare questi vari prefissi. Tuttavia, come puoi immaginare, questo può rapidamente gonfiare il tuo codice. Ecco perché Prefixr è così utile!
Crea i tuoi fogli di stile utilizzando la sintassi ufficiale, quindi esegui Prefixr quando esegui la distribuzione o quando hai bisogno di una conversione.
Nessun problema! Nemmeno io. Visitare Prefixr.com è solo un modo per aggiornare i fogli di stile. Preferisco di gran lunga usarlo nel mio editor di codice preferito. Grazie a vari utenti, ci sono una manciata di plugin e script disponibili per gli editor più popolari. Ad esempio, come utente di Sublime Text, utilizzo personalmente il plugin "Sublime Prefixr" di Will Bond, che funziona meravigliosamente.
Ora, non devo mai visitare manualmente Prefixr e copiare e incollare il mio foglio di stile. Seleziono semplicemente il bit di CSS che desidero ottimizzare e digito ctrl + alt + x su Windows e Linux, o cmd + Ctrl + X su OSX.
Fare riferimento di seguito per l'elenco corrente di editor supportati.
Ci sono innumerevoli utenti di TextMate là fuori; creiamo un comando che eseguirà una selezione attraverso Prefixr e inseriremo il risultato negli appunti. All'interno di TextMate, accedere all'editor dei pacchetti e creare un nuovo comando.
Incolla quanto segue nella textarea "Comando". Questo prenderà il testo selezionato, lo eseguirà attraverso Prefixr e copierà la risposta negli Appunti. Successivamente, assegna una chiave di attivazione e tutto è pronto! Questo è utile se preferisci memorizzare i risultati prefissati in un foglio di stile separato.
curl -sSd "css = $ TM_SELECTED_TEXT" "http://prefixr.com/api/index.php" | pbcopy
Oppure, se preferisci che il risultato sia compresso, modifica il comando, in questo modo:
curl -sSd "css = $ TM_SELECTED_TEXT & compress_option = true" "http://prefixr.com/api/index.php" | pbcopy
Ora, se il tuo foglio di stile visualizza:
.box border-radius: 5px;
Seleziona il foglio di stile, digita la chiave di attivazione che hai assegnato e quanto segue dovrebbe essere ora archiviato negli appunti (presumendo che tu usi l'opzione di compressione).
.box -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
Prefixr non è lo stesso tipo di preprocessore di Less, Stylus o Sass. Adoro quelli - Sass e Stylus in particolare. Prefixr è invece per le persone che non amano l'idea di usarle. Detto questo, le variabili sono utili, quindi se desideri utilizzarle in Prefixr, aggiornerà automaticamente i tuoi fogli di stile. Per esempio:
@variables site_width: 960px; .container width: var (site_width);
Esegui attraverso Prefixr e otteniamo:
.container width: 960px;
È importante notare che questa è una caratteristica completamente opzionale. Se ritieni che le variabili complichino i CSS, non usare questa funzione!
Nettuts + Prefixr è in fase di sviluppo attivo, quindi se si nota un bug o si desidera implementare una nuova funzione, lasciare un commento qui sotto o fare clic sul pulsante "Commenti" su Prefixr.com.
Accentsconagua