Neatly Sliced

June was fun, July was fabulous, August we took a nap, and it begins again September 15 at midnight CDT. There’s a countdown on the site in case you don’t know how that translates to your locality.

Yours truly is now part of seven judges hand selected for our love of all things good and pure. Learn a little more about the judges and then block off a chunk of the fifteenth for some hardcore CSS merriment.

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
  • Set background-color for treatment, as even images have a background
  • Create a hover effect by creating a transparent image and use background-color for hover treatment
• Tables
  • 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:25%, q3:left:50%, q4:left:75%, you are creating each q1/q2/etc td defined as a discrete “width”.
  • Lots of pre-computation with the brown/green CSS height. Eric’s vision is to embed CSS and embed the height post-computation on the server-side. Alternatively (a second, not ideal, option) use JavaScript to accomplish the same feat.
  • 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.
  • WHY?
    • “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 td as a scope=”row”.
    • 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 head tag.