Staying Ahead of the Curve

Staying Ahead of the Curve

Welcome, this is an amalgam of samples, code snippets and need to knows in regards to best practices for Front-End coding.

The topics within are related to HTML5, CSS3 and jQuery.

It's a comprehensive approach to documenting current supported practices using these front-end technologies. Basically, this is a one stop shop where I will be depositing new finds and updating coding techniques for my own use. If you find yourself here and learn something or are reminded of something useful then your welcome. If you care to chat about some of the topics written here and would like to discuss, shoot on over to the blogOsphere and leave a comment. I'll open a thread just for those of you who are interested in doing so.

Just a bit of information you may find useful when navigating, use the arrow keys!!

- R. Lewis, Developer

Use the arrow keys or click the dot switchs above to navigate.

HTML5 is a cool new way of writing and using html mark-up. Previous versions of html (xhtml 1 & 2, html4) are quickly becoming the old way. While HTML5 is not fully accepted equally among all browsers it does appear to be the way to go. It's features add many conveniences which I will discuss here with you. When combined with CSS3, HTML5 can be quite awesome, indeed.

Previous doctype versions HTML4, xHTML2 as well as Dom Level 2 will sooner or later be replaced by HTML5. These versions are still currently valid and may always be, however, HTML5 neatly and conveniently covers all this terrain.

Here's just a quick breakdown of the nuts and bolts of HTML5. It's start's out with the doctype . The old doctype used versions strict or transitional. These included long links of which I'm sure most developers just copy and paste into the top of their html. I'll bet not one of us can actually remember how to write a strict doctype link from memory. The new doctype is now simply html. How's that for convenience. Also, the charset is simplified to utf-8. The only catch to the charset, besides the fact that it may not validate in html4 validators, is that is must be set within the first 500 bytes of the page.

This brings us to the point of validation. W3C has introduced a validator called UNICORN, which validates a page based on it's doctype. So if you're concerned that your page is not validating, (which I intially had issue with), not to fear. As HTML5 is emerging, it will begin to pick up more universal support from modern browsers. Thus, validators will have to re-issue releases of themselves that accept more and more HTML5. In essence, what does not validate today will soon come, in theory of course.

Some say that validation is not always necessary for a well functioning site. Though I disagree with the sentiment, technically speaking this is true. When building a page you should always seek to have it validate. Only add items you know for sure will not compromise the site. In the event you are aware that an item will cause the page to not validate use best practices. If you do not know in advance that something will not validate or whether or not you can 'live with it', don't add it to the page. It's probabley not semantically correct. There are instances, such as ARIA roles which may not validate, however, their purpose (makes sites more accessible to those with disabilities) is worth the validation warning.

Of couse if you'd like to take a peak at this source code, you can at any time because, guess what? It's full on HTML5

Sections and sub-sections become identifiable as sections and would need to be styled with this in mind. Be aware of specificity when styling section elements. For instance, you cannot style a header element in IE8. What you can do is further define the tag using ARIA role attributes, ex:[roll=banner]. In IE7, you would need to further extend the element by using a class such as .header.

Check Current Browser Compatibility

See how your favorite browser stands up to the HTML5 compatibility test!

HTML5 Browser Test

Now test your code with: W3C UNICORN Validator

More fun facts:

Each Section tag in html5, in theory, can have it's own h1, h2 etc tags. Same rule applies to article tags. H tags can be combined into groups, or hgroups to keep in consistency with robots and crawlers and in essence hide h tags within the group or section. HTML5 was created by developers from Opera, Mozilla (Firefox) and Apple as a replacement for xhtml and xhtml2. It is designed to be backwards compatible with html 4 and lower as well as xhtml. In HTML5, sections, articles and the sort all but replace div's, if you can imagine that. It consists of markup language and an API aspect for web applications (think gmail).

Samples - http://www.html5rocks.com

Here is a snippet of the Boilerplate type html tag used for IE browser specific styling as well as non-javascript browsers.

Articles

There is some debate over sections -vs- articles. Astehetically they appear to do the same thing. They are both containers. Here's where articles and the use of articles differ. Proper use of an article means you can take the content with the article itself and move it completely into another space or format (print for example). You should be able to take a whole article and have it make sense anywhere else you put it. With a section, there is a looser format whereas you could have a series of articles, or other elements. Articles need to be self contained.

Canvas Element

The canvas element is rich in promise and inventiveness. I'd say it's great for designers and ultra creative types. There are some really cool sites out there that utilize this feature with incredible results. Unfortunately, I for one am not one of those type's. Personally I've found the canvas element to belong to a niche group. I'd like to stay inline with what we can utilize today thinking in a cross browser type of way.

Just to give a glimpse for those of you who may want to look further into the canvas element, it's very possible to create a photoshop type drawing pad including cropping using the canvas tag in html5, css3 and javascript. Try it out and see for youself. Let me know how that works out for you. The canvas element is not very efficient with cross browser compatibility.

Samples - http://9elements.com/io/projects/html5/canvas/

Accessible Rich Internet Application specification (ARIA)

