HTML5/CSS3 Coding :: WilsonMar.com

Coding Rules

Here are the HTML, CSS, and Javascript coding standards used to create this site.

This site is based on a combination of these resources:

HTML5Boilerplate (h5bp)
MobileBoilerplate
The Real Boilerplate featuring Resig's Reset

To avoid a hassle for users with obsolete bookmarks, instead of deleting HTML files, their contents are replaced with these redirection commands:

<html><head>
<meta http-equiv="refresh" content="0; url=http://www.wilsonmar.com/index.htm">
</head>
<body>
This site has been redesigned!
<p>
In a moment, you will be automatically redirected to the new page. 
<p>
If your browser does not refresh, <a href="http://www.wilsonmar.com/"> click here</a>.) 
<P>
Please update your bookmarks.
</body></html>

HTML Flavor in Formal Public Identifier

Use of HTML 4+ requires different content HTML markup

Reasons to use HTML5 right now

W3C: HTML5 differences from HTML4

The first non-comment line is the Formal Public Identifier (FPI) declaration defined by the W3C to indicate the flavor of HTML syntax used in the document. This Document Type Definition (DTD) tells client internet parsers which set of syntax rules to use when validating. [Choosing a DTD]

To specify display using HTML5 standards mode:

<!doctype html>

Every browser clear back to the dreaded IE6 recognizes this, which doesn't mean that they support HTML5.

Without this tag, IE browsers enter quirks mode for backward compatibility of (incorrect) box width CSS handling in IE5.

Pages using CSS file global.css are coded to:
Pages using CSS file g1.css are coded to:
<XML is not the first line because IE6 goes into "quarks" mode if <DOCTYPE is not the first line of a HTML file.

TODO: Consider adding a manifest.appcache: h5bp.com/d/Offline.

HTML Language

Previous to HTML5, the HTML tag defined the language of the page:

This is ignored by HTML5 browsers.

For Faster page load hack:

h5bp defines the HTML tag conditionally based on variation in handling misbehaving browsers: See paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/

<html class=""> 


 <html class="no-js" lang="en">

Browser Feature Detection

h5bp specifies use of the UTF-8 international character set:

This is instead of specifying the mostly European character set:

~~<meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type" />~~

However, specifying a character set in a meta tag disables the lookahead downloader in IE8. So to improve resource download parallelization, move the character set to the HTTP Content-Type response header.

Meta About the Page

In META author tags, I have included my phone number, and I don't recall getting any spam calls from it.

The <title of the page appears on the white-on-blue bar at the top of some browser windows. Robert Gasiorowski reported that Netscape Navigator 4 sometimes won't work without it.

Sitemetrics survey

It is OK for the <title to be among <meta tags, before the description <meta tag.

ViewPort Setting

h5bp adds the viewport meta tag because as this idiot's guide to viewport say, without it on iOS, pages stretch over the full available width of the layout viewport of 980px rather than fitting into iPhone screen sizes of 320px in portrait mode.

These additional viewport content strings:

were removed due to the issues identified in this discussion and summarized below on this page. Each mobile browser type handles orientation changes slightly differently. For example, Mobile Safari often just zooms the page when changing from portrait to landscape instead of laying out the page as it would if originally loaded in landscape. If web developers want their scale settings to remain consistent when switching orientations on the iPhone, they must add a maximum-scale value to prevent this zooming, which has the sometimes-unwanted side effect of preventing users from zooming in.

target-densitydpi=device-dpi is needed for Android because high resolution device can be twice as high as a low resolution one, with the same physical device size. This big difference make the picture shrink into half size.

MobileBoilerplate adds this:

If a page is formatted for the 150 by 150 pixels on a typical Palm OS device, the 177 by 208 pixels on a Nokia 3650 smartphone, or the 215 by 270 pixels of a typical Pocket PC device, Aventgo recognizes this tag:

MobileBoilerplate adds this to activate within Mobile IE's ClearType technology for smoothing fonts for easier reading:

MobileBoilerplate adds this for iOS web apps based on Alex Gibson's post on iOS startup images - reconsidered

Author Identification

We believe it the importance of transparancy in the author and publisher behind websites.

A humans.txt file is included (just to be cool):

OpenID tags are also included.

Site Icons

IE browsers used to automatically request the favicon.ico file from the root of every site, and issues an error log entry if one is not found. So to prevent logs from filling up, sites should have the file in its root folder. It helps to specify this

MobileBoilerplate specifies reuse of apple's 57x57 icon for nokia devices:

QUESTION: Won't this clash with favicon?

WEBSITE: mathiasbynens.be/notes/touch-icons by Mathias Bynens was noted in h5bps to explain why this HTML specifying icons for Apple is needed for Android devices:

<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png" />


<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png" />


