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.
Related
I am playing around with CSS-animated SVG elements and came across the problem that even though all technologies, which are used, are supported by some browsers the combination is not, i.e. CSS-animated DIVs work but SVG elements don't. I am wondering if there is a way to detect if a browser is capable of animating SVG elements using CSS.
Here is a jsFiddle with an example. It works in the latest versions of Chrome, Firefox and Safari. But when opening it with e.g. Firefox 5 only the div rotates while the rect doesn't.
You can add an event listener to check for the completion of an animation iteration, and within the corresponding event handler set a flag like supportsSVGKeyFramedAnimatedProps = true (if the iteration never completes then it is not animating).
elem.addEventListener('animationiteration', eventHandler, false)
This would allow you to 'fall forward' to your SVG animation, instead of providing a fallback.
I am wondering if there is a way to detect if a browser is capable of
animating SVG elements using CSS
Simple Answer: Yes you can as stated by #jhpratt.
You can detect if a browser supports CSS-Functionality with only CSS.
The #supports CSS at-rule lets you specify declarations that depend on a browser's support for one or more specific CSS features. This is called a feature query.
Example:
#supports (display: flex) {
div {
display: flex;
}
}
#supports not (display: flex) {
div {
float: right;
}
}
MDN Link: https://developer.mozilla.org/de/docs/Web/CSS/#supports
Long Answer:
You will always have some cross-browser issues.
The problem you have encountered is bothering every Webdeveloper. Still there are ways to get around with this Browser-Support-Problem:
1. You can check "can I use" for compatibility:
Link: http://caniuse.com/
It is recommend to look up any functionality which is questionable like animations.
2. Use an autoprefixer in your workflow:
With the help of an autoprefixer you don't have to worry most of the time about using CSS with a prefix like -moz-, -webkit-, etc. This tiny helper will do the trick for you, you can even tell some autoprefixers which browsers you want to support.
3. User 3rd - Party libraries:
There are many libraries out there which you can use to detect the browser and version. If you want to be sure that your animation is secure to use, you can simply use the provided animation from the libraries and of course look the compatibility up before on their respective websites.
Some Big Names:
Angular: https://angularjs.org/ (use ng-Animate)
JQuery: https://jquery.com/
Greensock: https://greensock.com/
there are many more, jsut search the world wide web.
4. Use CSS Hacks to detect specific Browsers:
It is possible to use so called CSS-Hacks. They are specific CSS calls, which only apply on certain browsers.
Some examples:
Internet Explorer/Edge 8 only: #media \0screen {}
firefox ≥ 3.6 only: #media screen and (-moz-images-in-menus:0) {}
Opera ≤ 9.27 AND Safari 2: html:first-child .selector {}
You can look up more Browserhacks here: http://browserhacks.com/
Conclusion:
It is possible to detect specific browsers, but it is not possible to detect if the brwoser is supporting the given feature with only CSS. That is why you will always have some hard times with browser support.
Hope this helps.
Regards
I believe that the SMIL animations detections in modernizr should do it. https://modernizr.com/download?smil-setclasses
I'm using it in a pretty involved set of css/SVG chart animations. Just wrap a fallback in the following tag:
.no-smil{ }
http://codepen.io/msbtterswrth/pen/greWzy
I haven't done exactly what you're looking for, but something similar (providing an animated clip-path as defined by SVG when the browser supports it and falling back when it doesn't). You can use media queries looking for pixel ratios to determine if a broswer is moz or webkit and provide the fallback animation outside the media query and provide the preferred animation in media queries that indicate a browser that will support it.
//fallback animation here
#media (-webkit-min-device-pixel-ratio: 0) {
// webkit animation here
}
As for older versions of Firefox? I don't know how to do that in CSS, but I'm not sure going back more than a few versions of Firefox or Chrome is a common use case.
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/
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.)
Is there a list of 'good' clean CSS hacks, which are certain to be future-proof?
For example, zoom:1 is safe, as long as it's only served to IE, and you remember it's there. The very common hack of using child selectors is not safe because IE7 supports them. Using height:1% just feels dirty (but that might just be me).
I know of ie7-js, so IE6 bugs don't worry me much. Also, I'm not looking for a religious debate, just sources.
Thanks for the replies - I've selected the one with best sources as answer.
Thanks also for the suggestions to use separate CSS files, or not to worry about it. I entirely agree with you, and for me, those are givens. But when faced with a layout problem, I want a safe fix that will minimise the risk that I'll have to revisit the problem in $IE or $FF + 1. Sorry I didn't make that clearer.
For the majority of IE bugs I think you're best off using conditional comments around a link to a browser specific stylesheet. It tends to keep things pretty neat and it's quite self documenting.
This is a good place for well-documented and well-tested browser bugs and the hacks allow you to work around them:
http://www.positioniseverything.net/
I've used Peter-Paul Koch's "QuirksMode" website a lot for issues involving CSS and cross-browser compatibility. He tends to frown on browser-specific methods, but he does have a page on CSS Hacks.
Nicole Sullivan (AKA Stubbornella) who works for the Yahoo Performance team suggested in The 7 Habits for Exceptional Perf that you should use the CSS underscore hack to patch up IE6 bugs because:
Hacks should be few and far between.
If you will only have 5-6 hacks (which is already plenty) then it would not make sense placing those in an external file and thereby separating it from its context.
An extra file would lead to performance penalties (Yahoo Best Practices, Rule 1).
It should however be noted that this is not valid CSS.
There's no such thing as a good clean/acceptable [css] hack - always code to Standards, and then use browser+version specific stylesheets for any hacks required to make things work.
For example:
default.css
default.ie6-fix.css
default.ie7-fix.css
default.ff2-fix.css
etc
Then, when new version of a browser are released, copy the previous version's hacks and remove the bits that no longer apply (and add new bits, if necessary).
(Load individual stylesheets using Conditional Comments for IE, and user-agent sniffing for other browsers.)
Underscore-hack for IE6-stuff works quite well, eg.
min-height:50px;
_height:50px;
It doesn't require moving things out of context into new css-files, only IE6 gets them and they're easy to filter out if you should decide to stop supporting IE6. They're also very minimal and won't clutter your CSS that much.
Modifying your CSS for browser-specific support is never wrong - as long as you can easily contain it. As you'll notice, standards-compliant browsers, * cough * everything except MSIE, will never break with future releases. New W3C standards also don't break previous standards, they usually deprecate or extend previous standards at the most.
People have mentioned conditional comments which are great for handling IE. But you'll need a bit more for handling all browsers (mobile, gecko, webkit, opera, etc.). Usually you'll parse the incoming request headers to fetch the browser type and version from the User-Agent param. Based on that you can begin loading your CSS files.
I belive the way most of us do it is by:
First developing for one standards-compliant browser (let's take FF for example)
Once the CSS is complete you approach providig support for IE (this can be easily done with the conditional comments, as perviously mentioned)
First create a CSS file that will fine tune everything for IE6 and any other version below
Then create a CSS file that will handle everything for IE7
Lastly, create a CSS file that will handle everything for IE versions of IE8 and greater
Once IE9 comes out, make sure you set IE8+ handling to IE8 specific, and create a IE9+ CSS file with required fixes
Finally, create an additional CSS file for webkit fixes
If required, you can also create additional files to specifically target Chrome or Safari if required
Concerning browser specific CSS implementations, I usually group all of those in my main css file (you can easily do a search for those and replace them in one document if needed). So if something has to be transparent, I'd set both opacity and filters (MSIE) in the same block. Browsers just ignore implementations they don't support, so your safe. Specific implementations I'd tend to avoid are custom implementations (hey, I like the -moz box above the W3C one, but I just don't want to rely on it).
As it goes with CSS inheritance and overriding, you don't have to redefine all the CSS declarations and definitions in every CSS file. Each consecutively loaded CSS file should only contain the selector and specific definitions required for the fix, and nothing else.
What you end up with in the end is your (huge) main css file and others, containing a few lines each, for specific browser fixes - which sums up to something that's not that very hard to maintain and keep track of. It's a personal preference what browser your base css file will be based off, but usually you'll be targeting a browser that will create the least amount of issues for other browsers (so yes, developing for IE6 would be a very poor decision at that point).
As always, following good practices and being pragmatic and meticulous with selectors and specifics about each class and using frameworks will lead you down the path of goodness with seldom fixes required. Structuring your CSS files is a huge plus unless you want to end up with an unordered meaningless mess.
Centricle has a good list of CSS hacks and their compatibilities.
I don't think you'll find a list of hacks that will be future proof, as know one can tell what stupid thing will be implemented in IE next.
This article is a good summary of CSS hacks: http://www.webdevout.net/css-hacks
Here's a good list of filters that are very stable:
/* Opera */
.dude:read-only { color: green; }
/* IE6/IE7 */
#media,
{
.dude { color: silver;}
}
/* IE8 \0 */
#media all\0
{
.dude { color: brown; }
}
/* IE9 monochrome and \9 */
#media all and (monochrome: 0)
{
.dude { color: pink\9; }
}
/* Webkit */
* > /**/ .dude, x:-webkit-any-link { color:red; }
/*
* > /**/
/* hides from IE7; remove if unneeded */
/* Firefox */
#-moz-document url-prefix()
{
.dude { color: green; }
}
When defining rules, I find it good to allow natural degradation take place, for instance, in CSS3 there is support for RGBA Colour models, but there isn't in CSS2, so I find myself doing:
background-color: #FF0000;
background-color: rgba( 255,0,0, 50% );
So that when the later rule fails on older browsers which don't support it, it will degrade to the previously defined style.
I prefer the global conditional comment technique described by Hiroki Chalfant;
I find it helpful to keep my IE-targeted rules side-by-side with my standards-targeted rules in a single valid stylesheet.
I'm wondering if there's any way to write CSS specifically for Safari using only CSS. I know there has to be something out there, but I haven't found it yet.
I think the question is valid. I agree with the other responses, but it doesn't mean it's a terrible question. I've only ever had to use a Safari CSS hack once as a temporary solution and later got rid of it. I agree that you shouldn't have to target just Safari, but no harm in knowing how to do it.
FYI, this hack only targets Safari 3, and also targets Opera 9.
#media screen and (-webkit-min-device-pixel-ratio:0) {
/* Safari 3.0 and Opera 9 rules here */
}
There are some hacks you can use in the CSS to target only Safari, such as putting a hash/pound (#) after the semi-colon, which causes Safari to ignore it. For example
.blah { color: #fff; }
.blah { color: #000;# }
In Safari the colour will be white, in everything else it will be black.
However, you shouldn't use hacks, as it could cause problems with browsers in the future, and it may have undesired effects in older browsers. The safest way is to either use a server side language (such as PHP) which detects the browser and then serves up a different CSS file depending upon the browser the user is using, or you can use JavaScript to do the same, and switch to a different CSS file.
The server-side language is the better option here, as not everyone has JavaScript enabled in their browser, which means they wouldn't see the correct style. Also JavaScript adds an overhead to the amount of information which needs to load before the page is properly displayed.
Safari uses WebKit, which is very good with rendering CSS. I've never come across anything which doesn't work in Safari, but does in other modern browsers (not counting IE, which has it's own issues all together). I would suggest making sure your CSS is standards compliant, as the issue may lie in the CSS, and not in Safari.
So wait, you want to write CSS for Safari using only CSS? I think you answered your own question. Webkit has really good CSS support. If you are looking for webkit only styles, try here.
You'd have to use JavaScript or your server to do user-agent sniffing in order to send CSS specifically to Safari/WebKit.
#media screen and (-webkit-min-device-pixel-ratio:0) {}
This seems to target webkit(including Chrome)... or is this truly Safari-only?
This really depends on what you are trying to do. Are you trying to do something special just in safari using some of the CSS3 features included or are you trying to make a site cross browser compliant?
If you are trying to make a site cross browser compliant I'd recommend writing the site to look good in safari/firefox/opera using correct CSS and then making changes for IE using conditional CSS includes in IE. This should (hopefully) give you compatibility for the future of browsers, which are getting better at following the CSS rules, and provide cross browser compatibility. This is an example.
By using conditional stylesheets you can avoid hacks all together and target browsers.
If you are looking to do something special in safari check out this.