ARIA introduces the role="" element, which is useful for section 508 compliance. It gives meaning to a tag (div or section) in much the same way a class or id would, meaning it can be called and styled. In some browsers (IE) it can be styled whereas an HTML5 tag currently would not be called via css. Role attributes describe an elements purpose for other developers to be able to read the same code clearly. It's predominant use is to give accessibility to the disabled. Crawlers will pick up a role attribute easily so if there is a section of the page that you feel needs to be identified specifically, be it for clear code footprints or 508 compliance, roles are a long time recognized way of accomplishing your goal.

Using the role tag is considered extending semantics. It's used in addition to well formed HTML5. Another extension is microformatting. Microformatting gives way to the creation of vcards and hcards (think contact info). By microformatting or specifically naming via class an address (class=address) and wrapping it in an HTML5 address container, you've created the perfect index for a crawler to pick up. Good going, buddy.

Role is something that does not validate in firefox html5 validator, however, like most html5 tags it probably soon will. It's one of those forgiveable warnings. The benefits are much greater than the downside considering the only real downside is the validation.ARIA is backwards compatible back to ie7 whereas html5 does not go back that far in some instances. Therefore using the role attribute presently gives access to more browsers than just those that support html5.

Widget roles include:

  • alert -
  • alertdialog -
  • button -
  • checkbox -
  • combobox -
  • marquee -
  • menuitem -
  • menuitemcheckbox -
  • menuitemradio -
  • option -
  • progressbar -
  • radio -
  • scrollbar -
  • slider -
  • spinbutton -
  • status -
  • tab -
  • tabpanel -
  • textbox -
  • timer -
  • tooltip -
  • treeitem

Landmark roles include:

  • banner -
  • complementary -
  • contentinfo -
  • main -
  • navigation -
  • search

Document structure roles include:

  • article -
  • group -
  • heading -
  • list -
  • listitem -
  • note
  • presentation
  • separator

Forms

There are differences in the way browsers display input fields. The general type is text. HTML5 introduces types:

  • email -
  • url -
  • number -
  • range -
  • date/time -
  • search -
  • tel -
  • *autofocus -
  • *placeholder

Browsers such as Opera and Safari interpret the different types and react based upon that info. For instance, the date/time type in FF will display date and time whereas Opera will display a calendar widget.

sample - range:

*view form in chrome

:
Make a new contact
  • :
  • :
  • :
  • :
  • :
rate your skills in the following (1="huh?" to 5="guru")
  • :
  • :
  • :

HTML5 Semantic markup

One way to get HTML5 to work in all browsers is to use a boolean value with your element. This works in FF, Chrome, IE7, IE8 (element="true"). Once the boolean value is added css styling will be easily accepted.

Notice: without the boolean value most browsers will not pick up the HTML5 element and therefore would not pick up the style.

IE7+ Modern Browsers:
css - [section] {color: red}
html - <section="true">It was a dark and stormy night</section>
IE8+ Modern Browsers:
css - section {color: red}
html - <section section="true">It was a dark and stormy night</section>

Footer

Playing video using HTML5

The video /audio tag is used with a fallback method. The browser creates the controls and method of play pending viable format. The most used formats are mp4, ogg, webM and vorbis and ofcourse .swf via objects.

CSS3 - Progessive Enhancement

Progressive Enhancement

The concept of progressive enhancement is basic in essence. Modern browsers use modern features where by older browsers may not use some of the nuances of CSS3 or HTML5. Therefore, progessive enhancement best practices suggest designing for both older and modern browsers with predictable outcomes. For instance, IE 9 may support the latest and greatest in CSS3, IE 7 may not. CSS3 may present some really cool effect and so we implement keeping in mind that this effect will not be present in IE7. The look of IE7 should still be 'A Grade'. However, if a user were to upgrade her browser she would immediately notice the cooler effects in the IE9 browser. This is progressive enhancement. Designing and coding as a feature using thet latest and greatest in CSS3 or HTML5 coding keeping in mind older browsers which do not support.

CSS3 is used widely by modern browsers (Safari, Chrome, Firefox, iOS and Android), however, not so much by IE 7 and IE8. IE 9 does use CSS3 for the most part but it's a much less used browser. As time progresses these browsers will use CSS3 more and more as the older versions of these browsers fade. Correct implementation of CSS3 is to use it as a feature. The fact that it is not used in older browsers should not be considered a bug. These browsers will catch up in time. Until then, CSS3 will remain a feature that exists in some browsers and not in others.

CSS3 can be used to create images and even animation. If used correctly it can be used and displayed in modern browsers bypassing older browsers as still images. If the user were to upgrade to the highest version of any particular browser css3 would automatically work (giving immediate gratification for the user).

Many features are available including embedding fonts, gradients and transitions, all now available using CSS3. Some of these will come to replace javascript, animated gif's and even flash in some instances. Ofcourse javascript has irreplaceable usefullness in other area's, the fact that css can pick up the slack in area's involving things such as rotating images,roll-overs and more is remarkable indeed.

Selectors:

