HTML5 and CSS3
Origins of HTML5
- First drafted in 2004 by WHATWG
- WHATWG – Web Hypertext Application Working Group
- comprised of leading browser vendors
- Apple, Moz, Google, Opera
- driven largely by social media platforms and Web 2.0
- Formal HTML5 Spec is found here: www.w3.org/tr/html4/
- differences between HTML4 and 5: www.w3.org/tr/html5-diff/
- HTML 5 New Features
- semantic tags
- allow you to define structure in HTML 5
- header, footer, section, nav
- allow you to define structure in HTML 5
- New selector API
- makes it easy to find elements in HTML file based on CSS
- New types of form input controls
- date picker, time picker, URL, and email with built in validation
- watch browser support
- date picker, time picker, URL, and email with built in validation
- Accessibility features that assist screen readers
- Audio and Video natively in web page without need for plugin
- New Graphics API
- canvas
- SVG (scalable vector graphics)
- Web storage and Web SQL
- data is stored persistently on browser
- alternative to session state
- Web SQL allows data to be stored in browser database
- data is stored persistently on browser
- Communications API
- Ability to communicate from one part of document to another part of document
- Geolocation
- useful for mobile
- Web workers
- multi-threaded browser
- executes scripts in background so UI is left unaffected
- Websockets
- New way for browser and server to communicate
- browser and server can communicate continuously
- Offline Working
- browser can grab files while connected so you can work if unconnected
- semantic tags
- CSS3 features
- Drop shadows and rounded corners
- Transforms
- Additional selector features
- Web fonts
- Media queries
- Tools for creating HTML5 and CSS3
- Komodo edit is a good choice
- Dreamweaver is the standard
- Browsers
- test applications on many browsers
- Internet Explorer, Chrome, Firefox, Safari, Opera all have good support for HTML5 in newer versions
Semantic Tagging
- Would use div’s to create structure before, not can define structure with HTML
- header – defines header area of document
- nav – defines navigation area
- section – partitions document into main content areas, analogous to a chapter in a book
- each section can have multiple articles
- article – analogous to a page in a book.
- can nest semantic tags inside articles to build article structure
- can have header and footer inside article tags
- can nest semantic tags inside articles to build article structure
- aside – defines help information, similar to a sidebar, often used for adverts
- figure – images or more accurately a container or images
- fig caption – text that sits along side or below images
- footer – defines footer in bottom of document
- these elements have no intrinsic styling or meaning
- Can nest new tags
- Semantic tags can be combined with traditional tags
- can hold h1’s and h2’s inside header tag to display titles in header
HTML5 Selector API
- part of javascript and mst be written inside script tags
- in HTML 4, could use document.GetID or document.getTagByName, but these calls weren’t very usable in practice
- Query Selector
- document.querySelector(“tagName.className”);
- this will grab the first “tagName” with the class of “className”
- document.querySelectorAll(“tagName.className”);
- returns all objects with “tagName” and specified class
- can make these quite intelligent as all elements and tags are available to the API
- document.querySelectorAll(“#products td”);
- this will grab all table cells in an element with the id or products
- document.querySelectorAll(“#products td”);
- can specify multiple search strings in same script call
- document.querySelectorAll(“.warningClass”, “.errorClass”);
- document.querySelector(“tagName.className”);
Modernizr
- It can be difficult to know which browser support which features for your website, that is where Modernizr comes in
- it is a javascript library which tests the browser for HTML5 and CSS3 features
- to use, include modernizr.js into page with script link
- then, can call Modernizr object and test if certain components work in browser. If they do, execute the script, if they don’t run something else
- if (Modernizr.websockets) {
// procedure goes here
}- this test if the browser that is loading the page support websockets. If it does, script runs, if not, nothing happens
- can put in else statement or switch case statements to control page based upon what the browser allows the user to do
- to find names for various properties, check Modernizr documentation at http://modernizr.com/docs/
- this test if the browser that is loading the page support websockets. If it does, script runs, if not, nothing happens
- with CSS, can use Modernizr to check if browser supports newer features
- link script file to document
- Modernizr will create several new CSS classes depending on whether the feature is supported or not
- creates .websockets or no-websockets whether your browser supports the feature or not
- check documentation for names of classes that or instantiated by script
- then, display none the testing information and write a class below your display nones to display block the information you wish to test
- for example:
div.ws, div.nows {display:none};
.websockets div.ws {display:block};
.no-websockets div.nows {display:block};- once evaluated, the browser will evaluate whether root of browser has websockets class added and displays information
- for example:
- creates .websockets or no-websockets whether your browser supports the feature or not
- if (Modernizr.websockets) {
Input Controls
- a bunch of new attributes for forms have been added to control data types and make them more usable
- Autofocus <input type=”Any Type” autofocus> if input is set to autofocus, page loads with cursor already inside input
- Autocomplete <input type=”text” autocomplete=”off/on”> if set to off, no hints will be offered by browser, user must type everything in again
- Placeholder <input type=”text” placeholder=”string of text”> displays text inside text box
- Required <input type=”Any Type” required=”true/false”> browser will validate entry into that box and enforce required rules
- Pattern <input type=”” pattern=”(\d5)([\-]\d{4})?)”> allows form to enforce data integrity upon the data being entered into the field
- string for a code enforcing zip code integrity
- pattern:”(\d{5}([\-]\d{4})?);”
- \d{5} tells code to look for 5 digits
- ([\-]\d{4})? tells code to look for dash, then 4 more digits, but this is optional
- pattern:”(\d{5}([\-]\d{4})?);”
- string for a code enforcing zip code integrity
- List <input list=”datalist”> can be set to a datalist that offers the options in that list as options in a select box
- datalist is set up separately, below actual form as is displayed inside form
- to create link, list attribute from input and datalist id must be identical
- File <input type=”file”> allows for the upload of files along with the form
- multiple – can be set to multiple to upload multiple files from desktop to server
- must be javascript on the backend to make sure that form behaves as it is supposed to, check examples {link to example documents online}
- Date <input type=”date”>
- Time <input type=”time”>
- Date and Time <input type=”datetime”>
- Month <input type=”month”>
- Week <input type=”week”>
- Number <input type=”number”> ask the user to enter a number
- min
- max
- value – default
- step – acts as spinner to add defined increments
- Range <input type=”range”>
- min
- max
- value – initial value
- Telephone <input type=”tel”> doesn’t validate now but might in future
- Email <input type=”email”> validates for proper email address
- URL <input type=”url”> validates for proper URL spec
- Color <input type=”color”> displays color in box
- value – can choose default color value
- great for design firm as color picker
- Search <input type=”search”>
- results – the number of results to hold in the session cookie, accessible with drop down box
- autosave – a unique name to classify the search results
File Handling
- 2 ways for users to upload files from desktop file system, File API and Input control type
- File API
- visit http://www.w3.org/tr/fileapi
- File interface
- Blob interface – split file into sections and upload individually, incremental upload
- FileList – represents multiple files being dragged into browser
- FileReader – read a file into memory, uses a few different methods
- void readAsArrayBuffer(blob blob); used for binary file, returns data as an array
- void readAsBinaryString – DEPRECATED
- void readAsText(Blob blob, optional DOMstring encoding); – reads text file and returns text file
- can specify encoding
- void readAsDataURL(Blob blob); – reads data into memory and returns data url
- new schema, becomes data:data that was just read
- File API
Accessibility
- WAI-ARIA – Web Accessibility Initiative – Accessible Rich Internet Application
- http://www.w3.org/tr/wai-aria
- ARIA defines a set of HTML attributes that can be added to elements to describe intent and assist screen readers
- define roles, states, properties, and navigation paths
- requires screen reader
- User should be able to navigate anywhere using tab buttons
- Tabindex <div tabindex=”1”> allows the user to press tab to select the element, in this case a div, that has the tabindex.
- read in order, so next is 2, then 3
- Landmark Roles
- ARIA role attributes indicate the intent of each element to the screen reader
- Role <h1 role=”banner”> tells screen reader how the h1 is used in the document. There are many attributes, including:
- role=”navigation”
- role=”article”
- role=”complimentary”
- role=”contentInfo” – used for footnotes, copyright, and legal disclaimers
- Live Regions
- Will tell browser to inform user when a piece of content or an element changes in the document
- <div aria-live=”polite”> give a notification when the element, in this case a div, changes programmatically. Polite means that the reader won’t interrupt user’s current operation
- <aria-live=”off”> – no notification (default)
- <aria-live=”assertive”> makes itself known, can interrupt current operation
- <aria-atomic=”true/false”> reads all changes to user whenever there is any change in element. False just reads what has changed, usually better
- <aria-relevant=”additions/removals/text/all”> indicates what kind of change the screen reader should detect.
- Aria-describedby
- <input aria-describedby=”id from a text element”> tells the browser that this input can be described by the text element that has the referenced id
- Aria-labelledby
- <input aria-labelledby=”ids from a text element”> this is used to build a readout to the screen reader that pulls data from multiple text fields, and even the input this is applied to.
- Aria-required
- <input aria-required=”true/false”> tells screen reader to inform user that field is required
- Audible Validation
- for visually impaired, won’t know when a form has an error, or where the error is found, as long as error has a role set
Data Sets
- can add any attribute you want to any element, as long as attribute is prefaced with “data”
- <input data-format=””> enforces a format on the input
- to gain access to element in js, use var format = this.dataset.format, where:
- var is new variable called format
- this is the element with focus
- .dataset is the dataset class that allows for “data” than any attribute
- .format is the attribute that has been set
- to gain access to element in js, use var format = this.dataset.format, where:
- <input data-error-message=””> displays a message when there is an error with this field
- <input data-format=””> enforces a format on the input
CSS3
- box-radius for rounded rectangle
- can specify radius for all corners, or different radii for different corners
- top left, top right, bottom left, bottom right is shortcode order
- box-shadow for drop shadow – 5 parameters in short code, in order:
- horizontal offset – positive right, negative left
- vertical offset – positive up
- blur distance
- spread distance – distance shadow is from origination point
- color
- inset – if set, the shadow is inside shape as opposed to outside shape
- RGBA allows for alpha-transparency
- last number is alpha number or opacity
- HSL color – different color system now supported
- hue is first number, is a degree on a color while
- saturation – how rich color should be
- lightness
- HSLA color – support alpha-transparency
- also specify opacity
- Opacity – set alpha for the element. 1 is solid, 0 is transparent
CSS3 Transformations
- translate – move element up/down/left/right {transform: translate(60px)}
- can translateX and translateY to only affect one direction
- scale – make element bigger or smaller {transform: scale(2.0, 1.5)}
- can scale x and y proportionally, or scale them individually with two parameters
- rotate – rotate in degrees of a circle {transform: rotate(10deg)}
- rotates around the center point
- can change center point with transformation-origin
- con combine transforms, just write them in order
- rotates around the center point
- skew – skew shape around x or y axis {transform: skey(30deg)}
- slants shape
- also a skewX and skewY
CSS3 Selectors to Define How Elements Appear – Structural Pseudo Classes
- tr:nth-child is a structural pseudo class
- nth-child(even/odd) selects even or odd numbered elements (depends on what it is connect to)
- nth-child(3n+1) selects every 3rd row, so row 1, 4, 7, 10
- tr:last-child – target last element
- tr:first-child – target first element
- Child Combinators
- define a rule for elements that are direct 1 level children
- Direct Children > sign to select only direct children
- span > p grabs every element that is directly under the span in DOM tree
- Adjacent Siblings – use + sign to select multiple elements that are the children of the same parent element (still grabs first element)
- General Siblings – use ~ symbol to grab all elements
- Form Selectors
- input:disabled/enabled – select inputs set to disabled=”disabled”
- input:checked – select all checked form elements
- *::selection – select any form input that is currently selected (used to set the selection color for text, when it is highlighted by the mouse)
CSS3 Web Fonts
- Web Open Font Format (WOFF) allows browsers to download fonts directly from servers
- .woff file extension
- many different web foundries to find web fonts
- font squirrel is free and is great
- then convert otf (open type), or eot (embedded open type), or ttf(true type font) to woff
- @font-face {
font-family: MyFont;
src: url(‘path to font’);}
- then to use font, specify name of font on element
- body {font-family: MyFont, sans-serif;}
- then to use font, specify name of font on element
CSS3 Media Queries
- Allow page to be responsive depending on device it is being viewed with
- can set up printer style sheet to control how file displays in print
- <link rel=”stylesheet” type=”text/css” media=”print”>
- common media devices that you can specify with media=””
- screen
- all
- braille
- handheld
- projection
- tty
- for full list of rules and possibilities, use www.w3.org/tr/css3-mediaqueries