Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 6 years ago.
Improve this question
Is there a browser which supports CSS shaders?
At the time of this writing, CSS Custom Filters, formerly known as CSS Shaders, are not available in any browser. They were an experimental feature available in WebKit Nightly and Chrome (under a flag) for a while, but have since been removed.
No modern browser supports CSS Shaders or its later name, CSS Custom Filters.
Where to search for which browsers support various features:
Searching caniuse.com for CSS Custom Filters should provide an up-to-date answer to this question.
Can I Use is a great tool that provides compatibility tables for support of HTML5, CSS3, SVG and more in desktop and mobile browsers.
Support for CSS Shaders was discontinued in Webkit in January 2014.
https://lists.webkit.org/pipermail/webkit-dev/2014-January/026098.html
Chrome has some support for it and, I think, FF might have some now. I don't have my link for articles in Chrome handy but it's all very new.
If the browser supports every feature of HTML5 and CSS3. The only one that supports it by now is Chrome I guess.
Webkit appears to start having them: http://trac.webkit.org/changeset/103170
this link is supported for you to know the css supported browser.
https://dvcs.w3.org/hg/FXTF/raw-file/tip/custom/index.html
https://bugs.webkit.org/show_bug.cgi?id=73317
chrome and safari are supported for CSS shaders
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 9 months ago.
Improve this question
I am new to web development. I was wondering if I should really write different CSS code for different browsers. If I should, any tips for writing and testing my website in different browsers? Also, which browsers should I write different CSS code for? Thanks!
If you use autoprefixer then it will do all the different browser stuff for you: https://css-tricks.com/autoprefixer/
For testing in different browsers you could use something like BrowserStack
I suggest you write CSS code that targets the largest audience or market. Currently, the most used browser is Google Chrome. If you're more comfortable with another browser such as IE or Safari you can choose to write browser-specific CSS code.
Be sure to check the browser compatibility of the CSS properties you're using on the MDN Web Docs. Cheers!
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
This data from caniuse http://caniuse.com/#feat=calc suggests that practically all browsers now support calc in CSS. Are there any reasons to still avoid using calc for consumer websites? Have any major websites started using calc?
The official level is Candidate Recommendation for W3C and are descripted in draft document CSS Values and Units Module Level 3
Candidate Recomendation is not like Approved but is very near, so (i think) it 'a choice deeply comforted by the state of the documentation of W3C
IE seems to be the problem as usual but as far as I know, the calc element is fairly safe to use, depending on the units you are using (c.f. 'Known issues' with vw vh).
About Opera Mini, I thought it was now using the Chrome engine, even on iOS (iOS Safari engine is specified for iOS on caniuse). Would someone have more details about this?
EDIT:
A very interesting post about this on CSS-Tricks by Chris Coyier.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
I am taking over an application that has buttons with this css:
background-image: -moz-linear-gradient(center top , #049CDB, #0064CD);
it looks beautiful in firefox but looks like a mess in IE, etc
what is the best way to take these clearly firefox specific css and determine the best way to make it look the same on all browsers (just need IE8+)
This tool might be a useful tool for you.
Since this CSS attribute is still a working draft of CSS and has some legacy it will require a lot of markup to be fully supported for your current situation. The -moz- prefix is one such isntance of providing support. All other browsers will required either the standard, -ms-, -webkit-, -webkit-type or -o- prefix as well.
You should look out for other spots in the application you've taken over for code that hasn't been fully tested on other browsers.
LINK
http://www.colorzilla.com/gradient-editor/
This is a matter of opinion but there are tools online that will help you generate css for gradients that works across browsers. http://www.colorzilla.com/gradient-editor/ is an example.
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 8 years ago.
Improve this question
What is
-moz-border-radius:
I really have no idea what it is, and I can't find answers on stackoverflow, google, or anywhere. I'm new to web dev and I tried using this and opened up firefox, and there is no real difference. Nor if I open anything else. Also what about
-webkit-border-radius or anything that begins with -webkit
They are vendor prefixed properties, a type of vendor specific extension
They are used to implement experimental versions of features before they are standardised.
An initial dash or underscore is guaranteed never to be used in a
property or keyword by any current or future level of CSS. Thus
typical CSS implementations may not recognize such properties and may
ignore them according to the rules for handling parsing errors.
However, because the initial dash or underscore is part of the
grammar, CSS 2.1 implementers should always be able to use a
CSS-conforming parser, whether or not they support any vendor-specific
extensions.
Authors should avoid vendor-specific extensions
Well anything starting with a - prefix is for a specific browser.
-moz is for firefox
-webkit is for chrome and safari
-o is for opera
-ms is for internet explorer
Border radius is simply just to round the corners of an element. You can set the value to 5px and you will see the difference. Here is a fiddle to show the property: http://jsfiddle.net/Ps4mN/
border-radius: 5px;
It is important to realize browser compatibility, and most import backwards compatibility. Mozilla, in it's past used it's own unique methods of parsing CSS. They also, because of this, were a little behind on new standards in CSS and had to add them later down the road. Adding prefix's to these attributes gave them a way to highlight their 'new' implementation of already released CSS as a 'new and improved' vision of whats already out. See branding.
Because of this, however, it caused a lot of issues with compatibility between developers. Deciding what browsers to develop for, or how to optimize for one specific brand. Which furthered it notoriety as well as it's revenues.
Only recently has some browsers caved into following standards of CSS, such as border-radius:
However, do to this war, which is still being raged, you need to keep in mind a lot of people don't use the browsers you are using. In fact some 25% of all computers online still run Windows XP as well as Internet Exploder (I'm sorry, Internet Explorer or something like that)! And there is no easy way of supporting rounded corners there besides fun workarounds.
Take a look at this article about cross compatible borders for new and old browsers right here. Mind you border-radius: will work in newer version of Mozilla, but not older ones. It will also run on current version of most web standard browsers. Just it's always good to keep some legacy code in for older browsers.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 9 years ago.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Questions asking us to recommend or find a tool, library or favorite off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it.
Improve this question
Can some one provide me some good css example to create breadcrumbs for my asp.net application. Which should support IE 8.
I was trying this link http://www.red-team-design.com/css3-breadcrumbs but it is working in Crome not in IE8. Please someone help me.
Thanks
Gulrej
The code you're trying to use contains several features that are not supported by IE8.
border-radius
If you need rounded corners, this can be made to work using CSS3Pie
box-shadow
Also use CSS3Pie for this.
text-shadow
There is no good way to get this working in IE8. Sorry.
linear-gradient
Also use CSS3Pie for this.
rgba() colours
And again, CSS3Pie for this too, although there are some quirks to watch out for.
::before and ::after
Actually, :before and :after are supported in IE8, but need a single colon, not a double colon.
As you can see from my comments above, most of these features can be made to work with a bit of effort and a few hacks, but by default they are not supported by the browser.
In addition, some other browsers may need vendor prefixes for some of these features. In particular, the gradient styles should be provided with prefixes if you want to support all common browsers.
Your options:
Write your CSS in a way that allow sensible fall-backs -- eg a sensible plain colour background for IE8 that is overridden by the gradient for browsers that support it.
Use a library like CSS3Pie, which attempts to make IE8 more compatible with modern standards. But be aware that if you use it a lot, it has been known to slow IE8 down quite badly.