I'm using Chris Pederick's Firefox addon "Web Developer 1.1.6". I get this warning when hitting a certain web page on my site:
Unknown property 'MozOpacity'. Declaration dropped.
What does this mean and how can I fix this on my site?
It's customary for browsers to prefix experimental or proprietary features with -moz (for Gecko-based browsers) or -webkit (for webkit) so they can be used but don't interfere with standard CSS rendering. In the case of -moz-opacity, it seems that they have finally removed the proprietary tag since the standard opacity tag is supported.
I don't think any equivalent convention is followed by the IE team, but then again IE is so behind the pack it probably never came up ;)
Are you using mozopacity in your CSS stylesheet? This might be spelled wrong and is thus triggering an error.
You might be looking for -moz-opacity which has been dropped as of Firefox 3.0.
It might not be an issue with your site. Some browser plugins - for instance, Firebug or Web Developer - often add extra styles dynamically to the page for debugging purposes; I've noticed the unofficial -moz-* styles pop up in my own Firefox debugging.
However, this isn't necessarily a problem with your page; it could be a problem that your user agent is first creating itself, and then assuming later that there's a problem with your page.
First, I suggest trying to disable your Firefox plugins and seeing if you still get aforementioned error. Then, make sure your plugins are up-to-date - especially any development/debugging type ones that might be manipulating the DOM after pageload.
there is some proprietary css declaration :
- filter (from microsoft);
- -moz-corner-radius, -moz-opacity and other -moz prefixed from mozilla
- -khtml prefixed from safari
these are NOT standard and it works ONLY in that browser.
If you don't expect -moz properties to work on safari and filter on firefox, you can ignore that warnings :)
Related
Similar to disabling JavaScript in browsers, is there a way to disable support for various CSS3 properties in Firefox or Chrome to quickly confirm a page is rendering OK if support for certain properties isn't there? I know it's only a presentation layer, but I'm just hoping there's a more efficient way to test against this without using old browsers, especially if Modernizr is being utilised.
A project called deCSS3 manages to disable a large majority of CSS3 properties through the use of a bookmarklet that overrides and neutralises their usage with !important rules.
A recent addition to the project is "Modernizr class toggling" for an added level of testing when Modernizr is utilised.
Even if there were a way to do so, would it help? Each browser has its own quirks, so there is no guarantee that e.g.:
Firefox - CSS3 = Older Browser
CSS3 isn't a set of additions to CSS2, it replaces CSS2. The backgrounds and borders module in CSS3 includes border and background as well as border-radius and box-shadow. If you 'turn off' CSS3 you turn off all CSS, and even if you could disable the new stuff Tom's answer is correct - that wouldn't leave you testing anything that actually exists in the real world.
If you need a way to "turn off CSS3" then I don't think you're thinking about/implementing progressive enhancement/graceful degradation properly. You should be starting with non-CSS3 stuff, then enhancing your site with it. When you build the non-CSS3 foundation and test it in your target browsers, then adding CSS3 shouldn't change anything (browsers ignore styles they don't recognize). If you sandbox your CSS3 in its own stylesheet, then you can tell old versions of IE to completely ignore it (or, if you're using stuff that's only partially supported in IE9, can tell all versions of IE to ignore it) to save a download.
That said, CSS is handled by the core rendering engine, so in order to view a page without CSS3, you have to view it in a browser that doesn't support CSS3. It sucks, it means you have to have several browsers, and even virtual machines (or physical machines) to test very well, but such is the state of web development, unfortunately. Theoretically, you should be testing in several browsers, anyway, and already know that IE6-8 have their own quirks that don't even relate to CSS3, and should already be set up to test them (so, therefore, if you need to test old versions of other browsers, you can install them in your IE test environment).
There's a useful add-on for Firefox called "User Agent Switcher" which allows you to bump your browser rendering down to an older version of IE (the iPhone rendering is also pretty useful). That should help you double check.
Where can I find a complete "browser specific css attributes" reference?
I mean some attributes such as -moz-border-radius that is just for Firefox or -webkit-min-device-pixel-ratio. These examples work just in a specified web browser. I want a complete reference for these attributes.
Each vendor should maintain a list of custom CSS extensions. The ones I've found are linked below.
Mozilla (Firefox)
Opera
Safari (merged with standard CSS properties)
Internet Explorer (outdated)
Ones I can't find ...
Chrome (same engine as Safari, some slight differences in vendor extensions supported)
Peter Baverloo's table is the best reference I have been able to find for all browsers in one single page.
Check out css3files. It's a site that talks about all popular css3 functions, in what browsers they work and what code you need to use.
You can take a look at this page: http://caniuse.com/
It also shows most, if not all, HTML5 and CSS3 features and their support.
I've noticed that Safari and Chrome behave the same when it comes to HTML and CSS. However, there are differences between Firefox and Safari (and hence, Chrome as well).
Sometimes things can look great in Firefox, but the CSS misbehaves in Safari and Chrome. The cause of the mis-behaviour can be attributed to "anything" (as opposed to in IE 6 and 7, mis-behaviours are usually caused by excessive paddings/margins that cause elements to float out of position). For example, while debugging CSS of a website for Safari the following attributes have caused cross-browser misbehaviours:
position
height
width
padding
margin
Is there a common pattern to Chrome and Safari CSS debugging?
Can you guys offer insight into the differences between Safari and Firefox that may help me with my cross browser debugging?
Thanks
Typically, and anecdotally, the majority of large differences between cross-browser rendering of the same page are due to:
invalid (x)html, use the on-line html validator from the W3 to ensure the validity of the mark-up.
lack of establishing a base-line for CSS (as #Jeroen suggests: use a css reset).
use of CSS which varies in support from browser-to-browser, particularly the newer CSS 3 (transitions, column-count and box-reflect1 particularly, though there are many, many others).
This may, or may not be, a proposal for inclusion in CSS3 by the World Wide Web Consortium, the only references I've found for it are exclusively with the -webkit vendor prefix, which suggests that it's probably a proprietary extension. I can, however, hope that others will follow suit. It's so much easier to apply reflections with css than with js/php...
I have noticed differences, but not that dramatic. As usual, most differences can easily be overcome / avoided by using a css-reset. Do you use one on the pages you are talking about?
This css difference is because, there is a default styles difference for firefox and chrome browsers. click this links for default css sheets
http://hg.mozilla.org/mozilla-central/file/tip/layout/style/html.css
http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css
While developing the webpage itself we have to make sure of overriding this default styling commonly for both browsers. using the browser extensions like -webkit and -moz etc..
After development and in debugging state, we need to override this default styles. I don't think we have any common debugging for this. correct me if i am wrong.
Are there tools other than Firebug Lite that might help one get into Internet Explorer's buggy little mind and find out precisely where and why it's mangling my CSS so badly?
Firebug Lite is a useful tool of course, but it seems to be missing the crucial feature (present in the 'full' Firebug plugin) that allows you to see which parts of which declarations are ignored in favor of other declarations.
For example, using Firefox with Firebug I can see that .foo {color: red} is overridden by .bar {color: blue} later in the stylesheet.
But, Firebug lite only seems to show the final, calculated style -- I can't tell which declarations are being ignored, which are being overridden, which aren't supported at all, and which are just plain buggy.
Is there another tool that might be helpful here?
I am using IE8 Developer Tools (which is included out of the box), it can show style tracing.
IE7 have also Microsoft-supplied add on called IE Dev Toolbar. Have not used this extensively though.
What version of IE are you using?
Yes. In IE8 hit F12. In previous versions, install this.
The developer tools included with IE8 works quite well.
I have found jQuery to be helpful in figuring out what's going on "under the hood" so to speak. For instance, I had a situation recently where I found that I could not trust the Developer Tools that come with IE 8 (which, by the way, I was running in IE 7, standards not quirks, compatibility mode. Some CSS properties declared in the stylesheet were not being shown as computed, in addition to other IE-strangess I was experiencing. So, I just threw some javascript on the page, including jQuery, which would allow me to type up some code and have it evaluated without relying on IE Developer Tools, Firebug or the Web Inspector in Safari. You can evaluate statements like:
$('body').css('background-image');
which might return:
'/images/default_background.png'
or whatever.
YMMV, but it's worth the time to try it.
I don't know if it has the ability to check specific css overriding, but I'd start out the Internet Explorer Developer toolbar
Another one is the Debug Bar. Works in IE 7 or 8; and is similiar to Firebug
You can use my new tool to view the layout of any element you can mouse over.
HTML Box Visualizer - GitHub
I am a CSS newbie. Is there a tool that can help debug CSS styles applied to a web page.
How does one generally debug CSS and resolve issues when some elements on the page are not appearing as they should? For now, I have to painfully comment out CSS declarations one by one to understand how the styles are getting displayed.
By browser:
Firefox there is a plug in module called Firebug. It is easy to install and very powerful. It is even better when combined with 'Web Developer' for Firefox.
Internet Explorer has a Developer Toolbar, which is not as good as Firebug but good enough to check things still work in IE. Additionally there is a tool called IE DOM inspector. There is also a version of Firebug for IE caled Firebug Lite.
Google Chrome comes with built in tools similar to Firebug. See the 'tools->developer' option in the pull down menu to the right of the address bar. This allows you to see the css rules used by each element. It also has Javascript debugging support.
Safari uses a tool called Web Inspector.
Opera has a built-in utility called Dragonfly.
You use Firebug in Firefox, which makes debugging a lot more easy.
And built-in DragonFly in Opera.
You can use the Firebug plugin for Firefox. It is very useful for CSS.
You can dynamically switch on and off styles and fields from styles. It is great.
If you're not using Firefox you can now get Firebug Lite which you can use in IE etc.
Web developer tools like Safari’s Web Inspector or Firebug for Firefox can help you to debug your CSS. Those tools can show you the rule cascade applied to a specific element and allow you to change or disable particular properties.
Use Firefox to develop and test your CSS first, then switch to other browsers to test your code. This is a generally accepted method IMHO.
Firebug is great, but it works even better if you combine it with Web Developer plug in for FF.
There is a great site, worth checking out, with lots of info about CSS and HTML development.
When you need to debug IE - specific problems. I've heard people telling IE DOM inspector is not too bad. You can also try tools described in this post.
Now you can use my newly released tool for this in most modern browsers!
HTML Box Visualizer - GitHub