Transcending CSS. Andy Clarke. 2007
A book about CSS for designers, it is about design and code 'playing nicely'. It has many illustrative images as well as largely unrelated photography to please the designers eye.
The book explains CSS was invented by 'technologists' rather than designers, and as such is not designer friendly. However with web standards designers are finding it easier to use and fulfilling their design requirements better. It discusses CSS from version 2 to 3 and also some of the many workarounds designers have come up with combat inconsistencies and omissions in browsers from standards.
'Transcedant CSS' is a concept that follows that of progressive enhancement (MOSe - Mozilla,Opera,Safari). MOSe said it was acceptable for more modern browsers (than IE6) to provide an enhanced design layered on top of a standard design for older browsers.
It was intended to encourage designers to more fully use the features of CSS2.1, which ealier browsers didn't support fully. Transcedant design acknowledges not all browsers see the same the design. It suggests using all available CSS selectors, using CSS3 also where possible. Javascript and the DOM are used to 'play' CSS roles where necessary rather than using hacks. Semantic XHTML and naming conventions are encouraged and also the use of microformats.
It cites Yahoo grading of browsers to provide diffent levels of design experience as evidence than transcedant CSS is possible and acceptable on very large scale sites. It does not discuss the cost of building transcedant CSS.
A key concept is regarding the transition from a tables based approach for layout to divs, and how divs shouldn't be simply used a replacement for tables and used solely for positioning. Divs should be minimal and add/ed for semantic purposes to group related information.
Content and structure are commonly now independant from visual presentation with the loss of tables and use of CSS instead, however CSS styled pages are still often constructed top to bottom and left to right using divs. The use of markup for semantic purposes rather than purely presentation should be generally sufficient for flexible positioning of blocks of content.
Removing the CSS temporarily makes clear the contents order and structure and can be could for examining semantic structure, (and also for SEO).
USING ALL CSS SELECTORS
The book encourages this, but does not say which browsers support these features.
- attribute selectors: 'img[alt]' to focus on specific parts of tags.
- child selectors: 'div > a'.
- pseudo classes: e.g. 'p:first-child' would style the first paragraph
- dynamic pseudo classes: e.g. 'input[type=text]:focus' if focussing on this element, or 'blockquote:lang(de)' to target markup such as 'blockquote lang="de"'
- pseudo elements 'p:firstline' and 'p.introduction:firstletter' to target parts of text.
Hacks while a 'necessary evil' should be avoided and if used should be valid. If unavoidable they should only target abandoned (e.g. IE mac) or frozen browsers (e.g. IE6). Hacks shouldn't target current versions of browsers. Conditional comments should be used to target IE for IE hacks.
Chapter 2 discusses the process of building prototypes, the workflow involved, the importance of gathering of content, and the failure of traditional wireframes due to the way this 'prempts design decisions' and their lack of interaction. This is particularly so with Ajax. It suggests the grey box method to allow discussion of content areas by non designers without forcing the design. Interactive designs can be built with CSS & XHTML to a specific browser. Firefox is good as it has great tools such as the web developer toolbar and Firebug.
Issues when prototyping:
- use positioning rather than floats as they break easy.
- use PNG images for alpha transparency to save reediting images when a background colour changes
- Divide CSS files logically. Some use by divisions such as branding and content. Others by element. It suggests using multiple CSS files for: layout, colour and typography. Link to one file which imports the additional style sheets using: '@import url(colour.css)'
- use background image replacement, e.g. 'background: transparent url(xx.png) no-repeat' and move the text to one side. The text is in the markup so is semantically correct (and visible to SEO), but only the image shows in the design.
Chapter 3 discusses grids, their theory, their use across different media, and how they can be used creatively 'breaking out of the box' rather than restricting creativity.
HTML design maps well to traditional grids, and it has been concentrated on for standards based design for usability and accessibility. It discusses how often flash designs could have been built using XHTML and CSS but acknowledges some designers soley use flash due to browser compatibility issues, typographical limitations and perceived rigidity of HMTL 'grids'.
Elastic designs is also discussed, with consideration for text line length to a readable number of words. Also discussing use of 'elastic images' where more of the image is revealed depending on browser window size.
The use of SIFR for flash replacement of text with fonts embedded in flash allows designers to use fonts not installed as standard with Windows & other OS's.
The book disputes Jakob Nielson's premise that the web should be about building conventions based on users expectations, (formed through regular use of key sites). It states the web is still young and that we should be still 'making and breaking' rules of web design.
Chapter 4 creates a series of designs pulling together previously discussed concepts.
There is a good discussion of the diffence between relative / absolute / fixed positioning (to the browser window).
Examples discuss:
- moving items out of lists where they are semantically correct through positioning
- image zoom using z-index on hovering over smaller image
- positioning images outside the box effectively using png images
- easily moving columns (sidebars) from one side of page to another
- pulling images from a list into a masthead with use of the target pseudo class to highlight linked items
CSS3 is discussed, its painfully slow 10 year development history, and its division into parts to allow parts to develop at different speeds concurrently. They are:
- paged media for printing
- backgrounds (multiple background images) & borders (using images)
- multi column layouts with flow between them as in print, with readability problems of such on screen
- advanced layout module for solving common layout problems, e.g. using slots to improve existing grid support
- media queries for developing on different media platforms such as TV, mobiles
While the book was written in 2007, many of the issues are still current and not widely discussed previously. Bring on the next edition.
