For iPhone users, when you are viewing a website on Safari and switch the screen orientation from portrait to landscape, you will find that the content of the page will be scaled automatically to fit the screen width. This maybe a nice feature but probably not good for responsive design.
To disable the auto scaling, you can add the following meta on your HTML inside the <head> tag.
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0" />
A drawback is the above meta will disable the user scaling as well. For more information, please refer to the reference link below.
Reference: StackOverflow – How can I disable MobileSafari’s content scalling on orientation change?
If you want to change the text highlight color, you can apply the folowing CSS3 style.
background: #FF0000; /* Safari, Chrome */
background: #FF0000; /* Firefox */
Reference: CSS-TRICKS – Overriding The Default Text Selection Color With CSS
Text rotation can be done by CSS3 3D Transforms. But after the transform the text is aliased. For WebKit browser, the anti-aliasing feature could be enabled by adding the following CSS style.
Continue reading CSS3 – Smooth the text in WebKit browser after Text Rotation by activating the anti-aliasing →
Next: CSS3 – Smooth the text in WebKit browser after Text Rotation by activating the anti-aliasing
We can rotate text by using the CSS3 transform.
To rotate a text in clockwise direction with 45 degree:
-webkit-transform: rotate(45deg); /* Safari and Chrome */
-moz-transform: rotate(45deg); /* Firefox */
-ms-transform: rotate(45deg); /* IE 9 */
-o-transform: rotate(45deg); /* Opera */
Continue reading CSS3 – Text Rotation by 3D Transforms →
Next: HTML5 – Play sound/music with <audio> tag @ 2
With HTML5, we can easily play audio file with the <audio> tag. Here is an example.
<audio controls loop autoplay>
<source src="music.ogg" type="audio/ogg" />
<source src="music.mp3" type="audio/mp3" />
Your browser does not support the audio element.
Continue reading HTML5 – Play sound/music with <audio> tag @ 1 →
Here is an example which styles an HTML a link with a rounded corner button background.
Continue reading CSS3 – Rounded corner button background →
- aString.substr(start, length)
- aString.substring(start, stop)
My friend Jeff has made a google bookmarks plugin for Safari 4. You can download at here.