One of the powerful weapons used by both parties in this war is web standards. Webmasters are giving more importance to validating their HTML rather than testing it on different browsers and browser companies are focusing more on supporting web standards than the rules (mostly set by IE). Opera stands out in this field and has a slogan “break the rules, follow the standards” (or is it vice versa).

As the web moves towards the second step (the web 2.0), web standards are becoming a vital and inevitable part of web development. Partly because more and more browsers are moving towards web standards (we are at the end of the IE dominated web) and especially because browsers are dominating/winning the war of compatibility. There are already plugins/addons developed to find out whether the site you are visiting uses valit HTML or not. In the near future, browsers might start displaying error pages for web pages using invalid HTML.

Web standards are simple and easier to follow and it eliminates the need to test web pages in different browsers. It is everyone’s dream for the web to be standardized rather than ruled.

[digg-reddit-me]

* {
margin:0;
padding:0;
}

I’m still using this trick. However, today I’ve found that there’s one disadvantage of using this. According to Christian Montoya:

It’s very heavy on the rendering agent to apply rules to every single element in the document, especially with large web pages, and this can also destroy a lot of good default styling, especially when you want to have default styled submit buttons.
I learned from KuraFire Network that it’s far better to have a complete list of default settings to apply from the beginning that targets the specific browser inconsistencies. I use something very similar to what is described at “Starting with CSS: revisited” site down: use my initial.css copy with the addition that I apply font-family:inherit; to inputs, textareas and buttons. It works great and there’s no need for the * selector.

Read his post here.

What about you? What tricks are you using?

News and Reviews about Your Favorite Web Browser. Subscribe to our RSS Feed.

Visit Firefox Add-ons page.

News and Reviews about Your Favorite Web Browser. Subscribe to our RSS Feed.

1. It’s supposed to be fingers, right? But somehow it does look like a corpse pendulous fingers. Wonder why…
2. OK, I am also not sure about what is it. Woman hair? Or maybe a piece of clothes? Neither of those should look that way anyway.

Any thoughts?

News and Reviews about Your Favorite Web Browser. Subscribe to our RSS Feed.

Click on the Picture to Enlarge.

1.Small arrow makes it look like this menu can be expandable (same as the one in the right). However, it isn’t (confuses users).
2. Way too big object, colors doesn’t match with the “background color” (blue one) as well.
2a. Too big font.
3.Tables are not at the same line (looks unbalanced).
4. Buttons should be: from the biggest to the smallest one (so they would fit to each other) or all at the same size.
5. Links are underlined there. However, in the top they are not (confuses user, too many links styles used, some looks like a plain text).
6. Tables are not at the same line. Maybe “read more…” for the “Web Developer” plugin would help. This would reduce text and make table look like the one in the left.
7. This one is actually an expandable menu (see “Other Applications” in the top). Bad background color.

Since it’s still under the development, I don’t want to get into any more details, like: “colors don’t match at“all or so. Waiting for the final version…

Check upcoming addons.mozilla.org design page.

Please note: this is only my opinion which may differ from yours.

What do you think about it?

News and Reviews about Your Favorite Web Browser. Subscribe to our RSS Feed.