View Source on iPhone
This is a cool little tidbit for those of you web developers that have an iPhone. A Safari bookmarklet that enables you to “View Source” for any web page while using Safari on the iPhone. A bookmarklet (in case you didn’t know) is “a JavaScript program stored as a URL within a bookmark” as defined by Wikipedia.
The steps that follow will walk you through the process…
1 – Select and “copy” the long string of code below…
* This needs to be one long continuous string, so if you’re cutting and pasting from Firefox, you’ll need to remove the line breaks and/or spaces.
2 – On your computer, go to ANY webpage in Safari and bookmark it using either the “+” (Add Bookmark) button or by choosing “Add Bookmark…” from the “Bookmarks” menu. When saving the bookmark name it “View Source” and save it wherever you’d like in your bookmark hierarchy.
3 – Now, go into the bookmark manager. Do this by clicking the bookmark icon in your bookmarks bar or by choosing “Show All Bookmarks” from the “Bookmarks” menu. Navigate to the bookmark you just saved.
4 – Single-click on the URL for the bookmark to highlight the text for editing, and paste the text/code you just copied above.
5 – Plug in your iPhone and sync it up w/ your bookmarks on your computer.
Now, to actually use it – launch your Safari web browser on your iPhone and navigate to whatever web page you would like to view the source code for. After the page has loaded, click the bookmark icon in the lower Safari navigation bar (3rd from the left), and navigate to your “View Source” bookmark and click it.
And there you have it.
IE CSS hacks
In my web developing adventures, I’ve come across one definite truth – Internet Explorer is a big pain in the ass. Version 7 has come a long way from version 6, but it is still a bit quirky. Seeing as how I write code in a text editor (Coda is my tool of choice), I can plug away all day long writing standards-compliant code knowing that when I go to view it in a a GOOD browser like Safari or Firefox, everything will look the way that I had intended. I also know that when I go to open the page in IE, there’s always going to be some sort of surprise. I have gotten good at re-writing things so that they render similarly in ALL browsers – meaning – you can write code that IE won’t mess up and still get the desired effect in Safari and Firefox – but every once in a while that solution is out of reach. When I hit that roadblock, there are two favorite CSS hacks in my goodie bag…
/* IE6 and below */
* html #myId { }
/* IE7 */
*:first-child+html #myId { }
Both of the hacks above are valid CSS, so no worries with messing up your page validations using these. Important note – always try everything you can to NOT use these first, and make these a last resort. You’ll be a better coder because of it.
Transparent PNGs in IE6
Everybody knows that IE versions 5.5 and 6 cannot render a PNG image with alpha transparency correctly. The result is a visible “box” around the image highlighting what is supposed to be the transparent part. In the past I had used the “IE7″ JavaScript that i had found on the web before IE7 was actually released. It involved including a JavaScript file in the header of your page that was responsible for post-processing all PNGs on the page just after page load using Microsoft’s proprietary IE filter: AlphaImageLoader. While that method works fine if you have a webpage or website with many PNG images, I thought I’d share a quicker way to do it inline, should you ever have the need to deal with just a single PNG. This quick little piece of code will write PNGs into your webpage in such a way that Internet Explorer below version 7 will “draw” the image properly with full alpha transparency.
In order to do this we will actually write the image into the page twice – once for IE6 and below, and again for all the other browsers. Here we go…
1 – create a 1 pixel by 1 pixel transparent GIF image and drop that in your images directory (i usually name it “spacer.gif”).
2 – here’s the XHTML to put in the <body> of your document…
<!--[if lt IE 7]>
<img id="ie6image" src="spacer.gif" alt="" style="filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myimage.png', sizingMethod='image');" />
<![endif]-->
<img id="theimage" src="myimage.png" alt="" />
* notice how we write the image the first time using Microsoft’s Alpha Image Loader – and how this is wrapped inside IE conditional comments which basically say “if the browser is IE version less than 7″ – then we write the image again the “normal” way for all other browsers.
3 – here’s the CSS to put in the <head> of your document or external stylesheet…
#theimage, #ie6image {
width: 100px;
height: 100px;
border: 0px;
}
* html #theimage {
display: none;
}
* the second style above is the popular * html CSS hack that only IE version 6 or lower will read – telling those browsers to not display the second image.
And there you have it – a relatively simple way to solve the problem of alpha transparency in older versions of Internet Explorer. The best part about this approach is that it uses no JavaScript – just standards-compliant XHTML and CSS.
-
need my help?
Interested in having me be a consultant on your next project? to email me.
-
what i’m reading...
