{Carrer web log}

CSS Mini Reset

Thursday, May 20, 2010 { 25 Comments }

What is CSS Reset?

CSS Reset usually aims to reduce browser inconsistencies by evening up the CSS default settings in all browsers.

The most used CSS Rests are

• Eric Meyer CSS Reset


• YUI Reset


• And other ..

Last week I spotted "CSS Reset – a simpler option" by Russ Weakley.

Russ made few smart observations: we don’t always need complete CSS reset because CSS Reset file can become very large and we often forget to set all the styles.

Also in my opinion we don’t always use all the CSS and HTML tags, when was the last time when you used “address” tag?

In many cases the complete CSS Reset makes perfect sense like in the case of some CSS Framework.

I used Eric Meyer Reset for my CSS Framework (Emastic and The Golden Grid).

In other my project complete CSS reset doesn’t make sense (Malo, Formy, 1 line CSS Framework).

My point is different projects(sites) can be approached differently, and not always we need complete CSS reset.

I wanted to make Mini CSS Reset who will focus on the main CSS features like Divs , Tables and Forms who are also the most used CSS(HTML) elements.

And here is the result:

/* CSS Mini Reset */

html, body, div, form, fieldset, legend, label
{
 margin: 0;
 padding: 0; 
}

table
{
 border-collapse: collapse;
 border-spacing: 0;
}

th, td
{
 text-align: left;
 vertical-align: top;
}

h1, h2, h3, h4, h5, h6, th, td, caption { font-weight:normal; }

img { border: 0; }

You can compare:

• Eric Meyer CSS Reset


• YUI CSS Reset


• CSS Mini Reset

You can use CSS Mini Reset when you actually don’t want to reset everything just the fundamental HTML elements.

Fork - Download CSS Mini Reset on github

Any suggestions?

CSS vendor prefixes – Can we all get along

Wednesday, May 05, 2010 { 16 Comments }

Last week I published CSS3 Action Library here is one part of the CSS code:

.h-scale:hover {
 -webkit-transform: scale(1.5); //For Safari and Chrome
 -moz-transform: scale(1.5);  // For Firefox
 -o-transform: scale(1.5); // For Opera
 transform: scale(1.5); // For some unknown future
}

You can notice that is the same code but only optimized for different browsers.
Thank god we have only few mainstream browsers. Otherwise this example should be much more longer.

I think that we didn’t learn the lesson from the past . We fight for years with Microsoft to respect the web standards. With IE8/9 great progress was made and Microsoft is finally going in right direction.

But today we have bigger problem than IE. We don’t have finished CSS3 spec.

In the absence of standards all browsers are guessing what should they implement. Every browser wants to be first to implement some new cool CSS feature. The risk is that we will end up writing specific CSS code for every browser. Trust me we don’t want that!

So what can we do?

We can help the CSS3 working group by donating, joining the CSS3 discussion, suggesting new features, writing examples, writing and discussing about CSS3 ...

I think that if more people are involved directly or indirectly in the Decision Making better the result (product) will be.

In the meantime while waiting for the definitive CSS3 spec browsers can join forces and decide for one universal prefix.

What about –css3- prefix for all new CSS3 experimental stuff?

The example from above will look like this (less code) :

.h-scale:hover {
 -css3-transform: scale(1.5); // In experimental phase 
 transform: scale(1.5); // When becomes accepted standard
}

-css3 is much more prettier, semantic and logical then –moz, -webkit, -o, -i-Hope-there-will-be-no-new-browsers ..

PPK suggested –beta prefix but I think –beta can be confusing( –beta of what CSS2,CSS3 or CSS4).

Actually I don’t care if it is –css3 or –beta or –something-else I just don’t want to write the same CSS code million times.

This is open call to all the browsers: Can you all decide for one prefix ? Pretty Please.

What do you think? Please, comment!