In 2010 Canada unveiled some of the toughest anti-spam legislation in the world. While now on the law books, the legislation has not yet come into full effect, pending the development of detailed regulations. This gives web developers time to adjust to the new provisions: a vital opportunity, as the law influences not just Canadian businesses, but the transmission of all pertinent information that touches servers in Canada, with fines up to 10 million dollars for non-compliance.

The Canadian Anti-Spam Legislation prohibits spamming, hacking, malware, online fraud, eMail harvesting and invasions of privacy. The most pertinent area for front-end developers is gaining consent for commercial electronic messages (CEMs).

While I am not a lawyer (and this article does not constitute legal advice) I would suggest that, pending detailed legal regulations, most front-end developers would do well to follow a few simple steps to ensure CASL compliance:

While it is only supported in Opera and Chrome at this writing, the potential of the color HTML5 form input is very powerful: rendered correctly in the browser, it displays the operating system's color picker dialog window when selected, as shown in the screenshot to the right.

Uses

Once the element is supported in all browsers, it will be a great way to promote personalization of webpages: for example, allowing the user to choose the background and foreground colors of the site to suit their personal tastes, or for accessibility purposes, to make a website look better under conditions of color blindness.

Working on the remake of this site’s user signup form, I very much wanted to keep to the design goals of simplicity, clarity, and ease of use I discussed in the previous article. Simultaneously, I wished to apply the same principles to my code. To me, this meant eliminating as much PHP and JavaScript as possible, and using CSS3 for most error messages and the appearance of invalid entry fields.

CSS3 allows for the detection of the status of HTML5 form elements through the use of the pseudo-class selectors :valid and :invalid. For the purposes of demonstration I’ll use the email input to start, as it has built-in validation: