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+ */
Related
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
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.
The future of border-radius is defined like so below:
border-radius: 5px;
But all the prefixes are specific:
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
Are these prefixes correct? Is there a way to write the future tag and have the prefixes compiled?
According to http://caniuse.com/#feat=border-radius
Firefox supported vendorless border-radius since 4.0. Before that, use -moz.
Chrome and Safari needed -webkit both in 4.0, but not after.
-o apparently never existed; Opera has supported vendorless border-radius for some time now.
I think that non-vendor-prefixed border-radius is fine now.
I only want the background color of white in my div to be translucent roughly 50%. The content should be fully opaque. What's the proper way to do this? I imagined when I looked up the background CSS property, I'd find an opacity setting, but didn't. Don't care about IE6.
UPDATE: solving with the rgba solution given below in conjunction with CSS3PIE's solution for getting rgba to work in IE browsers.
You can use the background-color: rgba() notation:
#theIdofYourElement,
.classOfElements {
background-color: #fff;
background-color: rgba(255,255,255,0.5);
}
Edited to add the default background-color (for browsers that don't understand the rgba() notation). Albeit I was under the impression that all but IE do understand it (but I could be wrong, and haven't tested to be sure...).
Edit with thanks to #akamike.
Edited to address question from OP (in comments):
which browsers don't understand rgba? will they all in the future, is this part of css3?
The best information I could find is the CSS Tricks' rgba() browser support table, with a link to a demo and 'more complete' compatibility table.
If you want cross-browser opacity, you can handle each within your css definition
div
{
opacity: .50; /* Standard: FF gt 1.5, Opera, Safari, CSS3 */
filter: alpha(opacity=50); /* IE lt 8 */
-ms-filter: "alpha(opacity=50)"; /* IE 8 */
-khtml-opacity: .50; /* Safari 1.x */
-moz-opacity: .50; /* FF lt 1.5, Netscape */
}
There is a CSS property called backdrop-filter providing real translucency (as opposed to transparency, which is already available in CSS).
Currently supported by all modern browsers.
.my-selector {
backdrop-filter: blur(5px);
}
More about the selector
Browser support
Easiest way is to create a semi-transparent PNG and just use that as your background image for the div.
If you're using Photoshop (or similar tools) just create a 10px by 10px image that is all white -- then drag the opacity slider down to 50%. Save it as a PNG and you should be rockin'!
Using RGBA is also a possibility, but you're not just losing IE6 then -- there are still quite a few people using browsers that don't support the alpha scheme.
Is there a way in the newer CSS standards to provide round borders?
It is not possible in CSS level 2.
Yes. CSS3 already has it.
Many browsers already have it.
In Mozilla/gecko browsers you need -moz-border-radius though they are transitioning to border-radius.
In Safari/Chrome/webkit browsers you need -webkit-border-radius.
IE9 and above need border-radius (IE8 and below don't support it at all).
In the future when CSS3 is widely adopted you'll just need border-radius in all browsers.
At the moment it's a good idea to use all three, plus -o-border-radius if you're worried about Opera.
It's in CSS 3.
border-radius: 4em;
http://www.w3.org/TR/css3-background/#the-border-radius
Border-radius: create rounded corners with CSS!
This box should have a rounded corners for Firefox, Safari/Chrome, Opera and IE9.
The code for this example is, in theory, quite simple:
#example1 {
border-radius: 15px;
}
However, for the moment, you’ll also need to use the -moz- prefix to support Firefox (see the browser support section of this article for further details):
#example1 {
-moz-border-radius: 15px;
border-radius: 15px;
}
What Thomas Rutter said, plus here is a handy resource because WebKit and Gecko use different properties for things such as top-left.