border-radius is a CSS3 property and it is used to make rounded corners. I wanted to make corners of one of my images rounded.
So I styled my image using CSS as below
#Images{
margin-top:20%;
margin-left:20%;
border:2px solid #BC8F8F;
padding:2px;
border-radius:40px;
}
I got the result as expected (with rounded corners) when this is run in firefox 26.0, chrome 32.0.1700.102 and IE 9.0.
But I found the below styling in a blog which defines border radius separately for firefox and webkit (I guess webkit is chrome and safari, correct me if I am wrong)
div{
background-image: url(beach.jpg);
width: 375px;
height: 500px;
border: 8px solid #666;
border-radius: 40px;
-moz-border-radius: 40px;
-webkit-border-radius: 40px;
}
Why should we define border-radius for each and every browser when we get the result without doing it?
TL;DR: You shouldn't.
Vendor prefixed properties (-something-) are experimental implementations. They are not standard CSS (although the naming convention is blessed by the CSS specification to avoid conflicts with other experiments).
They are used before a property becomes standard so that authors can try it out and provide feedback to help develop the specification (and find bugs in the particular browser's implementation).
border-radius has been supported through a standard property for a long time. There is no reason to use experimental vendor prefixed versions of the property as it is no longer experimental.
The CSS 2.1 specification says:
Authors should avoid vendor-specific extensions
… since experimental implementations are designed for experimenting with, not use in general websites. They might do different things in different versions of a browser as the specification is developed and they should become unsupported in the future as the standard versions take over.
According to http://caniuse.com/border-radius, you don't have to use prefixes.
Related
We have browser prefixes or hacks for
(for Google and Safari) text-align: -webkit-right;
(for Firefox) text-align: -moz-right;
(for Opera) text-align: -o-right;
What is for IE?
Below code working for me in chrome,Mozilla,safari and opera but in IE text is not coming on right....Any Answer ?
style="display: table-cell; width: 25%; vertical-align: bottom; text-align: -webkit-right;text-align: -moz-right;text-align: -o-right"
These browser prefixes are needed as the browsers experiment and test out their implementations of the newer CSS3 properties. Sometimes all the prefixes are not always needed, but it usually does not hurt to include them, as long as you make sure to put the non-prefixed version last.
text-align: -webkit-right;
text-align: -moz-right;
text-align: -o-right;
text-align: -ms-right;
text-align: right;
There are several reasons why this is important, but I’m not going to get into that here. Just make it a rule to always include the non-prefixed version and put it at the end.
Internet Explorer 9 supports many (but not all) of the favorite CSS3 properties. You can use border-radius without any vendor-prefix, for example.
Some properties are so far along in development, that some browsers are dropping the prefix. Border-radius is one property that is pretty well developed at this point. The latest versions of major browsers all seem to support it without the vendor-prefixes. Keeping them in the code, however, allows you to make sure users who don’t update their browsers, will still be served.
When I use the text shadow css, mozilla and chrome are showing different smudging levels.
#dfg{
color: #fff;
text-shadow: 0px 0px 2px white;
}
In mozilla I'm getting a more smudged look which i don't want. I've tried
-moz-text-shadow : 0px 0px 1px white;
but it doesn't help. Is there a method in css to give browser specific text shadow values or should i go for a javascript to identify the browser and then select a shadow level.? Please help.
chrome version
mozilla version
Personally I think a Javascript based method would work best, all modren browsers support the standard CSS shadow function, I think you were thinking of -moz-window-shadow which is a OSX feature.
also look into the blur property of text-shadow, perhaps explicitly defining it?
I have been asked to fix up some CSS that another worker in our company created. The code contains the following:
div#bwrap {
position: absolute; bottom:35px; left:120px; right: 60px; height:10px;
} body>div#bwrap {position:fixed;}
and:
div#mwrap {
margin-left:0;
voice-family: "\"}\"";
voice-family:inherit;
margin-left:16px;padding: 85px 60px 35px 240px;
font-family: Segoe UI,Tahoma,Verdana,Arial,sans-serif;
} body > div#mwrap { height: 500px; margin-left:0; }
I understand this code is for older browsers but does anyone know which ones it fixes problems for. If for example it is for IE6 or earlier then our company no longer uses that browser.
Do I still need the:
body>div#bwrap {position:fixed;}
and
voice-family: "\"}\"";
voice-family:inherit;
IE6 doesn't support the > selector, so the references to body>div#bwrap won't work in IE6.
Since they are effectively identical to the main selectors above them div#bwrap, this implies that the bits inside the body>div#bwrap are overrides for browsers other than IE6.
In the first example, IE6 would produce an element positioned absolute, whereas all other browsers would position it fixed. If you are no longer supporting IE6, you can therefore move that style into the main div#bwrap selector and remove the body>div#bwrap one.
You can find out more about supported CSS selectors in various browsers here: http://quirksmode.org/css/contents.html
The voice-family bit is a hack which tells the hacked browser to ignore the rest of the styles in the selector. It is also IE6-specific, so if again if you're dropping IE6 support, you can drop the hack. You can find out more about this hack here: http://tantek.com/CSS/Examples/boxmodelhack.html
The second example also has a matching > selector, which you need to treat in the same way as the first example, although the margin-left is specified in both anyway (since they're using this method of separating IE6, I don't know why they bothered with the voice-family hack as well).
The voice-family/box model hack is definitely for old browsers (like IE5, old). More info on that can be found here.
The positioning thing I'm not sure about. Here's some information that might pertain to it. Specifically, the "IE >= 6" portion, where it mentions a hack and notes that it breaks position: absolute;. Without context, and given the format, I'd assume it's an older one, though, too. I'd say comment it out and check IE7/8 to see if it affects it. I think IE8 has developer tools (like Firefox's Firebug plugin), I'm not sure about IE7, though, but you can check them, too, if they're available.
My comment may be redundant but here are my points to take into account:
div#bwrap (You usually don't need the 'div' bit, it's cleaner to omit it.)
The voice-family part is, as mentioned, a really old hack and should be removed
If you're explicitly not supporting IE6 you may not need the child selector ">" at all
Position fixed doesn't work some webkit browsers like Mobile Safari
If you do need to support IE6 then the child selector is your best friend:
#bwrap { ... all browsers - including ie6 ... }
html > body #bwrap { ... modern override: Firefox, safari, opera, ie7+ ... }
Only implement the 'modern override' if you really really need to fix it in IE6.
Here's an example, I'm looking at in in FF 3.6 and the input with background: transparent has a different border to the untouched one.
http://jsfiddle.net/Pa2Kd/
My hypothesis is that, when the style is unaltered, a native Win32 control is used, with its default settings (more or less). But when you do alter the style, a custom control is used, or a more customized version of the Win32 control.
I remember similar things from when I was a boy and toyed with the scrollbars in Internet Explorer 4: They look normal if you do not mess with them (the theme of the OS), but if you do, they get "flat". Another thing is buttons: Windows Aero buttons look like they do - there is not really much to change. If you want to change the color of the button, you need to "disable" Aero theming of the button, and you get an old-style 3D, or flat, button, depending on your browser.
Just some thought. I might be entirely wrong, for web design is not my major field.
I second what Andreas says.
I don't know why exactly this is neither. I deduct from experience that when one of the border background-color visual attributes is altered, the browser switches from "OS rendering style" mode to "create rendering rules yourself" mode. Sadly, to my knowledge there is no CSS way of getting back to the OS rendering style.
The only way I can see to deal with this is to define a consistent ruleset for controls - which is a shame, because it's a perfectly logical choice to leave those styles rules to the user's OS.
Like the others said, this is due to default OS styling that is cleared as soon as you add any properties. You can mimick the default styling with CSS, though it would probably be overkill to do an OS detection and apply different CSS rules accordingly. Instead you could choose an OS styling that you like and apply that as the default for all text-inputs. Mac OSX styling can be reasonably reproduced with the following CSS:
#background {
background: transparent;
border:1px solid #ddd;
padding:2px;
-webkit-box-shadow:inset 0px 1px 2px #333;
-moz-box-shadow:inset 0px 1px 2px #333;
box-shadow:inset 0px 1px 2px #333;
}
Season to taste.
I've been working with Modernizr and it is a wonderful resource, just a great project. However, the way I've been using it is:
Design with baseline (IE) CSS
Enhance with CSS3 effects for advanced browsers
Unless I was going to completely replace the styles based on behavior, why shouldn't I just add styles such as box shadows, gradients and border radii to the stylesheet? If the browser doesn't understand a rule, it will just ignore it, correct? And if JavaScript is off, I can't use it anyway.
Should I be using the above method in the typical case, and Modernizr for advanced cases? Or is there something wrong with relying on browsers to ignore what they don't understand?
You're totally right that older browsers completely disregard much of what's in CSS3.
Because of that, I do my css3 in my basic selectors.. but often make use of the modernizr's no-feature classes to handle the older browser case:
div.box {
height:50px;
-moz-box-shadow: 3px 3px 5px #555;
-webkit-box-shadow: 3px 3px 5px #555; }
div.box span.fakeshadow {
display:none;
}
.no-boxshadow div.box span.fakeshadow {
display:block; background: url('fakeshadowbg.png');
}
I hope that makes it more clear.
You can use (html 5) elements that some browsers do not support yet. Also you can specify fallback styling.
A lot of browsers create their own CSS rules for things like text-transform. With Modernizr you can write one rule and Modernizr makes it happen for multiple browsers.
I think it's just convenience.