Position Sticky Workaround

Position Sticky is not here yet.
http://updates.html5rocks.com/2012/08/Stick-your-landings-position-sticky-lands-in-WebKit

Demo: http://jsbin.com/omanut/1343

Link: CSS3 Pictogram Button Link via Webstuffshare

CSS3 Pictogram Button – Webstuffshare – Learn and share. The simplest harmony.

1. No images, all buttons using CSS and font.
2. Using Animation for changing button states.
3. Flexible, you can choose or even change the button size or style.
4. Any container element can be applied (a, button, span, div, input, etc.)

Identifying Link Targets with CSS

Sources: Noupe "Useful CSS Snippets", 1stWebDesigner "25 Incredibly Useful Snippets for Developers"
See also Data uri's  http://davidwalsh.name/data-uri-php

/* external links */
a[href^="http://"]{
padding-right: 20px;
background: url(external.gif) no-repeat center right;
}

/* emails */
a[href^="mailto:"]{
padding-right: 20px;
background: url(email.png) no-repeat center right;
}

/* pdfs */
a[href$=".pdf"]{
padding-right: 20px;
background: url(pdf.png) no-repeat center right;
}

/* identify links that open in new window */

a[target="_blank"]:before,
a[target="new"]:before {
margin:0 5px 0 0;
padding:1px;
outline:1px solid #333;
color:#333;
background:#ff9;
font:12px "Zapf Dingbats";
content: "\279C";
}


  /* external links */ a[href^="http://"]{ padding-right: 20px; background: url(external.gif) no-repeat center right; } /* emails */ a[href^="mailto:"]{ padding-right: 20px; background: url(email.png) no-repeat center right; } /* pdfs */ a[href$=".pdf"]{ padding-right: 20px; background: url(pdf.png) no-repeat center right; } /* identify links that open in new window */ a[target="_blank"]:before, a[target="new"]:before { margin:0 5px 0 0; padding:1px; outline:1px solid #333; color:#333; background:#ff9; font:12px "Zapf Dingbats"; content: "\279C"; }

The Power of CSS1K

http://css1k.com is an interesting project about seeing how much you can accomplish, and still keep your css small.


I found some styles to be visually interesting:


http://css1k.com/#desktop
http://css1k.com/#turnaround
http://css1k.com/#swiss
http://css1k.com/#bookshelf
http://css1k.com/#toolbar
http://css1k.com/#stretchy
http://css1k.com/#photobox
http://css1k.com/#ev





But what really came out of it for me was how badly you can mess up a site's usability, using only  CSS. As I switched from theme to theme, it became tough to remember where I left off, and which themes I had seen. In this case, having the visited links styled differently would have been very useful on this site. (bing usability and visited links).

Some webguy's uncle said, with great power, comes great responsibility.

Slashed Zeros For Tables on the Programming / Web

Got frustrated with all the account numbers I'm looking at, and not knowing whether I was looking at a zero or an O. Consolas is a MS font that is distributed with Windows from Vista on. For XP, it is also available with the installation of PowerPointViewer or Office 2007 Compatibility Pack. It's not a pretty font, so I only apply it when the distinction is important:\ .numeric {font-family:Consolas, 'Deja Vu Sans Mono'}

Simple Solution For Mobile-Friendly Websites

You probably don't need a statistic to tell you that mobile browsing is increasing

You probably don't need someone to tell you that you don't that it's harder to read a website on a smaller screen.

You probably don't need someone to tell you that you should make your website mobile friendly.

And you can probably do a Bing search to find out how to do it, perhaps in a better way than I did.

But getting something done right now would probably be better, right?

Here's what worked for me: CSS Media Queries

1. First, I made a copy of the full style sheet for IE less than version 9, because those browsers don't understand media queries. I was then able to pull the IE specific code out of the regular style sheet.

<!--[if lt IE 9]>
<link rel="stylesheet" media="all" type="text/css"   href="/css/morrison-ie.css"/>
<![endif]-->

2. Then I pulled only the most basic styling code out of the stylesheet to start the mobile css.
I changed some images to display based on percent, and some sections not to display:

.logoimg {width:20%;margin:1%;}
.bannerimg {width:74%;margin:1%;}
.titleimg {width:100%}
.contactbox {display:none}

3. I separated mobile from full with style links - iPad resolution is 768x1024.

<pre style="white-space: pre-wrap; word-wrap: break-word;">
<link href="/css/mi-mobile.css" media="only screen and (max-width : 768px)" rel="stylesheet" />
<link href="/css/morrison.css" media="only screen and (min-width : 769px)" rel="stylesheet" />
<link href="/css/print.css" media="print" rel="stylesheet" />

4. I added some viewport tags based on testing the stylesheet in various browsers, to make sure the pages were viewed in the correct size.

<meta name="HandheldFriendly" content="true"/>
<meta name="viewport" content="initial-scale=1.0"/>
<meta name="viewport" content="width=device-width"/>

5. Added the "apple-touch" icon, which Android uses too, for shortcuts.

<link href="/images/mlogo57.png" rel="apple-touch-icon"/>

All in all those changes were much easier than composing this post in Blogger's interface.

Any Questions?

Syntax Highlighting for Blogger

Syntax Highlighting with Javascript and CSS by Alex Gorbatchev

SyntaxHighlighter helps developers to display code on their website. Works in any site, and is already implemented for some cms'.
http://alexgorbatchev.com/SyntaxHighlighter/

I needed it for Blogger

Instructions for Blogger

http://www.cyberack.com/2007/07/adding-syntax-highlighter-to-blogger.html