FireFox for Developers, cosa è cambiato nel tempo

Un nuovo articolo prende forma sui canali di HTML5 AndMore, un articolo che segna la volontà di descrivere a tutti gli sviluppatori i passi in avanti fatto dal browser FireFox con il susseguirsi dei vari aggiornamenti.

Siccome una analisi completa avrebbe reso questo stesso articolo veramente lungo, e talvolta anche noioso, abbiamo deciso di suddividere questo articolo in diverse sezioni, quella che state leggendo in questo momento si focalizzerà sulle migliorie introdotte per i CSS tanto importanti per i nostri design! Quindi bando alle ciancie e partiamo subito!

Firefox 8

Altri aggiornamenti e correzioni sui fogli di stile sono state introdotte grazie a questo nuovo aggiornamento:

  • il tipo di dato resolution è stato rivisto per accettare valori numerici e non soltanto interi come era fino alla versione precedente;
  • introdotta la sillabazione per molti linguaggi quando viene utilizzato hyphens, che per FireFox viene preceduto dal vendor prefix -moz
  • modificata la gestione della proprietà background-size per avvicinarzi alle specifiche;
  • correzione problematiche con la proprietà text-decoration;
  • le immagini SVG vengono scalate correttamente quando utilizzate come background.

FireFox 7

In questo aggiornamento vediamo invece una minor concentrazione per quanto riguarda i fogli di stile per i quali è stata comunque introdotta la proprietà text-overflow e corretto un errore nella proprietà -moz-orient che affliggeva la dimenzione di default per gli oggeti orientati verticalmente.

FireFox 6

Con questo nuovo aggiornamento vediamo una lista delle nuove proprietà introdotte relative ai CSS, con particolare attenzione all’elemento <progress>:

  • -moz-text-decoration-color – proprietà che ci permetterà di definire il colore per le varie decorazioni dei testi come sottolineature, barratura ecc…
  • -moz-text-decoration-line – qui possiamo decidere il tipo di decorazione che il nostro testo dovrà avere;
  • -moz-text-decoration-style – nuova proprietà che ci permetterà di inserire aggiuntive decorazioni per i nostri testi;
  • -moz-hyphens – nuova proprietà che ci permetterà di gestire la sillabazione delle nostre parole all’interno dei vari elementi HTML;
  • -moz-orient – nuova proprietà, dedicata al momento ai browser Gecko, che permette di dichiarare l’orientamento dei vari elementi, particolarmente utile per gli elementi <progress>;
  • ::-moz-progress-bar – specifica proprietà per gestire l’elemento <progress> all’interno dei browser di casa Mozilla.

FireFox 5

La parte relativa ai CSS in questa versione non è stata presente come nel precedente aggiornamento, ma vediamo l’introduzione di una delle più interessanti novità introdotte dalla terza specifica dei fogli di stile, le animazioni!

FireFox 4

Ecco una lista delle novità introdotte con questa versione:

  • CSS Transition – le transizioni CSS sono diventate una soluzione innovativa per aumentare l’interattività delle nostre pagine senza richiedere aiuto da parte del JS;
  • calcoli con i CSS – graze alla proprietà -moz-calc a partire da questa versione potremmo eseguire dei calcoli matematici direttamente all’interno dei nostri CSS, mai pensato di scrivere width: -moz-calc( 100% – 80px )??? Bene adesso possiamo!
  • raggruppamento selettori – grazie alla pseudo classe :-moz-any() possiamo creare degli insiemi di selettori simili, maggiori informazioni in questa pillola;
  • rettangoli per i background – introdotta la proprietà -moz-image-rect che ci aiuterà ad utilizzare dei sottorettangoli di immagini con i nostri background;
  • proprietà per i CSS a pressione – anche se manca ancora un pò di documentazione, sembra sempre una bella novità;
  • utilizziamo elementi come background – interessante utilizzo della proprietà moz-element che permette ad esempio di utilizzare una immagine creata in un elemento <canvas> come sfondo per un altro elemento;
  • cambiamenti per :visited – a partire da questa versione la pseudo classe :visited viene rivista per apportare leggere differenze nella privacy dei nostri utenti.

Nuove Proprietà

Proprietà Descrizione
-moz-font-feature-settings Ci permette di inserire anche maggiori personalizzazioni all’interno dei caratteri OpenType
-moz-tab-size Ci permette di impostare una dimenzione con unità testuali il carattere tab (U+0009) quando il testo viene visualizzato
 resize Potremmo utilizzare questa semplice regola per definire le dimenzioni per le quali potremmo ridimenzionare un elemento

Nuove Pseudo Classi

Proprietà Descrizione
:-moz-handler-crashed Cattura quegli elementi che non possono essere visualizzati perché un plugin è crashato
 :-moz-placeholder Permette di inserire un placeholder all’interno dei nostri input
 :-moz-submit-invalid Si applica al bottone submit quando uno o più elementi del form di appartenenza risultano essere invalidi
:-moz-window-inactive Si applica agli elementi contenuti in una finestra se risulta essere non attiva
:invalid Viene eseguito automaticamente sugli elementi <input> che contengono dati non validi
:optional Come sopra ma per gli elementi opzionali
:required Per i campi richiesti
:valid Applicato una volta che i dati contenuti all’interno degli elementi <input> è stato validato correttamente

Inoltre è degna di nota la trasformazione della nomenclatura per certe proprietà come:

  • -moz-background-size è diventato background-size;
  • -moz-border-radius può tranquillamente essere sostituito da border-radius;
  • -moz-box-shadow è stato sostituito dal generale box-shadow.

Lascia il tuo Pensiero