CSS, not having it pixel perfect


Concrete Coffee

Day one workshops, Web Directions South, the fun begins after breakfast at Concrete, with Andy Clarke launching in the breaking the limitation for the browser and CSS. Looking at the media rich presentations with the high end, advertising. movie and music industry, questioning why they can’t use semantic CSS based layout.

Andy has suggested people need to look at using more of the existing draft CSS3 standard that are supported be the relevant browsers and use javascript to plug some of the holes, example multiple columns in Firefox.

Maybe we should be considering, should browsers see the same design, should it be pixel perfect on very browser. Considering the current crop of best browser first the design for them via using progressive enhancement. Why can’t there be different version or standards of a site support. People except that hardware and electronics do different things. Just don’t add in more presentational markup and hacks to allow for IE6, just make it more plain and just base design functionality.

Content should come first, then the presentation, consider not using the grid at this stage, consider the content semantics, markup the content as raw content. This will increase the options on the design. Leveraging the content markup into the presentation not the other way round. Make the markup minimum. Nothing new here.

Andy has transformed into John Allsopp as he gave a brief overview of . I’m not going to go on about microformats, you all know I have a passion about them. It was interesting to see how many people didn’t know about microformats.

Looking at modern CSS selectors for example: child selectors, adjacent selectors, attribute selectors, pseudo-eleemnt selectors. To avoid the use of addition presentation markup. Using attribute selectors for diagnostic CSS debugging. Note attribute selection are weak on specificity issues. Use of substring attribute selectors for comparison and styling of start, end, contains in string. Pseudo elements application of style specific information. Of course these can be all be combined into a CSS tag soup.

Amusing that we started with positioning elements, then we used float to position elements, but we can go back to positioning now with the present browsers. Use of negative margins in image replacement with transparent images to pull the images outside of the grid or box shape.

Andy dealt with relative position by explaining it as offset visual positioning, giving examples with negative positioning and negative margins to break the box. He also looked at absolute verses relative positioning, which he has just explained really well to the audience.

Being the uber design geek Andy has to discuss typography and the simple ways to improve web typography, such as:.

  • Reset the browser defaults.
  • Compose to vertical rhythm.
  • Incremental leading.
  • Optical Greying of text.

Final thing is if maybe the W3C won’t push the CSS3 development, then maybe it’s time for Designers to taking back CSS by using the CSS advanced features, trying them out, blogging about them and forcing the issue. Now this I can relate too. More on this later in the week!

Technorati Tags: , , , , ,

Technorati Tags: , , , , , ,

Looks like there is no conversation here yet, why not start one.