Normalize CSS instead of Reset

Previously I wrote about Why Reset CSS and gave you a code snippet that helps you override browser defaults and set consistency across all.  But I later figured out that it was an age old trick and web has changed a lot since then. Now we need more modern HTML5 alternative to the traditional reset.

Normalize.css is a better alternative to reset because it preserves useful browser defaults rather than erasing them. It has CSS that normalizes HTML5 elements, typography, lists, embedded content, forms and tables.

Have a look at this example on how search field is set consistent across browsers:

 <pre>
  input[type="search"] {
    -webkit-appearance: textfield; /* 1 */
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box; /* 2 */
    box-sizing: content-box;
}
</pre>

In addition to normalizing it also corrects common bugs for desktop and mobile browsers which is out of scope for resets.

Simplest difference between the two is that – Reset removes all built-in browser styling and Normalize aims to make built-in browser styling consistent across browsers.

So who’s using it?

Twitter Bootstrap, HTML5 Boilerplate, CSS Tricks and many other frameworks use Normalize CSS.

Further Read

Normalize.css has pretty neat inline documentation and there are additional detail and explanation on their wiki page.

There is also a nice article by @necolas on About Normalize.css which will help you understand the details.

– NishAnil on twitter

‘LESS’– a better way to write CSS

css-less-nnish

Are you a programmer like me who thinks design is a planet just outside your universe? Then you know CSS is fun, exciting and easy until your website grows fat with pages and complicated layouts. If you have ever tried fixing a layout in such a page – you know what I mean. Did I talk about fixing a layout? Oh yeah thanks to all the browsers.

Many at times while writing CSS I wished I could write it more programmatically than just styling them. For e.g. If CSS had allowed variable declarations, I could have simply held the values in variables, perform few operations and re-use them in properties. But that’s too much to ask for from a stylesheet language which should just do styling!

After doing couple of research I came across LESS – The dynamic stylesheet language. I spent a few hours re-styling some of my demos with LESS and I am must say I am thoroughly impressed with it. 

Read more on my Infragistics blog ‘LESS’– A dynamic language that simplifies your CSS

Have a feedback? Let me know @nishanil

by Nishanth Anil

Why reset CSS?

css-reset-nnish

Have you noticed inconsistent rendering of HTML elements in different browsers and have got annoyed with it? This is because all the browsers have presentation defaults but none have the same default. For e.g. the way chrome renders an input type is totally different from the way IE does.  But as a web developer you want your web pages to look same(at least close enough) across browsers. One way is to go fix for every browser in CSS files but another way is to simply reset your html tags to default and the paint them again!

Here’s the code for it:

  <pre>html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}</pre>

Note: Remove the <pre> tag from the above code while pasting.

See Original Source here. And here’s an elaborate reason for CSS reset from Meyerweb.

– Nish

@NishAnil on twitter