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.
Related
in a css file of a project I see this below code:
{
behavior: url(Mylink.htc)
}
I dont Know what that means,it didnt work on Firefox,could you help me to know what is this,after that maybe i could find the replace statement in firefox?!
The behavior property is for Internet Explorer version 5+. behaviorlets you attach a script using CSS in order to implement DHTML (Dynamic HTML) components.
It's only supportet by IE (up to version 9) but no other browsers.
http://reference.sitepoint.com/css/behavior
You can use it to fix things for IE that are not supportet by default, for example transparent PNG files in (very) old IE versions:
http://www.twinhelix.com/css/iepngfix/
MS official website: "Support for element behaviors and HTML components (HTCs) has been removed in Internet Explorer 10 standards and quirks modes for improved interoperability and compliance with HTML5."
A HTC file is usually used to patch support for specific CSS rules on older browsers. For example, CSS3 Pie (http://css3pie.com/about/) is used to add support to basic CSS3 declarations such as border-radius, gradients, rgba, etc...
I believe behavior is supported by IE only.
I've seen CSS styling along the following lines:
input::-webkit-input-placeholder {...}
or
input:-moz-placeholder {...}
And they raise a few questions for me:
What are these things called? (I'm having trouble googling them.)
Is there a comprehensive list somewhere of which ones are supported by which browsers?
Which meta-CSS languages (Sass, Less, Stylus, etc) have support for these, if any?
Thanks!
The thing with one colon called pseudo-classes, it is used address different states of object (like :hover and ‘active).
Shot description and list can be found there: http://reference.sitepoint.com/css/css3psuedoclasses
Description on w3.org: http://www.w3.org/TR/selectors/#pseudo-classes
The thing with 2 colons called pseudo-elements, it is used to autogenerate content or to style part of content like first letter of first line.
Description on w3.org: http://www.w3.org/TR/selectors/#pseudo-elements
There is lot of browser-specific extensions of this list through. That didn't documented in css3 standard.
You can find list for Mozilla's browsers here: https://developer.mozilla.org/en/CSS_Reference/Mozilla_Extensions in the section "Pseudo-elements and pseudo-classes".
Can't find good list of Webkit pseudo-elements and -classes through.
They're called vendor specific properties, and they typically are a vendors version of a CSS3 format. Since CSS3 isn't a standard yet, technically any browser that implements them are implementing a vendor specific extension.
-moz mean Mozilla, aka firefox, etc..
-webkit means webkit based browsers, ie Safari, Chrome, Konqueror, etc..
-ms
See: http://reference.sitepoint.com/css/vendorspecific
Where can I get the source for a browsers native/base stylesheet?
In particular the internet explorer ones.
Unlike Firefox and Chrome where you can see the standard styles that were applied to its elements indenpendentemente your own CSS, IE does not. The default styles are programmed into the engine itself, but are not treated as a style sheet that can be visualized.
You can get almost exact ones for different versions of Internet Explorer from here:
http://www.iecss.com/
You can pick from IE6 all the way up to IE9.
The same site also includes the user agent style sheets for some other common browsers, but it's reasonably easy to obtain them directly from these other browsers yourself.
There is a small problem here: if you want IE's default stylesheet to use on your page, you're probably doing something wrong.
I dont understand why the HTML5 website I am working on is different in all browsers. I know it must be CSS, but I dont know what.
on Chrome: http://slackmoehrle.com/chrome.png
on Safari: http://slackmoehrle.com/safari.png
on IE 7: http://slackmoehrle.com/ie7.png
on FireFox Mac: http://slackmoehrle.com/firefox.png
the style sheet can be found here: http://slackmoehrle.com/css.css
Can anyone shed any insight?
Many are saying that browser detection is not a good method, but I dont see what to do to make this all work in the various browsers
UPDATE:
without using a CSS reset: http://slackmoehrle.com/test/without-reset/
with using a CSS reset: http://slackmoehrle.com/test/with-reset/
Have a look at using a CSS reset stylesheet
My personal favorite is Meyer's: http://meyerweb.com/eric/tools/css/reset/
The only real problem with browser detection is the fact that if newer version of browser will support some new features (rounded borders for example), but you still will be doing some workarounds.
Better approach is to use feature detection, so you will be able to use some specific browser capabilities if it has support of them and some graceful degradation pattern when something isn't supported.
For CSS most pragmatic approach is to have reset CSS included for all browsers, then have some common CSS rules which look the same in all browser and additional CSS files for different browsers which contain rules that should be different for different engines.
From my latest experience it's almost always possible to maintain only two versions of these DIFF files - one for Firefox, Safari, Chrome and another for IE family. And use feature detection for JS.
First of all, no version of IE can handle the new elements of HTML5 without javascript help. Only modern browsers can and IE is not a modern browser.
As far as the other browsers go, I'll have to look more but I've not had any issue with any sites I've done but, then, I don't use CSS resets and set all the CSS on the elements myself.
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 :)