Bibliographic Information
Developing with Web Standards
Abstract
-
Other pages on the same site—that is, other pages within the same root directory on your server
-
Parts of other pages on the same site
-
Other pages on the web
-
Parts of other pages on the web
-
Other resources on the web, such as image files, resources located on ftp servers, and so on
Core DOM Objects and Methods
Window
answer=window.prompt("What is 3+2");
|
window.alert(answer)
|
alert(theLink.href)
|
Document
Element
Style
thePar.style.backgroundColor="red"
|
theStyle=window.getComputedStyle(thePara, null)
|
GetElementsByTagName
allInputs=document.getElementsByTagName("input")
|
GetElementById
Inspecting the DOM
IE Developer Toolbar for IE 6 and 7
Internet Explorer 8 Developer Toolbar
Firefox Firebug and Web Developer Toolbar
DragonFly for Opera
Safari Web Inspector
Elements To Use
Window
answer=window.prompt("What is 3+2");
|
window.alert(answer)
|
alert(theLink.href)
|
Document
Element
Style
thePar.style.backgroundColor="red"
|
theStyle=window.getComputedStyle(thePara, null)
|
GetElementsByTagName
allInputs=document.getElementsByTagName("input")
|
GetElementById
Inspecting the DOM
IE Developer Toolbar for IE 6 and 7
Internet Explorer 8 Developer Toolbar
Firefox Firebug and Web Developer Toolbar
DragonFly for Opera
Safari Web Inspector
Guidelines and Checkpoints
Guidelines and Checkpoints
Guideline 1: Provide Equivalent Alternatives to Auditory and Visual Content
Guideline 2: Don’t Rely On Color Alone
Guideline 3: Use Markup and Style Sheets and Do So Properly
Guideline 5: Create Tables That Transform Gracefully
Guideline 9: Design for Device-Independence
Common Accessibility Problems (and Solutions)
Links and Titles
Headings
alt text
Color Contrast
Tables
caption and summary
|
|
abbr and scope
Design TrackBusiness TrackDevelopment Track
|
Design TrackBusiness TrackDevelopment Track
|
6.1. A sighted person can easily deduce that the font embedding session is in the design track at 10.45. For those using screen readers, it can be far from easy, unless we use the right markup.
Code View: Scroll / Show All
Time
Design Track
Business Track
Development
Track
|
Forms
"last-name-label">
|
Grouping Field Elements
Billing Contact
But first we need to know, who'll be paying for the tickets?
Name...
|
-
[if IE]—will be used by any version of IE from 5 and up (conditional comments were introduced with version 5)
-
[if IE 5], [if IE 7] and so on (note the space between IE and the browser number), targets specific browser versions
-
[if gt IE 6] (gt stands for greater than—this example targets versions after version IE 6)
-
[if gte IE 7] (gte stands for greater than or equal to—this example targets version IE 7 or more recent)
-
[if lt IE 8] (lt stands for less than—this example targets versions of IE older than IE 8)
-
[if lte IE 6] (lte stands for less than or equal to—this example targets IE 6 or older)
When Feature Support Is Missing
Dean Edwards’s IE 7 (and IE 8)
-
CSS selectors like the child, adjacent sibling, structural, and attribute selectors
-
CSS properties including max-width, min-width, max-height, and min-height
-
Alpha transparency in PNG graphics
|
Feature Support
When Feature Support Is Missing
Dean Edwards’s IE 7 (and IE 8)
-
CSS selectors like the child, adjacent sibling, structural, and attribute selectors
-
CSS properties including max-width, min-width, max-height, and min-height
-
Alpha transparency in PNG graphics
|
Horizontal Centering
p {
width: 50%;
margin: 0 auto;
}
|
p {
width: 50%;
margin: 0 25%;
}
|
body {
text-align: center
}
|
body {
text-align: center
}
p {
text-align: left;
width: 50%;
margin: 0 auto
}
|
Differences from HTML4
Declaring a DOCTYPE
|
Headers, Footers, Sections, and other New Structural Elements in HTML5
header
Content Elements
section
article
Headings in section and article Elements
HTML5What is HTML5?Key features of HTML5As we saw in Part I of this book, by around 2000, most major forces in the web development community considered
XHTML to be the future of HTML. Much of the
...
|
HTML5What is HTML5?Key features of HTML5As we saw in Part I of this book, by around 2000, most major forces in the web development community
considered XHTML to be the future of HTML. Much of
the ...
...
|
A Tale of Two ModelsWhat’s the difference between the two heading-level models—and more importantly, why have two at all?
First, a significant reason for the new model is to enable more than six levels of headings. It closely matches XHTML 2’s model, in which there is only one heading element (h), and in which heading levels are marked solely by the use of the section element, with each nested section increasing the heading level by one.
But why have another model that matches HTML4’s heading model? Some browsers—particularly screen readers like JAWS, which are used by people with visual impairments to access the web—use heading levels to create outlines of the content, making pages more easily navigable. Screen readers tend to be developed slowly, and user upgrade rates are correspondingly gradual, so many visually impaired web users will probably lack access to HTML5 support for the foreseeable future. As a result, the widespread adoption of the XHTML 2–style heading-level model could present significant challenges for these users.
Is one of these approaches to be preferred? There’s considerable debate about the merits of the first (h1-only) method and about its impact on accessibility. This method tends to make styling with CSS somewhat more complicated, as it requires the use of descendent or child selectors like “section section section h1” rather than a simple selector such as h4, and it also makes accessing page elements using JavaScript more difficult. Neither approach is discouraged, so I recommend using the latter model (multiple numbered heading levels) for now provided that the nesting level of sections matches the number of their headings.
|
HTML5What is HTML5?Key features of HTML5As we saw in Part I of this book, by around 2000, most major forces in the web development community
considered XHTML to be the future of HTML. Much of
the ...
...
|
nav
"http://www.webdirections.org/" title=
"Back to the home page">Home
title="Slides and podcasts from past events">
Resources
title="Future and past conferences">Events
|
"http://www.webdirections.org/" title="Back to the
home page">Home
title="Slides and podcasts from past events">
Resources
title="Future and past conferences">Events
|
aside
figure
image
|
|
footer
New Selectors
Structural Pseudo Element Selectors
Document Structure
-
Always has exactly one parent element—for example, the body and head elements have the HTML element as their parent.
-
May have one or more child elements (elements contained directly within them)—for instance, the body and head elements are children of the HTML element.
-
May have one or more sibling elements (elements that share a parent)—the body and head elements, for example, are siblings, as they have the same parent: the HTML element.
-
May have descendent elements (child elements of an element’s child, or an element’s child’s child, and so on)—for example, every element in an HTML document is a descendent element of the HTML element, and all headings, paragraphs, links, and so on, are descendants of the body element.
first-child
It is a truth universally acknowledged, that a single man in possession of a good
fortune must be in want of a wife.
However little known the feelings or views of such a man...
|
Syntax
p:first-child {
font-size: 1.1em;
}
|
section.chapter p:first-child {
font-size: 1.1em;
}
|
first-of-type
Chapter 1It is a truth universally acknowledged, that a single man in possession of a good
fortune must be in want of a wife.
However little known the feelings or views of such a man...
|
section.chapter>p:first-of-type {
font-size: 1.1em;
}
|
last-child
section.chapter p:last-child {
border-bottom: solid thin black;
}
|
section.chapter p:last-of-type {
border-bottom: solid thin black;
}
|
nth-child
tr:nth-child(odd) {
background-color: #ededed;
}
|
12.4. Zebra striping a table with nth-child
tr:nth-child(odd) {
background-color: #d4f128;
}
tr:nth-child(even) {
background-color: #e0f64c;
}
|
12.5. Two-color zebra striping in a table using nth-child
-
tr:nth-child(0)—(2*0)
-
tr:nth-child(2)—(2*1)
-
tr:nth-child(4)—(2*2)
-
tr:nth-child(6)—(2*3)
-
tr:nth-child(1)—(2*0+1)
-
tr:nth-child(3)—(2*1+1)
-
tr:nth-child(5)—(2*2+1)
-
tr:nth-child(7)—(2*3+1)
-
tr:nth-child(3n)—selects every third element
-
tr:nth-child(3n+1)—selects the first element after every third element
-
tr:nth-child(3n+2)—selects the second element after every third element
tr:nth-child(3n) {
background-color: #94239f;
}
tr:nth-child(3n+1) {
background-color: #bb46c9;
}
tr:nth-child(3n+2) {
background-color: #bf69cc;
}
|
12.6. Alternating three-color stripes in a table with nth-child
12.7. Styling a table with first-of-type and nth-of-type, as displayed in Safari 4
td:first-of-type{
background-color: rgb(255,0,0);
}
td:nth-of-type(2){
background-color: rgb(0,64,128);
}
td:nth-of-type(3){
background-color: rgb(76,76,76);
}
td:[colspan]{
background-color: rgb(200,200,200);
}
|
td {
background-color: rgb(0,64,128);
}
|
target
is the current target. (Of course, documents frequently lack a current target—for example, if the current URL is http://westciv.com/index.html, there is no target element.) When the current URL is http://westciv.com/index.html#resources, the target selector p:target will select the paragraph with an id of resources. Similarly, if we use target by itself, we can select whatever element is the target of its document (if there is a target). We can also chain selectors to make the target selector more specific. In the preceding case, if we want to select only the paragraph with an id of resources when it is the target, but not to select any other targeted element, we can use this rule:
p#resources:target.
|
p:target {
border-bottom: background-color: yellow;
}
|
box-shadow
p{
box-shadow: .2em .2em .3em #888;
padding: .5em;
}
|
13.8. A simple box-shadow
p{
-moz-box-shadow: .2em .2em .3em #888;
-webkit-box-shadow: .2em .2em .3em #888;
box-shadow: .2em .2em .3em #888;
padding: .5em;
|
box-shadow: -.1em -.1em .15em #ffffff,.1em .1em .15em #001199;
|
13.9. An embossed box-shadow
Compatibility
The Math of Rounded CornersHow exactly does the value 1em translate into a rounded corner? For those who need to know the gruesome details, border-radius defines an ellipse for the corner. When there is a single value, the ellipse has a vertical and horizontal radius of 1em. And an ellipse with equal radii is a circle. Now, imagine the circumference of the circle aligned so that a quarter of the circle aligns with the corner of the element, as in figure 13.11.
13.11. A border-radius with horizontal and vertical radii of 1em |
User-Agent Sniffing
-
Client-side browser detection relies on JavaScript being enabled, and a surprising percentage of web users (five percent or more, according to www.w3schools.com/browsers/browsers_stats.asp) have JavaScript disabled, particularly in larger organizations and in the financial sector.
-
Browsers lie. Because so many developers have used this technique badly in the past, thus effectively excluding or downgrading the experience of users of unsupported browsers (even if their browsers could cope perfectly well with the site), many browsers spoof their identity, typically pretending to be Internet Explorer. As a consequence, determining the actual identity of a browser can be very tricky.
-
Browsers improve. Just because a version of a browser did not support a feature, or otherwise failed to display your site well, this does not mean that it always will. Using browser detection means keeping track of an ever more complicated matrix of browsers and versions over time. And that’s without beginning to worry about mobile devices, gaming machines, TVs, eBook readers, web-ready refrigerators, and so on.
Media Queries
How Yahoo Grades BrowsersYahoo Developer Network, home to some of the industry’s most thoughtful and influential web developers and many valuable open source projects like the Yahoo User Interface Library (YUI), has a “graded browser” approach, detailed at their development site: developer.yahoo.com/yui/articles/gbs.
They have three levels of support:
|
-
width: the width of the viewport—the viewport is typically the window, but for some devices, such as the iPhone (which has no windows), it’s the device width
-
height: the height of the viewport (see above)
-
device-width: the width of the entire screen—or in the case of print, the page); for devices like the iPhone, this will be the same as the width
-
device-height: the height of the device or page
-
resolution: the pixel density of the device—for example, the typical resolution for common operating systems is 72dpi for the Mac OS, 96dpi for Windows, 160dpi for the iPhone, and 163dpi for the iPod touch
-
color: the number of bits per color component (the value will be 0 for monochrome devices)
-
monochrome: the number of grayscale bits for the device (the value will be 0 for color devices)
(max-width: 600px) and (max-height: 800px)
|
Using Media Queries
@media print and (color) {
...
}
|
|
|
@media only (device-width: 480px) {
...
}
|
@media only (device-width: 320px) {
...
}
|
@media (device-width: 320px) {
...
}
|
@media all and (device-width: 320px) {
...
}
|
@media only (device-width: 481px) {
...
}
|
@media only (device-width: 480px) and
(orientation: landscape) {
...
}
|
(device-width: 480px) and (orientation: landscape)
|
Compatibility
But Is This Really Any Better Than User-Agent Sniffing?
These are notes I made after reading this book. See more book notes
Just to let you know, this page was last updated Saturday, Nov 09 24