<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/apple-touch-icon-72x72-precomposed.png" />


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


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

The order of these specifications is important because only iOS 4.2+ recognizes the sizes attribute.
Prior iOS versions use the last one listed.

"precomposed" is specified to block iOS from automatically modifying the icons with rounded corners, drop shadows, and reflective shine allowed by this default specification (and thus not specified in our HTML). Android 2.1 ONLY supports precomposed icons.

More from the Apple Safari Web Content Guide:

<link rel="apple-touch-startup-image" href="/startup.png">

MobileBoilerplate defines sample startup image files:

<link rel="?" href="/startup-tablet-portrait.png">


<link rel="?" href="/startup-tablet-landscape.png">


<link rel="?" href="/startup-retina.png">


<link rel="?" href="/startup.png">

CAUTION: Every image specified in a <link is downloaded, regardless of which one is used on the device. iOS 4+ recognizes the sizes attribute, but older versions do not. So for the sake of older versions, it is better for JavaScript to dynamically create the <link specs for the device actually in use.

Stylesheet

CSS (Cascading Style Sheet)

elements from the prior version (in a file named global.css) were (if relevant) inserted into the file named style.css by h5bp within folder css.

This site follows the h5bp naming convention, but
TIP: CSS files are housed in a secondary host name (server merc.tv) for simultaneous (faster) loading.

WARNING: Some pages of this site may be formatted in the prior version which uses a file named global.css.

Formatting of various items on this website are specified by a combination of javascript as well as CSS are difficult because they don't work the same on all browsers, and not at all on very early browsers. Javascript is needed for language and other user preferences.

Cross-Browser Feature Detection

For best performance, custom JavaScript is placed at the bottom

of the HTML file.

However, users must wait for the Modernizr JavaScript library to load (from the <head section) and execute to identify which HTML5 features the browser being used actually supports, so that the code appropriate for that browser can be used. Internals of how Modernizr works is ARTICLE: an-introduction-to-modernizr-for-designers and WEBSITE: Modernizr’s Official Documentation.

WEBSITE: Modernizr and Content Delivery Networks (CDNs) recommends that to reduce load times during production use, build a custom edition of Modernizr at modernizr.com/download, then minify and compress it before putting it in your own CDN (such as CloudFire). Time is saved by detecting only the HTML5 features you use among 40 (or more) that development versions churn through. Custom versions can exclude the HTML5 shim script for cross-browser support when styling HTML5′s new semantic elements.

h5bp comes with a development build (that churns through everything) in this folder and file name:

However, this code is added on pages to fall back to the local file on my server only if it cannot load it from CDNJS:

Microsoft CDN cannot be used because it has an old version: http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.0.6-development-only.js

WEBSITE: Tutorial on A List Apart by Faruk Ates, Modernizr's Creator, notes that Modernizr was created based on the principle of progressive enhancement, so it supports—encourages, even—building your website layer by layer, starting with a JavaScript-free foundation and adding layers of enhancement one by one.

WEBSITE: HTML5 Please lists and enables you to search for fallbacks and polyfills to make older browsers behave like HTML5.

WEBSITE: Polyfills is a term coined by Remy Sharp to describe JavaScript shims that replicate native features of new browsers in browsers without such features.

html5shiv
css3pie.com makes Internet Explorer 6-9 capable of rendering several of the most useful CSS3 decoration features.

WEBSITE: Write your own Polyfills

TOOL: CSS3PIE, with PIE meaning Progressive Internet Explorer, uses Microsoft's HTC (HTML Component) to enable Microsoft IE 6 thru 9 internet browsers to mimic CSS3 border-radius, box-shadow, and linear-gradient decordation features.

Browser Upgrade

h5bp has this code to prompt IE 6 users to install Chrome Frame. Remove this if your site supports IE 6.

See chromium.org/developers/how-tos/chrome-frame-getting-started

Body Fonts and Colors

See my page on Fonts handling

Older pages used attributes in the <body tag for obsolete Navigator browsers:

Explorer-specific topmargin="0" leftmargin="0" and
Navigator-specific marginwidth="0" marginheigth="0"
were added to remove all extra spacing added to each frame by default, per SyncFrset from the previous century.

These need to be replaced by CSS because they cause HTML validation to fail.

Background Body Color is #FFFFE0 (a light beige in FireFox/Netscape 4 and light grey in Internet Explorer 4) is used because it is easier on the eyes than stark white (FFFFFF). This avoided warping on WebTV browsers (remember them?).

