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.
Related
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 6 years ago.
Improve this question
Just like the titles is saying, is it best practice to use {box-sizing: border-box} in 2016 HTML websites? And if yes, how do I implement it to use on all browsers (Mozilla, Chrome, Safari...)? I saw this:
on http://www.html5xcss3.com/2013/07/10-basic-tips-to-design-a-responsive-website.html
Which made me think about that ;)
Personally, I'd say no -- blanket solutions using the universal selector (*) are almost never a good idea. Doing something like * { box-sizing: border-box; } applies that style to every single element on the page. I've seen use of * styles have unwanted effects on certain types of elements, like form inputs and buttons. Sometimes the unwanted side-effects are different in different browsers.
By the time side effects crop up in a large enough project, switching to a more conservative approach may require extensive CSS edits and browser testing. For that reason, I favor going with something like normalize.css or Eric Meyer's reset + Formalize.
Years of wrestling with browser incompatibilities and quirks, sometimes creating my own self-imposed CSS hells along the way, have caused me to mostly favor constrained solutions. Less chance of unpleasant surprises that way.
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 have been looking around the internet for the best way to normalize my website CSS.
I have read about:
Conditional Stylesheets;
CSS Reset;
Normalize.css;
Initializr;
HTML5Boilerplate;
I know that last two have a lot of other features, but they are also give you some CSS normalization.
I'm more bend to Normalize.css, since seems to be only and exactly what I need, but I would like to have more opinions.
Best regards!
normalize.css is the way to go most likely. reset.css is intended to strip all of the default styles completely to their bare minimum (so for example h1 and h2 and the rest of the headings all have the same style) while normalize.css is more of a bare-bones but functional css reset (so you still have basic style differences, e.g. font size between h1 and h2 and so forth).
I believe initializr and HTML5BP use implementations of normalize.css.
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 8 years ago.
Improve this question
So say I have a website that was built using tables and specifically width tags (Awful I know). According to w3schools that website isn't using HTML5 because the width is no longer supported. My question is would I need to change that code, because it wouldn't be supported by modern day browsers? Or perhaps because it won't be supported later down the road?
That all depends on what browsers you want your site to support. However, as a practical matter most browsers are going to be backward compatible for a while. Most modern browsers still support very early versions of HTML going back to the mid 90's.
That said, it is always a good idea to make sure you are setting the doctype tag on the page appropriately so the browser knows what it is getting and can accommodate it.
There never was a width tag in HTML. For some elements, the width attribute can be used. There is no change in browser support to it; HTML5 drafts require browsers to support legacy attributes even though those drafts declare them as obsolete. W3schools is unreliable and misleading; see w3fools.
As a general rule I would say no. I haven't read the spec or anything but it sounds like the width tag is being depreciated on tables?
If this site was intended to last 6-7 years without major changes then maybe you might want to futureproof it but it seems rather unlikely that the browser venders will break support any time soon. Too much of the web would be broken.
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/
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/