Resources
Browser compatibility, spec status for new web techniques html5 and css2 and css3: http://a.deveria.com/caniuse/
CSS: CSS 2.1 & CSS3
great video of css3 effects techniques: http://net.tutsplus.com/videos/screencasts/a-crash-course-in-advanced-css3-effects/
css versions, compatibility chart: http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28Cascading_Style_Sheets%29
another browser support chart: http://www.css3.info/modules/selector-compat/
Sprites
How to:
Sprite Optimization January 27, 2009: http://mezzoblue.com/archives/2009/01/27/sprite_optim/
How to make and use sprite images to reduce page load time: http://css-tricks.com/css-sprites/
comprehensive article, examples, llinks to tutorials: http://www.smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials/
Alistapart early article how to: http://www.alistapart.com/articles/sprites
Tool: Sprite, toolbar widget to find background images on your page and makes a sprite, and css to replace what is there: http://spriteme.org/
attribute selectors
adding images for contextual file icons: http://dev.opera.com/articles/view/css-3-attribute-selectors/
sitepoint how to use attribute selectors: http://reference.sitepoint.com/css/css3attributeselectors
http://www.yourhtmlsource.com/stylesheets/advancedselectors.html#attribute
styling links with title attributes using attribute selector in style: http://www.stuffandnonsense.co.uk/archives/css_a_tribute_to_selectors.html
http://www.css3.info/preview/attribute-selectors/
nth-child, last-child, :first-letter and :first-line, etc.
nth: alt row colors http://24ways.org/2009/cleaner-code-with-css3-selectors
http://inspectelement.com/tutorials/a-look-at-some-of-the-new-selectors-introduced-in-css3/ http://www.456bereastreet.com/archive/200601/css_3_selectors_explained/
table layout - display:table
examples of display property, shows how to display:table http://www.quirksmode.org/css/display.html#table
using display:table for layout http://www.digital-web.com/articles/everything_you_know_about_CSS_Is_wrong/
brief article on using display: table for layout, why, when and future http://www.onenaught.com/posts/201/use-css-displaytable-for-layout
styling tables tutorial: http://veerle.duoh.com/blog/comments/a_css_styled_table_version_2/
Print styles
print style sheets
media="print" style sheet tutorial http://www.webcredible.co.uk/user-friendly-resources/css/print-stylesheet.shtml
classic first print style sheet articles: http://www.alistapart.com/articles/goingtoprint/ and http://meyerweb.com/eric/articles/webrev/200001.html
another classic resource on print styles: http://css-discuss.incutio.com/?page=PrintStylesheets
good tips that some other articles did not point out and examples in www: http://www.boxesandarrows.com/view/printing_the_web
collection of tutorials and resources on print style sheets http://websitetips.com/css/tutorials/print/#print
examples: http://css-tricks.com/ http://www.alexgdesign.co.uk/ http://www.alistapart.com/
@page page breaks for print
http://www.richinstyle.com/guides/paged2.html
reference: http://reference.sitepoint.com/css/pagedmedia
http://davidwalsh.name/optimizing-structure-print-css
http://www.tutorialspoint.com/css/css_paged_media.htm
http://www.westciv.com/style_master/academy/css_tutorial/advanced/printing.html
@font-face
latest best how to code @font-face for fullest cross browser support: http://nicewebtype.com/notes/2009/10/30/how-to-use-css-font-face/
web fonts site dedicated to all things @font-face: http://webfonts.info/wiki/index.php?title=Main_Page
Alistapart article and examples from 2007: http://www.alistapart.com/articles/cssatten
@font-face cross browser code generator: http://www.fontsquirrel.com/fontface/generator
examples: http://nicewebtype.com/fonts/museo-and-sans/
http://nicewebtype.com/fonts/graublau-sans-web/
text-shadow
w3c css3 text-shadow demo page: http://www.w3.org/Style/Examples/007/text-shadow
css3.info how to text-shadow: http://www.css3.info/preview/text-shadow/
WestCiv text-shadow generator tool to get desired design values: http://westciv.com/tools/shadows/index.html
button examples with text shadow, rounded corners, box shadow, fonts: http://my.opera.com/dstorey/blog/show.dml/717521
text-rotate
http://snook.ca/archives/html_and_css/css-text-rotation
border-radius
art of the web demo: http://www.the-art-of-web.com/css/border-radius/
rounded corners and gradient borders: http://www.cssportal.com/css3-preview/borders.htm
aqua button example with no images: http://girliemac.com/blog/2009/04/30/css3-gradients-no-image-aqua-button/
more no image buttons: http://24ways.org/2008/shiny-happy-buttons
border-image
border-corner-image
http://www.css3.info/preview/border-image/
opera dev community: http://dev.opera.com/articles/view/css3-border-background-boxshadow/#border-image
box-shadow
demo and tutorial: http://css.flepstudio.org/en/css3/box-shadow.html
WestCiv box shadow generator tool: http://westciv.com/tools/boxshadows/index.html
background image
background-clip & background-origin
http://dev.opera.com/articles/view/css3-border-background-boxshadow/#background-clip
http://dev.opera.com/articles/view/css3-border-background-boxshadow/#background-origin
multiple background images
multiple and sized images: http://www.zenelements.com/blog/css3-background-images/
http://dev.opera.com/articles/view/css3-border-background-boxshadow/#multiple-background
http://www.css3.info/wp-content/uploads/2007/09/multiple-backgrounds-example.html (in Safari)
http://group.mind-productions.com/articles/multiple_backgrounds__css3_/ (in Safari)
http://decaffeinated.org/archives/projects/multibg/background-image.html (in Safari)
background-size
http://www.markschenk.com/cssexp/background/scaledbgimage.html
http://designshack.co.uk/articles/introduction-to-css3-part-6-backgrounds
background-attachment
http://people.opera.com/pepelsbey/experiments/bga/
rgba - alpha transparency parent child inheritance
no image buttons with alpha transparency, rounded corners, text-shadow: http://www.zurb.com/article/266/super-awesome-buttons-with-css3-and-rgba
hsla - hue, saturation, lightness color module
gradient
tutorials: http://www.broken-links.com/2009/11/26/css-gradient-syntax-comparison-of-mozilla-and-webkit/
Mozilla tutorial: http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/
Safari tutorial: http://webkit.org/blog/175/introducing-css-gradients/
WestCiv gradient generator tool: http://westciv.com/tools/gradients/index.html and http://westciv.com/tools/radialgradients/index.html
tutorial using gradient, @font-face: http://nicewebtype.com/fonts/bello-and-proxima-nova/
mask-box-image
multiple columns
liquid/adjustable layouts
@media queries
how to: http://reference.sitepoint.com/css/mediaqueries
http://reinholdweber.com/css/css3-a-big-storm-is-coming/
w3c spec: http://www.w3.org/TR/css3-mediaqueries/
transform, transitions and animations
text rotation: http://snook.ca/archives/html_and_css/css-text-rotation
http://24ways.org/2009/going-nuts-with-css-transitions
http://www.smashingmagazine.com/2009/12/19/what-you-need-to-know-about-behavioral-css/
http://webdesignernotebook.com/examples/target.html
reflection: http://jcargoo.110mb.com/cssreflection/
Javascript Libraries
YUI 3 many accessible interface widgets: http://developer.yahoo.com/yui/3/
Accessible TabView (Focus Manager Node Plugin): http://developer.yahoo.com/yui/3/examples/node-focusmanager/node-focusmanager-2.html
Carousel slide viewer: http://developer.yahoo.com/yui/examples/carousel/carousel-ariaplugin.html
Sitepoint tutorial - YUI & Ajax TreeView http://articles.sitepoint.com/article/yui-treeview-ajax
JQuery
accordion with WAI-ARIA: http://jqueryui.com/demos/accordion/
lightbox: http://plugins.jquery.com/project/ARIALightbox
create your own theme with themeroller: http://jqueryui.com/themeroller/
how to use jQuery: http://docs.jquery.com/How_jQuery_Works
Javascript Libraries (jQuery and YUI 3) with accessible WAI-ARIA - support for w3c ARIA roles and states and properties
list of ARIA enabled javascript libraries: http://www.paciellogroup.com/blog/?p=313
Screen reader reading the YUI - carousel: http://video.yahoo.com/watch/3609568/9957126
Screen reader reading the YUI 3 accessibletab view: http://video.yahoo.com/watch/5595254
Screen reader reading the YUI 3 accessible menu: http://video.yahoo.com/watch/3608798/9955360
list of the browser support for ARIA roles as of Oct. 2009: http://www.paciellogroup.com/blog/?p=474
document from W3c on best practices for implementing WAI-ARIA: http://www.w3.org/TR/wai-aria-practices/
Yahoo YUI accessibility page: http://yuiblog.com/blog/category/accessibility
Todd Kloots of YUI developer team intro to WAI-ARIA how tos: http://video.yahoo.com/watch/4073211/10996186
Todd Kloots of YUI on YUI 3 accessible features: http://developer.yahoo.com/yui/theater/video.php?v=kloots-yuiconf2009-a11y
HTML 5
how to: http://www.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/
Alistapart overview: http://www.alistapart.com/articles/previewofhtml5
semantics tutorials of new elements in typical use: http://boblet.tumblr.com/post/130610820/html5-structure1, http://boblet.tumblr.com/post/134276674/html5-structure2, http://boblet.tumblr.com/post/134732913/html5-structure3, http://boblet.tumblr.com/post/141239118/html5-structure4
page example - http://www.whatwg.org/demos/company-home/
demos- whatwg - http://www.whatwg.org/demos/2008-sept/
media elements support in mozilla: https://developer.mozilla.org/En/Using_audio_and_video_in_FireFox
media support in Opera: http://dev.opera.com/articles/view/a-call-for-video-on-the-web-opera-vid/
forms: http://24ways.org/2009/have-a-field-day-with-html5-forms
A showcase of sites using HTML5 markup - http://html5gallery.com/
a good, detailed example of html5 and ARIA roles in a blog type web page:http://www.lesintegristes.net/
HTML5 IE elements enabling script: http://remysharp.com/2009/01/07/html5-enabling-script/
validator: http://html5.validator.nu/
Miscellaneous
ARIA landmarks
Yahoo Video of screen reader and ARIA landmarks: http://video.yahoo.com/watch/4561284/12214507
How to: http://www.paciellogroup.com/blog/?p=106 tutorial
Page with landmarks http://www.paciellogroup.com/blog/aria-tests/aria-html4-clean.html
RDFa - a semantic web
http://www.w3.org/TR/xhtml-rdfa-primer/#id84480
http://rdfa.info/wiki/RDFa_Wiki
http://www.alistapart.com/articles/introduction-to-rdfa/
http://www.alistapart.com/articles/introduction-to-rdfa-ii/
http://webbackplane.com/node/50
Practical use - search engines - grab descriptions and display enhanced search results - Yahoo Search Monkey: http://developer.yahoo.com/searchmonkey/