CSS Blog

I though that the iPhone and iPod touch would be not able to play a big role in the development of websites. When you see the developing of mobile market, you will understand, that I was wrong. It is very iportant to optimize websites for mobile browsers, such es Mobile Safari. Although the percentage is still under 1%, but it looks like that this number will be greater with earch day. The new mobile player and mobile phone from Apple are very popular worldwide. The sales numbers growing steadily. Soon, Russia’s will get iPhone officially presented. According to my knowledge is the percentage of cell phone owners, who uses mobile services, in Russia, very high. If China would get iPhone officially than the number of iPhone users will much much bigger. For Internet sites, which designed for international audiences, it is a large market. Exactly that’s why I would like to tell about some interesting and useful tips here:

Viewport:
Mobile Safari is able to show normal websites on the iPhone and iPod Toch. However, for some designs it would be useful, to hide a part of the design. For example, if a website has a design where the real site is oriented to the left and at the right side it has free space, it woulb be useful to hide the free space, so the user could see only an important part of the website.
To achieve this you should use meta-Teg viewport:
<meta name=”viewport content=”width=480″>
The number 480 stands for the number of pixels and the word „width“ for width, where Mobile Safari should center the view.

Favicon:
I think, I don’t need to explain the term favicon, because each web page developer and many users know what it is.
To use favicon in Mobile Safari, you should add this meta tag:
<link rel=apple-touch-icon” href=”favicon.png”>

Internal applications:

Most importantly, if you would like to give users a way to dial a number, by clicking it in the browser of the phone, you should use the following tag:
<a href=”tel:911″>911</ a>

To link a location in Google Maps you should write something like this:
<a href=”http://maps.google.com/maps?q=bahnhofstrasse+1+55116+Mainz”>Mainz</ a>

YouTube video link:
Although iPhone uses a separate program for playing videos from YouTube, you can link those videos with a normal link, as you do it on the PC.

Doctype Google is the new ambitious project by Google. It is an attempt to create a free technical encyclopedia for CSS, HTML and DOM. It consists of not only from the articles, it has also the code of the encyclopedia freely accessible. As in the Google video presentation the saying goes, “Google doctype is an encyclopaedia, by the developers and for the developers”.
Although there are a few articles and HowTo’s there, I am sure that Google can find many motivated supporters which will constantly fill the encyclopedia with new knowledge. Anyone who has a google account can participate.
Whether Google Doctype could be a competitor to selfhtml.org? At the moment it is still difficult to say, but the themes are very close to each other. It is important that selfhtml is only in the German language very detailed. The English version and also those in other languages, are less complete.
Therefore, I can say that Google Doctype could not be described as comptetitor for selfhtml.org, it is a device to close the knowledge gap. Previously you had to browse through various sources to find an answer for your question, today, thanks to projects such as Google and Wikipedia, the knowledge in consolidated in a few sources. This saves time and time is money.

Today I have found an interesting web resource with css tutorials. You can reach it at
http://css.maxdesign.com.au/index.htm

Matthew O’Neil wrote an article about a possibility to make gradients with different
colours and only one graphic file.
This method doesn’t work in IE6, but because IE7 will be released by Microsoft on the next time as security update for all windows users, I hope that IE6 will lose a priority.

http://alistapart.com/articles/supereasyblendys

Center of an element is very simply, but many beginners have problems with it. I was asked about it many times and that’s why I would like to present you a little HowTo:

<body style=”text-align:center;”>
<div style=”position:absolute; top:50%; margin-top:-50px; height:50px;
left:50%; width:100px; margin-left:-50px;” >
<div style=”position:absolute; text-align:center;”>
<div style=”height:100px; width:100px; background:red;”></div>
</div>
</div>

Attention: the value of margin-top should be a 50% of height-value and value of margin-left = 50% of with.