In this presentation... CSS 3 for Help Authors Dr Tony Self tony.self@hyperwrite.com Principles of Cascading Style Sheets New features in CSS 3 Browser (and other processor) support for CSS 3 Authoring Tool support What s ahead for CSS Much to cover, and only 35 minutes! History of CSS in 1 Slide Principles of Cascading Style Sheets Cascading Style Sheets W3C standard Result of browser wars Separation of content and form Version 1 1996 Fully implemented by a browser in 1999 Version 2.1 June 2011 After various drafts since 1998 Version 3 November 2011 2012 HyperWrite Pty Ltd 1
What is CSS? Describes presentational semantics for HTML and other mark-up languages Elements in mark-up... <p>guinness is good for you.</p> Have their presentation defined in CSS... p {font-family: Tahoma; color: green; Entirely different language syntax But easy to learn And there are fabulous CSS editors What s wrong with CSS? Poor paging features Dynamic pages require JavaScript Difficult to define menus and buttons Lots of hacks have been used: Columns Lists Boxes Fonts Layouts More precise Selectors New features in CSS 3 Old ul lip #guinness.schnapps New ul:nth-child(3) p~ul a[src$=".pdf"] li:first-of-type p:empty p.note:before :not(p) 2012 HyperWrite Pty Ltd 2
Box Properties Transitions and Animations Old border margin padding outline width height New Rotation Not supported by any browser! min-width max-width min-height max-height box-shadow Limited use in documentation DHTML without JavaScript Animation Properties -webkit, -moz and ms? Old None!! New animation animation-name animation-duration animation-timingfunction animation-delay animation-iterationcount animation-direction animation-play-state Namespacing Adds vendor-specific CSS instructions Webkit browsers: Safari Chrome Kindle Android Mozilla browsers: Firefox Browser wars again? 2012 HyperWrite Pty Ltd 3
Conditions Border Properties Namespaces allow conditions to be set in CSS If [browser is Mozilla-based], then... Old dotted dashed solid New border-radius border-image Supported by Firefox and Safari Font Stuff Columns Embedded fonts (in a way) @font-face { font-family: RhineScript src: url('http://f.com/rhine.ttf') font-weight font-stretch font-variant eg, small-caps Used to be simulated by positioning, tables, or frames Now truly supported #datasheet { column-count: 2; column-gap: 20px; column-rule: 4px solid black; Except only supported by Firefox and Gecko as yet... 2012 HyperWrite Pty Ltd 4
Template Layouts Page Media CSS for printed output Very sophisticated Alternative to XSL-FO for some XML publishing requirements @page { size: 210mm 297mm; margin: 30mm; @top-left { content: 'Ulysses User Guide'; @bottom-right { content: 'Page ' counter(page); Transforms Image Stuff Rotate objects in 2D and 3D -ms-interpolation-mode: bicubic; image-rendering: optimizequality; max-width min-width 2012 HyperWrite Pty Ltd 5
Media Queries Speech /* Mobile landscape AND Desktop - Width greater than 800 */ @media (min-width: 800px) and (monochrome) { blah, blah /* Desktop - - - Width great than 950 */ @media (min-width: 1150px) { blah blah max-device-width, device-aspect-ratio, etc mark mark-after mark-before phonemes rest rest-after rest-before voice-balance voice-duration voice-pitch voice-pitch-range voice-stress voice-volume Screen readers ebooks Text-to-voice In summary... Browser (and other processor) support for CSS 3 None support everything Most support very little Matrix required 2012 HyperWrite Pty Ltd 6
Summary Authoring Tool support None Yet. Not change for change sake What s ahead for CSS Personal computing is changing Tablets Mobile devices ebooks The Web is changing HTML 5 Related technologies are changing JavaScript, Flash, XML Browsers are changing IE is no longer dominant 2012 HyperWrite Pty Ltd 7
CSS 3 + HTML 5 For User Assistance HTML 5 Alternative to Flash Suitable for mobile and apps Local storage Video, audio, 3D graphics CSS 3 is changing how we build web sites... Mobile First, Responsive Web Design Integration into HATs Just as DHTML was canned Improved WebHelp features Better separation of content and form Conclusion References CSS 3 is on the way Not practical till browser support is widespread Many features not suitable for user assistance and documentation But some features will be Opens door to more innovation! http://coding.smashingmagazine.com/2009/06/15/take -your-design-to-the-next-level-with-css3/ http://www.youtube.com/watch?v=o8xygya9pfw http://www.slideshare.net/owenoak/css-3-overview http://www.findmebyip.com/litmus/#css3-selectors http://www.w3schools.com/css3/ http://a.deveria.com/csstpl/ 2012 HyperWrite Pty Ltd 8