mail us  |  mail this page

contact us
training  | 
tech stuff  | 

Tech Stuff - W3C CSS

We use CSS Style Sheets. We'd used CSS Style Sheets for years (starting in 2001). We were Amateurs. We missed the point of CSS.

Phew! The Mea Culpa's are over. Here's the point we missed. We thought CSS was a cool way to bury all that format and color and font stuff in one place, that is, we took the word style too seriously. It is really about separation of content and layout.

So in mid 2003 we decided to throw out all our historic liquid table layouts and moved to a new CSS three column liquid layout. We document the experience below.

Accessibility Web sites were supposed to be built with accessibility in mind - primarily for the visually impaired. As the baby boomers age they are increasing falling into this category. That's a big, and rapidly growing, bunch of people not being well served by the current kluges on offer from the browser families due to an industry-wide failure. This page reviews the situation and suggest possible solutions. Truth be told it's a bit of a rant, but a gentle, mild-mannered, one.
HTML5 Conversion So the new holy grail for web folks is HTML5. Truth be told we got very ticked off in 2010'ish when the about-face from XHTML (never big fans) to HTML5 happened. Before the end of this millenium we'll probably have a stable HTML5 standard. Nevertheless, hope triumphs over experience. We started HTML5 page validation on some pages and are progressively converting. Why is this page in the CSS section - because for us almost all the changes relate to CSS - raw HTML in converted pages is less than it was. Would we use any true HTML5 features at this stage (end 2013)? Are we crazy? But, sometime before the end of the millenium - absolutely.
CSS 3 column layout When we converted the site to a CSS three column liquid layout in mid 2003 we did a lot of experimentation and made a number of compromises. This page describes what we did, what we had to do and how we got there. The kluges and trade-offs. Includes links to our original table based liquid design for contrast.
CSS menus With the right browser, perfect pop-up, pop-down and multi-level menus without 20K of javascript - replaced with about 10 lines of CSS. This section explains with worked examples of good and bad experiments how we moved from javascript to pure CSS menus for Opera and Gecko in mid 2003 (2013 covers MSIE, Chrome, Safari and all the other guys who came late to the W3C compliant party). If the bottom of the right hand menu on this page shows a CSS Popup button you have a decent browser.
CSS Guide Part of our One Page initiative. Contains a guide to all those CSS selectors, pseudo classes, '#' and stuff. CSS short forms for two fingered typists (like us) instead of border-width-left. Examples of selector usage and links to individual W3C CSS sections.
Page Stuff HTML vs XHTML: Seems we reached a dead-end and HTML is rising from the ashes. So now what do we do? DOCTYPE: We finally got so offended that the W3C Validator kept giving us warnings about character set conflicts that we thought it was about time to get some more information. It was not as simple as we thought. ACCESSIBILITY: We'd had a guilty conscience for years over accessibility and had looked for decent advice many times. Lots of motherhood but very little practical advice. We recently made some changes that we hope will help.
CSS Techniques During our journey to a better CSS place we created a number of test pages to experiment with specific problems and techniques. This page describes and links to the various experiments, for example, centering a page, width="100%" problems in divs, conditionally generating text. We have also added a section on CSS only pop-ups/out drop-downs etc which, if you are using the right browser, you will see used on this site.
Web Fonts A demo page that displays a bunch of popular fonts in various styles and sizes to show your browser's font support and rendering characteristics - don't even ask why we did this.
Our CSS Use What we are doing with CSS. Maybe should be renamed 'How not to use CSS"! Dates from 2003. Mostly still relevant if you are not really using stylesheets.


Problems, comments, suggestions, corrections (including broken links) or something to add? Please take the time from a busy life to 'mail us' (at top of screen), the webmaster (below) or info-support at zytrax. You will have a warm inner glow for the rest of the day.

Tech Stuff

RSS Feed Icon

If you are happy it's OK - but your browser is giving a less than optimal experience on our site. You could, at no charge, upgrade to a W3C standards compliant browser such as Firefox

Search

web zytrax.com

Share

Icons made by Icomoon from www.flaticon.com is licensed by CC 3.0 BY
share page via facebook tweet this page

Page

email us Send to a friend feature print this page Display full width page Decrease font size Increase font size

Resources

HTML Stuff

W3C HTML 4.01
HTML5 (WHATWG)
HTML4 vs HTML5
HTML5 Reference
W3C Page Validator
W3C DOCTYPE

CSS Stuff

W3C CSS2.1
W3C CSS2.2
Default Styles
CSS3 Selectors
CSS 3 Media Queries
CSS 3 Colors

DOM Stuff

W3C DOM
W3C DOM 3 Core
W3C 3 Events

Accessibility

usability.gov
W3C - WAI
Web Style Guide
WebAim.org

Useful Stuff

Peter-Paul Koch
A List Apart
Eric Meyer on CSS
glish.com

Our Stuff

Our DOM Pages
DOM Navigation
Liquid Layout
CSS Short Cuts
CSS overview
CSS One Page

Javascript Stuff

ECMA-262

Site

CSS Technology SPF Record Conformant Domain
Copyright © 1994 - 2024 ZyTrax, Inc.
All rights reserved. Legal and Privacy
site by zytrax
hosted by javapipe.com
web-master at zytrax
Page modified: January 20 2022.