Tag Archives | CSS

PySIG notes, 25-Feb-2010: CSS

Six people braved miserably wet weather to attend the February meeting of the Python Special Interest Group, held as usual on the fourth Thursday of the month at the Amoskeag Business Incubator.

We had a brief set of introductions and announcements of upcoming meetings. We hope to host a discussion of PyCon 2010 presentations by PySIG members next month; details to be worked out, stay tuned.

I’ve seen this presentation seven times and I think this was the best. Along with the Introduction to CSS, I added a “sneak peek” preview of HTML5 and CSS3 and discussed the support (finally!) for CSS 2.1 in Internet Explorer 8 and how that meant the leading browsers all had support for some intriguing features as outlined in the SitePoint book, “Everything You Know About CSS is Wrong!” There was lots of give and take with the audience, and a few side trips off-script to cover an issue someone wanted to know more about, and a war story or two. Ben Scott was heckled in abstentia.

Slides can be found at http://www.tedroche.com/Present/2010/css/css.html.

Thanks to Bill for arranging and promoting the meeting, to the Amoskeag Business Incubator for the fine facilities, to Laura and the Hopkinton High girls basketball team fundraiser for the M&M cookies, and to all who attended and participated.

Visibone, a source of great reference guides and online utilities

Visibone's Everything Book
One of my favorite tools for the past couple of years has been a web developer’s reference guide from Visibone. The book has rarely left my desk, within arm’s reach, to help out when I just can’t remember all the options for an HTML tag or a CSS style. While there are some great online references, having it all in a couple sheets of paper makes it easy to find what I’m looking for (especially if I couldn’t remember if it was text-something or font-mumble) and the reference has also let me browse around the dusty corners and learn something I didn’t know.

Recently, I did some web development using XHTML 1.1 and CSS 2.1 and realized my 2004 version of the guide was getting out of date. I was pleased to see many of the pages had been updated to a 2009 version. After reviewing the many options, I chose to go all in and bought the Everything Book, a step up from my earlier version. This one includes cheatsheets for PHP, MySQL, JavaScript, DOM, HTML, CSS, HTML special characters, web colors and a great index. The reference not only includes broad coverage of each topic but many side notes and compatibility guides (for CSS, the IE-Netscape-Opera-FireFox-Safari compatibility color coding is tremendously useful!)

There are a number of bonus references available on the Visibone site at no cost. Check out the color lab, the color swatches for many of the common graphics programs, the online color codes reference, and excerpts from all of the various reference materials. In addition to reference book, Visibone offers posters, charts and mouse pads. The web site is worth a visit; it’s charmingly quirky, retro, opinionated and clearly individualistic.

Semantic markup and styling of data entry forms, IE falls short

Somehow, in my 10 years of working with HTML, I had missed the fieldset and legend tags. I’ve just started in on a web site redesign where they can be used to great effect and nice semantic markup. The fieldset tag is intended to be used as a container for grouping related input items in a form. By default, the fieldset has a transparent background and a thin black outline around the fields. The fieldset can contain a legend tag that appears by default in the upper left corner of the black outline as a title for the grouping. Both elements can be be modified with CSS styles to match and complement the rest of the page design. Here’s the basic HTML snippet:

<form...>
 <fieldset><legend>Ship To Address</legend>
 <br clear="all" />

 <label for="Building_or_Hotel">Name of Building/Hotel:</label>
 <input type="text" id="Building_or_Hotel" size="25" maxlength="50" />
 <br clear="all" />
...
</fieldset>

And the applicable CSS to make the form look pretty includes:

/* Styles for legends, the title atop the fieldset */
.dataform legend {
 background-color:rgb(137,111,43);
 color:white;
 font-weight:bold;
 margin-left: 0.5em;
 padding:0 1em 0 1em;
 }
/* Fieldset groups a set of inputs in a visual container */
.dataform fieldset {
 border-color:rgb(137,111,43);
 border-style:solid;
 border-width:1px ;
 background-color: rgb(93%,89%,78%);
 }

Results in a data entry form that looks like this:

HTML form layout with fieldset and legend tags