Changes to default HTML5Boilderplate CSS3 style.css
h5bp	Modified for this site
html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }	html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; }
body { margin: 0; font-size: 1.0em; line-height: 1.4; }	body { margin: 0; font-size: 0.9em; line-height: 1.0; color: #550000; }
td { vertical-align: top; }	td { vertical-align: top; padding: 4; }
-	td.source {FONT-FAMILY: Arial, Helvetica, sans-serif; }

TODO: This table makes use of jQuery JavaScript for sorting columns.

Sounds

In Books247.com CSS3 Anthology

If a sound is appropriate, this graphic exposes a link for those who choose to (waste bandwidth) downloading the sound file. For example:

Cool!

Older pages may contain this tag below the <body tag to provide a handle for JavaScript to play sounds:

I used to think that it would be entertaining to have some sound with every page. So I put in Netscape EMBED commands such as:

<EMBED src="http://merc.tv/sounds/soundfile.mid" width="144" height="60" AUTOSTART="FALSE" VOLUME=80% LOOP=FALSE>

I no longer use the Microsoft BGSOUND command because it doesn't provide an option to turn off:

<NOEMBED> <BGSOUND src="soundfile.mid" LOOP=1> </NOEMBED>

The media player icon makes the page look cheap trashy, from the 70's.

Menu Navigation

In Books247.com

This site has a complex navigation structure.

The horizontal menu is auto-convented to a drop-down, as seen on WEBSITE: Five Simple Steps. This is done by defining both <select> and <a> lists, then hiding one or ther other depending on screen size.

HTLM5Boilerplate styles.css includes this line:

This We will use it when W3C Markup validation recognizes it as valid.

The role attributed is a landmark for navigation of dynamically generated HTML when using assistive technologies, as specified by WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications).

A fuller example with several regions is:

So this markup will need to be removed from HTML and generated by JavaScript
See standards-schmandards.com/category/markup/

There are several lists of menus on each page.

Responsive Web Design

Responsive web design goes beyond the "Holy Grail" of CSS layouts: fluid middle columns that expands to fill large screens, with fixed sized columns on the left and right that work on all browsers (with workarounds for IE5 PC).

Since 21 Sep. 2004, The Man In Blue's Resolution Dependent Layout of 4 columns changes the position of DIV's according to browser width.

Another 3-column example is by Paul O'Brien, author of SitePoint's Ultimate CSS Reference.

Although detecting screen dimension is possible using window.onresize, its use crashes older versions of IE because the event continually fires as windows are altered.

Even viewport dimension changes can be detected, factors such as orientation and aspect ratios must be calculated, with no guarantee it’ll match your browser’s assumptions when it applies media query rules in CSS.

TOOL: matchMedia.js polyfill (31 lines of JS) from Paul Irish or scottjehl tests media queries in JS, used by Modernizr.

The phrase "Responsive Web Design" was coined in 2006 by Ethan Marcotte in his article. Columns on these sites appear and disappear as the screen gets bigger and smaller:

Explanations of achieving this is at this Responsive Design video and a great sample page using the cleanly design Golidlocks Approach Boilerplate [download].

Media Queries for Standard Devices

This site aims to use Responsive Web Design which layout responds to different sizes of the user viewport.

Designing for "mobile first" is done so that mobile devices need not waste bandwidth downloading desktop styles. CSS3 @media queries identify attributes of the screen being viewed. Older browsers without CSS3 support can use JavaScript to mimic media queries.

TIP: @media queries need just 4 generic contexts based:

width and height
screen resolution
orientation
aspect ratio

Formatting Strategy
Div	Desc.	HD Screen	Desktop Monitor	Big Tablet	Small Tablet	Hand- held
-	Bookmarklets to resize this screen to minimum of:	>= 1025	769- 1024	481- 768	321- 480	0 to 320
-	Basis of 1em = 10px	94em	61.25em 980px	40em	-	-
TopRail	Line at top of viewport	1 left	1 left	1 left	1 left	1 left
Byline	Under picture logo, contact me icons and links	Fixed left	1 left	1 left	1 left	1 left
TitlePane	Page Title	2 center	2 center	2 center	2 center	2 center
Flags	Translations of this page	3 center	3 center	3 center	3 center	3 center
Perm	bit.ly/...	4 right	4 right	4 right	4 right	4 right
Intro	Page Title and Intro	5 center	5 center	5 center	5 center	5 center
-	Related topics elsewhere on this website	-	-	-	-	-
-	Topics this page	Fixed left	-	-	-	-
-	Google Custom Search bar	-	-	-	-	-
sidead	Ads	Float on right	Float on right	in-line	in-line	in-line
sidenote	Additional notes	Float on right	Float on right	in-line	in-line	in-line
Footer	Rating, Email form	Fixed bottom	-	-	-	-

TOOL: See how a site looks on several screens at once or
TOOL: for specific screens/devices
TOOL: Resizer Safari Extension adds a button to Safari toolbars for resizing browser windows, cycling through 10 user configurable window settings (that can be named and enabled/disabled).

Positioning without Tables

