There are still a measurable number of internet users that browse without the use of JavaScript, use the NoScript plugin, or have disabled it for security purposes. In those cases, as well as for SEO. It’s often a good idea to manipulate the display to better accomodate these users. One of the most common methods is shown below, as we can toggle a CSS class on the HTML tag easily and use CSS “cascade” to hide or show alternate content.
NOTE: this example currently requires PrototypeJS, but can easily be changed to not do so.
<!DOCTYPE html>
<html class="no-js">
<head>
<script type="text/javascript">
var ar = document.getElementsByTagName('html');
var i = ar.length;// should only be one!
while(i--){
Element.removeClassName(ar[i],'no-js');
}
</script>
<style type="text/css>
html .no-js-show { display:none; }
html.no-js .no-js-show { display:block; }
html.no-js .no-js-hide { display:none; }
</style>
</head>
<body>
JavaScript is:
<p class="no-js-hide">enabled</p>
<p class="no-js-show">JavaScript is disabled</p>
</body>
</html>
Categories: WebStandards, Work Tags: css, hide, html, html5, javascript, js, no-js, nojs, noscript, prototypejs, script, show, support
The only built-in entities in XML are &, <, >, " and ' XHTML added the others via a DTD that is not a part of HTML5. As such, validators will report them as errors.
Safe replacements are the decimal notation:   or the character itself U+00A0;
Quite a few other common symbols are not available without similar changes.
< = <> = >& = &' = '" = " –  © = ©® = ®™ = ™
REFERENCES:
Categories: WebStandards, Work Tags: amp, code, copy, entity, escape, html, html5, i18n, l10n, nbsp, quot, reg, trade, unicode, validation, xhtml, xml
Most web developers are familiar with ordered lists <ol> and unordered lists <ul>, though many are unfamiliar or uncomfortable with <dl>. While most useful for lists of definitions, they can also be styled and used semantically for navigation and forms.
EXAMPLE:
<dl>
<dt>Title1</dt>
<dd><p>Definition1.</p></dd>
<dt>Title2</dt>
<dd><p>Definition2.</p></dd>
</dl>
REFERENCES:
In the past few years the browser wars have heated up again. Performance and capabilities of some browsers varies greatly. There are several standard tests that are publicly available to benchmark your systems. WebKit (Safari, Chrome & Chromium) and Mozilla (Firefox) based browsers, as well as Opera perform pretty well, MSIE is currently trailing in most cases.
Here are a few common ones…
Categories: WebStandards, Work Tags: acid, browser, capabilities, capability, css, dom, html, html5, javascript, js, performance, script, test, war
A big part of Web 2.0 (over the last decade) has been a move toward the semantic internet, whereas each page is representative of data and it’s relationship… we are, in essence, “training” the internet itself.
XFN markup allows you to identify your relationships to other individuals on the links of your website or blog.
HTML4:
<head profile="http://gmpg.org/xfn/11">
HTML5: (removes the ‘profile’ attribute on <head> as such the updated convention is:
<link rel="profile" href="http://gmpg.org/xfn/11" />
Use in content:
<a href="http://www.skotfred.com/" rel="me">My other site</a>
REFERENCES:
Categories: WebStandards, Work Tags: friends, head, href, html, html4, html5, link, profile, rel, relationship, semantic, xfn
Browsers tend to evolve quickly, but they often do not offer the same capabilities cross-platform. As a result of this, there are many standard tests available to the developers of browser software to test for compliance with modern web standards.
Before making use of a specific capability in your web application, it’s often best to determine which browsers can support it.
Categories: MSIE bugs, Safari bugs, WebStandards, Work Tags: acid, acid2, acid3, browser, capabilities, client, css, html, html5, javascript, standards, testing, w3c, web
In my testing, you don’t need to fully embrace HTML5 markup to take advantage of the “offline” functionality, you simply need to add the attribute and related files to your existing website/page. Any modern browser that supports HTML5 should automatically recognize the offline content and use it when appropriate, unfortunately no version of MSIE yet supports this.
<html manifest="/offline.appcache">
In that file, you must then specify the offline behavior, something like this is a good start:
CACHE MANIFEST
#This is to provide minimal HTML5 offline capabilities
#MIME mapping must be 'appcache=text/cache-manifest'
#Reference to this file is per page, you can have different ones in an app.
#Common image files and css may be 'cached'
CACHE:
/index.html
/css/offline.css
NETWORK:
*
FALLBACK:
/ /offline.html
On the server side, you’ll have to serve up that file with the appropriate MIME type (text/cache-manifest, for ApacheHTTPD you simply need to add one line to httpd.conf:
AddType text/cache-manifest .appcache
REFERENCES:
Categories: MSIE bugs, WebStandards, Work Tags: apache, appcache, application, cache, conf, html, html5, http, manifest, offline
One of the great improvements for forms in HTML5 is the ability to display placeholder text in your INPUT fields. Traditionally, this has required developers to add a variety of JavaScript methods to dynamically update the field, now (for browsers that support it) you can use a simple attribute on your tag elements.
OLD:
<input type="text" value="Search" onfocus="if(this.value == 'Search'){this.value = '';}" onblur="if(this.value == ''){this.value = 'Search';}" />
NEW:
<input type="text" value="" placeholder="Search" />
REFERENCES:
Categories: MSIE bugs, WebStandards Tags: accessibility, attribute, browser, forms, html5, input, javascript, markup, placeholder, search, tag, text
Now that HTML5 support has grown, and Apple continues to resist Flash on their IOS devices, it may be advantageous to make use of the newer markup standard in your web applications.
There are currently three separate methods to convert your Flash applications:
Categories: WebStandards, Work Tags: apple, browser, convert, fla, flash, free, html, html5, ios, ipad, iphone, ipod, open-source, smokescreen, swiffy, wallaby