Hi!
I have notice that some sites are using -moz-border-radius to get round cornors on elements? Is this a good practice? Are there any cons with it?
I would recommend adding "-webkit-border-radius" to cover Safari and Chrome, and "border-radius" to cover the CSS3 standard.
The only problem is IE8 won't support the rounded corners. But it looks nice in all other browsers.
Using border-radius (and it's browser specific friends -moz-border-radius and -webkit-border-radius) is the simplest strategy for getting rounded corners on elements. Because this method is standards compatible (and doesn't need ugly hacks such as positioned elements with backgrounds), it is the best way.
For the differences between -moz and -webkit, see this page at css3.info. This page also contains some more info about it.
Yes, border-radius is considered good practice. It's certainly a lot better than the alternatives such as messy JQuery stuff or worse, a set of corner graphics -- all the alternatives have major issues, ranging from non-scalability to messing up your backgrounds. border-radius is pure CSS and has none of these issues.
The only reason you wouldn't use it is lack of support in web browsers. However all the major browsers except IE now support border-radius. Some do still need a vendor prefix like -moz-, so you need to specify it several times but the functionality is basically the same across all browsers.
The one browser that doesn't support it is IE, up to version 8 (IE9 will support it, but isn't released yet). The good news is that there is a very nice little hack for IE that adds support for border-radius (and a few other features too), even to older versions like IE6.
The hack is called CSS3Pie, and is well worth taking a look at if you want to use this feature. It means you can use a modern CSS3 feature like border-radius without having to stress too much about your IE users.
Philosophically
The CSS property for border-radius is one of the best ways to achieve rounded corners anywhere on a website. IMO it is THE BEST way.
Although border-radius is not supported on across all browers/versions, I like to stick with using this property for almost all instances where rounded-corners are beneficial because rounded-corners are a decorative feature, so therefore not essential in instances where it is not supported, and also typically not worth the extra bandwidth of using an image based effect, or even a javascript hack like CSS3Pie.
This follows the "progressive-enhancement" rationale of web design. Users that have a modern browser supporting border-radius get to see them, other users don't. But a border radius is typically not an issue of accessibility or usability, so therefore implementing via CSS is the best route to go 95% of the time.
Practically
In practice using border-radius requires actually three properties to be supported across the majority of modern browsers:
div {
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
}
The first, border-radius is the actual property listed in the CSS3 spec, and one day will be the defacto implemented rule. But until widespread adoption is achieved and the spec is finalized, you still need to include the vendor-specific prefixes for -moz- (Mozilla Firefox) and -webkit- (Google Chrome and Apple Safari browsers).
Resources
http://border-radius.com/
Generates the proper rules / shorthand versions depending on what values you wish to apply and which corners you wish to round. Very handy.
http://www.css3.info/preview/rounded-border/
Some additional info about vendor support, how to use the shorthand, etc.
Related
I work for a client who has masses of <a> elements on their site which use the same styling and reference the same class name.
The problem I have is the developer who worked on this project before me used CSS3 to style the element and completely ignored the fact IE7 and IE8, even though it was in the scope of the browser model and this issue is now apparent on hundreds of pages.
What I want to ask is what do you feel the best approach is to putting a suitable fix in place without effecting the markup? such as scripts which support border-radius, box-shadow, gradients etc.
Please don't come back answering about graceful degradation as this is not going to happen, I have already spoken to the client and they don't want to take that approach.
You can use a script to perform that "support" for you on clients using old IE versions!
Download script here.
This script allows CSS3 support for Internet Explorer 6, 7, and 8.
The web site link!
My favourite solution to this problem is CSS3 PIE. It's an HTC which brings
a nice selection of CSS3 features to IE 6-9.
Note: PIE uses absolutely positioned VML elements (in IE6-8) to support a variety of CSS3 features. This can cause issues like disappearing backgrounds/borders/etc. The fix is usually to use position: relative; on the affected element or it's parent. See the known-issues for more information (and other fixes).
I think there is no one solution but you can combine more than one solution, for example to border-radius you can use jquery corner:
http://jquery.malsup.com/corner/
modernizr can be a good tool too!
In my website, it looks great on any browser but Internet Explorer. I know that older versions Internet Explorer doesn't support CSS3, so I was wondering if there were equivalents in HTML to these methods: max-width:, border-radius:, box-shadow:, and transition:.
Any help would be appreciated.
For border-radius and box-shadow there is http://css3pie.com/ but that requires Javascript in IE. For a HTML only solution you have to use images, i guess.
You are asking for a way to get some of the newer features of CSS rendered in a browser that doesn't support CSS (or let's hope you are ignoring browsers that old and instead working with a browser version that do some CSS, but not enough for your tastes). Those browsers are outdated and you are not going to get it work just by avoiding css.
If you go far enough back, you may actually end up at a point in time when there were things that were possible in html weren't in css. However, it has been quite a while now that CSS is your best shot at getting things like that to work. If it doesn't work, it usually means that the browser doesn't support it at all, not that it doesn't support it through CSS.
Of course, you can work some magic and try to fake things with javascript, but it just isn't the same.
I recommend using modernizr. It detects if a browser supports different css3 (and html5) features and, if it doesn't, you can conditionally load javascript as a fallback solution.
Internet Explorer 9 supports max-width, border-radius and box-shadow, but not transition.
Personally I don't think CSS should have transition (or animation) as styles should affect how content is displayed, not how it behaves (I am also against the behaviour IE extension for this reason).
Overall, these styles you are asking for are aesthetical, and shouldn't really be a major issue if they aren't supported by the browser your user is on.
I'm looking for the best solution out there for round corners on boxes, which have to work in all browsers (including IE 7-9)
I've been looking on CSS3 PIE, which seemed promising until I saw the list of "Known Issues". Relative paths and z-index problems made me look for other solutions. I noticed they have a "JS Solution" for CSS3 PIE as well, but this has some big disadvantages as well..
Are there any other good solutions out there for round corners crossbrowser-wise?
There is NO pure CSS solution for all browsers, you will have to create this using images, either using a Javascript solution or CSS code that includes the rounded images.
Blame IE7-9 for the non CSS3 solutions...
here you have a guide to create round borders for all browsers
http://jonraasch.com/blog/css-rounded-corners-in-all-browsers
The best i can suggest is
border-radius: 5px;
I know it doesn't work in all browsers, but it's a CSS3 feature, so sooner or later it will work in all browsers.
here you can see it works for all major browsers
http://www.deepbluesky.com/blog/-/browser-support-for-css3-and-html5_72/
and it works in IE9 too
It's not exactly the answer you're looking for (honestly, if you really want IE7-8 support, CSSPIE is pretty decent).
I've been using prefix-free on my sites as of late so I don't have to worry about vendor support. Just use what CSS3 you want and the js takes care of adding all the pre-fixes where necessary. If/when vendors all support CSS3 properties, just remove the JS file instead of combing through your css and removing all the prefixed parts.
Since you have incuded IE7 above, so I would say there is no pure CSS solution to acheive this. Modern browsers support border-radius to achieve rounded corners and you need to specify the -moz and -webkit for mozilla and webkit based browsers.
To achieve rounded corners, I would suggest you put all your rounded cornners in one image and make an sprite of this. then use background-position to get it working across all the range of browsers out there, including our good old friend IE6.
As of this writing, I don't think that there are any other "good" solutions for cross-browser rounded corners. I have searched high and low and CSSPIE is the best solution I have found. The "known issues" are not nearly as bad as the alternative of having crummy looking pages in IE or resorting to images for everything.
The path issues you are experiencing probably have to do with the fact that the PIE.htc path is relative to the document you are viewing, and not the CSS file that calls it. Just be sure to check that and you should be in good shape.
z-index issues are probably related to children of a PIE border-radius parent not having a -pie-watch-ancestors value set. Alternately, you could just call the PIE behavior again separately on the children.
CSS3PIE takes a little getting used to, particularly if you are trying to get it working with .less files, or on shived html5 elements, or if you're running IE in Parallels on a Mac. There are a lot of things that can go wrong in these scenarios. I honestly believe, though, that PIE is your best bet. If at first you don't succeed, don't give up. You CAN get border-radius working in older versions of IE, along with other essential enhancements like gradients, box-shadows and the like.
I believe the link below works in most browsers and that Facebook did something like this for a week to add a rounded style to their site, and then they realized it takes awhile to load up the corners for IE people.
http://jquery.malsup.com/corner/
I'd like to start using HTML5's basic features, but at the same time, keep my code backwards compatible with older browsers (graceful degradation). For instance, I'd like to use the cool CSS3 properties for making rounded corners. Is there any available tutorial for writing gracefully degradable HTML5 ?
Additionally, what browsers should I support so that my app. is functional for at least 95% of visitors? What are the ways to test those browsers painlessly ?
When talking about HTML5 or CSS3, you should head over to:
When can I use...
As can be seen, we are still far far away from using that.
Also, since old versions of the browsers won't support HTML5 or CSS3, however, you can do what is known as:
Progressive Enhancement and Graceful Degradation
Here are some resources also:
Gallery of HTML5 Sites (You can learn and get the idea from them)
Create modern Web sites using HTML5 and CSS3
Browsers that, collectively, cover 95% of the world: Firefox, Chrome, IE6/7/8.
The best way to test them is to install them on your computer.
You want to use html tags and css compatible with mobile browsers.
For anything CSS3 wrap it in conditional javascript. I always make sure the device width is atleast 240px, then anything below that is the old, crappy, mobile look.
You can use a small mobile boilerplate for CSS, to reset the basic tags you use (make them look them same in different browsers). As with any boilerplate, you should look at the css to see if it's WAY overkill.
For a comprehensive guide check out the W3 Mobile CSS2 guidelines: http://www.w3.org/TR/2000/WD-css-mobile-20001013
Another good resource is this compatibility table: http://www.quirksmode.org/m/css.html
Graceful Degradation is all about making compromises -- if you could do everything in the lower version, you probably would. To pick on the example of rounded corners you cite, it may acceptable to you (or your client) to live without them, where there don't exist renderer specific CSS extensions to support them (this is how http://www.ipswich-angle.com/ handles it, for example, I believe). Other options involving images are there, but it is largely dependant on what compromises you and your client are willing to make.
A service like browsershots.org is quite useful to check how your site renders on different browsers and operating systems. You have to wait in a queue for a while but it's worth doing that.
I was going to make this a comment, but then I got carried away..
w3schools has suggestions for using semantic web elements on your site. It suggests using a Javascript library called html5shiv.js to add styling support to IE8 and below so you can find javascript files which emulate specific functionality built into HTML5 like JSON2.js and Webforms2.js.
Finally this article gives a full example of emulating a HTML5 form with many of the new attributes/functionality.
As for building the site, I'd recommend building a HTML4 site first using semantic elements freely (with html5shiv) and testing with IE7. Then as you build parts of the site that require new features, research a Javascript file that will provide older browsers with the same functionality, e.g: when it's time to add your first rounded corner or gradient maybe add CSS3Pie. Always remember as well that your box-model; border-radius and gradients are supported in webkit as well as mozilla's API so many css3 attributes you'll need to add 3 times:
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
Unfortunately I don't have a good resource for how the webkit/mozilla APIs compare with HTML5 functionality.
The only functionality I've struggled to find is support for CSS3 selectors in older browsers, often you can get away with this, I mean if you're not gonna upgrade your browser IMHO you can live with few double-thickness borders or missing alternate row styling in tables.
Maybe one day there will be a site that you can upload your code to that will tell you things like "chrome 20.xyz doesn't support rounded corners, add -webkit-border-radius to add support" but until then adding backwards compatibility after the fact will be near-impossible for complex sites.
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
Ok, I need a little help. For quite some time now I've been using CSS2, it works with most browsers and it's pretty easy to modify. But all of a sudden I'm hearing about CSS3 and that it works with only certain browsers, so.... What are the benefits of using CSS3 when most of your viewers won't be able to see it in action?
At the moment, some parts of CSS3 work on some browsers. At some point in the future, however, a lot of CSS3 will work on a lot of browsers.
For now, you should only use the features of CSS3 that the browsers you're targeting support. Browsers should merrily ignore unknown properties though, so you can use those for non-essential eyecandy even if only some browsers support them.
When can I use... and the CSS3 module status should be of help.
CSS3 hasn't become the standard yet... i believe it works in FF but not in <IE7, which is sadly where the majority of browsers are. while CSS3 has some awesome features, it will still be a while until the internet catches up enough to make it worth using. i think you will save yourself a lot of headaches and cross-browser manipulation staying w/standard CSS...
In fact, quite a lot of CSS3 properties are supported by Firefox 3.5 and later versions of Webkit; though often using proprietary names. One such example is for corner radius, where to reliably render one must use 3 different property names:
.rounded-corners
{
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
It's still a good idea to add in a few CSS3 properties in a progressive enhancement approach, using it to give an extra few touches to beautify a site's design to those with browsers supporting some CSS3 properties (Firefox and Safari have about 25-30% market share).
In my opinion a site does not have to look the same whichever browser you use; the most important thing is that the site is usable and accessible across all browsers, whether they be the latest version of Firefox or Mosaic 1.0.
Don't hold back just because most browsers can't render CSS3 yet. There are numerous ways to use CSS3 only properties but still have fall backs to make the UX for users using older browsers not lack because of it.
Here's a great article on the subject from SmashingMagazine.
http://coding.smashingmagazine.com/2010/06/17/start-using-css3-today-techniques-and-tutorials/
If we all wait to begin developing interfaces with CSS3 when it works in all browsers, we'll never make it there. Web developers need to raise the bar together so that browsers can catch up.
I approach CSS3 as progressive enhancement.
If you want drop shadows or rounded corners in a design I'll use CSS3. Yes it will work fine in modern browsers, but will not work in IE. But it will also allow me to use clean efficient html markup. Remember the old days nesting DIV's with images for rounded corners or drop shadows, what a mess and a pain.
These elements I treat as nice to have.
That being said there are a collection of JS libraries available which easily provide work arounds for Internet Explorer and some of the most applied CSS3 options. As an example check out CSS pie:
http://css3pie.com/
Another approach as well is the excellent modernizr which feature sniffs, and adds CSS classes to the HTML tag, thus allowing you to code for each feature set.
http://www.modernizr.com/
Also to note, is the slightly annoying browser prefixes which #Donald Harvey mentions in his answer. Again there are a variety of tools to help with this. CSS3 please being a prime example:
http://css3please.com/
I think the bottom line is, as long as implementing CSS3 doesn't break the functional experience, then why hold back. It's seems quite logical to me that if people want to surf the internet with browsers that are 5-10 years old, they are going to have a degraded experience, and that shouldn't be at the expense of those who are keeping upto date with modern browsers.
i am working on Dashboard widgets and webkit supports quite a lot of css3 and it is extremely useful in achieving results.
I do not have to worry in this environment about cross browser compatibility so it is admittedly easy, i.e. i do not need to think about the issues, just code. The sooner it gets into the wild and IE the better.
CSS3 has numerous sweet things which you couldn't be possible only with CSS2
Advantage 1: Cool and neat CSS without burdening the server with hell lot of images for instance like rounded borders or for image shadows etc...
Advantage 2 : Sweet Animations possible without need of Gifs
Advantage 3: Gradients Background Stripe Images will be obsolete with CSS3.It could be easily achieved with the help of online Gradient generators.So our Server will be loving the CSS3 for sure
Advantage 4: Basic Box Model which is a huge relief rather to positioning the HTML layouts using div and span
Advantage 5 : Cool Text effects is possible
Advantage 6: Lot of cool attribute selectors to reduce the usage of jQuery selectors.
DisAdvantage:
Even though it have lot of cool features packed in mind of web developer and rich user Interface. Webkit browsers like Safari & Chrome and to certain extent mozilla browsers support most of the CSS3 features. Its going to take literally lot of time for 100 percent compilation across browsers.
Simply put, CSS3 will be visible by all but some versions of IE. Changes targeting IE for cross browser compatibility are not that time consuming. IE 8 supports some CSS3. IE 9 adds onto that. IE 10, probably going to be released a few months into 2012, looks like it will add even more in terms of animations, transitions, and other fun CSS3 additions. So, CSS3 is worth it for your sites to be cutting edge today and current tomorrow. Just my opinion.