I heard that many developers are not recommending using CSS reset, what are the reason for it?
for example:
What are the rules for portable CSS?
When using a CSS reset, lots of HTML elements become unusable : titles are small border-less and margin-less, input elements are misformed, etc... You need to restyle all these elements, which is more work.
Some people think that this process of destyling/restyling is unnecessary, error-prone, and that it removes some necessary differences between platforms. Most notably, input elements are typically styled by a browser according to its host platform (windows, mac, etc...) and some people think that UI consistency should be respected even inside a browser.
CSS Reset is found there to normalize the CSS across browsers and gives you easier and more intuitive design possibilities.
For instance, when you use <h1> without a CSS reset/normalization, it will have larger font-size, some margins, and a bold font-weight, with a CSS reset, it would look like a normal text, and it allows you to shape it the way you want, without worrying about the browser defaults which may vary between browsers.
The question you should ask yourself, do you want it?
Remember that a CSS reset does not have to be absolute, if you want to remove all margins and paddings, but retain font size and weight, you could use the classic * { padding: 0; margin: 0; } rather then using a full-powered CSS reset.
If you are making a website,
and you know html & CSS like the back if your hand,
and you can test directly on all major operating systems without compromise,
You're proficient in correcting errors/conflicts with old browsers,
or you are making a website for one browser only.
You may not need a CSS reset or it would be best for you to make your own.
But if you're making a typical modern website and you want to avoid
cross browser conflicts, a reset sheet should "set" the html elements to a similar
playing field.
Many reset sheets interfere with styling too much, all you really want is a default like CSSesta or Eric Meyer's
Related
I am beginner at HTML and CSS and faced the confusion about if it is ok to use *{margin:0; padding:0;} or it really affects performance of the web page. I have already read the other article about it in the platform but some responders say that it affects and some say does not. Please would you give concrete answer if *{margin:0; padding:0;} affects the performance or not. I really need your help.
If you reset all elements maybe performance is not big a deal here or difference for performance is not countable, specially nowadays browsers are faster.
By reseting basically you have to write style for every elements and
on the other hand you have to think about cross browser consistency
and think about bugs like SVG overflow in IE9, font-size rendering
for pre element......etc.
Basically if you like built in style and care about css file size then use normalize css.
If you don't like built in styles like default margin or padding for H1-H6,P..etc and care more about cross browser consistency then use reset css.
A while ago I came across this SO question:
CSS set background-image by data-image attr
If I understand the question correctly, the OP needed the ability to set an attribute on certain HTML elements and make the accompanying CSS interpret it as a URL to the background image of such elements.
I had recently faced a similar situation, where the background image of an element that had until then been static was changed into getting a variable image from a database. I considered several options but, among them, replacing the affected element with an <img> element had several undesired side effects and building dynamic .css files seemed an overkill, so I tried using a custom data- attribute and CSS's attr() function to bind it to the element's background-image, but it did not quite work due to the then limited implementation of attr() among different browsers.
In my case, I ended up deciding that a background image served from a database was content rather than design and took the approach that seemed easiest, given that browsers have supported inline CSS styles for quite a while now: I applied all non-variable styles as a rule on a separate stylesheet but I kept the variable background-image as an inline style in the element where it needed to be applied.
Since none of the answers posted to the question I am referring to suggested the usage of inline CSS styles, I did so myself and my answer has since been downvoted several times without a hint of reasoning regarding why. I understand that downvotes needn't be justified and I am happy with that, but I am worried about not seeing some obvious caveats that are waiting to bite me when I least expect it.
I have read SO threads What's so bad about in-line CSS?, using inline css - a no-no or okay in certain situations? and Inline styles vs styles in CSS, as well as some external discussions such as https://teamtreehouse.com/community/when-is-inline-css-a-good-idea and https://www.thoughtco.com/avoid-inline-styles-for-css-3466846 with respect to the usage of inline CSS, and from them I gather more or less the following:
Inline CSS is a maintenance nightmare.
It is a "best practice" separating content from design.
Inline CSS seems to be almost OK when prototyping.
Inline CSS is a necessary evil when building HTML emails.
I think I understand the arguments given in those discussions, but none of them seem to consider cases of dynamic inline styles being applied, so they do not effectively address my scenario. Based on my own experience,
That particular piece of maintenance has become trivial, since the value comes from a relational database, which has enabled us to provide things like user-customizable backgrounds without ever revisiting the source files.
It is an even better practice to analyse each scenario individually and apply the specific solutions that provide the greatest benefit at the lowest cost, regardless of what "best practices" guides may say about general scenarios.
I personally do not use inline CSS for prototyping because the browsers' development tools keep track of my changes when they are applied on a separate file but not when I define them inside the HTML block.
HTML emails make me shiver.
Nevertheless, I would really like to know why is this such a bad idea. In what ways can I expect this decision (using inline CSS to set the background-image style of an element to a value coming from a database) will come back to haunt me?
Thanks
I believe WordPress does something like this, they use a CSS reset stylesheet, then manually apply a global margin for each HTML element (to increase browser compatibility). I'm looking for something like this, but without the WordPress specific elements.
On a similar note, is there a default stylesheet that WebKit uses that I can access?
You may want to consider using normalize.css as opposed to a reset.css; checking their demo seems to indicate this includes standards for form elements:
http://necolas.github.com/normalize.css/
a quick google search turned up this: http://meyerweb.com/eric/tools/css/reset/ and this: http://html5doctor.com/html-5-reset-stylesheet/ among others
I generally use YUI Reset CSS for this. YUI Base CSS can complement Reset by applying a style foundation for common HTML elements that is consistent across A-grade browsers. YUI is from Yahoo and hence enjoys good support and is presumably more reliable than other similar CSS frameworks.
default Chrome WebKit http://codesearch.google.com/codesearch/p#OAMlx_jo-ck/src/third_party/WebKit/Source/WebCore/css/html.css
here's a butt load more default user agent style sheets
http://meiert.com/en/blog/20070922/user-agent-style-sheets/
There's no standard CSS margin etc. that I know of...
That's one of the reasons why a reset stylesheet is necessary. No one sets the same styles and most browsers have different defaults.
For me, once I reset margin and padding on most elements, I usually make the margin around 1em for p, h1-h5, etc.
I have been tasked with making some updates to an existing web control and placing it on an existing web page. The web control uses a lot of hard coded formatting to make it look "pretty", and the web page uses CSS to override just about every visual element you could imaging. So when the control is placed on the page it looks REALLY bad. Its basically unusable and I'm not sure what the best approach is to fix it.
Is there a way to clear CSS from, for example, all elements which are part of a specified DIV, or some way to prevent the main css from being applied to these components?
You could try a CSS reset stylesheet (just add the class yui3-cssreset to your element).
The only problem, though, is that it only normalizes little nuances between browsers, and isn't made for completely killing all stylesheets.
You could, however, edit in code to reset the background, font, border, etc.
You can use the not pseudo selector like:
:not(#idname) {
Properties... }
But that won't work everywhere without a JS shim.
Is it possible to convert HTML + CSS into HTML for a system that doesn't handle CSS, not even inline CSS?
What options do I have?
No. Much of what CSS does is not possible with HTML alone. Your best option is to design your site in such a way that when it loses CSS, it still renders in a nice and orderly fashion. Pay very close attention to things like Heading Tags, paragraph tags, lists, etc. Be sure to build semantically-correct sites, and they (in most cases) will degrade quite nicely.
The only thing you can do is add styles that were possible with old html3+ attributes and font tags. Quite a bit of stuff is possible, but none of it is going to be automatic. You can go through pretty much everything in css and try to find it's html3+ attribute equivalent.
Things like background font b i center width height are examples of old attributes (or tags in the case of font) that define style (and should generally be ignored these days). I don't envy the work ahead of you, but just make a happy medium between reasonable things and unreasonable styles. Tables also might come in handy for floats as well.
Sounds like an old mobile device?
If you can't use any CSS, I would imagine you would have to resort to possibly deprecated HTML tags/attributes, like font tags and attributes like bgcolor.
This would probably be rather difficult, because to my knowledge you can't achieve everything you can do with CSS, like positioning for example. You would have to switch your layout to use tables and set align, valign, etc.
use this first
http://www.mailchimp.com/labs/inlinecss.php
then replace css with deprecated html
http://www.highdots.com/css-editor/articles/css_equiv.html
Two words: Image Maps :) (I've actually seen sites that, in order to "render correctly on every browser" literally just make a big fancy image the background, and add links accordingly via an image map)