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 4 years ago.
Improve this question
I recently found the Ultimate CSS Gradient Generator site for easily generating CSS gradients across all browser platforms. It's perfect for what I was looking for. However, I've also encountered other aspects of CSS that require multiple declarations to be cross-browser compatible (i.e. anything like -webkit-*). It's a pain in the butt to develop using multiple browser types. I prefer to develop in Firefox with Firebug for initial testing, and then obviously do cross-browser testing as QA.
My question is, does anyone know of sites that will let me plugin my existing CSS (which may be Firefox or Safari or whatever-specific) and have it 'normalize' it with the appropriate browser-specific declarations for other browsers? Say, for example, I have something like this in my CSS:
-moz-border-radius: 2px;
I'd like to be able to plugin a CSS file that has those declarations all over the place, and have the site also add things like...
-webkit-border-radius: 2px;
(and whatever the equivalent is on other browsers)
Anyone know of a tool or site that will accomplish this? It obviously doesn't eliminate the need to do extensive cross-browser testing before shipping, but I would imagine it would reduce development time significantly.
Prefixr is what you're looking for
You can try this super-useful javascript plugin by Lea Verou: Prefix Free
-prefix-free lets you use only unprefixed CSS properties everywhere. It works behind the scenes, adding the current browser’s prefix to any
CSS code, only when it’s needed.
It probably needs an update, because sometimes radial gradients won't display without vendor prefixes. But for most common properties, like border-radius, box-sizing, box-shadow etc. is great.
Are you looking for http://prefixmycss.com/
Related
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 7 years ago.
Improve this question
I've used Materialize CSS in the past and I really like the framework. However a lot of our projects require IE9 support which Materialize doesn't support. Could anyone recommend a similar framework (preferable responsive, mobile first) they might have used in the past which supports IE9.
I've looked at Google's MDL which has 'B' support for IE9. but I'm looking for something which even if has a subset of features, does fully support IE9.
If you don't care about the material design aspects, then there are plenty of good frameworks out there with good legacy support.
If you want a material design look and feel, then these are your two choices. Obviously, MDL is the better choice, since it's fully supported by Google. AFAIK, the "B" in support for IE9 relates to features like "waves" radiating out when you press on a button. It does not mean anything breaks; it means some (gratuitous) features will degrade (gracefully), or not function.
Users of older browsers need to understand that refusing to update their browsers comes with a cost. Where do you draw the line? Do you support IE6? IE7? IE8? One survey shows IE9 with a market share of 2%. To what lengths are you willing to go to give those 2% of people some kind of amazing animated input box experience?
I understand that sometimes these decisions are made not by us wise developers, but by business people who operate under, shall we say, a different set of priorities. If that's the situation, the easiest way to get through to them is simply give them an estimate of two person-years for IE9 support.
Try Bootstrap Material Design. Bootstrap itself supports IE9. But I don't guarantee a full 100% support. The market share of IE9 is so small that no one will make something fully compatible with it.
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 years ago.
Improve this question
I am in the process of building a web-site with html and css.
Till now I viewed the code through my browser (explorer 10) and adjusted it in a way that it would look good on the browser. (Moved objects around, determine their size etc.)
Sadly, I recently discovered a bitter truth - the fact that everything look good and is in position in explorer 10 on my pc doesn't say anything about how it will look in different browsers or even different versions of the same browser.
I tried it on Chrome, explorer 11 on my laptop and tried to change the screen resolution- in all those cases the page didn't display as expected.
[Objects were misplaced, the cover photo didn't cover all the screen , etc.]
What properties in the css are responsible for compatibility in display between browsers, versions and resolution?
Those who have experience in web-developing - can you recommend a platform that makes the developing process easier? (maybe takes care of cross browsers compatibility and so on).
Something that is better than just starting from an empty html file.
You have to edit lots of css cross browsers depending on how they each render the results.
Read these two articles,
CSS Mistakes
Cross browser coding
This is the reason a great deal of web developers are using well known, mobile ready style libraries. Your question is broad, however, there is no reason why a web developer cannot point you in the right direction.
Take a look at Twitter Bootstrap. It's a mobile ready CSS/Script library which you can reference via CDN or you can install the library in your application. Not only is it mobile ready, but it is cross browser compliant. You will most likely be pleased with your results using Twitter Bootstrap styles.
http://getbootstrap.com/getting-started/
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 9 years ago.
Improve this question
I just started to seriously study CSS and went through practicing my CSS skills. One particular issue I encountered was the first element on top would usually like to have a margin/padding on certain browsers.
So my question come down to, is it a good practice to do
* {
margin: 0px;
padding: 0px;
border: 0px;
}
on my CSS documents? I am reading mixed answers on this. Some say this makes compatibility across browsers awesome and some say it makes rendering slow (not a good idea on older systems).
EDIT:
I just researched into reset.css it seems very similar to what resetting * would do. I happen to come across normalize.css is that a better alternative to make it compatible across browsers?
EDIT2:
Thanks for all the suggestions. I now understand this issue a little bit more and it seems highly opinionated. It's just a question that will never go away due to the different ways browsers render their content.
it all depends.
* reset, normalize, and reset.css all reset user agent styles. which one is best? depends on your document(s).
* is criticized because it resets everything, but if you don't have much in your document, it doesn't matter.
reset.css is the standard, but this can be overkill if you're not using all the elements it is resetting.
normalize is a lighter version of reset, same applies though.
i use normalize.
You could also use a reset.css in your html. YUI 2: Reset CSS has one you can download or link to.
It basically gives everything default values so there is less of a chance an user's browsers displays something different.
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
Can any one suggest me a good tutorial or book for learning HTML Components (htc) ?
HTC files are driven by the behavior CSS style. This is non-standard and only works in IE, so you won't be able to support users of other browsers using this method.
Because of this, virtually all the HTC behavior files I've seen have been implemented as hacks to make IE support some or other feature which other browsers already have.
For example:
CSS3Pie
WhateverHover
When it comes to developing HTC files, there's not actually that much to it - they're basically standard Javascript, with a small XML wrapper. If you can write Javascript in the browser, then you'll be able to write an HTC behavior file. The downside is that you won't be able to use any external Javascript, so no JQuery or other libraries.
The question is why? As I say, the only use-case that makes sense if you want to write an IE hack. Virtually everything else that you could want to use HTC for would be better implemented as straightforward Javascript, for any number of reasons.
Well here are some resources on them:
http://www.w3.org/TR/NOTE-HTMLComponents
http://msdn.microsoft.com/en-us/library/ms532146(v=vs.85).aspx
I'm not 100% sure what you meant by "learning HTML Components", I assume those are what you are after.
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 4 years ago.
Improve this question
jQuery is cross browser, so it abstract JavaScript.
Is there any library for CSS that cross browser, so if I write for Mozilla Firefox, it will show nicely on any other browser, even older version of ie5, 6 ?
Maybe these two will help:
CSS Reset
Blueprint (demos)
EDIT: Your question is duplicate of: Cross-browser CSS
Check out Frame, a pretty damn good cross-browser CSS framework:
http://frame.serverboy.net/
I have used the 960 Grid system for my last few projects. I highly recommend.
I don't think it's technically feasible to create a (javascript) library that can analyze an entire CSS file and modifies it on the fly to make it work in other browsers, because it would have to:
simulate Firefox' rendering to know what the page should look like,
know about all the rendering quirks of other browsers,
know which change to apply to which style rule to fix the design, which implies it should also have to simulate the rendering of other browsers to validate the fix.
jQuery 'only' has to deal with small aspects of a page's rendering. But making an entire design cross-browser compatible is in a league of its own.
Using CSS resets and frameworks, as the other answers suggested, will help a lot in realizing a cross-browser design. But there's no magic library that will fix your entire design in all browsers. And if there is, I'd love to know about it!
I usually use 960, but a lot of times, like with Wordpress it's too time consuming to implement. A lot of times I'll use a javascript browser hack:
http://rafael.adm.br/css_browser_selector/