Using CSS to add visual effects to the elements can yield some pretty sharp results while still having the speed and minimal bandwith of lightweight HTML and CSS text files. In addition, using the semantic fieldset and legend elements provides additional information about the form fields and their relationships in a machine-readable format, rather than just splattering a bunch of colored div boxes and styled text on the form. This is a great aid to tools used by the vision-impaired to provide more context to their users, and to search engines trying to derive the context of your forms.

Compatibility between different browsers is not too bad, though things could improve a bit. FireFox 3.5x, Chromium 4.0.285.0 (on Fedora, thanks, Spot!) and Safari 4.x appear dead-on the same (the screenshot above is FireFox 3.5.5), but there is an outlier and no one should be surprised to discover it’s Internet Explorer. Even in version 8, perhaps the most compatible browser Microsoft has shipped since the now-legendary IE5.5/Mac, things are just different. For some reason, the IE8 developers decided that the background color of the frameset should extend out over the border, to the edge of the legend, resulting in this less attractive appearance instead:

IE8 fieldset background colors overflow the border at the top.

For IE7, the background color doesn’t appear at all, which might actually be better than to have it appear incorrectly. (Update: no, my bad, it just doesn’t like rgb values expressed as percentages.) So the appearance definitely won’t be as sharp for your IE users as for any other browser user. (Yet another reason to encourage your clients, friends, associates, neighbors and strangers on the street to avoid Internet Explorer. We can eliminate it in our lifetimes.) (UPDATE: there are, of course, work-arounds. Here are a few suggestions that might work for you from Sitepoint and CommunityMX and Matt Heerema.)

So, the next time you’re called upon to draw up an HTML data entry form, keep in mind that you can group your elements with fieldsets and use legends to add more contextual information to your design.

Everything You Know About CSS is Wrong! – A review

book cover

Well, almost everything

Authors Rachel Andrew and Kevin Yank almost lost me at “hello” with their book titled, “Everything You Know About CSS is Wrong!” ISBN 978-0-9804552-2-9. I’ve never liked the “Dummy’s Guide” book for the same reason — I’m not a dummy — and I’m fairly confident (and hope my clients are well aware) that my CSS knowledge, while not encyclopedic, is better than average, and I’ve delivered some fairly good web solutions.

