Notes from An Event Apart Chicago:
- Do not hesitate to use a table if the data is tabular
img: Treat the same as any other element
background-colorfor treatment, as even images have a background
- Create a hover effect by creating a transparent image and use
background-colorfor hover treatment
- Using a properly marked up table, with CSS you can create a bar graph (!)
- This is the example stemming from Eric’s personal site (http://meyerweb.com/eric/css/edge/bargraph/demo-table.html , but a reworked version as presented will be available soon)
- CSS has no inherent notion of what the html elements are “supposed” to do. Override any behavior and “usurp” it (case in point, table turning into a bar graph)
- Impossible to completely divorce content from presentation. Apply style to an improperly structured or unstructured content is impossible – applying style to a txt file won’t work.
- The table/bar graph example:
- CSS requires “hooks” (the HTML elements, ids, and classes) to work on.
- Can do 100% width minus 20px:
left: 100%; top: 50%; margin: -2.5em 0 0 5em;
- The top 50 and negative margin-top is vertical centering
- Q1,2,3,4 (in the bar graph) using q2:
left:75%, you are creating each q1/q2/etc td defined as a discrete “width”.
- Uses percentages to maintain scalability. Note: percentages can have decimals, as can rgb color values.
- Places tick marks in an external
div, highly nonsemantic (ack!) but in our own markup, we’re encouraged to use semantic HTML. Some basic CSS to position properly.
- Swap “Height” to “Width”, “left” to “top”, etc. and you create a horizontal graph with the same dance & pony show.
- “It is the most accessible form of this data as possible.”
- Make good use of
th– the “scope” attribute associates the th as a column, and a
- The point is, the data is tabular, and you’re not limited in your design. You may properly mark it up, display it to make designers happy, and have the accessibility to please our blind users.
- Eric avoids use of “outset” and “inset” borders – he utilizes discrete top, left, right, bottom borders. Browsers (at this time) are far too inconsistent in rendering outset, inset.
- A separate note, this demo table is something we might usually create as an image, but obviously that is not an accessible solution (without the longest, most obtuse alt attribute in the world). Rather than extensive production work, we should analyze the cost/benefit of creating an XSLT to manage user data into accessible bar graphs.
- Reset stylesheets – deep in the browser application files, there are html/forms/etc css files – you can discern the browser defaults! Finally, the location! For example, Firefox2 on Mac: /communications/firefox 2.app/contents/macOS/res/html.css
- Use Eric’s as a guide, but make your own, and through this we have an idea of what elements are included: http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
- With CSS: make your head, etc. displayed to the browser. Not useful in average instances, but useful for css test suites, and further proof of concept that any HTML tag can be styled with CSS – even the