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.
Related
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 am trying to scale the contents of an iframe in all browsers including IE >= 7 but it doesnt work below 9.
I modified the code from this post for the dimensions I think I need and want to put a standard 960px wide page inside of it.
How can I scale the content of an iframe?
http://www.carsonfarmer.com/2012/08/cross-browser-iframe-scaling/
#wrap {
width: 410px;
height: 426px;
padding: 0;
overflow: hidden;
border:1px solid #ccc;
box-shadow: 0px 0px 3px #333;
}
#frame {
-ms-zoom: 0.5;
-ms-transform-origin: 0 0;
-moz-transform: scale(0.5);
-moz-transform-origin: 0px 50px;
-o-transform: scale(0.5);
-o-transform-origin: 0px 50px;
-webkit-transform: scale(0.5);
-webkit-transform-origin: 0 0;
}
#frame {
width: 950px;
height: 1000px;
border: 0;
overflow: hidden;
}
In IE 8 the content is too small for the container and I get some scrollbars.
In IE 7 the content is not scaled.
http://jsfiddle.net/t2GPm/
I can answer the question about why IE7 doesn't scale at all:
-ms-zoom: 0.5;
The above line will work in IE8 but not in IE7, because IE7 doesn't recognise the -ms- prefix. Prefixed styles were only introduced in IE8.
You can fix this in IE7 by specifying an un-prefixed version of the zoom style. However, this isn't the full answer because zoom is also supported by Chrome and Safari; you probably don't want to use it in these browsers, as you're using transform for them.
Yes, it's a complex issue. Given the above, your best options are to use conditional comments to make the zoom property specific to IE (there are various ways to achieve this).
The other option, of course, is simply to drop support for IE7. Frankly, this isn't a bad idea; it has a lot of major issues, and a rapidly decreasing number of users. (all the stats I've seen recently say it now has fewer users than IE6)
More generally, it's important to know that zoom is not the same as scaling using transform. zoom does not actually scale the element; it zooms it. The distinction is subtle but does make a difference, particularly with relation to the layout of elements around the box being zommed/scaled, and may explain the scroll-bar problems you're having in IE8.
Because of this, zoom may not actually be what you want to do. You're using it because old IE versions don't support transform, but there are other ways of getting old IE versions to scale an element. One option is to use the proprietary filter style. It's not pretty, but it might a better fit for what you're trying to do. Try this:
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',
M11=1.5320888862379554, M12=-1.2855752193730787,
M21=1.2855752193730796, M22=1.5320888862379558);
(above code taken from here)
Another option is to use a Javascript 'polyfill' library such as CSS Sandpaper. This library allows you to use standard CSS syntax for transform in old IE versions that don't don't support it. Under the hood, it uses the same filter style described above, but by giving you the ability to use standard code, it makes your CSS a lot neater.
Moving away from the original questions slightly, but while we're on the topic of vendor prefixes, I note that you haven't specified an unprefixed version of the transform style either. When using prefixed styles, it is important to also specify the unprefixed variant, so that it can be picked up by fully standards-compliant browsers, and because browsers that previously used a prefix may drop support for the prefix once the standard is well established.
Depending on version support you need, you may actually be able to drop some of the prefixed attributes already - firefox hasn't needed it since version 16 for transforms. You can see more info on this sort of thing at CanIUse.com.
Hope that helps.
I'm using DD roundies on a list element (li) that also has a filter applied for gradient and the rounded corners dont appear, but if I remove the gradient the rounded corners appear. Is there something I can do to fix this or is this a known limitation with roundies?
#hero-tabs li {
display:block;
float:left;
width:279px;
/*height:100px;*/
font-size:11px;
line-height: 1.3;
color:#fff;
border-left:1px solid #ccc;
cursor:pointer;
background-color:#555;
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#222222, endColorstr=#666666);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#222222', endColorstr='#666666')";
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#666), to(#222));
background-image: -moz-linear-gradient(100% 100% 90deg, #666, #222);
}
DD_roundies.addRule('#hero-tabs .first-tab', '0 0 0 5px');
Thanks
I have ound this also and there appears to be no work around at present. You can have one or the other, not both.
IE applies the gradient filter to the original element so the rounded elements from dd_roundies don't cover it.
It's not a limitation with roundies, it's a limitation with filter gradients. This is proved by the fact that filter gradients also cause similar problems in IE9 with standard border-radius corners.
There is no easy work-around available; the best solution is simply not to use those filter gradients in older versions of IE; so IE8 and earlier would just a fall-back solid colour background.
IE9 does have a work-around, as it can use an SVG image with a gradient as the background embedded in the CSS as a data-URL. It's a bit clunky, but it does work. IE8 doesn't have this option though.
If you must use gradients in IE8, you're pretty much forced to stick with the filter styles, and live with the bugs.
There is one other option though -- CSS3Pie. This is a small JS library similar to DD_Roundies in that it adds border-radius support to old IE versions. But in addition, it also does gradients. My advice, therefore would be to use CSS3Pie instead of DD_Roundies, and it will deal with both issues for you at once.
Hope that helps.
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.