One cool thing you can do with CSS3 is choose selectors based on unique tags and id's. If you took a look at the source code on this page you will see a section tag with an id name. This id can be called to select any other tag or attribute child.

Tags can also be given individual attributes such as this link Allmenus. The css here calls the title attribute as well as pre-sets the a tag searching for any a tag link starting with Allmenus.com. These are 2 methods either of which could come in handy (perhaps when doing partner sites or promotions).

  • This is an example of a ul tag with odd and even colored li tags

  • #id li:nth-child(odd) gives color to only the odd numbered li tags
  • This also works on tables with tr and td tags
  • Does not work on IE 5 on a Mac... this would be used as a feature and not a standard
  • Note: inm:not([alt]) checks for whether or not an img has as alt tag...
    great for validation!

Toolboxes

There are some really cool toolboxes out there tha I like to use quite often for gradients, transitions and animations. Here are two of my favorites:

Style Master
CSS3 Gradient Generator

And since we are going outside the box I'll throw in a cool favicon generator by Dynamic Drive:

Favicon Generator

Gradients

Here is an example of gradients.It only appears as a progressive enhancement feature in firefox however, could be implemented for any browser which support gradients. The gradient generator above actually gives code for all browsers successfully.

Transitions Effects - Only in Chrome (:P)

Kindle

Six Strange Tales

Nook

Six Strange Tales

Double Background-Image

Another cool feature is the double background image feature. In essence you could have 2 different background images exist on one tag using:
background-image:url(foo.jpg),url(bar.jpg); reasonably combined with repeat-x, repeat-x, background-position etc;

Background-Clipping

Using this feature you can clip a background to a border box, padding-box or content box, however not the margin-box using browser specificity:
-webkit-background-clip:padding-box;

In safari and iPhone a helpful complementary feature to this is -webkit-background-origin: padding-box;

This feature is widely supported however only in modern browsers.

Rotate / Translate / Skew

Make the box below rotate (hover over). Pretty cool hunh. Now slide. Now skew. Starting to get the feeling we can do anything. Notice the text is still editable. Only in modern browsers.

Rotate
Translate
Skew
Rotate 3D
Rotate 3D

Web Fonts

Here I have embedded a font using font type eot and ttf to deal with the cross browser specificity. It basically links to the url in css3 using the @font-face rule whereby the font is defined. Once the font-face/font-family is defined it's used in the h2 tag or what ever tag we like. EOT is used for IE and ttf is used for non-ie browsers.

Another font format emerging in modern browsers is woff.

One drawback in using non-standard fonts would be that the font would have to load into the browser and be cached. What this means is the 1st time a user goes to a page with embedded fonts there may be a slight delay in the loading of the font. Currently there is not much that can be done about that. It's possible that there may be an HTML5 approach to caching which may help ,however currently, it would not be fully developed and supported therefore we may just have to live with the slight delay.

iPhone/iPad no longer supports embedding fonts. Other mobile devices do not in most cases either. There are SVG font shapes available however SVG is not recommended for web fonts. SVG is however great for images especially when it comes to images which will be reused and resized. It's actually the preferred way to go.

Media Queries

To briefly cover media queries, there are many browser types which may need to be catered to. For instance, we may want to style based on media="print" or media="tv", which basically means we style for print or tv. We also may want to style based on screen size or resolution:

ex:

  • @media screen and (max-width: 400px;){style}

ex 2:

  • @media (orientation:portrait){.style {height:1px;}}

This example will only style for a screen with a set max width.

In this case, if the screen is a mini-computer, net book or mobile device then the stylesheet will display. If not the style will be ignored. That being said it wouldn't be a good idea to fragment the stylesheet. Modern mobile devices respond to screen along with all other browsers. Specificity may come into play in optimizing for smaller screens or much larger screen, even tv's with web browsers built into them and gaming. However, best practices suggest keeping code small and developing with a project in mind that will serve the intended purpose while keeping in mind the many browsers that may be displaying the site or app.

HINT

Only use Media Queries for selective targeting.

Browser Support

Progressive enhancement is a great way to go as far as how to ensure usability and great user experience. CSS3 is coming along but there are differences in browsers support. Javascript libraries such as Dean Edwards IE7.js, IE-CSS3.js and eCSSTender help render css3 so that the different selectors and attributes display evenly accross all browsers.

ex:

comment [if it IE9] end comment

Dean Edwards IE7.js

comment [end if] end comment

One could also serve a PIE.htc file from the server and set behavior:url(path/to/PIE.htc). Any of these methods will give more sophisicated CSS3 display in older browsers. It also may NOT be worth the effort in many cases which in the end is a personal or corporate choice. The suggested way to go would be to accept the fact that not all browsers support CSS3 and design with this in mind.

Some of the more common CSS3 values accepted in most browsers (atleast the modern ones) are:

  • box-shadow •
  • border-radius •
  • multiple-backgrounds •
  • background-image •
  • svg-backgrounds •
  • @font-face

jQuery

Staying Ahead of the Curve is built in jQuery. Documentation has stopped due to site development. Stay tuned.