Hi I would like to know how to easily prevent dropped errors from appearing from debugging software such as webdeveloper plugin in Firefox. I get errors such as:
Warning: Error in parsing value for 'filter'. Declaration dropped.
Warning: Error in parsing value for 'font'. Declaration dropped.
I understand I get these errors because Firefox does not support these CSS properties, but how do I drop them before hand so Firefox does not attempt to read them in the first place? I know I can create a separate style sheet for every browser but that is a inconvenience. Is there a simple solution?
I'd always put or import IE-specific styles inside a conditonal comment;
as standard CSS FF should be fine with 'font', so just check your syntax e.g. font: bold 12px/30px Georgia, serif; values separated by spaces, multi-word font names in quotes, etc.
If you are using an IE-specific declaration (like filter), put it in an IE-specific stylesheet. It is simple and easy, and I don't really understand why it would be an incovenience (the inconvenience is IE itself).
Hiding an error does not mean the error is solved (and actually if FF shows an error in font it should be taken care of).
Related
I'm trying to get my CSS to pass validation and I have a lot of style rules that look like this:
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='../../../public/images/circ_logo_trans_50.png',
sizingMethod='crop')";
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='../../../public/images/circ_logo_trans_50.png',
sizingMethod='crop');
The validator seems to throw errors when the code is as you see it above. But when I remove the line breaks, it passes.
My understanding is that -ms-filter should be followed by a quoted string, whereas filter should not.
Is what I've said so far correct? Is there anything else about this syntax that is incorrect?
I stumbled upon this problem when trying to minify the CSS sass in.scss:out.css --style compact). When all the code is on a single line, styles at the end stop working because there is something invalid in front. I'm pretty sure it's connected to these filters.
Your understanding of the -ms-filter and filter properties is absolutely correct.
The important issue with your CSS lies in the syntax of your string. The spec explicitly states that a string cannot directly contain a newline. For the purpose of breaking a string over multiple lines in the source itself, simply add backslashes to the end of each line except the last (where the closing quote occurs):
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(\
src='../../../public/images/circ_logo_trans_50.png',\
sizingMethod='crop')";
This will allow the validator to parse your CSS correctly without choking. It should not pose problems for IE as it attempts to parse the string for its own use; unfortunately however I can't say for certain that it won't. If it does have problems, then you might have to either
do away with the line breaks altogether, or
remove the backslashes and leave these declarations invalid. The next time you validate, comment these lines out to prevent the validator parser from choking.
Note that the unprefixed filter property will remain problematic for validation, as it's a non-standard property that does not bear a prefix (prefixes being the standard way of declaring non-standard properties, so to speak). That is something you don't have to worry about, of course, knowing that you are using a widely recognized non-standard form of the property.
Hey everyone, I'm working on a site and any special characters ("’" "…") turn into garbage at any font size over 19px. I'm using fonts I defined with #font-face, and the garbage disappears when I use a fallback font. This is Firefox 3.6.13.
I've tried defining the fonts in the page with a font: declaration rather than a font-family: declaration (see here) but it doesn't work.
I can use the standard straight quote and skip the special characters, but have you seen a straight quote in a heading at 40px? Ugh.
Anybody seen this bug, and any suggestions to fix it server-side?
Perhaps you will simply have to use another font?
After some more research, I (sort of) figured out what's going on. Firefox 3+ will automatically "optimizeLegibility" for any fonts over 20px (look up CSS "text-rendering" property).
For whatever reason, the fonts I am using don't render correctly when Firefox applies this value. If I specifically declare:
body { text-rendering: optimizeSpeed; }
Suddenly the problem disappears. Obviously this might bother someone who likes the effect of "optimizeLegibility" (it's definitely a nice effect), but if you can't change font-faces and you're getting garbage in your headings, I hope this helps.
That title isn't quite as crazy it seems. I promise!!
While researching for another question, I noticed the following in Stack Overflow's stylesheets:
...
width: auto;
...
width: 650px!ie7;
padding-bottom: 20px!ie7;
...
Is this an odd type of conditional styling? Is this a mistake? Assuming it isn't a mistake, does this work with all IE versions? Is there a way of specifying that a given rule should only be applied to versions of IE greater than – say – 7?
I have never encountered of this before – I've always used conditional comments for IE-specific styles (and for what it's worth, I prefer keeping all IE-specific styles completely separate).
I have heard of this before, but not with the exact text !ie7.
I found a reference here: http://www.javascriptkit.com/dhtmltutors/csshacks3.shtml
!ie
Internet Explorer 7 fixed one of the
issues with the !important identifier,
but it still has problems when the
identifier has an error in it. If an
illegal identifier name is used in
place of important, Internet Explorer
7 and below will handle the property
normally instead of failing.
Therefore, in any style declaration
block, you can include properties
intended to only apply to Internet
Explorer and add an !ie identifier.
Almost any word can be used in place
of ie.
The !ie identifier allows the property
to be applied in IE 7 and below. It
may or may not work in future
versions. Warning: this uses invalid
CSS!
So, width: 650px!ie7; will be applied in only IE 7 and below.
The actual text ie7 is not required, but it's a sensible string to use, to remind people of the purpose behind the hack.
I came across this strange bit of CSS tonight...
display: inline !ie;
Now I've created and seen a lot of CSS and I have never seen this before or its magical powers.
You can add "!ie" at the end of any rule and it will only be applied by M$ Internet Explorer 6 & 7
Can anyone shed any light on this WTF?
Internet Explorer 7 and below have a few quirks related to the !important declaration, which is supposed to give a value higher importance than normal.[3] IE7 and earlier accept virtually any string in place of important and process the value normally, while other browsers will ignore it.
Taken from !Important Quirks section in CSS Filter - Wikipedia
At a guess, I would say that Internet Explorer tries to recover from what is quite clearly an error. The following would also work:
display: inline !pudding;
The specification says that if an invalid value is specified or an error occurs in a rule it should be ignored. It looks like most browsers stick to this but IE recovers for this specific situation.
In some cases, user agents must ignore part of an illegal style sheet. This specification defines ignore to mean that the user agent parses the illegal part (in order to find its beginning and end), but otherwise acts as if it had not been there.
http://www.w3.org/TR/CSS21/syndata.html#parsing-errors
I tried to validate my site's CSS using the W3C CSS Validator. Unfortunately, reset-min.css from YUI framework produced parse error on the string " {*font-size:100%; ".
The validator results.
On further investigation I noticed the following error on Firefox's error console:
Warning: Expected declaration but found '*'. Skipped to next declaration.
I couldn't find any explanation for the meaning of the '*', nor references for a problem in this popular reset CSS.
What am I missing?
This is a hack for IE7 and lower. IE7 and lower will skip the asterisk and continue to parse the CSS as normal. Other browsers will just ignore the entire rule.
As an example, since CSS will use the last declared version of a rule, doing the following will cause IE7 and below to use a font-size of 113%, while other browsers use a font-size of 100% for paragraphs.
p { font-size: 100%; *font-size: 113%; }
There is a little more information at webdevout.net.
Personally, I think that it is acceptable to use such hacks for the purposes of working around the brokenness of IE. Apparently, Yahoo! feels the same way.
It's probably an IE compatibility hack.
There are many CSS syntax errors that some browsers (notably IE 6) will ignore and others won't. Some CSS files will use the errors to make a rule that one browser will see and another browser won't.
EDIT: For a full list, see here. In your particular case, that rule will be seen only by IE 7 or lower.