I've inherited a web project that is supposed to work in IE8 (as well as the other browsers but I am not worried about them by comparison). When I run the website in Firefox and check the Error Console it mentions:
"Warning: Unknown property '-moz-border-radius'. Declaration dropped"
Wherever -moz-border-radius appears in the style sheet border-radius also appears. For example, these were right next to each other in the style sheet:
border-radius:20px;
-moz-border-radius:20px;
Is there any reason to keep the -moz-border-radius styling? Is it better to just remove them?
-moz-border-radius hasn't been necessary in firefox for a long time, so I'd remove it. See:
https://developer.mozilla.org/en-US/docs/CSS/border-radius
-moz-border-radius removed from firefox 13
border-radius:20px; will work in all new browsers
-moz-border-radius: was for older versions of FireFox , and -webkit-border-radius: was for older versions of Chrome. Both browsers update them selves so users SHOULD be ok with border-radius: for everything .
I don't see wrong though with adding extra properities in CSS that may not be used by new browsers to ensure that all old browsers also function properly.
Related
Currently, when I code I use:
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
But based on my tests, it didn't make any difference with any modern browser ( Chrome 33+, opera 25+, safari 8+). Internet Explorer 8 doesn't supports this property, but the vendor prefixes won't make any difference.
Is there any reason to keep them?
Use http://caniuse.com/#search=border-radius for checking such
Conclusion: No need for adding vendor prefixes for border-radius, as its supported in all major browsers (and IE9+). If you really need border-radius in IE8 check out: How to apply border radius in IE8 and below IE8 browsers?
But in 99% of cases border-radius is not crucial to a design. Employ the technique of graceful degradation and leave IE8 with square corners
You can also add PrefixFree to your page to cover you in a few more cases than just border-radius, as it will add these prefixes for you to be safer.
And for backwards compatibility using CSS3 with older versions of IE there is PIE (again not just for border-radius but others) and you can just add this where you need it:
behavior:url('pie.htc');
I'm doing som cross browser fixes for IE8 and I came across something I've never seen before. Is there someone who have seen this crazy shadows before? and is there someone who knows what possibly is causing this?
I'm attaching two screenshots, one from IE8 and one from Chrome.
IE8 - http://cl.ly/image/1u0t0A2D0p0l
Chrome - http://cl.ly/image/411L1B0Y2X3Y
Thanks for any kind of help!
View HTML and CSS here: http://marcusfriberg.com/skillbird/stof.html
This problem is not only happening in IE8 but also in IE9. When I checked through Developer tool, It is clearly showing that it is happening because of the property filter which is given in the post-top and stats-type classes. I suggest you to go with conditional css to overcome this problem. Have a look at this link(community additions too) for clear understanding about the behaviour of filter in IE browsers.
EDIT:
And also in MDN, The filter property is not documented for IE browsers. Check compatibility section. It also stated that
Older versions (4.0 through 9.0) of the Windows Internet Explorer browser supported a non-standard "filter" that has since been deprecated.
The other filter property which is compatible with IE Browsers can be found at this link (not for IE9).
IE8 does not support text-shadow in CSS, which is what Chrome and IE appear to be using here.
http://caniuse.com/css-textshadow
If this is code you inherited, then it is quite likely that someone tried to use an alternative method for IE which went horribly wrong.
There are a number of fallback ideas for IE, but one popular one is to use 'IE Filters'.
Sometimes these propriety IE filters can achieve similar effects as the standard CSS, but at other times, they need fine-tuning.
You might want to scan your CSS file for the use of filters and make adjustments as needed. Code would look something similar to:
#element {
filter: alpha(opacity=70); /* the opacity won't work! */
filter: glow(color=black,strength=5);
}
See this article for more:
http://www.impressivewebs.com/css3-text-shadow-ie/
To achieve a better effect of text-shadow in IE, I use CSS Pie. It's amazing. Check it out here:
http://css3pie.com/
And it's even being used right now on one of my client's website: http://www.tokheim.com
Hope that helps.
As of this website:
p { text-shadow: 1px 1px 1px #000, 3px 3px 5px blue; }
"The first value specifies the horizontal distance and the second specifies the vertical distance of the shadow. The third value specifies the blur radius and the last value describes the color of the shadow."
It means your filter value for Y axis is too big.
is there any way to validate -moz-border-radius / -webkit-border-radius in the CSS validator?
The client wants validation buttons in the sidebar (ugh!) and I can't find any way to bypass it. I've used #import too, no success.
-moz- and -webkit- aren't going to validate. They are vendor specific. When CSS3 becomes more 'offical', the actual border-radius should validate fine. Remember that there are several jQuery plugins that can round borders, but I highly recommend against them.
If you use PrefixFree, you can use non-prefixed properties in your stylesheet and it'll convert them to prefixed properties (if necessary) for the appropriate browsers. This means in your stylesheet, you can write, for example, border-radius: 5px; (which will validate as CSS3), but older versions of Firefox and Safari will automatically use -moz-border-radius: 5px; and -webkit-border-radius: 5px;.
Does IE have anything similar to what -moz-border-radius does in firefox/chrome?
Also is the -moz-border-radius supported by safari?
IE doesn't support the border radius CSS3 or custom implementations. Your best bet is to use something like jQuery and a rounded corners plug in (see below) to accomplish it.
http://plugins.jquery.com/project/corners
Here's a 2nd plug in that I use more often than the above:
http://www.methvin.com/jquery/jq-corner-demo.html
EDIT:
As for safari, yes it has a custom implementation like mozilla.
-moz-border-radius: 5px; /* mozilla */
-webkit-border-radius: 5px; /* safari */
I tried corners last week, and it was broken in a number of browsers, most notably IE8. I'd avoid if possible.
You should design your design so that it looks and works ok in IE, and if opened in one of the newer browsers little things like rounded corners would just make your site look that much better. Things like that will eventually cause users to move to newer browsers, when the experience is better in one and not the other.
I was looking at how some site implemented rounded corners, and the CSS had these odd tags that I've never really seen before.
-moz-border-radius-topright: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
I googled it, and they seem to be Firefox specific tags?
Update
The site I was looking at was twitter, it's wierd how a site like that would alienate their IE users.
The -moz-* properties are Gecko-only (Firefox, Mozilla, Camino), the -webkit-* properties are WebKit-only (Chrome, Safari, Epiphany). Vendor-specific prefixes are common for implementing CSS capabilities that have not yet been standardized by the W3C.
Twitter's not "alienating" their IE users. There's simply adding style for browsers that support it.
The -moz ones are firefox specific, the -webkit ones are for safari, chrome and a few other browsers that use that rendering engine.
These are early implementations of attributes that are defined in CSS3 so they will be coming in the future without the prefixes.
I suggest browsing the site from IE or some other browser. I bet you get different markup.
Those are for Firefox (the ones labeled -moz-border) and for Safari (-webkit-border).
Yes, anything with a -moz in front of it will only work in Firefox.
The -webkit ones will only work in webkit-based browsers like Safari, Chrome or Webkit.
See here for many ways to make rounded corners with just normal css tags.
Edit: I don't think that not having rounded corners is exactly alienating, just a slightly different look for IE.
Complete lists of all -moz and -webkit css styles if anyone wants to know