CSS3 and New HTML5 Tools
New HTML5 Tools HTML5 introduced several new tools that we have not yet covered in this course: Drag and Drop Inline SVG Data Storage Offline Applications Also, several other new technologies are often grouped with HTML5, though they are officially outside of the HTML5 specification: Geolocation CSS3 Let's take a quick tour of each of these new technologies and see how they are changing the functionality of the web.
Drag and Drop The drag and drop feature is well-known to most web users. Previously, this feature was implemented via complex JavaScript libraries, but it is now native to HTML5. JavaScript is still used to handle the mechanics of the dragging and dropping, but it is greatly simplified. We have a new attribute to identify which page elements are to be draggable: <img id="logo" src="images/html5-logo.png" draggable="true" width="128" height="128" ondragstart="drag(event)"> In actuality, most browsers have long allowed <img> elements to be dragged by default. This new HTML5 capability expands our ability to control which page elements are draggable and to where they can be dragged.
Inline SVG SVG (Scalable Vector Graphics) offers web designers the ability to draw graphics directly onto the web page. It differs from the canvas in several important ways, the most important of which is that the rendered graphic never loses its quality, no matter how much it is zoomed in. For this reason, it makes for higher quality printing than with canvas drawings. Here is a simple example of an SVG drawing: <svg xmlns="http://www.w3.org/2000/svg" id="svg1" height="200" width="325"> <polygon points="40,40 320,100, 180,195" style="fill:purple;stroke:gray;stroke-width:5"> </svg>
Data Storage Data Storage - sometimes referred to as Web Storage - allows a website to store information on the user's computer. This feature can be used in two different ways: localStorage - Stores data indefinitely on the user's computer. Since there is no expiration date, a user can return to a site a year later and the information is still available. One example might be storing the user's last location on a web tutorial series. sessionStorage - Stores data temporarily. Once the user closes the browser window or tab, the data is automatically deleted. The data storage feature is implemented via JavaScript: <script> localStorage.LastPosition=23; </script> The stored data is automatically encrypted and can be accessed only by the website that originally stored the data. Data Storage is superior to the "cookie" storage system in that it can store far more data, is more secure, and reduces web traffic, thereby improving overall site performance.
Offline Applications An HTML5 website can be converted into an "offline application" by instructing the browser to store all the necessary working files locally on the user's device. If the user's web connectivity is interrupted for any reason (such as when traveling through a dead spot or being on an airplane), the website continues to function normally. Setting this up is relatively straightforward. A manifest attribute is added to the <html> element for each page of a website to be available offline: <html lang="en" manifest="samplesite.manifest"> This manifest file that is referenced is a regular text file that lists the exact set of files to be stored locally. Whenever the web connection is broken, the cached files will be used instead and no interruption or error message will be seen by the user. Have you ever seen a message like this pop up in your web browser? If so, the site you were visiting was attempting to store files on your computer via a manifest file.
Geolocation Geolocation is a feature familiar to most users. By determining a visitor's physical location, a website can provide useful tools, such as a street map or list of nearby restaurants. Whether a user is on a desktop computer or mobile device, the geolocation service uses several sources of information to determine location: IP address Wireless access point Cell phone towers GPS coordinates To address privacy concerns, the geolocation standard requires browsers to receive explicit permission from web users prior to enabling this feature.
CSS3 The CSS we have used so far has been part of the CSS 2.1 specification. CSS3 is the newer version but, like its HTML5 cousin, the specification is nowhere near being finalized. Nevertheless, modern browsers have added support for many of CSS3's new features, making it practical to begin using CSS3 on live websites. CSS3 adds an array of new styling options to the web designer's toolbox. Here is just a sampling of some of the new features: Border images Rounded corners Drop shadows Word wrapping Custom fonts Flexible boxes Element rotating, scaling, and skewing Custom transitions Custom animations Multiple column page layout Let's take a quick look at three of these new features: rounded corners, drop shadows, and custom fonts.
Rounded Corners The trend in most modern website designs is to use rounded instead of hard corners for screen elements such as boxes and buttons. CSS3 adds a simple way to accomplish this with a single CSS property definition: <div class="button">Click This Button</div> .button { border: 2px solid blue; padding: 10px; text-align: center; background: lightblue; width: 200px; border-radius: 20px; } Internet Explorer 9.0 Internet Explorer 8.0 Older browsers that do not support this new CSS3 property simply ignore it, leaving the hard corners. As this affects only the aesthetics, not the actual functionality, most designers accept this fallback without creating any further workarounds.
Drop Shadows Another common aspect of modern web designs is the use of drop shadows on screen elements. A drop shadow gives the illusion that an element is hovering above the page, casting a shadow below. CSS3 provides properties to add drop shadows directly to <div> elements and text: <div class="boxshadow"></div> <h1 class="textshadow">My own shadow scares me!</h1> .boxshadow { width: 350px; height: 100px; background-color: lightgreen; box-shadow: 10px 10px 5px darkgray; } .textshadow { color: blue; text-shadow: 1px 3px gray; Older, non-supporting browsers will simply disregard the new CSS properties, omitting the shadow effect.
Custom Fonts Since the very beginning of the internet, web designers have been restricted to a handful of "web-safe" fonts to use on their pages. This was a source of constant frustration to those who wanted to build more creative and eye-catching sites. CSS3 solves this problem by allowing the web designer to define their own fonts for their web pages. The font files are loaded to the web server and then defined by a @font-face section in the CSS file: <p class="coolfont">This is written in the Pacifico font!</p> @font-face { font-family: Pacifico; src: url('fonts/Pacifico.ttf') ,url('fonts/Pacifico.eot'); /* For IE9 */ } .coolfont { font-size: 24px; This method requires copying two actual font files to your website for each custom font you wish to use. The main font file is in either TTF or OTF format and the second file is in EOT format, which is needed to provide backward compatibility to Internet Explorer 9.0.
Google Web Fonts For those web designers who would rather not upload and manage their own font files, several companies offer the free use of their font libraries. Google offers a large library of free fonts to use via its Google Web Fonts service. Designers can browse through the fonts and then copy and paste a single line of code to their web pages: <head> <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Shojumaru"> ... </head> <body> <p class="coolfont">This is written in the Shojumara font!</p> </body> .coolfont { font-family: Shojumara; font-size: 20px; } The <link> element code above, provided by Google, actually loads a separate CSS file that defines the font and provides font file locations. This remote CSS file still uses the @font-face feature we just saw in the prior example.
Browser Support IE Firefox Chrome Safari Opera Drag and Drop 10.0+ Support for the new technologies we just viewed is varied but constantly improving. Here is a summary of their current support status: IE Firefox Chrome Safari Opera Drag and Drop 10.0+ 12.0+ Inline SVG 9.0+ 5.1+ Data Storage 8.0+ Offline Apps Geolocation Rounded Corners Box Shadows Text Shadows @font-face Again, we see that IE is the laggard but now finally supports all these technologies in version 10.0 and later. Most other browsers have provided full support for many versions.