I've wondered this for a while. Why do different browsers only support the CSS border-radius property if it is prefixed with their own special prefix. I don't understand why I have to write this:
/* For Firefox and other Gecko browsers */
-moz-border-radius: 5px;
/* For Chrome/Safari and other Webkit browsers */
-webkit-border-radius: 5px;
/* For others */
border-radius: 5px;
When I could just write this:
border-radius: 5px;
Is there a reason that I'm required to write the prefixes? Why don't the browsers all just support the border-radius property? It just doesn't make sense to me, why browser developers decided to all have different properties that just make my life harder. Is there a technical or legal reason behind it?
The answer to this question is essentially the same given here:
Why there is -moz-XXX and -webkit-XXX in the CSS3?
That "namespacing" allows vendors to test new cool features, and if
they're great, they can be incorporated into the standards. This is
what is happening [here]: Mozilla and the Webkit team tried cool
things, and now they're going to become standard. It's just not done
yet.
Basically, life isn't perfect. Ideally yes, it should be standardized. It's an old issue dealing with the various large companies/groups that develop browsers. W3C tries to make standards, but in the end you can't force anyone.
Try reading more at this very relevant SO.programmers page - https://softwareengineering.stackexchange.com/questions/103048/why-is-it-unrealistic-to-expect-all-browsers-to-support-the-same-standards . And more regarding browsers/compatibility here,
Eventually they will all support the standard border-radius. I'm given to understand they do that when things are up in the air standards-wise, or for similar reasons.
(also, no need for -moz-border-radius, the normal cross-browser is now supported by Gecko. I believe it's the same for WebKit too, but I'm too lazy to check.)
Related
It looks like you can use the IE-specific scrollbar styles like: scrollbar-face-color, scrollbar-track-color, etc. through IE 11, but not with Edge. Is there an alternative for Edge?
It's hard to know specifically, without official documentation, clear indications, or official word from the dev team, but it seems unlikely based on previous comments about the purpose and design goals of Edge.
Here's why I say that:
The properties you're referring to were originally added to IE8 as extensions to the CSS 2.1 specification. These properties are non-standard and considered illegal in some circles. (There are other non-standard variations, though it's unclear whether they're supported in MS Edge.)
What is clear is that these particular properties may not be formally supported in Edge, presumably because they are proprietary extensions.
This seems unlikely to change, since one of the major design points of MS Edge is to set aside legacy compatibility in favor of standards and cross platform interoperability. (And, given that major functionality changes were made to IE11 without changing the major or minor version number, it's entirely feasible that support for non-standard properties may disappear after any given update.)
The fact that these properties work in the build you're using may be a deliberate design decision or it may be a side effect from the fact that Edge is based on a fork of the Trident engine, one where many lines of legacy code have been removed.
Again, without official confirmation or announcement, this is all speculation based on experience and previous team behavior. Your mileage may vary.
Hope this helps...
-- Lance
You can do the following:
/* Works on Chrome, Edge, and Safari */
*::-webkit-scrollbar {
width: 12px;
}
*::-webkit-scrollbar-track {
background: orange;
}
*::-webkit-scrollbar-thumb {
background-color: blue;
border-radius: 20px;
border: 3px solid orange;
}
For more info: https://www.digitalocean.com/community/tutorials/css-scrollbars
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.
I am trying to add CSS3 based rounded corner support in IE7 and IE8 on following page
Test URL: http://jaspreetkaur.com/postjoint
I have included modernizr library, but it's not working. Is there any code that i need add to make it working in IE?
As others have said, Modernizr won't make legacy browsers able to support CSS3. It only checks for support, plus other neat features, such as HTML5shiv, so that you can use HTML5 markup.
To enable CSS3 features in older browsers, you might try CSS3 Pie, but I find it some times creates more problems than it solves. I usually just don't let older browsers see all the fancy stuff, such as rounded corners. It's just a minor design feature, not critical to the overall functionality or layout.
http://css3pie.com/
Modernizr only check if the browser is ABLE to support certain features, it will not actually implement the features
1. IE8, IE7 do not support CSS3 rounder corners.
2. Mordernizr, is only a script, that enable HTML5 features across different browsers
CSS3 tag for rounder corner is
-webkit-border-radius: 5px; /* for safari */
-moz-border-raidus: 5px; /* for firefox < 4 */
border-radius: 5px; /* for all other that support it */
modernizr isn't made to do that really...
if you can, try this http://fetchak.com/ie-css3/
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.
The CSS3 Specifications are in the main browsers partly implemented and you get very nice results with less code, but there are many reasons not to use CSS3. E.g. not downwardly compatible, probably not similar renderd views on different browsers, etc.
So I'm asking myself: Which is the best way to use CSS3 anyway with a option to intercept default problems, like I've discribed above?
As long as your site degrades gracefully there's nothing wrong with using CSS3 now. Afterall, if a browser does not understand a particular CSS rule it will just ignore it:
#foo {
border:1px solid #000; /* shown by all browsers */
border-radius:5px; /* shown if browser understands border-radius */
-moz-border-radius:5px; /* Firefox only */
-webkit-border-radius:5px; /* Safari and Google Chrome */
}
As long as the site does not look broken in browsers that don't support the CSS3 rules you want to use then you should be ok progressively enhancing your site in the browsers that do support them.
You might find "When can I use..." useful for seeing what features you can reasonably use.
If your making a public website then you have to support ie6, which means no css 2.1, let alone 3.
One thing you can try is: lesscss
This will let you use shorthand css notation and "compile" it to valid css on build.