I'm using the following css code in my web page:
appearance: none;
-moz-appearance: none; /* Firefox */
-webkit-appearance: none; /* Safari and Chrome */
Does these codes support IE6 / IE7 / IE8? if not, then is there any alternate code that can work in IE6/IE7/IE8?
As you can see here the IE is not supporting appearance.
The appearance property is not supported in any of the major browsers.
Firefox supports an alternative, the -moz-appearance property.
Safari and Chrome support an alternative, the -webkit-appearance
property
Related
Here is my CSS code:
input:focus::-webkit-input-placeholder { color:transparent; }
input:focus::-moz-input-placeholder { color:transparent; }
My CSS is not working on Mozilla Firefox. Please let me know what is wrong in my code.
Thanks in advance.
According to CSS Tricks, the correct selector is:
::-moz-placeholder /* Firefox v19+ */
:-moz-placeholder /* Firefox v18- */
(Because it seems you're using CSS3 selectors, you can just use the former)
You probably got this confused because Webkit has its own vendor prefix of -webkit-input-, but Firefox only has -moz- (without the input).
I have created my own buttons and set up some simple border radius.
So far I have the following which works fine for me in newer browsers but I am not sure what I have to add here to cover IE8 and IE9 as well (I am not interested in older versions).
Can someone tell me if I need to add or change anything else here to cover common browsers ?
I would like to support newer versions of Chrome, Firefox, Opera and Safari + IE (incl. IE8 and IE9).
Would "-ms-..." be required here for IE10 and "-o-..." for Opera ?
I do not want to cover Netscape and Konqueror (unless someone recommends this).
My CSS:
-moz-border-radius: 5px; /* Firefox */
-webkit-border-radius: 5px; /* Safari */
-webkit-appearance: none;
border-radius: 5px;
Many thanks in advance,
Mike
You can't cover IE8 in pure CSS, because it does not support neither final nor vendor-prefixed implementation. IE9 will support it just fine.
You can see full support table here:
http://caniuse.com/#search=border-radius
So based on this table, to answer your question, you won't need -ms-... for IE10 and -o-.. for Opera.
When using border-radius:5px for example, how many cross browser versions are reasonable to get in the habit of using on every project?
I have been just using:
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
Is this going to work on all modern browsers or is there anything else that I should be doing?
In terms of border-radius, you can simply leave it as
border-radius: 5px;
Unless you're looking to achieve support for really old browsers see here
For other situations/css properties, however, It would be important to include the -ms-, -moz-, -webkit- and unprefixed versions. By using this same website, you will find out which browsers need which prefix for each of the css properties.
border-radius: 12px; /* Android 2.1+, Chrome, Firefox 4+, IE 9+, iOS 4+, Opera 10.50+, Safari 5+ */
I have buttons to zoom-in or zoom-out content. In firefox cursor works well (its like magnifier with +). But in chrome I have default cursor. This is my code:
.button.zoom-in {
...
cursor: zoom-in;
}
Can someone help me, why that works in forefox and in chrome not? Also, other cursors like help, move, pointer... works in chrome too.
For Chrome you have to use the prefixed-property-value:
.button.zoom-in {
...
cursor: -webkit-zoom-in;
cursor: zoom-in;
}
Here is a jsfiddle.
This page from Mozilla is an excellent reference to different cursors as well as browser compatibility for each.
For the zoom-in and zoom-out cursors, the following should work for Chrome 1.0+, Firefox 1.0+, Opera 11.6+ and Safari 3.0+. Zoom-in/out is not supported by IE.
.button.zoom-in {
cursor: -moz-zoom-in;
cursor: -webkit-zoom-in;
cursor: zoom-in;
}
I'm having issues getting a stylesheet to display correctly in Firefox. It looks fine in Chrome and IE, however none of the styles seem to be applied in Firefox. Any suggestions?
Here's the link: http://www.bearfootmgmt.com
I checked style.css and there's a rather malformed rule here:
$toppart {
/* For WebKit (Safari, Google Chrome etc) */
/* For Mozilla/Gecko (Firefox etc) */
background: #fff) -moz-linear-gradient(top;
/* For Internet Explorer 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#DAE4EE, endColorstr=#FFFFFFFF);
/* For Internet Explorer 8 */
-ms-filter: "progidDXImageTransform.Microsoft.gradient(startColorstr#DAE4EE, endColorstr#FFFFFFFF)";
}
I ran your site through the CSS validator and it also found this misspelled selector:
#maincontent a:hovvr {
color:#ce0101;
text-decoration:underline;
}