However, the first goal of selling a book is to get attention, and the title surely does that. And the opening line of Chapter 1, “The problem with CSS is that CSS is too hard.” Okay, I’m hooked, reel me in. (By the way, you can download the sample chapter 1 & 2 from the SitePoint web site; start at http://www.sitepoint.com/books/csswrong1/)

The reality is that the book shows one of the newest features, now available in all of the current brand of browsers, with the late release of Internet Explorer 8, of table layout options in the display attribute. After years of preaching that HTML table layout is less desirable than CSS layouts, this can be a hard sell, but Rachel and Kevin make a good case that a tabular layout of tables, rows and cells, but rendered from CSS and not HTML, is the best of both worlds. Chapters 3 & 4 show the equivalent layouts of many of the common design problems we run into (and perhaps fall back to using tables) and how they should work both with the new CSS 2.1-complaint browsers and how to fall back gracefully into a degraded but workable layout for earlier browsers. Chapter 5 gets into some very exciting layout possibilities that will be coming in the next couple of years as the CSS3 specification gels.

A big plus for the book is that it is brief: 111 pages you can get through in one or two sittings. The graphics clearly show the developing examples. The code extracts are clear (and all the sample code can be downloaded from the web sites). And the writing is clear and well-edited.

The book is well worth the $29.95 cover price, but keep an eye out around the SitePoint site (and their Twitter feed) to catch one of their frequent discounts.

Notes from Python Special Interest Group, 20-Nov-2009

Eight people attended the Python Special Interest Group, held a week early to avoid the Thanksgiving holiday. Anticipate a reschedule December meeting as well.

Last night’s meeting was a vigorous and far-reaching discussion of MySQL, Oracle, the future of MySQL, Maria DB, OpenOffice.org automation using Python, OpenOffice.org automation using Visual FoxPro, Twisted, IE6, Zope, Plone, Django, MS SQL Server, pyodbc, SQLAlchemy, Cascading Style Sheets, IE6, FireFox and FireBug, User Agents, IE6, how not to insulate a bungalow roof, the (Python!) cssparse module (http://cthedot.de/cssutils/), Fortune’s selection of Steve Jobs as “CEO  of the Decade”, Lenovo netbooks and Ubuntu, the Millennium, why calendar years are one-based and not zero-based, distributed version control systems, master-slave and master-master replication using MySQL and Postgres, svn and git, and more! Whew! You should have been there!

Thanks to Bill for organizing the meeting, to all for attending and participating, and to the Amoskeag Business Incubator for providing the great facilities!

Stay tuned for an announcement of the December meeting, and hope everyone has a good Thanksgiving!

LESS, HAML, HTML Structure

A quick follow-up on the weekend posting about the Ruby group: there was mention of another package, LESS, that generates CSS as well. This might be worth checking out as well. I appreciate the feature that the CSS is static on the server and only generated when the plugin notes that the source file (with .less extension, of course) has changed. This speeds up serving the file, and speeds the responsiveness on the client, since nothing needs to be parsed, interpreted and applied.

In “It’s the Headings, Stupid!” Jon Udell points out that pretty visually-structured HTML still shouldn’t lose the structural power built into HTML: seven levels of headings, paragraphs, ordered and unordered list, definition lists, anchor tags, captions, titles and alt attributes. A sober reminder that not all the readers of our web sites are “ooh!” and “aah!” over our choice of colors or silly javascript animations, but are searching for content!

In a follow-up on Twitter, Pat Allen points to a SlideShare presentation with excellent audio of the Melbourne Ruby User Group and a presentation by Ben Schwarz “Why HAML Sucks or Why You Should Think Before Choosing HAML for Your Next Project” The long-winded title, Ben explains, is from an initially controversial title that got the conversation going, but was a bit too extreme. He makes some very good points in the presentation. I like the idea of audio synched with the slideshow; that works well. Obviously, hards-on presentations would have other challenges, but for a slide-heavy presentation, this works well.

Notes from New Hampshire Ruby User Group, 25 June 2009: Pat Allen, Thinking Sphinx and Casey Rosenthal SASSiJS

Twelve people attended the June meeting of the New Hampshire Ruby / Rails User Group , held on the 4th Thursday of the month ( we usually meet on the 3rd Thursday) at RMC Research in Portsmouth (Thanks to RMC and to John for hosting the meeting!)

Nick Plante was our master of ceremonies. As is the custom, we made a round of introductions to find out the most of the folks were “from away.”

Pat Allen put on the first presentation, on Thinking Sphinx. Thinking Sphinx is a Ruby library (not just for Rails) that allows Ruby applications to work with the Sphinx full-text search engine. Pat presented a slightly shortened version of the presentation he gave at RailsConf, and the presentation was clear, engaging and interesting. Participants had lots of questions to ask on search technology, word stemming, project status, what it’s like to be a Freelancing God, what being the lead on a popular Open Source project is like, what’s a kilometer, and more, and Pat’s answers were insightful. Check out (pun intended) the source on github, the support on Google Groups and Pat’s guide to using Thinking Sphinx on Peepcode.

Pat also took a moment out to plug his upcoming Rails Camp, a not-going-to-make-a-profit weekend get-together in BarCamp/Unconference format for 30-ish people at Bryant Pond, Maine. It sounds like a great event and a nice location and a price that can’t be beat: $120 for 3-nights, 3-days food, lodging and conference. Get details and consider signing up at http://railscamps.com/#ne_july_2009

Casey Rosenthal asked us, “What are style sheets for?” a number of times during his presentation, for good reason. Casey talked about SASS, Syntactically Awesome Style Sheets, a part of HAML and his reimplementation of SASS in Javascript, SASSiJS, sounds like “sausages” leading to all kinds of predictable jokes. But the topic was thoughtful, intriguing, interesting, and controversial. SASSiJS actually allows a .sass file to be downloaded as part of the HTML file, with similar syntax to a stylesheet link, and a JavaScript file that interprets the .sass file into CSS and applies it to the HTML document. Discussion was far-ranging and insightful: “What’s this good for?” “Would designers use this to make their CSS DRY?” View the source on GitHub at http://github.com/clr/sassijs/tree/master.

Thanks to Pat and Casey for their great presentations, to Nick for organizing, and to John and RMC for the facilities.

Powered by WordPress. Designed by Woo Themes

This work by Ted Roche is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 United States.