Tuesday, September 8, 2009

Proprietary CSS extensions for targeting individual browsers and versions

I know that there are hacks for targeting different versions of IE:

* star in front means IE7,
_ underscore in front means IE6 and below,
\ Escaping any letter within the property name which isn't in the range a-f, A-F, 0-9 will hide that rule from IE 5.x,
-ms is IE8 vendor prefix
/ forward slash in front of a property is ignored by ie, but causes other browsers to ignore line
But what about the other browsers? Are there any proprietary extensions or hacks that allow a developer to target a specific browser with a "display:inline-block"?

I think there should be, each browser vendor should have a proprietary extension like:

-moz-css-only: "display:block;";

Or better yet, they should have one for targeting each version:

-moz-css-only-1-9-1: "display:block;";

Where the version-minorversion-subversion can be appended to target a layout issue in a specific browser. This would sure make things simpler, IMHO.

Monday, September 7, 2009

Digg bookmarklet for the iPhone

To add a bookmarklet to the iPhone click on the "Digg This" link below, you will see this page again. Then bookmark the page in your iPhone.

Add Bookmark

Add Digg This Bookmark

Then you will have to go into your bookmarks

Digg This bookmark folder

and edit the bookmark,

Digg This edit bookmark folder

remove "?" from the bookmark URI.

Digg This edit bookmark

Digg This edited bookmark

Now to digg a page just click the "Digg This" bookmark,

Digg This bookmark folder

and you will be transported to the Digg page. :)

Digg Page


Digg This

Saturday, September 5, 2009

iPhone friendly Blogger template change

If you would like to make your Blogger template more iPhone friendly, try adding the following lines of code:

<meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" name="viewport"/>
     <style>
    @media screen and (max-device-width: 480px)
    {
         #sidebar-wrapper{display:none}
         #outer-wrapper{padding:2px}
         .post img{border:none;padding:0}
         #main-wrapper{width:100%;margin:0;min-width:320px;}
         #navbar,#navbar-iframe{width:480px}
         #footer{width:100%}
    }
   
</style>
    <script>
/*<![CDATA[*/
if (!isNaN(orientation))
{
var nb,nbi,onorientationchange=function()
{
nb=nb||document.getElementById('navbar').style;
nbi=nbi||document.getElementById('navbar-iframe').style;
switch(orientation)
{
case 0:
case 180: nb.width='320px';nbi.width='320px';break;
default:nb.width='480px';nbi.width='480px';break;
}
};
addEventListener('load', onorientationchange, false);
}
/*]]>*/
</script>

above

</head>
<body>

 
It accounts for orientation and screen size by removing the sidebar and reducing the size of the navbar to the screen width.
 

iPhone bookmarklet-Add to Google Reader

To add a bookmarklet to the iPhone click on the "Add to Google Reader" link below, you will see this page again. Then bookmark the page in your iPhone.

Add Bookmark

Add Bookmark Page

Then you will have to go into your bookmarks

Bookmark folder

and edit the bookmark,

Bookmark folder edit page

remove "?" from the bookmark URI.

Edit bookmarklet

Edit bookmarklet

Now whenever you visit an RSS or ATOM feed in Safari you can open your bookmarks,

Ars Technica feed page

and click the "Add to Google Reader" bookmark,

Bookmark folder

and you will be transported to Google Reader subscription page. :)

Google Reader subscription page


Add to Google Reader