• Passa alla navigazione primaria
  • Passa al contenuto principale
  • Passa alla barra laterale primaria
  • Passa al piè di pagina

Tiziano Fogliata

  • Home
  • WordPress
  • Web Marketing
  • Email Marketing
  • Contatti

Home » Sviluppo Web » Gestire i CSS vendor prefixes o CSS browser prefixes

CSS Vendor Prefixes: come gestirli al meglio senza impazzire

Scritto da Tiziano Fogliata il 4 Febbraio 2013

Gestire tutte le peculiarità dei diversi browser e sfruttare le varie funzionalità del linguaggio CSS3 non è una passeggiata. Vediamo però quali strumenti utilizzare per ridurre al minimo lo stress :-)

Dover gestire file CSS complessi può far impazzire

I CSS vendor prefixes, conosciuti anche come CSS browser prefixes sono una modalità utilizzata dai vari produttori di browser per supportare determinate caratteristiche del linguaggio CSS. A volte si tratta di un sistema per sperimentare nuove funzionalità non incluse del linguaggio ed altre volte invece sono sfruttati per permettere l’impiego di funzioni che non sono ancora definite come standard.

Se ti capita spesso di lavorare con i fogli di stile, ti sarai già imbattuto in espressioni come queste, relative ai vari browser:

  • Chrome: -webkit-
  • Firefox: -moz-
  • Internet Explorer: -ms-
  • iOS: -webkit-
  • Opera: -o-
  • Safari: -webkit-

E’ quasi superfluo sottolineare quanto gestire tutti questi differenti prefissi sia un lavoro tedioso e spesso foriero di errori.

Per facilitare la vita degli sviluppatori, esistono però numerose soluzioni che rendono un pochino meno ostica la creazione di CSS che sfruttano i CSS Vendor Prefixes.

Eccone alcune:

CSS3, Please

In questa pagina puoi trovare un elenco delle funzionalità utilizzate più di frequente che sfruttano i CSS Vendor Prefixes. E’ molto utile se sei abituato a creare i fogli di stile manualmente, ovvero senza l’ausilio di tecniche come LESS o Sass.

-prefix-free

prefix-free

Si tratta di un piccolo JavaScript che permette di scrivere i propri CSS senza adottare alcun prefisso, ci penserà lui ad inserirli quando la cosa si renderà necessaria. Questa tecnica renderà sicuramente più snello il tuo file CSS, ma il modo in cui la tua pagina web sarà visualizzata dipenderà fortemente dal supporto a JavaScript.

Se utilizzi LESS o Sass

LESS CSSSe invece sei già passato all’utilizzo di tecnologie come LESS o Sass per realizzare e gestire i file CSS, puoi sfruttare Compass o Bourbon (se usi Sass) oppure questi LESS Elements o LESS Hat (se preferisci LESS).

Si tratta in sostanza di librerie di stili che implementano le più comuni funzioni CSS3 come gradienti, box-shadow, animazioni e trasformazioni 3D.

Se invece non ti sei ancora avvicinato a LESS o Sass ti consiglio di dargli un’occhiata, dato che semplificano notevolmente il lavoro di realizzazione e soprattutto di manutenzione di un foglio di stile.

Buon lavoro :-)

Share9
Tweet4
Share
WhatsApp

Sezione: Sviluppo Web # CSS

Interazioni del lettore

Ti potrebbero interessare anche…

Applicare stili personalizzati ai widget su WordPress con i CSS
Bootstrap 3: le novità del framework responsive
Se sei un web designer ecco alcuni strumenti utili per te

Lascia un commento Annulla risposta

Il tuo indirizzo email non sarà pubblicato. I campi contrassegnati con un asterisco sono obbligatori.

Barra laterale primaria

Mi presento

Tiziano FogliataMi chiamo Tiziano Fogliata e mi occupo di consulenza e formazione in ambito WordPress e digital marketing.
Aiuto aziende e professionisti a sfruttare strumenti come WordPress, l'email marketing e la marketing automation per comunicare, trovare nuovi clienti e far crescere la propria attività. Autore di due libri su WordPress editi da Hoepli. Continua…

I miei video

  • Video tutorial su WordPress

WordPress: articoli consigliati

  • Come scegliere l’hosting per il tuo sito
  • Come scegliere un tema WordPress
  • Come installare WordPress su hosting SiteGround
  • 16 cose da fare prima di pubblicare il tuo sito
  • Quanto costa realizzare un sito WordPress
  • Perché consiglio Genesis come tema WordPress
  • Landing page su WordPress: guida alle soluzioni migliori
  • Guida ai Page Builder per WordPress
  • Come e perché fare il backup di un sito WordPress
  • Siti WordPress in più lingue con WPML
  • Gravity Forms: il miglior plugin WordPress per creare moduli

Footer

Risorse Utili

  • I migliori plugin per WordPress
  • Risorse WordPress
  • Guida all'email marketing
  • Glossario
  • WordPress FAQ
  • I gadget e le app e i servizi che uso

Servizi e Formazione

  • Corsi online
    Per imparare in modo facile passo dopo passo
  • Consulenza
  • Realizzazione Siti Web per Professionisti
  • Formazione su WordPress

Contatti e Social

  • Contattami
  • Facebook
  • YouTube
  • Twitter
  • Instagram
  • Feed RSS

©2004–2021 Tiziano Fogliata | Informazioni sul sito | Privacy Policy | Cookie Policy | Preferenze Cookie
Partita IVA: 02689700983 | Registro Imprese di Brescia n. 471035