Search

uVot Blog! Read. Write. Debate.

-webkit-, -moz-, -ms- and -o-. And stuff.

Posted on April 19, 2012 by VIz

Probably for MOST of the people, the title looks like Chinese, except for some, of course, those who actually know Chinese and the web designers. Cause yes, that’s how they make the websites look good (the designers and more then sure some chinese people too). But what is it and how exactly does it work?

What are HTML and CSS

Well, first we should look how the websites work. The developer creates a file (either html, php, java or any other web programming languages) and puts that file on a server. There that file receives an URL (Uniform Resource Locator). You’re able to see the file in your browser by visiting it’s URL (or ip, but we don’t want to complicate this story further). When you access the URL, your browser makes a request to the server and receives the file, in html format, then it displays it to you. And to make the content of the html file (text, pictures, background, etc) look good, the developers use Styles .

In the early days, developers used to make really huge long html files, cause of the styles. For example, to write this WORD like that, they would have to write this line (or something like that):

 WORD 

So every time the developer wanted to use the Red Verdana font, underlined, bold and with that size, he would have to write that line again and again, inside the html file and on all the other files he would want to have it. And that was just a simple example, the syntax has way more tags, attributes and values. In this case you can imagine how big the pages were and how much work the developers had to put in creating them.

Then, the World Wide Web Consortium developed the CSS (Cascading Style Sheets) in 1996 which made the html files simpler and a lot more clear. And also made developer’s work way easier, at least for a while. Why for a while? We’ll see in a minute.

But what is this CSS? As we saw above, we need styles to make the web sites look nice. So CSS is another file where all those styles are stored. Why is it easier to use? Because it simplifies the use of styles. Instead of writing the style in the html file every time you want to use it, you write it only once in the CSS file and give it an ID or Class. Then, you use that ID or Class in your html file. Sounds a bit complicated, no? Well, actually it isn’t. Let’s see an example.

We want to write this sentence:

We are using HTML tags and CSS to give an example.

With the old html tags, we would had to write something like this:

We are using HTML tags and CSS to give an example

All that just to write a single sentence. Now, with CSS, things are simpler. As we said, first we need to write the style in the CSS file and give it a Class or ID, and it would look like this:

.font {

font:bold italic 1em Verdana;

text-decoration:underline;

color:red;}

And then use the .font class we just made:

We are

using HTML

tags and

CSS to

give an

example.

The result is exactly the same in both cases. Besides making the html files smaller and more clear, you can use the class that you wrote once in your CSS file all over the site, on all the pages. For example, you can make a class for the menu and then use it on all the pages that have the menu. One of the greatest advantages is when you have to change something. Let’s say you don’t like the color red anymore and you want green. With the old html tags, you have to go on every page and manually change from red to green everywhere you used the style on your text. So if you have 100 pages and you used the red style on 5 words on each page, you will have to change manually 500 red’s to green’s. With CSS, using the same example with 5 words on 100 pages, this is less then a piece of cake. You just need to go in your sheet file where you made the Class and change red to green. That’s all. All the 500 red words where you used the Class automatically change to green words. Looks easier now, right?

But there was still an impediment: Internet Explorer. What usually worked on all the other popular browsers, like Firefox, Opera, Chrome or Safari didn’t looked the same in Internet Explorer. So the developers had to add some extra CSS rules specially for IE. The big question, which still remains unanswered, is why Microsoft refused for so long to align it’s browser to all the others. A lot of people would say it was related to their pride.

The evolution of CSS. And the headaches.

As we said somewhere at the beginning, CSS made for a WHILE life easier for the developers. Well, like all the other stuff, CSS had to evolve too. First, we had CSS2 and now we’re slowly passing to CSS3. Slowly, because it takes time till all the browsers will fully support it. More rules were added, you can do a lot of cool stuff with it and basically replace Photoshop when you design a page (of course, with the help of HTML5 and java scripts, like jQuery, for example). Now, the developers are able to create gradients, shadows and transparency directly from CSS, without needing to use an image-manipulation software. You would say that’s really awesome, even easier for the developers. Well…..

And now we get to the title and to the point where the headaches start. The developers now remember the “good” old times when they were “cursing” ONLY Internet Explorer for not being compatible and a very big part of them wish they would come back. Because now, ALL the major browsers are not compatible when it’s about CSS3, at least (besides Chrome and Safari which use pretty much the same technology). So now, you don’t have to write 2 different rules, you have to write at least 4. I said at least, because sometimes you need even more. For example, what works in Chrome 10 doesn’t work in Chrome 1-9 and the other way around.

For example, you would need 7 different lines to create a gradient background which looks the same in all the major browsers, as Chris Coyier shows in this article. Basically, you have to write a line for each browser, which can be pretty annoying if you’re doing that everyday. Check the CSS for that gradient:

/* fallback/image non-cover color */

background-color: #1a82f7;

/* fallback image */

background-image: url(images/fallback-gradient.png);

/* Safari 4+, Chrome 1-9 */

background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#2F2727), to(#1a82f7));

/* Safari 5.1+, Mobile Safari, Chrome 10+ */

background-image: -webkit-linear-gradient(top, #2F2727, #1a82f7);

/* Firefox 3.6+ */ background-image: -moz-linear-gradient(top, #2F2727, #1a82f7);

/* IE 10+ */

background-image: -ms-linear-gradient(top, #2F2727, #1a82f7);

/* Opera 11.10+ */

background-image: -o-linear-gradient(top, #2F2727, #1a82f7);

Almost looks like we’re getting back in the old times when we had to write huge amounts of code. And besides that, even more annoying is that you always need to check in every browser what you’re doing to make sure everything looks the same everywhere. Hopefully, all this mess will get fixed as soon as all the browsers will support CSS3 100% and the standards will get uniform. Till then, the developers can only hope and pray these crazy times will end as soon as possible. It’s just like you are a movie producer and you have to shoot your film 4 times for 5 different tv screens made by 5 different companies, and right after you filmed a scene you go watch it on all 5 screens and see if everywhere looks the same, if not, go and shoot it again till it’s good. Not very stress-free, if you ask me.

For now, the most up to date browser is Chrome, from Google. Most of (not all, of course) the developers who work with CSS3 use Chrome now to see how the websites will look in all the other browsers in few weeks or even months. To see how your browser performs with CSS3 and HTML5, you can visit test sites like http://fmbip.com/ or use http://html5test.com to see comparative tests and measurements of all major browsers.

So, for now that’s pretty much what we cover in this article about CSS, HTML and how they work. Of course, there are way more things to say about them, but we’ll get there in the future. Till then, maybe you would like to leave a comment and tell us what you think about all this.

Like it? Share it!

Tweet

About VIz

VIz is NOT the greatest mind of the universe, the best inventor of all times, the most important thinker and the person with the clearest ideas and way of seeing things who is always right and always and in any case speaks for the whole mankind! So don't take me as ;)