Why don't we use a CSS grid system like 960.gs ?

Text Content for HTML4+

WIKIPEDIA: Presentational_elements_and_attributes

Now that enough people use browsers supporting HTML 4.0 and 5:

<a id= marks text location instead of <a name=
Lines breaks are created use <br />, placed at the end of sentences.
A single blank line is <p>, with <p> </p> for multiple blank lines.

CSS p.ellipsis { white-space: nowrap;} is used instead of <nobr.
To break lines better, CSS p.wordwrap{ width: 400px; word-wrap: break-word;} is used.

Images end with /> instead of >.
Quotes are encased between <Q> and </Q> instead of  and &148; (rather than generic "). or <blockquote>.

Emphasis (shown as italics) is done using <em> instead of <i>.
Emphasis is also used to specify use of another language, as in <em lang="es">hola</em>.
Bolding (stronger emphasis) is done using <strong> instead of <b>.

JavaScript Libraries

Browsers run JavaScript between the <HEAD> and </HEAD> tags before displaying anything.

h5bp uses this code to grab the jQuery library from Google CDN. To fall back to local if offline, a protocol relative URL is used:

TODO: Add what the h5bp build script recommends after it creates these scripts, concatenated and minified:

The Javascript requested by the BODY onload ...

The Javascript to invoke setUserOptions() at the bottom of the page is executed after the page loads. This is why the screen contrast and font change buttons at the top of the page appears a few seconds after the page appears loaded.

We add  at the end of our scripts. to hide Java scripts from less powerful browsers. This will not affect the script's performance.

We program to JavaScript1.0

for compatibility with those using Microsoft Internet Explorer 3.0 (which is not licensed from Java). We don't use JavaScript1.1 features such as dynamic image updating and new object constructors.

We include alt= attributes to <IMG> tags for text-based browsers and for browsers which display braille instead of text for blind people.

Functional names to graphic files. Example, the graphic separating items is named “itemsep.gif” rather than an abbreviation of “green box with white background”, which is the graphic's name in the folder containing Graphics.

We specify height= and width= for each image because Java Scripts are picky and the images display quicker.

code TABLEs in small sections so upper tables appear as lower tables are loaded. Browser wait until an entire TABLE has loaded before showing anything.

Use thick Horizontal Rules for WebTV users by coding <HR SPACE=2>

Avoid using white text within shaded tables because handhelds and older browsers (such as AOL 2 and Navigator 2) don't support shaded tables.

Graphics

Buttons are saved in transparent png or GIF 89 graphic file format.
Photographic images in JPG format at the typical resolution of computer monitors — 72 dots per inch.
HSPACE="0" VSPACE="0" are not used.
Shadows on graphics fall to the RIGHT of the item — the light source is on the upper left corner.

TODO: To reduce the number of graphics files downloaded, CSS sprites are used. Various image files (in a zip) are combined into a single png file using
WEBSITE: TOOL: CSS Sprite Generator on-line, which also compresses the image using OptiPNG.

Videos

A big reason people welcome HTML5 is because plug-in's were a hassle as well as a security hazard.

Microsoft had included Macromedia in their list of add-ons.

Shocked sites

<OBJECT code to display flash movies on Microsoft browsers:
<EMBED src=... > for Netscape browsers.
For older browsers (and those who refuse to download the plug-in), a “traditional” (perhaps animated) gif file between <NOEMBED> tags.

Footer

A Scroll to Footer icon/link is provided for those who just can't wait.

A Scroll to Top icon/link is provided for those who jumped the gun too soon.

To separate content from the footer, the footer uses a dark background color and white font.

To save web pages for reading later on iPad, iPad, Amazon Kindle, etc. save the URL to http://www.instapaper.com/hello2?url=http://... Instapaper.com

Analytics JavaScript

h5bp has been criticized for including Google Analytics, even though it is asynchronous.

The version in it is not the code provided in the Google Analytics Asynchronous Tracking Guide™, but the one Mathias Bynens made run faster after reducing it to 276 bytes:

<script>
var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script')); </script>

Bookmarklets

Bookmarklets are small bits of JavaScripts that are invoked like URLs.

window.resizeTo only work in IE, Safari, and Firefox browsers.They do not work in Chrome or Opera browsers.

Slow Scroll

Some people just want to go right to the content and skip the introduction and links. This gives it to them.

This script makes scrolling slower (less jarring) than jumping to a link, so viewers know it's on the same page.

Instead of using an additional JavaScript file from jQuery plug-in guru Ariel Flesler, this uses raw reference to jQuery's animate function:

	$(document).ready(function(){ 
		$('a.scrollToTopic1').click(function(){
			$('html, body').animate({scrollTop: $(document).height()}, 'slow');
			return false;
		});	
	})

http://cssguidelin.es/