CSS Barcamp London Christian Heilmann Before0the0CSS 00ONT tags, visual attributes, table hacks 00ar too much markup-large documents 00edesigning pages was a PITA -even when using SSI 00hings had to change! Alors,0enfants de la 00SS made it a lot easier: -No extra markup (pending an ID here and there) -Centralized look and feel in an external, cached document. - (Browser support permitting, of course) The next 00ulky JavaScript rollovers with inline event handlers added unnecessarily to the document. 00dding a rollover element (menu item) meant changing the HTML and the JavaScript (pre-caching script) 00olution: Pure CSS rollovers (MSIE fix with background-position) Taking0it0further 00ure CSS rollovers with preloaded images proved CSS beats JavaScript. 00ext step: -Pure CSS popups -Pure CSS menus -Pure CSS "more links" CSS, the0one trick pony 00ll of these are possible with pseudo selectors: -:hover for, well, hover effects -:focus for "keyboard support" 00he snag: -MSIE only supports :hover on links -Browsers only allow keyboard access to links and form elements A0Problem 00SS solutions can only reach elements contained in other elements. 00 real bummer that A is an inline element Semantics, what? 00 lot of pure CSS solutions nest a lot of content in links to make them keyboard accessible 00his messes with assistive technology (links as lists) and generally is bad practice. 00nd0we're0back 00lever solutions use MSIE'sconditional comments to add extra markuponly when needed. 00owever, this makes the HTML documents unnecessarily heavy and we are back to square one. The Pure0CSS Dilemma 00n order to have an almost accessible solution you need to: -Create invalid HTML -Add extra markup -Deal with browser issues by the truckload The Arsenal 00ery good browser support 00onditional constructs for Progressive Enhancement 00OM 00imed execution 00eyboard detection 00vents 00jax The 00emantically valid markup 00avaScript to provide the behaviour hooks 00SS to style the effect / widget / page item But00ut00ut00/span> JAVASCRIPT CAN BE TURNED OFF AND IS NOT ACCESSIBLE! 00o can CSS. 00hat do you want? -A non JS version that may work or -A JS version that can test if it will work and only applies itself when it can be used.

filetype:pdf
file time: 2008-02-29
file size:94631
Click Here To Download...