userContent.css to get fixed width font in firefox
Question
I am trying to get a fixed-width monospace font in gmail's new compose feature in firefox using a bit of css in userContent.css. Something like the following used to do the trick for me:
@-moz-document domain(mail.google.com)
{
.ii, .Ak, .editable, .LW-avf
{
font-family: monospace !important;
font-size: 100% !important;
}
}
but it no longer works. Using the inspect element in firefox I see that the message is in something like:
<body id=":di" class="editable LW-avf"
Is there something I am missing here? Why is a compose window not monospace if it is in class editable and LW-avf ?
3 answers
solution1
2 2013-10-25 22:08:13
I guessed that the iframe will not have any domain associated with it. This seems to work for viewing and composing messages:
@-moz-document domain(mail.google.com) {
.gs .ii {
font-family: monospace !important;
font-size: 100% !important;
}
}
@-moz-document domain() {
.editable.LW-avf {
font-family: monospace !important;
font-size: 100% !important;
}
}
solution2
1 ACCPTED 2013-08-28 22:31:13
After taking a closer look at the gmail html, it looks like they are using an iframe with the html explicitly embedded... I have never seen this before. Something like:
<html>
<body>
<iframe>
#document
<!DOCTYPE html>
<html>
<body id=":di" class="editable LW-avf">
...
</body>
</html>
</iframe>
</body>
</html>
Presumably, the @-moz-document domain(mail.google.com) doesn't match the url for the page in the iframe (not sure what the URL would even be).
If I don't match the url then it works fine. Of course, now the style will be applied to any page with a class named editable .
I may take this up with the mozilla developers when I find time.
solution3
0 2013-08-28 22:17:44
Interesting, but can't check the specifics as I dropped GMail some time ago (google was getting too freaky with pushing social networking...)
http://www.w3.org/TR/CSS2/cascade.html#used-value
On the cascade order it says that Author mode trumps user mode. Unless user !important. Which you are using.
http://www.w3.org/TR/CSS2/cascade.html#specificity
And here it says that the more specific gets applied.
for example:
div#d.bclass { color: green; }
.aclass { color: red; }
<div id=d class="aclass bclass">hello world</div>
The div will be green all day long. But I bet you already know that.
What may be happening, is that the browser is choosing some author rule that has much more specificity than yours. which is a bug...Can you look at the Inspector and see where the computed font comes from?
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.