I stumbled upon very weird bug. I defined a ::-webkit-input-placeholder rule which coloured the placeholder. Then I added the ::-moz-placeholder to it, combining them into one rule:
#textinput::-webkit-input-placeholder, #textinput::-moz-placeholder {
color: red;
}
Meanwhile each of these selector works on it's own (webkit only or moz only), together separated by comma they don't work at all.
See the examples in this jsfiddle, which you can try in both webkit and firefox.
What happens is that when a browser encounters an invalid selector it ignores the whole list of selectors. -moz is not recognized by webkit and -webkit is not recognized by firefox. That's why it fails in both browsers
BTW, according to this comment from CSS-Tricks, looks like IE7 behaves differently
Related
Chrome on Left, Firefox on Right
We're using jqmath and would like to use the line-through text-decoration, as described here: How does one indicate strikethrough in jqmath?
This works in Chrome, but is not working in Firefox.
.deletedText {
color: red;
text-decoration: line-through;
}
...Neither of these will produce a line-through in FireFox (but both work in Chrome)
<li>$ \cl "deletedText"{ax^2+bx+c=0}$</li>
<li class="deletedText">$ax^2+bx+c=0$</li>
Any assistance is appreciated.
This is an issue with native MathML in Firefox. Firefox and Safari actually implement (large parts of) MathML, but the implementations don't always respect all CSS properties. This example works in Safari 10, for example, but I don't know if it will continue to work in Safari in the future. You could file a bug at mozilla. One problem is that MathML is not being actively worked on by the browser vendors (I am hoping this will change as schools get more computers, but I've been hoping for years/decades, sigh), and another problem is that the MathML spec was developed for non-CSS and pre-CSS (!) environments, and some might argue the spec doesn't explicitly state that all CSS properties must be implemented/respected.
If strikethrough is a requirement for you, then in the short-term you can turn off native (browser) MathML in javascript:
M.MathML=false;
Do this in a <script> that's after the <script src="..."> tag that you use to load jqmath.
For some reason, a ::selection declaration in my CSS simply is not working, it is always behaving as per the default (light blue background on Chrome, Mac).
The code works fine in a jsbin
::selection {
background: red;
}
Thus my assumption is something is being overridden somewhere in the project, but I can't find another declaration of ::selection anywhere in the stylesheet. I was wondering if there is any way to see this in the Developer Tools to try to pinpoint or debug why it isn't working in my project?
Even giving the CSS an !important declaration isn't helping.
edit
OK, I tried debugging further by adding:
<style type="text/css">
::selection, ::-moz-selection {
background: red !important;
}
</style>
to the footer of the document, and thus it turns out that one cannot combine these two declarations in one statement, which was mentioned by Chris Coyier in this comment:
I have a question: Why can´t you put ::selection and ::-moz-selection together and define a value for both of that? If you do that FF will ignore the values.
That’s a good CSS lesson! When a browser doesn’t understand any part of a selector, it ignores
the whole selector (even if they are comma separated). There are some
exceptions but mostly in old browsers (IE 7?).
So all is well and working again, but the question still stands I suppose, is there a way to see this declaration in the devtools somehow?
edit 2
Ok, of course, when the declaration sits on its own line, then it appears in the inspector.
edit 3
A very relevant SO question: Why isn't it possible to combine vendor-specific pseudo-elements/classes into one rule set?
I'm just surprised Chrome doesn't just still show the malformed declaration in the inspector rather than hiding it completely.
Try to check via inspect element.
Right click on web page
Select "inspect" option
In inspect element panel, there will be style appear in right hand side.
You will find your :selection declaration in it.
I've recently came across a project with css rules like this:
#media screen and (-webkit-min-device-pixel-ratio: 0) {
#header .searchform input:-moz-placeholder, #header .searchform textarea:-moz-placeholder {
line-height: 140%;
}
}
In my opinion this is kinda weird, as I know vendor prefixes are used to target different browsers. What about a situation like this then, when you use a different vendor prefix compared to the parent? Is it just a typo from a previous programmer? Or is it a perfectly valid rule that would apply in certain scenarios? If yes, what would the scenario be when this rule gets applied?
Looks like a careless mistake. There are no known implementations of Gecko that recognize -webkit-min-device-pixel-ratio — the prefix that Gecko uses is min--moz-device-pixel-ratio1 instead, which has since been deprecated in favor of the standardized resolution. And there are no known implementations of WebKit or Blink that recognize :-moz-placeholder.
Either way, this snippet of CSS is meaningless to both engines. At best, in WebKit/Blink, you get an empty #media screen and (...) {} rule, and in Gecko, you theoretically get #media not all { ... }, which means "this rule will never be applied in any situation".
1 Unlike the code in the question, this is not a typo.
-webkit-min-device-pixel-ratio:0 Is a browser hack to target Safari 3+ and Chrome 1+.
input:-moz-placeholder Is a pseudo-class that has been deprecated in Firefox 19 in favor of the ::-moz-placeholder pseudo-element and only targets Firefox browsers.
Given your code that your code is asking to target Safari and Chrome only to then run code for FireFox only; it's ultimately code that will never run under any circumstances and is likely a mistake.
Additional information can be read on the Safari 3+ / Chrome 1+ hack here:
https://css-tricks.com/snippets/css/browser-specific-hacks/
and more information on -moz-placeholder can be found here:
https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-placeholder
and more information on style placeholder text in general can be found here:
https://css-tricks.com/snippets/css/style-placeholder-text/
I've got the following CSS:
.class1,
.class2:hover,
.class3:disabled { color:red; }
This works in Chrome, Firefox, Safari, IE9 and IE7.
Only browser that doesn't support this is IE8.
Is there a way to make it work?
Tnx
IE 8 does not support the pseudoclass :disabled (neither does IE7) altogether. Multiple classes and :hover are supported.
Unlike IE7, IE8 behaves correctly according to §4.1.7 and ignores the entire rule due to the fact that it cannot interpret one of the selectors.
I'm currently trying to style a <meter> tag in all major browsers: IE7-9, FF, Chrome, Safari and even Opera. I've managed to remove the default <meter> styling by using the following CSS code:
meter::-webkit-meter-bar, meter::-webkit-meter-optimum-value, meter::-webkit-meter-suboptimum-value, meter::-webkit-meter-even-less-good-value {
background: 0;
}
This technique works fine in all mentioned browsers, except Opera! It keeps showing the default green meter. Any idea on how to "destyle" the <meter> tag in Opera?
There is no way yet to style such elements in Opera. There is a proposal called Component Object Model which will obliquely allow us to do such styling when it is in a Working Draft, but we are not close to one.
Webkit has implemented a method that is not in any standard and just a suggestion, and I wouldn't assume this is how it would in the future. Most likely these pseudo-element names would change.
Before I start: shouldn't it be background: transparent; or background: inherit;? See the background property in HTML Dog.
I think you're misunderstanding. The meter::-webkit-meter-bar selector should have no effect at all on IE, FF and Opera since the -webkit part is a selector for Webkit. Chrome and Safari use Webkit as a render engine, but FF uses Gecko, Opera uses Presto, etc.
For FF you would probably need something like -moz-meter-bar...
For Opera I do not know. This Opera community page seems to imply that the prefix would be -o rather than -webkit or -moz.
Good luck.
It's also a good practice to include the "normal" selector when adding such rules.
(And if you're lucky, this might just make it work in Opera.)
meter::-webkit-meter-bar,
meter::-webkit-meter-optimum-value,
meter::-webkit-meter-suboptimum-value,
meter::-webkit-meter-even-less-good-value,
meter::meter-bar,
meter::meter-optimum-value,
meter::meter-suboptimum-value,
meter::meter-even-less-good-value {
background: transparent;
}