lis650 lecture 4 minor css, accessibility thomas krichel 2006-02-25
TRANSCRIPT
LIS650 lecture 4Minor CSS, accessibility
Thomas Krichel2006-02-25
more on selectors
• We have seen three types of simple selectors.
• Here we are discussing some more advanced selectors. Most, but not all, of the selections that they achieve could also be done by appropriate class= use.
• CSS can be applied to any XML document, including, but not limited to XHTML documents.
• Remember that all selectors select elements in the XHTML or XML document.
ORing selectors
• When we write elementary several selectors separated by commas, we refer to all of them
• Example
h1, .heading {text-align: center}
will center all <h1> and all elements that are that are in the “heading” class.
more selectors• * selects any element.• E selects any element called <E>• E F selects any <F> element that is in the
contents of an <E> element, as a child, grand-child etc
• E > F selects any <F> element that is a direct child of an <E> element. This is more restrictive than the previous selector.
• E + F selects any <F> element immediately preceded by a sibling element <E>.
more selectors
• E:link selects an <E> element if it is a link.
• E:visited selects element <E> if <E> if it is in the contents of a link and the link has been visited.
• E:active, E:hover, E:focus selects element <E> during certain user actions with the mouse.
more selectors
• E:first-child selects <E> when <E> is the first child of its enclosing element
• E:first-letter selects the first letter in the content of element <E>
• E:first-word selects the first word in the contents of element <E>
more selectors
• E[a] selects any <E> element with an attribute a=, whatever the value
• E[a="v"] select any E element whose a= attribute value is exactly equal to "v".
• E[a~="v"] selects any element E whose a= attribute value is a list of space-separated values, one of which is exactly equal to "v". Useful for classes, because you can put an element into several classes, separated by blanks.
more selectors
• E:lang(c) selects element <E> if it is in the human language c.
• E[lang|="en"] selects any <E> element whose lang= attribute has a hyphen-separated list of values beginning (from the left) with `en’. This would select all en languages, be they en-us or en-gb
convenient shorthand
• We have already seen some.
• E.m is a convenient shorthand for E[class~="m"]
• E#myid is a convenient shorthand for E[id="myid"]
• .m is a convenient shorthand for *.m
E:before and E:after
• E:before or E:after can be used to add contents before or after a element <E>.
• We will deal come to these when we discuss generated contents properties.
• This will be coming up after the examples for selectors that we will discuss now.
examples
• h1, h2, h3 { font-family: sans-serif }
• h1 { color: red }
em { color: red }
h1 em { color: blue }
• p *[href] {font-family: monospace}
• body > p { line-height: 1.3 }
• ol > li {color: black}• h1 + p {text-indent: 0}
more example• h1 + h2 {margin-top: -5mm} • h1.opener + h2 {margin-top: -5mm}• h1[title] {color: blue} • span[class~="example"] {color: blue } • a[href="index.html"][title="Thomas"] { color: blue} • a[rel="copyright"] {color: red}• a[href="http://www.w3.org/"] {background-color:
grey}• *[lang="fr"] {display: none}
more examples
• *[lang|="en"] {color : red }
• .dialog .romeo {voice-family: "Lawrence Olivier", charles, male}
• a:link {color: red} /* unvisited links */
• a:visited {color: blue} /* visited links */
• a:hover {color: yellow} /* user hovers */
• a:active {color: lime} /* active links */
• a.external:visited {color: blue}
more examples
• html:lang(fr) { quotes: '« ' ' »' }
• html:lang(de) { quotes: '„' ‘”'}
• *:lang(fr) > q { quotes: '« ' ' »' }
• *:lang(de) > q { quotes: '„' ‘”'}
(quotation style depending on the surrounding language, not the language of the quote!)
more examples
• a[href="http://openlib.org/home/krichel"] {display: none}
• div > p:first-child {text-decoration: underline}
• a:focus:hover {color: red}
• div > * > div {font-family: sans-serif}
• img[class~="ny"][title="Albany town map"] {border-style: solid}
example: drop caps with uppercase
• CSSp { font-size: 12pt; line-height: 12pt }
p:first-letter { font-size: 200%; font-style: italic; font-weight: bold; float: left }
span { text-transform: uppercase }
• HTML<p><span>The first</span> few words of an article in
The Economist.</p>
generated contents properties I• generated contents is, for example, the bullet
appearing in front of a list item.
• {content:} can be used with the :before and :after selectors.The content can be– a text string
– a url(URL) where the contents is to be found
– a attr(att) where att is the name of the attribute, the content of which is being inserted
• Example
• p.note:before {content: "note"} will insert the string "note" before any paragraph in the class 'note'.
generated contents properties II
• Here are some counter properties– {counter-reset: counter} resets a counter counter– {counter-increment: counter} increments a counter– {counter(counter)} uses the counter
• Exampleh1:before {counter-increment: chapter_counter;counter-reset: section_counter;content: "Chapter " counter(chapter_counter) ":"}
and then we can use h2 for the sections, of course!
• browser support uncertain!
user interface properties I
• There is a {cursor:} property to change the shape of the cursor. It takes the following values– auto -- crosshair -- default
– pointer (something suggesting a link)
– e-resize –ne-resize –nw-resize –n-resize –se-resize
– sw-resize, --s-resize –w-resiz (Indicate that some edge is to be moved)
– text (usually as an I) --wait (watch or hourglass)
– help (question mark or balloon)
– url (with a uri to svg file, that has the graphic to show)
• use these to totally confuse your users
paged media support I
• CSS has the concept of a page box in which paged output should be placed into.
• @page rule can be used to specify the size of the page
• @page {size: 8.5in 11in}
• Valid values are one or two lengths and they words ‘portrait’ and ‘landscape’. The latter will depend on the default print sheet size, country-specific.
paged media support II
• You can add {margin: }, {margin-top: }, {margin-left: }, and {margin-right: } properties. They will add to the margins that the printer will set by default. The default printer margins are beyond your control.
• You can add a {marks: crop} property to add crop marks
• You can add a {mark: cross} property to create registration marks.
paged media support III
• You can use three pseudoclasses to specify special cases– :first for the first page
– :left for any left page
– :right for any right page
• Example– @page :first {margin-top: 3in}
named pages
• You can give a page rule an optional name. Example
@page rotated { size: landscape}
• Then you can use this with the ‘page’ property to specify specific ways to print things. Example
table {page: rotated}
will print the table on a landscape sheet. This comes in handy for bulky tables.
actual page breaking
• Pages will break if – the current page box flows over or if– a new page format is being used with a {page: }
property
• You can take some control with the {page-break-before: } and {page-break-after: } properties. They take the values– auto – always – avoid – left – right
The latter two make sure that the element is on a left or right page. Sometimes this will require two page breaks.
more examples
• I have made a stolen and simplified example available for three column layout, with flexible middle column, http://wotan.liu.edu/home/krichel/lis650/examples/css_layout/triple_column.html
• Unfortunately, this example relies a lot on dimensions that are fixed in pixels.
W3C tips on anchors
• When calling the user to action, use brief but meaningful link text that:– provides some information when read out of context
– explains what the link offers
– doesn't talk about mechanics
– is not a verb phrase
W3C tips on anchors
• Bad: “To download W3C's editor/browser Amaya, click here.”
• Bad: To download Amaya, go to the Amaya Website and get the necessary software.
• Good: “Get Amaya!”
• Bad: “Tell me more about Amaya”
• Good: “Tell me more about Amaya”
W3C tips for headings
• Use <h1> for your top heading.
• If it is too big a font in the most common browsers, you can scale it down.
• But then you have a scale down other headers correspondingly.
W3C tips for alt=
• If the image is simply decorated text , put the text in the alt attribute
• If the image is used to create bullets in a list, a horizontal line, or other similar decoration, it is fine to have an empty alt= , but it is better to use things like {list-style-image: } in CSS
• If the image presents a lot of important information, try to summarize it in a short line for the alt attribute and add a longdesc= link to a more detailed
accessibility• There are two versions of the Web Contents
Accessibility Guideline (WCAG) published by the W3C.
• Version 1 had 14 guidelines and each guideline has 1 or more checkpoints. It is stable.
• Version 2 is being developed right now supposed to be – easier to understand
– easier to implement
– easier to test
It still looks rather rough!
WCAG principles
• 4 principles– Content must be perceivable
– Interface elements in the content must be operable.
– Content and controls must be understandable
– Content must be robust enough to work with current and future Web technologies
• 3 implementation docs– 1 for HTML
– 1 for CSS (not published yet)
– 1 that is technology independent (not published yet)
WCAG HTML tasks
• Set a DTD using the DTD declaration• Set a <title>• Use the <address> to give a document's author,
e.g. <address>This page was written by <a href ="http://highgate.uk/~kmarx">Karl Marx </a> </address>
• Reveal the structure of the site through the <link rel="…"/> element. E.g, if you have a glossary, have it <link/>ed to with the rel="glossary" in the <head>.
WCAG
• Do not use redirects that are timed, only immediate redirects. (redirects are covered later)
• Do not refresh page contents by itself.
• Use <h1> to <h6> to give the structure of the document. Don't use them for visual effects.
• Use <html lang="…"/> to give the language for the document
WCAG
• Note changes of language with the lang= attribute. e.g. <span lang="fr">voiture</span> will avoid it being pronounced as "voter" by an English reading software.
• Use <strong> and <em> rather than <b> and <i>.
• Use <abbr> with the title= to explain an abbreviation eg <abbr title="incorporated"> inc. </abbr>. Same with <acronym> for acronyms.
WCAG
• Use <q> and <blockquote> for quotes, but don't use <blockquote> for formatting.
• Avoid <b> <i> <tt> <big> <small>.
• In nested lists, use compound counters.
• In tables, use the headers= and scope= attributes to explain the structure of your table.
• Avoid using tables for layout. If you must do it, only use <table>, <tr> and <td> elements and border= cellspacing= and cellpadding= attributes.
WCAG
• Provide useful link text. If you have an image and text for your link, combine them in the same <a>.
• You can use the accesskey= attribute with <a> to give users a key that is used to access a link.
• Hide the navigation links for challenged media.• Use alt="" for purely decorative images. • Avoid ASCII art.• Use emoticons judiciously.• Do not embed text in images.
WCAG
• Do not use background images.
• Whenever possible use markup and text, rather than images, to convey information.
• (there are other guidelines but they talk about things that we did not cover here, such as frames, forms, scripting.)
http://openlib.org/home/krichel
Please shutdown the computers when
you are done.
Thank you for your attention!