css e firefox… mo ci divertiamo

premetto: adoro firefox.

mi piace da quando si chiamava phoenix, che poi e’ diventato firebird per motivi di copyright del nome della Phoenix Foundation^[1] (mai mettersi contro Mac Gyver…).

che poi e’ diventato Firefox per via del Database open source Firebird (derivato da Interbase), che pur non detenendo diritti sul nome era gia’ in giro da diversi anni (in effetti chiamarlo firebird fu una scelta abbastanza infelice) .

Che poi e’ diventato… ah no, si chiama ancora Firefox (hanno avuto la decenza di registrarlo sto nome, cosi’ evitano di cambiarlo ancora, o fanno causa a chi lo usa in modo improprio (?!?)) ..

 

Ma digressioni a parte, c’e’ una cosa che ho sempre detestato in questo mitico browser: i controlli predefiniti, ovvero i pulsanti, caselle di riepilogo e di testo che vengono visualizzate nelle pagine web che non hanno un foglio di stile che li definisca. Odio QUESTO:

Oggi dopo tanto tempo mi sono messo a cercare un rimedio, che si e’ rivelato molto piu’ semplice del previsto:

Firefox dispone di un foglio di stile predefinito, posto in “/usr/lib/firefox/res/forms.css” (nella mia Kubuntu).

aggiornamento: in windows si trova in <$PROGRAMMI>/Mozilla Firefox/res/forms.css

Basta modificare quello e…

MAGIA

 

tutto diventa piu’ gradevole… (a mio avviso)

wordpress non mi consente di uploadare il mio file modificato e non ho voglia (adesso, domani chissa’) di spulciare per metterlo su qualche server esterno, comunque il codice che ho aggiornato in quel file e’:

 

input {
-moz-appearance: textfield;
/* The sum of border-top, border-bottom, padding-top, padding-bottom
must be the same here, for buttons, and for <select> (including its
internal padding magic) */
padding: 1px 0 1px 0;
border: 2px inset ThreeDFace;
background-color: -moz-Field;
color: -moz-FieldText;
font: -moz-field;
line-height: normal !important;
text-align: start;
text-transform: none;
word-spacing: normal;
letter-spacing: normal;
cursor: text;
-moz-binding: url("chrome://global/content/platformHTMLBindings.xml#inputFields");
text-indent: 0;
-moz-user-select: text;
border-top: solid;
border-left: solid;
border-bottom:solid;
border-right:solid;
border-color: #3F4B50;
border-width: 1px;
margin-top: 2px;
margin-bottom: 2px;
margin-left: 2px;
margin-right: 2px;
}


e questo


button,
input[type="reset"],
input[type="button"],
input[type="submit"] {
-moz-appearance: button;
/* The sum of border-top, border-bottom, padding-top, padding-bottom
must be the same here, for text inputs, and for <select>. For
buttons, make sure to include the -moz-focus-inner border/padding. */
padding: 0px 6px 0px 6px;
border: 2px outset ButtonFace;
background-color: ButtonFace;
color: ButtonText;
font: -moz-button;
line-height: normal !important;
white-space: pre;
cursor: default;
-moz-box-sizing: border-box;
-moz-user-select: none;
-moz-binding: none;
text-align: center;
border-top: solid;
border-left: solid;
border-bottom:solid;
border-right:solid;
border-color: #3F4B50;
border-width: 1px;
margin-top: 2px;
margin-bottom: 2px;
margin-left: 2px;
margin-right: 2px;
}

Ovviamente e’ il prodotto di tre minuti di sviluppo, sicuramente molti di voi sapranno fare di meglio…

happy coding…

[1] in realta’ era la Phoenix Technologies